Extending & Customising Emojis.Trade

This page collects practical recipes for expanding the platform beyond the vanilla install. Each section is self‑contained; cherry‑pick what you need.

➕ Add a New Emoji Token

  1. Open the token list

    • Path: src/data/tokens.js

  2. Append a new object:

    export const tokens = [
  // existing entries…
  {
    emoji: "🥑",          // unicode char
    name: "Avocado",      // display label
    ticker: "%F0%9F%A5%91", // URL‑encoded ticker for UniSat API
    category: "Food"
  }
];

  3. Restart the dev server; the UI auto‑fetches stats.

  4. ⚠️ Make sure the ticker is actually deployed on Bitcoin; otherwise the API will 404 and the row shows “N/A”.

🗂️ Add or Edit Categories

Categories live in src/data/categories.js (simple array):

export const categories = [
  { key: "Food",    icon: "🍏" },
  { key: "Animals", icon: "🐶" },
  { key: "Objects", icon: "📦" }
];

  • Add a new record — e.g. { key: "Sports", icon: "🏀" }.

  • Tokens referencing category: "Sports" will appear under the new tab.

📦 Build a Portfolio View

src/
  components/
    Portfolio.js     # new component

  1. Fetch balances

    const url = `https://open-api.unisat.io/v1/indexer/brc20/${address}/summary`;
const json = await fetch(url, { headers }).then(r => r.json());
setBalances(json.data || []);

  2. Render a table grouped by category; reuse the ProgressBar component.

  3. Add a route (/portfolio) or a modal in the navbar.

  4. Edge‑cases: handle addresses with 0 tokens (empty state UI) & API errors.

💵 Inject USD Price & Market Cap

  1. Pick a price oracle (OKLink BRC‑20, CoinGecko if supported).

  2. Map tickers → USD; update rows:

    const price = priceMap[row.ticker] || 0;
const marketCap = price * row.totalMinted;

  3. Column formatting via Intl.NumberFormat('en-US',{style:'currency',currency:'USD'}).

  4. Fallback gracefully if price == 0 (show “—”).

💬 Token Chat Widget (Experimental)

  • Embed an iframe to an Ordinals chat (e.g. ordichat.xyz/ticker/<encoded>).

  • Lazy‑load on row click to avoid dozens of iframes.

  • Sandbox: allow-same-origin allow-scripts for minimal perms.

⚡ Performance Boosts

Technique
Snippet

Chunked fetch

for (let i=0;i<tokens.length;i+=10){ await Promise.all(fetchChunk(i,i+10)) }

Cache layer

Node proxy: express-cache-middleware with 60s TTL for /info calls

Web Worker

Offload heavy JSON diffing to leaderboard.worker.js

🛡️ API Keys & Secrets

  • Store keys in .env.local (never commit).

  • Use import.meta.env (Vite) or process.env (CRA/Next) at runtime.

  • GitHub Actions: add UNISAT_API_KEY to repo secrets; use in CI builds.

🔄 Releasing a Feature

  1. Create a branch: git checkout -b feat/portfolio-view.

  2. Commit with Conventional Commits (feat: add portfolio view).

  3. Run tests / linter: npm run lint && npm run test.

  4. Open PR → request review.

  5. CI passes ✅ → merge → GitHub Action auto‑deploys to Netlify/Vercel.

Happy hacking! 🍕🐱🚀

PreviousData Aggregation