0xacfba7ce…4082sent to0x00000000…6f2a·#25,684,013·view on Etherscan
<!doctype html><html lang=en><meta charset=utf-8>
<!--
token.list.wei — an onchain token list. This document renders client-side, so an
agent reading this HTML sees no listings. The data is not behind an API; it is three
eth_calls against one mainnet contract, no key and no indexer:
registry 0x0000006013df75a31678b786061c2b54bf531524 (Ethereum mainnet)
ids rankedIds()(uint256[]) — every listing id, curation order
metadata json(uint256)(string) — one listing, already JSON
card art tokenURI(uint256)(string) — ERC-721 metadata; art is .image
batched multicall(bytes[])(bytes[]) — all of the above in one call
If you can run scripts, `window.tokenlist` holds the decoded result after load:
{registry, chainId, source, fetchedAt, listings:[{...fields, art}]}. The same
shape is downloadable from the page as `raw json`.
-->
<meta name=description content="An onchain token list on Ethereum. Every listing is an NFT minted to the token it describes, with metadata and card art read from the chain."><meta name=viewport content="width=device-width,initial-scale=1,viewport-fit=cover">
<title>token.list.wei</title>
<link id=fav rel=icon href="data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2032%2032'%3E%3Crect%20width%3D'32'%20height%3D'32'%20fill%3D'%23000'%2F%3E%3Cg%20fill%3D'none'%20stroke%3D'%23fff'%20stroke-width%3D'2'%3E%3Crect%20x%3D'3'%20y%3D'3'%20width%3D'26'%20height%3D'26'%2F%3E%3Cpath%20d%3D'M3%2012h26M3%2022h26'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E">
<style>
:root{color-scheme:light dark;--bg:#faf8f5;--pn:#fff;--ink:#1a1815;--mu:#6b6560;--hr:#e3ddd4;--ac:#4a63c4;--at:#b96908;--nt:#5e7a6b;
--sa:"Helvetica Neue",Helvetica,Arial,sans-serif;--mo:ui-monospace,SFMono-Regular,Menlo,monospace}
@media(prefers-color-scheme:dark){:root{--bg:#121110;--pn:#1b1917;--ink:#efeae3;--mu:#9a928a;--hr:#2e2a26;--ac:#8ca0f0;--at:#f7931a;--nt:#8fb3a0}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sa);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-wrap:anywhere}
.w{max-width:1180px;margin:0 auto;padding:clamp(20px,5vw,60px) max(16px,env(safe-area-inset-left)) calc(72px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-right))}
@media(min-width:720px){.w{padding-left:clamp(24px,4vw,40px);padding-right:clamp(24px,4vw,40px)}}
.eb{font-family:var(--mo);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--mu);margin:0 0 14px}
header{display:flex;flex-wrap:wrap;gap:clamp(16px,4vw,40px);align-items:flex-start;padding-bottom:24px;border-bottom:1px solid var(--hr)}
.mk{width:clamp(76px,15vw,152px);flex:none}.mk svg,.mk img{width:100%;height:auto;display:block}
.ld{flex:1 1 340px;min-width:min(100%,260px);display:flex;flex-direction:column;gap:10px}
h1{margin:0;font-size:clamp(21px,4.4vw,38px);font-weight:700;letter-spacing:-.022em;line-height:1.18;text-wrap:balance}
.sb{margin:0;color:var(--mu);max-width:62ch;font-size:clamp(14px,1.4vw,15px)}
.fx{display:flex;flex-wrap:wrap;gap:4px 16px;font-family:var(--mo);font-size:11.5px;color:var(--mu);font-variant-numeric:tabular-nums}
.fx b{color:var(--ink);font-weight:500}.fx a{color:var(--ac)}
/* REGISTER SUMMARY - every figure is counted from the listings already fetched, so it
costs no extra call and cannot disagree with the grid below it. */
.sm{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:1px;margin:18px 0 0;
border:1px solid var(--hr);border-radius:3px;background:var(--hr);overflow:hidden}
/* Grid + a 1px gap over a rule-coloured ground draws the hairlines: with flex and
border-right, a wrapped second row sat under the first with nothing between them. */
.sm div{background:var(--pn);padding:10px 13px;display:flex;flex-direction:column;gap:3px}
.sm b{font-family:var(--mo);font-size:17px;font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.sm span{font-family:var(--mo);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mu)}
.bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:20px 0 0}
.fc{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
.fc button{font-family:var(--mo);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;padding:4px 9px;border-radius:2px;
border:1px solid var(--hr);background:none;color:var(--mu);cursor:pointer;min-height:28px}
.fc button:hover{color:var(--ink)}
.fc button[aria-pressed=true]{color:var(--ac);border-color:var(--ac)}
.fc button:focus-visible{outline:2px solid var(--ac);outline-offset:1px}
.fc button b{font-weight:400;margin-left:6px;opacity:.6;font-variant-numeric:tabular-nums}
/* A category with nothing in it is still worth showing — it says the register knows
the format. Muted so it reads as "none yet" rather than as a live filter. */
/* Fading to .45 put these under the contrast floor on a dark ground. Keep them
clearly secondary, but readable — "bitcoin 0" is meant to be read. */
.fc button.z{opacity:.7;border-style:dashed}
/* The group that contains the active standard: related to the selection, but not
itself the filter, so it is marked without claiming aria-pressed. */
.fc button.pa{border-color:var(--ac)}
/* The sub-row is subordinate: inset behind a rule, so it reads as belonging to the
selection above rather than as a second, competing set of filters. */
.fc2{margin-top:6px;padding-left:11px;border-left:2px solid var(--hr)}
.fc2 button{font-size:10px}
/* Native select chrome differs per browser and per platform — on iOS it adds its own
padding and can crowd the chevron into the text. Draw the chevron instead, the way
zSwap already does, so the control is the same everywhere and the arrow sits where
the reserved padding says it does. The chevron inherits currentColor, so it tracks
the theme without a second asset. */
#sort{appearance:none;-webkit-appearance:none;font:inherit;font-family:var(--mo);font-size:11.5px;
color:var(--ink);background:var(--pn);border:1px solid var(--hr);border-radius:3px;
padding:5px 22px 5px 8px;min-height:28px;cursor:pointer;
background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
background-position:calc(100% - 13px) calc(50% + 1px),calc(100% - 8px) calc(50% + 1px);
background-size:5px 5px,5px 5px;background-repeat:no-repeat}
#sort:focus-visible{outline:2px solid var(--ac);outline-offset:-1px}
#sort::-ms-expand{display:none}
#q{flex:1 1 200px;min-width:0;background:var(--pn);color:var(--ink);border:1px solid var(--hr);border-radius:3px;padding:10px 12px;font-family:var(--mo);font-size:16px}
@media(min-width:720px){#q{font-size:13px;padding:9px 12px}}
#q:focus-visible{outline:2px solid var(--ac);outline-offset:-1px}
.ct,.exp{font-family:var(--mo);font-size:11.5px;color:var(--mu);flex:none}
#msg{margin:14px 0 0;font-family:var(--mo);font-size:12.5px;color:var(--at)}
.g{display:grid;gap:clamp(14px,2.4vw,26px);grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));margin-top:20px}
/* Every card carries a ~4KB inline SVG, so a long list means decoding all of them at
once. `content-visibility` defers that until a card nears the viewport; the
intrinsic size keeps the scrollbar honest in the meantime and is remembered once a
card has been laid out for real. Filtering still works: [hidden] wins over this. */
.p{content-visibility:auto;contain-intrinsic-size:320px;contain-intrinsic-size:auto 320px;
margin:0;background:var(--pn);border:1px solid var(--hr);border-radius:3px;overflow:hidden;display:flex;flex-direction:column;cursor:pointer;
transition:border-color .14s ease,transform .14s ease,box-shadow .14s ease}
@media(hover:hover){.p:hover{border-color:var(--ac);transform:translateY(-2px);box-shadow:0 6px 20px -10px #0006}
.p:hover .sy{color:var(--ac)}}
.p:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.p:active{transform:none}
@media(prefers-reduced-motion:reduce){.p{transition:none}.p:hover{transform:none}}
/* The rail is the token's own `t` colour, straight from the registry - the one place
each card is allowed to look like itself rather than like the page. */
.p::before{content:"";display:block;height:3px;background:var(--b,var(--hr))}
.lg{width:16px;height:16px;border-radius:50%;flex:none;background:var(--hr)}
/* Rank is a curation ordering, so it is drawn against the observed spread rather than
as a fraction of its raw value - the ranks cluster near 1e6 and a raw bar reads flat. */
.rkw{display:flex;align-items:center;gap:8px}
.rkn{font-family:var(--mo);font-size:10px;color:var(--mu);flex:none;font-variant-numeric:tabular-nums}
.rk{height:2px;background:var(--hr);border-radius:1px;overflow:hidden;flex:1}
.rk i{display:block;height:100%;background:var(--b,var(--ac));min-width:2px}
.art{background:#000;line-height:0;aspect-ratio:12/7}
.art img{width:100%;height:100%;display:block;animation:fi .18s ease both}
@keyframes fi{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.art img{animation:none}}
figcaption{padding:11px 13px 13px;display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--hr)}
.r{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sy{font-weight:700;font-size:15px;transition:color .14s ease}
.sd{font-family:var(--mo);font-size:11.5px;color:var(--mu);margin-left:auto}
.c{font-family:var(--mo);font-size:10px;letter-spacing:.05em;text-transform:uppercase;padding:2px 7px;border-radius:2px;border:1px solid currentColor;white-space:nowrap}
.on{color:var(--ac)}.at{color:var(--at)}.nc{color:var(--nt)}
.cp{background:none;border:0;padding:6px 0;margin:-6px 0 -4px;font-family:var(--mo);font-size:10.5px;color:var(--mu);line-height:1.45;cursor:copy;text-align:left;min-height:32px;width:100%}
.cp:hover,.cp:focus-visible{color:var(--ink)}
.ln{display:flex;flex-wrap:wrap;gap:0 6px;align-items:center;font-family:var(--mo);font-size:10.5px;margin:2px 0 0;color:var(--mu)}
.ln a,.ln button{color:var(--ac);text-decoration:none;padding:3px 0;min-height:24px;display:inline-flex;align-items:center}
@media(pointer:coarse){.ln a,.ln button{min-height:34px;padding:6px 0}.ln{gap:0 10px}}
.ln a:hover,.ln button:hover,.ln a:focus-visible,.ln button:focus-visible{text-decoration:underline}
.db .ln{font-size:11.5px;margin:0 0 12px}
.sk{background:linear-gradient(90deg,var(--pn),var(--hr),var(--pn));background-size:200% 100%;animation:sh 1.4s linear infinite}
@keyframes sh{to{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){.sk{animation:none}}
footer{margin-top:44px;padding-top:18px;border-top:1px solid var(--hr);color:var(--mu);font-size:12.5px;max-width:76ch}
footer a,.lk{color:var(--ac)}
footer code{font-family:var(--mo);font-size:11px}
footer p{margin:0 0 8px}
footer details{margin:10px 0 0}
footer summary{cursor:pointer;color:var(--ac);font-family:var(--mo);font-size:11.5px}
footer pre{margin:8px 0 0;padding:10px;background:var(--pn);border:1px solid var(--hr);border-radius:3px;font-family:var(--mo);font-size:10.5px;line-height:1.6;overflow-x:auto;white-space:pre;color:var(--mu)}
.lk{background:none;border:0;padding:0;font:inherit;cursor:pointer;text-decoration:underline}
.rw{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:8px 0 0}
#rpcu{flex:1 1 260px;min-width:0;background:var(--pn);color:var(--ink);border:1px solid var(--hr);border-radius:3px;padding:9px 10px;font-family:var(--mo);font-size:16px}
@media(min-width:720px){#rpcu{font-size:12px;padding:7px 10px}}
#rpcu:focus-visible{outline:2px solid var(--ac);outline-offset:-1px}
.bt{background:none;border:1px solid var(--hr);color:var(--mu);border-radius:3px;padding:7px 12px;cursor:pointer;font-family:var(--mo);font-size:12px;min-height:36px}
.bt:hover,.bt:focus-visible{color:var(--ink);border-color:var(--ac)}
dialog{border:1px solid var(--hr);border-radius:4px;background:var(--pn);color:var(--ink);width:min(760px,100%);max-width:100%;padding:0;margin:auto}
dialog::backdrop{background:#000a}
@media(max-width:640px){dialog{margin:auto auto 0;border-radius:8px 8px 0 0;border-bottom:0;width:100%}}
.dh{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--hr);position:sticky;top:0;background:var(--pn)}
.dh b{font-size:15px}
.dh>span{display:flex;gap:8px;align-items:center;font-family:var(--mo);font-size:12px;color:var(--mu)}
#dla,#dda{display:contents}
.db{padding:14px;max-height:min(70vh,560px);overflow:auto;-webkit-overflow-scrolling:touch}
.db pre{margin:0;font-family:var(--mo);font-size:11px;white-space:pre-wrap;color:var(--mu);user-select:all;-webkit-user-select:all}
.nb{margin:0 0 10px;font-family:var(--mo);font-size:11px;line-height:1.5;color:var(--at)}
.dd{margin:0 0 12px;font-size:14px;line-height:1.55;max-width:64ch;color:var(--ink)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-family:var(--mo);font-size:12px;margin-bottom:12px}
.kv span:nth-child(odd){color:var(--mu)}
</style>
<div class=w>
<p class=eb>token.list.wei / canonical onchain tokenlist</p>
<header>
<div class=mk id=mark></div>
<div class=ld>
<h1>The whole list lives onchain</h1>
<p class=sb id=desc>An onchain token list. Each listing is an ERC-721 minted to the token it describes, carrying its logo, symbol, decimals and links. For tokens on this chain the name, symbol and decimals are read from the token contract itself and cannot be authored by the curator; anyone may refresh them.</p>
<div class=fx>
<span>registry <a id=lnk target=_blank rel=noopener><b id=addr></b></a></span>
<span>art + metadata <b>100% onchain</b></span>
<span>listings <b>non-transferable</b> (<a href="https://eip.tools/eip/5192" target=_blank rel="noopener noreferrer">ERC-5192</a>)</span>
<span id=pgf></span>
</div>
</div>
</header>
<div class=sm id=sm hidden></div>
<div class=bar>
<input id=q placeholder="filter by symbol, name or address" autocomplete=off spellcheck=false aria-label="filter listings">
<label class=ct for=sort>sort</la