[SDK] feat: new PayEmbed UI for selecting tokens

[joaquim-verges]

Fixes Fixes TOOL-3434

---

PR-Codex overview

This PR introduces a new user interface for token selection in the thirdweb project, enhancing the ConnectWallet component's functionality by replacing the WalletSelectorButton with a more versatile TokenSelectorScreen and related components.

Detailed summary

• Removed WalletSelectorButton.tsx file.
• Introduced TokenSelectorScreen.tsx for token selection.
• Updated imports in various files to use TokenSelectorScreen.
• Integrated TokenRow component for displaying tokens.
• Modified BuyTokenInput to utilize TokenRow.
• Adjusted PaymentSelectionScreen to incorporate TokenRow and improved wallet selection logic.
• Enhanced button styles with hover effects across multiple components.

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

[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 14, 2025 0:35am
login	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 14, 2025 0:35am
thirdweb_playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 14, 2025 0:35am
thirdweb-www	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 14, 2025 0:35am
wallet-ui	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 14, 2025 0:35am

[changeset-bot]

🦋 Changeset detected

Latest commit: 8a98d21

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
thirdweb	Patch
@thirdweb-dev/wagmi-adapter	Patch
thirdweb-login	Patch

Not sure what this means? Click here to learn what changesets are.

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

[joaquim-verges]

• [SDK] feat: Redesign payment method selector UI #6265
• [SDK] feat: new PayEmbed UI for selecting tokens #6257 👈 (View in Graphite)
• 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 s (+27.37% 🔺)	2.9 s
thirdweb (cjs)	121.89 KB (0%)	2.5 s (0%)	3.9 s (+21.33% 🔺)	6.3 s
thirdweb (minimal + tree-shaking)	5.6 KB (0%)	112 ms (0%)	119 ms (-16.26% 🔽)	230 ms
thirdweb/chains (tree-shaking)	506 B (0%)	10 ms (0%)	24 ms (-33.07% 🔽)	34 ms
thirdweb/react (minimal + tree-shaking)	19.29 KB (0%)	386 ms (0%)	251 ms (-28.67% 🔽)	637 ms

[codecov]

Codecov Report

Attention: Patch coverage is 11.98347% with 426 lines in your changes missing coverage. Please review.

Project coverage is 56.84%. Comparing base (6f381d7) to head (8a98d21).
Report is 10 commits behind head on main.

Files with missing lines	Patch %	Lines
...ectWallet/screens/Buy/swap/TokenSelectorScreen.tsx	8.56%	299 Missing ⚠️
...act/web/ui/ConnectWallet/screens/Buy/BuyScreen.tsx	3.84%	50 Missing ⚠️
...web/src/react/web/ui/components/token/TokenRow.tsx	20.63%	50 Missing ⚠️
...Wallet/screens/Buy/swap/PaymentSelectionScreen.tsx	18.75%	13 Missing ⚠️
...i/ConnectWallet/screens/Buy/swap/BuyTokenInput.tsx	22.22%	7 Missing ⚠️
...s/thirdweb/src/react/web/ui/components/buttons.tsx	63.63%	4 Missing ⚠️
...ectWallet/screens/Buy/main/useUISelectionStates.ts	0.00%	3 Missing ⚠️

❌ Your patch status has failed because the patch coverage (11.98%) 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             @@
##             main    #6257      +/-   ##
==========================================
- Coverage   56.86%   56.84%   -0.03%     
==========================================
  Files        1166     1167       +1     
  Lines       64523    64581      +58     
  Branches     5226     5228       +2     
==========================================
+ Hits        36694    36714      +20     
- Misses      27101    27139      +38     
  Partials      728      728              

Flag	Coverage Δ		*Carryforward flag
legacy_packages	65.68% <ø> (ø)		Carriedforward from 6f381d7
packages	55.05% <11.98%> (-0.03%)	⬇️

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

Files with missing lines	Coverage Δ
...onnectWallet/screens/Buy/TransactionModeScreen.tsx	9.65% <100.00%> (ø)
...i/ConnectWallet/screens/Buy/swap/PayWithCrypto.tsx	14.89% <100.00%> (ø)
...et/screens/Buy/swap/TransferConfirmationScreen.tsx	10.60% <100.00%> (ø)
...ectWallet/screens/Buy/main/useUISelectionStates.ts	8.03% <0.00%> (-0.15%)	⬇️
...s/thirdweb/src/react/web/ui/components/buttons.tsx	80.95% <63.63%> (-0.67%)	⬇️
...i/ConnectWallet/screens/Buy/swap/BuyTokenInput.tsx	7.89% <22.22%> (-2.35%)	⬇️
...Wallet/screens/Buy/swap/PaymentSelectionScreen.tsx	17.85% <18.75%> (+8.06%)	⬆️
...act/web/ui/ConnectWallet/screens/Buy/BuyScreen.tsx	4.47% <3.84%> (+0.14%)	⬆️
...web/src/react/web/ui/components/token/TokenRow.tsx	20.63% <20.63%> (ø)
...ectWallet/screens/Buy/swap/TokenSelectorScreen.tsx	8.56% <8.56%> (ø)

... and 3 files with indirect coverage changes

[linear]

TOOL-3434 PayEmbed UX revamp