feat(tokenized-assets): build Tokenized Assets page + widgets from Figma#13
Open
ChefWafflesPCS wants to merge 1 commit into
Open
feat(tokenized-assets): build Tokenized Assets page + widgets from Figma#13ChefWafflesPCS wants to merge 1 commit into
ChefWafflesPCS wants to merge 1 commit into
Conversation
Recreates the Tokenized Assets design (Figma 6flJxKCLKnfLDm9p13DxuR) using
this repo's design system. Adds three stateless widgets and a page that
composes them into Chart On and Chart Off layouts.
Widgets (src/widgets):
- TokenizedAssetsList — search + tag chips + scrollable token rows with
favorite toggles. 338x470, bottom-heavy 1/1/2/1
card border, 16px hover radius.
- TokenizedAssetsChartPanel — token header (H4 name + subtle ticker/MC,
H4 right-aligned price with success/failure
delta), 5m/1h/D timeframes, synthetic candle
chart. 468x472, bottom-heavy border.
- TokenizedAssetsTradePanel — split into four stacked cards per spec:
TabsCard (Swap/TWAP/Limit, 72px), PayCard,
ReceiveCard (swap-direction toggle in the
gap), InfoCard (slippage + off-hours warning
+ CTA + rate footer). Each card carries the
bottom-heavy border.
Page (src/pages):
- TokenizedAssetsPage — owns selection/search/favorites/mode state, exposes
chartOff prop. Header eyebrow + heading, asset
count + Markets-open pill.
- Stories: Apps/Tokenized Assets > Chart On / Chart Off.
Conventions followed: stateless widgets driven by props, styled-components
reading from theme tokens (no hardcoded hex, no inline style={{}}), icons
from src/primitives/Icons.tsx. Verified in dark + light themes via the
preview workflow.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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.
Recreates the Tokenized Assets design (Figma 6flJxKCLKnfLDm9p13DxuR) using this repo's design system. Adds three stateless widgets and a page that composes them into Chart On and Chart Off layouts.
Widgets (src/widgets):
favorite toggles. 338x470, bottom-heavy 1/1/2/1
card border, 16px hover radius.
H4 right-aligned price with success/failure
delta), 5m/1h/D timeframes, synthetic candle
chart. 468x472, bottom-heavy border.
TabsCard (Swap/TWAP/Limit, 72px), PayCard,
ReceiveCard (swap-direction toggle in the
gap), InfoCard (slippage + off-hours warning
+ CTA + rate footer). Each card carries the
bottom-heavy border.
Page (src/pages):
Conventions followed: stateless widgets driven by props, styled-components reading from theme tokens (no hardcoded hex, no inline style={{}}), icons from src/primitives/Icons.tsx. Verified in dark + light themes via the preview workflow.