Swap: a Zora coin shows as a card (media, creator, market) - #4
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
…r, market Selecting a Zora creator coin used to give an eight-line uppercase name in the picker button and nothing else: the amount field fell below the fold and the coin looked like any other ticker. Now a coin on either side of the swap gets a card under the strip, from the Zora SDK the site already uses: the coin's media (image, or a muted looping video with its still as poster), the creator's handle and avatar, market cap with the 24h move, 24h volume, holders, the description clamped to a line, a link to the coin on Zora, and one sentence saying what you are trading it for. The card renders nothing until the SDK confirms the token is a coin, so ordinary ERC-20s are untouched. The picker button's name is now one truncated line with the full name in its title, on every token. zoraCoinCard.ts holds the pure parts (media choice, compact USD, 24h delta, clamped description, Zora URL) with unit tests; ZoraCoinCard.tsx is the component; strings added in en and pt-br. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
sktbrd
force-pushed
the
zora-coin-card
branch
from
September 3, 2026 22:29
022480b to
a9d55eb
Compare
sktbrd
added a commit
that referenced
this pull request
Sep 3, 2026
The card shipped in #4 never drew: the Zora SDK, called from the browser without a key, is answered by a Cloudflare block, which is also why coins showed a letter where their image belonged. A new /api/coins/meta calls Zora server-side with a browser-shaped agent and the site's key when one is set, and when Zora still will not answer it reads the coin's own contractURI() on Base and serves the same media from IPFS — without market figures, which only Zora has. The card fetches that route; the SDK import is gone from the client. onchainToCoin maps the on-chain JSON into the SDK shape, with tests. Co-authored-by: Claude Fable 5.1 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Selecting a Zora creator coin on
/swapused to give an eight-line uppercase name in the picker button and nothing else — the amount field fell below the fold and the coin looked like any other ticker. Now a coin on either side of the swap gets a card under the strip, fed by the@zoralabs/coins-sdkthe site already uses:The card renders nothing until the SDK confirms the token is a coin, so ordinary ERC-20s are untouched. The picker button's name is now one truncated line with the full name in its
title, for every token.Files
coinCardModel.ts— pure: media choice (video vs image, IPFS → HTTP), compact USD, 24h delta, clamped description, Zora URL. 7 unit tests.ZoraCoinCard.tsx— the component, one query per address cached 10 min.SwapWidget.tsx— mounts the two cards under the strip; truncates the picker label.messages/{en,pt-br}/swap.json—coinCard.*strings.Notes
NEXT_PUBLIC_ZORA_API_KEYis used when set, as elsewhere in the site; without it the SDK's public rate applies.playsInline, so it never blocks or makes sound.Checks:
vitest7/7 on the new module,tsc --noEmitclean in touched files,eslintandprettierclean. Follows #3 (SwapPro quotes).🤖 Generated with Claude Code