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',