[SDK] feat: Redesign payment method selector UI

[joaquim-verges]

Fixes TOOL-3434

---

PR-Codex overview

This PR focuses on enhancing the payment selection functionality in a wallet application by adding currency symbols, improving UI elements, and restructuring components for better clarity and usability.

Detailed summary

• Added symbol property to CurrencyMeta interface.
• Updated currency metadata for USD, CAD, GBP, EUR, and JPY to include symbols.
• Modified PaymentSelectionScreen to display currency symbols.
• Refactored TokenRow to enhance loading states and display token values.
• Replaced PayWithCryptoQuoteInfo component with a more streamlined version.
• Adjusted layout in SwapScreenContent and FiatScreenContent for improved UI.
• Introduced mode toggling in TokenSelectedLayout for selecting payment methods.

✨ Ask PR-Codex anything about this PR by commenting with /codex {your question}

[changeset-bot]

⚠️ No Changeset found

Latest commit: d098edc

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
docs-v2	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 15, 2025 9:04pm
login	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 15, 2025 9:04pm
thirdweb_playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 15, 2025 9:04pm
thirdweb-www	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 15, 2025 9:04pm
wallet-ui	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 15, 2025 9:04pm

[joaquim-verges]

• [SDK] feat: Redesign payment method selector UI #6265 👈 (View in Graphite)
• [SDK] feat: new PayEmbed UI for selecting tokens #6257
• main

---

How to use the Graphite Merge Queue

Add either label to this PR to merge it via the merge queue:

• merge-queue - adds this PR to the back of the merge queue
• hotfix - for urgent hot fixes, skip the queue and merge this PR next

You must have a Graphite account in order to use the merge queue. Sign up using this link.

An organization admin has enabled the Graphite Merge Queue in this repository.

Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.

This stack of pull requests is managed by Graphite. Learn more about stacking.

[github-actions]

size-limit report 📦

Path	Size	Loading time (3g)	Running time (snapdragon)	Total time
thirdweb (esm)	46.3 KB (0%)	926 ms (0%)	2.6 s (+13.75% 🔺)	3.5 s
thirdweb (cjs)	121.89 KB (0%)	2.5 s (0%)	4.3 s (-30.57% 🔽)	6.8 s
thirdweb (minimal + tree-shaking)	5.6 KB (0%)	112 ms (0%)	269 ms (-16.03% 🔽)	381 ms
thirdweb/chains (tree-shaking)	506 B (0%)	10 ms (0%)	135 ms (-8.41% 🔽)	145 ms
thirdweb/react (minimal + tree-shaking)	19.29 KB (0%)	386 ms (0%)	755 ms (+32.29% 🔺)	1.2 s

[codecov]

Codecov Report

Attention: Patch coverage is 4.58333% with 229 lines in your changes missing coverage. Please review.

Project coverage is 56.85%. Comparing base (8a98d21) to head (5a12a4d).

Files with missing lines	Patch %	Lines
...act/web/ui/ConnectWallet/screens/Buy/BuyScreen.tsx	2.56%	76 Missing ⚠️
...nnectWallet/screens/Buy/fiat/FiatScreenContent.tsx	0.00%	59 Missing ⚠️
...nnectWallet/screens/Buy/swap/SwapScreenContent.tsx	0.00%	51 Missing ⚠️
...web/src/react/web/ui/components/token/TokenRow.tsx	3.57%	27 Missing ⚠️
...i/ConnectWallet/screens/Buy/swap/PayWithCrypto.tsx	9.09%	10 Missing ⚠️
...ui/ConnectWallet/screens/Buy/PayWIthCreditCard.tsx	0.00%	6 Missing ⚠️

❌ Your patch check has failed because the patch coverage (4.58%) is below the target coverage (80.00%). You can increase the patch coverage or adjust the target coverage.

Additional details and impacted files

@@                             Coverage Diff                             @@
##           02-15-new_payembed_ui_for_selecting_tokens    #6265   +/-   ##
===========================================================================
  Coverage                                       56.84%   56.85%           
===========================================================================
  Files                                            1167     1166    -1     
  Lines                                           64581    64557   -24     
  Branches                                         5228     5226    -2     
===========================================================================
- Hits                                            36714    36701   -13     
+ Misses                                          27139    27128   -11     
  Partials                                          728      728           

Flag	Coverage Δ		*Carryforward flag
legacy_packages	65.68% <ø> (ø)		Carriedforward from 8a98d21
packages	55.05% <4.58%> (+<0.01%)	⬆️

*This pull request uses carry forward flags. Click here to find out more.

Files with missing lines	Coverage Δ
...b/ui/ConnectWallet/screens/Buy/fiat/currencies.tsx	96.29% <100.00%> (+0.46%)	⬆️
...ectWallet/screens/Buy/swap/TokenSelectorScreen.tsx	8.56% <100.00%> (ø)
...ui/ConnectWallet/screens/Buy/PayWIthCreditCard.tsx	13.33% <0.00%> (-0.96%)	⬇️
...i/ConnectWallet/screens/Buy/swap/PayWithCrypto.tsx	16.90% <9.09%> (+2.00%)	⬆️
...web/src/react/web/ui/components/token/TokenRow.tsx	17.07% <3.57%> (-3.57%)	⬇️
...nnectWallet/screens/Buy/swap/SwapScreenContent.tsx	8.39% <0.00%> (-0.23%)	⬇️
...nnectWallet/screens/Buy/fiat/FiatScreenContent.tsx	10.25% <0.00%> (-0.05%)	⬇️
...act/web/ui/ConnectWallet/screens/Buy/BuyScreen.tsx	4.36% <2.56%> (-0.11%)	⬇️

... and 3 files with indirect coverage changes

[linear]

TOOL-3434 PayEmbed UX revamp

[graphite-app]

Merge activity

• Feb 15, 3:53 PM EST: Graphite rebased this pull request after merging its parent, because this pull request is set to merge when ready.