diff --git a/src/components/TokenList.tsx b/src/components/TokenList.tsx
new file mode 100644
index 0000000..302090b
--- /dev/null
+++ b/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 (
+
+ )
+}
diff --git a/src/pages/quickstart/tokenlist.mdx b/src/pages/quickstart/tokenlist.mdx
new file mode 100644
index 0000000..1ec420f
--- /dev/null
+++ b/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):
+
+
+
+## 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//tokenlist.json` in `apps/tokenlist`:
+ ```json
+ {
+ "name": "piUSD",
+ "symbol": "PiUSD",
+ "decimals": 6,
+ "chainId": 42431,
+ "address": "0x..."
+ }
+ ```
+
+3. **Add icon** to `data//icons/.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.
+
+
+A token that gets added to the tokenlist will atuomatically reflect in the Explorer in the next deployment.
+
+
+[Full OpenAPI Spec →](https://tokenlist.tempo.xyz/docs)
\ No newline at end of file
diff --git a/vocs.config.ts b/vocs.config.ts
index 89d17ab..6b50c4f 100644
--- a/vocs.config.ts
+++ b/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',