Skip to content

feat(snap-networks-utils): add shared Asset UI component - #418

Merged
Julink-eth merged 5 commits into
mainfrom
feat/shared-asset-component
Oct 7, 2026
Merged

Julink-eth merged 5 commits into
mainfrom
feat/shared-asset-component

Conversation

@Julink-eth

@Julink-eth Julink-eth commented Oct 7, 2026 •

Copy link
Copy Markdown
Contributor

Explanation

This is the next step of consolidating the confirmation UI components across snaps, after EstimatedChanges (#369) and TransactionAlert (#408).
Every snap shows assets inline in its confirmation screens, for example in fee rows, operation parameters and ChangeTrust headers. Each one implements this separately:

  • Stellar has Asset, AssetIcon and AssetText. Asset shows the fiat value (or a skeleton while prices load), a round icon with a question-mark fallback, then the amount and symbol, optionally as an explorer link. AssetIcon is also used on its own at xl size in the ChangeTrust headers.
  • Tron has an Asset with the same layout. It shows a Snaps Icon instead of the image for bandwidth and energy fees, and doesn't support links.
  • Solana has no component: its fee row in TransactionDetails builds the same layout by hand, without an icon.
    This PR adds shared Asset and AssetIcon components to @metamask/snap-networks-utils. As with the previous shared components, snaps pass display-ready values, and number and fiat formatting stay in each snap. Stellar takes prices as strings and Tron as numbers, so formatting can't be shared yet anyway.

AssetIcon is exported on its own (sizes sm, md, lg, xl) for standalone use like the Stellar ChangeTrust headers.
Stellar and Tron each ship a copy of the same question-mark SVG (identical file). It's now embedded once in the library as a string constant, because ts-bridge can't bundle .svg imports the way mm-snap does, and Snaps Image accepts raw SVG markup as src. I checked it matches the snaps' file apart from whitespace.
The snap migrations come in follow-up PRs, one per snap: Solana (fee row only), Stellar, then Tron.

References

Checklist

  • I've updated the test suite for new or updated code as appropriate
  • I've updated documentation (JSDoc, Markdown, etc.) for new or updated code as appropriate
  • I've communicated my changes to consumers by updating changelogs for packages I've changed
  • I've introduced breaking changes in this PR and have prepared draft pull requests for clients and consumer packages to resolve them

@Julink-eth
Julink-eth requested a review from a team as a code owner October 7, 2026 08:02
@Julink-eth
Julink-eth deployed to default-branch October 7, 2026 08:02 — with GitHub Actions Active

@stanleyyconsensys stanleyyconsensys left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice work
just some nit comment

Comment thread packages/snap-networks-utils/src/ui/Asset/Asset.tsx
Comment thread packages/snap-networks-utils/src/ui/Asset/Asset.tsx Outdated
Comment thread packages/snap-networks-utils/src/ui/Asset/Asset.tsx
Julink-eth and others added 2 commits October 7, 2026 12:19
Co-authored-by: Stanley Yuen <102275989+stanleyyconsensys@users.noreply.github.com>
@stanleyyconsensys stanleyyconsensys changed the title feat: add shared Asset UI component feat(snap-networks-utils): add shared Asset UI component Oct 7, 2026
@sonarqubecloud

sonarqubecloud Bot commented Oct 7, 2026

Copy link
Copy Markdown

@Julink-eth
Julink-eth added this pull request to the merge queue Oct 7, 2026
Merged via the queue into main with commit 85f21f4 Oct 7, 2026
56 checks passed
@Julink-eth
Julink-eth deleted the feat/shared-asset-component branch October 7, 2026 14:12
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants