feat: tokenlist page

src/components/TokenList.tsx

@@ -0,0 +1,41 @@
+'use client'
+
+import { useQuery } from '@tanstack/react-query'
+
+export function TokenListDemo() {
+  const tokenList = useQuery({
+    queryKey: ['tokenList', 42431],
+    queryFn: async () => {
+      const response = await fetch('https://tokenlist.tempo.xyz/list/42431')
+      const data = await response.json()
+      if (!Object.hasOwn(data, 'tokens')) throw new Error('Invalid token list')
+      return data.tokens as Array<{
+        name: string
+        symbol: string
+        decimals: number
+        chainId: number
+        address: string
+        logoURI: string
+        extensions: { chain: string }
+      }>
+    },
+  })
+
+  return (
+    <ul className="flex list-none flex-col justify-center gap-3">
+      {tokenList.data?.map((token) => (
+        <li key={token.address} title={token.address}>
+          <a
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center gap-2 text-content"
+            href={`https://tokenlist.tempo.xyz/asset/42431/${token.address}`}
+          >
+            <img src={token.logoURI} alt={token.name} className="size-7.5" />
+            <span className="font-medium text-xl tracking-wider">{token.name}</span>
+          </a>
+        </li>
+      ))}
+    </ul>
+  )
+}

src/pages/quickstart/tokenlist.mdx

@@ -0,0 +1,54 @@
+---
+title: Tempo Token List Registry
+---
+import { Callout } from 'vocs'
+
+import { TokenListDemo } from '../../components/TokenList.tsx'
+
+# Tempo Token List Registry
+
+A [Uniswap Token Lists](https://tokenlists.org)-compatible API for token metadata and icons on Tempo.
+
+As an example, here's Tempo Testnet's tokenlist, fetched from [tokenlist.tempo.xyz/list/42431](https://tokenlist.tempo.xyz/list/42431):
+
+<TokenListDemo />
+
+## Endpoints
+
+| Endpoint | Description |
+|----------|-------------|
+[`/list/{chain_id}`](https://tokenlist.tempo.xyz/list/42431) | Token list for a chain |
+[`/asset/{chain_id}/{id}`](https://tokenlist.tempo.xyz/asset/42431/pathUSD) | Get a single token by symbol or address​
+[`/icon/{chain_id}`](https://tokenlist.tempo.xyz/icon/42431) | Chain icon (SVG) |
+[`/icon/{chain_id}/{address}`](https://tokenlist.tempo.xyz/icon/42431/0x20c0000000000000000000000000000000000000) | Token icon (SVG) |
+
+## Adding a New Token
+
+1. **Fork** [tempoxyz/tempo-apps](https://github.com/tempoxyz/tempo-apps)
+
+2. **Add token** to `data/<chain_id>/tokenlist.json` in `apps/tokenlist`:
+   ```json
+   {
+     "name": "piUSD",
+     "symbol": "PiUSD",
+     "decimals": 6,
+     "chainId": 42431,
+     "address": "0x..."
+   }
+   ```
+
+3. **Add icon** to `data/<chain_id>/icons/<address>.svg` (lowercase address) in `apps/tokenlist`
+
+4. **Submit PR** with as much information as you think is helpful for review.
+
+### Icon Requirements
+
+- Format: SVG
+- Address filename must be lowercase (e.g., `0xabcd...1234.svg`)
+- Recommended: square aspect ratio, minimal whitespace 1Code has comments. Press enter to view.
+
+<Callout type="info">
+A token that gets added to the tokenlist will atuomatically reflect in the Explorer in the next deployment.
+</Callout>
+
+[Full OpenAPI Spec →](https://tokenlist.tempo.xyz/docs)

vocs.config.ts

@@ -85,6 +85,10 @@ export default defineConfig({
             text: 'Predeployed Contracts',
             link: '/quickstart/predeployed-contracts',
           },
+          {
+            text: 'Token List Registry',
+            link: '/quickstart/tokenlist',
+          },
           {
             text: 'Wallet Developers',
             link: '/quickstart/wallet-developers',