feat: Connect components in React Native [part 2] #3438

joaquim-verges · 2024-06-21T14:31:37Z

Connected button and modal implementation in RN

PR-Codex overview

The focus of this PR is to refactor and optimize the codebase by moving and updating imports, modifying function parameters, and improving file organization.

Detailed summary

Updated wallets property in useAutoConnect.ts
Moved TokenInfo import in various files
Updated import paths for socialIcons
Refactored useSendToken in web and native
Updated defaultTokens import paths

The following files were skipped due to too many changes: packages/thirdweb/src/react/core/hooks/connection/ConnectButtonProps.ts, packages/thirdweb/src/react/web/ui/ConnectWallet/screens/TokenSelector.tsx, packages/thirdweb/src/react/web/ui/ConnectWallet/screens/ViewFunds.tsx, packages/thirdweb/src/react/web/ui/components/WalletImage.tsx, packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/PayWithCrypto.tsx, packages/thirdweb/src/react/web/ui/ConnectWallet/ConnectButton.tsx, packages/thirdweb/src/react/native/ui/connect/ErrorView.tsx, packages/thirdweb/src/react/native/ui/connect/SuccessView.tsx, packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/BuyScreen.tsx, packages/thirdweb/src/react/native/ui/components/ChainIcon.tsx, packages/react-native-adapter/README.md, packages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx, packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx, packages/thirdweb/src/react/web/hooks/wallets/useAutoConnect.ts, packages/thirdweb/src/react/native/ui/components/RNImage.tsx, packages/thirdweb/src/react/native/ui/components/Address.tsx, packages/thirdweb/src/react/native/ui/components/input.tsx, packages/thirdweb/src/react/native/ui/connect/InAppWalletUI.tsx, packages/thirdweb/src/react/native/ui/components/Header.tsx, packages/thirdweb/src/react/web/ui/ConnectWallet/defaultTokens.ts, packages/thirdweb/src/react/native/ui/connect/ExternalWalletsList.tsx, packages/thirdweb/src/react/native/ui/components/WalletImage.tsx, packages/thirdweb/src/react/native/ui/connect/ReceiveScreen.tsx, packages/thirdweb/src/react/core/hooks/wallets/useSendToken.ts, packages/thirdweb/src/react/web/ui/ConnectWallet/screens/SendFunds.tsx, packages/thirdweb/package.json, packages/thirdweb/src/react/web/ui/components/ChainIcon.tsx, packages/thirdweb/src/react/native/ui/connect/TokenListScreen.tsx, packages/thirdweb/src/react/native/ui/connect/ConnectButton.tsx, packages/thirdweb/src/react/native/ui/connect/ConnectedButton.tsx, packages/thirdweb/src/react/native/ui/connect/SendScreen.tsx, packages/thirdweb/src/react/native/ui/connect/ConnectModal.tsx, packages/thirdweb/src/react/native/ui/icons/svgs.ts, packages/thirdweb/src/react/native/ui/connect/ConnectedModal.tsx, packages/thirdweb/src/react/web/ui/ConnectWallet/icons/dataUris.ts, pnpm-lock.yaml

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

vercel · 2024-06-21T14:31:39Z

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

Name	Status	Preview	Comments	Updated (UTC)
thirdweb_playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 1, 2024 8:58am
thirdweb-www	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 1, 2024 8:58am
wallet-ui	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 1, 2024 8:58am

changeset-bot · 2024-06-21T14:31:41Z

⚠️ No Changeset found

Latest commit: cd436b3

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

joaquim-verges · 2024-06-21T14:31:48Z

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

feat: Connect components in React Native [part 2] #3438 👈
feat: Connect components in React Native [part 1] #3246
main

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

Join @joaquim-verges and the rest of your teammates on Graphite

graphite-app · 2024-06-21T14:32:08Z

Your org requires the Graphite merge queue for merging into main

Add the label “merge-queue” to the PR and Graphite will automatically add it to the merge queue when it’s ready to merge. Or use the label “hotfix” to add to the merge queue as a hot fix.

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

codspeed-hq · 2024-06-21T14:34:45Z

CodSpeed Performance Report

Merging #3438 will improve performances by 10.39%

_{Comparing 06-21-joaquim_rn-connect-ui-2 (cd436b3) with joaquim/rn-ui-connect (20fd0b0)}

Summary

⚡ 1 improvements
✅ 8 untouched benchmarks

Benchmarks breakdown

	Benchmark	`joaquim/rn-ui-connect`	`06-21-joaquim_rn-connect-ui-2`	Change
⚡	`encode tx (prepared method)`	379.6 µs	343.9 µs	+10.39%

codecov · 2024-06-21T14:40:32Z

Codecov Report

Attention: Patch coverage is 62.50000% with 84 lines in your changes missing coverage. Please review.

Project coverage is 62.52%. Comparing base (20fd0b0) to head (cd436b3).

Additional details and impacted files

@@                    Coverage Diff                    @@
##           joaquim/rn-ui-connect    #3438      +/-   ##
=========================================================
+ Coverage                  62.27%   62.52%   +0.24%     
=========================================================
  Files                        900      898       -2     
  Lines                      69113    68903     -210     
  Branches                    3675     3687      +12     
=========================================================
+ Hits                       43040    43080      +40     
+ Misses                     25382    25134     -248     
+ Partials                     691      689       -2

Flag	Coverage Δ		*Carryforward flag
legacy_packages	`65.59% <ø> (ø)`		Carriedforward from 20fd0b0
packages	`61.94% <62.50%> (+0.29%)`	⬆️

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

Files	Coverage Δ
...react/core/hooks/transaction/useSendTransaction.ts	`46.81% <100.00%> (ø)`
...web/src/react/core/hooks/wallets/useAutoConnect.ts	`61.20% <100.00%> (ø)`
...ges/thirdweb/src/react/core/utils/defaultTokens.ts	`100.00% <100.00%> (ø)`
...ges/thirdweb/src/react/core/utils/isSmartWallet.ts	`90.00% <ø> (ø)`
...kages/thirdweb/src/react/core/utils/socialIcons.ts	`100.00% <100.00%> (ø)`
packages/thirdweb/src/react/core/utils/wallet.ts	`28.71% <100.00%> (+2.18%)`	⬆️
...react/web/hooks/transaction/useSendTransaction.tsx	`32.03% <100.00%> (ø)`
...b/src/react/web/ui/ConnectWallet/ConnectButton.tsx	`56.54% <100.00%> (ø)`
...hirdweb/src/react/web/ui/ConnectWallet/Details.tsx	`26.85% <100.00%> (ø)`
.../src/react/web/ui/ConnectWallet/WalletSelector.tsx	`19.91% <100.00%> (ø)`
... and 17 more

... and 6 files with indirect coverage changes

github-actions · 2024-06-27T08:08:31Z

size-limit report 📦

Path	Size	Loading time (3g)	Running time (snapdragon)	Total time
thirdweb (esm)	40.48 KB (0%)	810 ms (0%)	826 ms (+149.93% 🔺)	1.7 s
thirdweb (cjs)	90.48 KB (0%)	1.9 s (0%)	850 ms (+24.62% 🔺)	2.7 s
thirdweb (minimal + tree-shaking)	4.79 KB (0%)	96 ms (0%)	23 ms (-52.33% 🔽)	119 ms
thirdweb/chains (tree-shaking)	423 B (0%)	10 ms (0%)	86 ms (+275.98% 🔺)	96 ms
thirdweb/react (minimal + tree-shaking)	13.55 KB (0%)	271 ms (0%)	54 ms (+15.43% 🔺)	325 ms

socket-security · 2024-07-01T00:48:16Z

👍 Dependency issues cleared. Learn more about Socket for GitHub ↗︎

This PR previously contained dependency changes with security issues that have been resolved, removed, or ignored.

View full report↗︎

jnsdls · 2024-07-01T16:22:07Z

packages/thirdweb/src/react/native/ui/components/Address.tsx

+  useEffect(() => {
+    if (copySuccess) {
+      setTimeout(() => {
+        setCopySuccess(false);
+      }, 2500);
+    }
+  }, [copySuccess]);


have to clean up this timeout if it was set in the cleanup function

jnsdls · 2024-07-01T16:22:32Z

packages/thirdweb/src/react/native/ui/components/Address.tsx

+    <TouchableOpacity
+      style={styles.addressContainer}
+      onPress={() => {
+        // @ts-ignore - missing native types


prefer @ts-expect-error

Suggested change

// @ts-ignore - missing native types

// @ts-expect-error - missing native types

jnsdls · 2024-07-01T16:25:34Z

packages/thirdweb/src/react/native/ui/components/WalletImage.tsx

+      if (ensAvatar) {
+        return ensAvatar;
+      }


just keep this entirely outside of the useQuery, it doesn't need to be in here

jnsdls · 2024-07-01T16:25:40Z

packages/thirdweb/src/react/native/ui/components/WalletImage.tsx

+      "wallet-image-or-ens",
+      wallet.id,
+      wallet.getAccount()?.address,
+      ensAvatar,


jnsdls · 2024-07-01T16:27:44Z

packages/thirdweb/src/react/native/ui/connect/ConnectedButton.tsx

+            {balanceQuery.data
+              ? Number(balanceQuery.data.displayValue).toFixed(3)
+              : "---"}{" "}
+            {balanceQuery.data?.symbol}{" "}


why the ending space? {" "}

jnsdls · 2024-07-01T16:27:56Z

packages/thirdweb/src/react/native/ui/connect/ConnectedButton.tsx

+          >
+            {balanceQuery.data
+              ? Number(balanceQuery.data.displayValue).toFixed(3)
+              : "---"}{" "}


is the --- the "loading" state?

jnsdls · 2024-07-01T16:29:24Z

packages/thirdweb/src/react/native/ui/connect/TokenListScreen.tsx

+  const tokens = chain ? supportedTokens[chain.id] || [] : [];
+
+  return (
+    <>


empty fragment?

github-actions bot added the TS SDK Involves changes to the v5 TypeScript SDK. label Jun 21, 2024

joaquim-verges mentioned this pull request Jun 21, 2024

feat: Connect components in React Native [part 1] #3246

Merged

joaquim-verges changed the title ~~joaquim/rn-connect-ui-2~~ feat: Connect Jun 21, 2024

joaquim-verges changed the title ~~feat: Connect~~ feat: Connect components in React Native [part 2] Jun 21, 2024

joaquim-verges added the DO NOT MERGE This pull request is still in progress and is not ready to be merged. label Jun 21, 2024 — with Graphite App

joaquim-verges marked this pull request as ready for review June 21, 2024 14:33

joaquim-verges requested a review from MananTank as a code owner June 21, 2024 14:33

vercel bot had a problem deploying to Preview – thirdweb_playground June 21, 2024 14:34 Failure

vercel bot had a problem deploying to Preview – thirdweb-www June 21, 2024 14:35 Failure

joaquim-verges force-pushed the 06-21-joaquim_rn-connect-ui-2 branch from 44dc614 to 0b39485 Compare June 27, 2024 08:04

vercel bot deployed to Preview – thirdweb_playground June 27, 2024 08:10 View deployment

vercel bot deployed to Preview – thirdweb-www June 27, 2024 08:20 View deployment

vercel bot had a problem deploying to Preview – wallet-ui June 30, 2024 02:50 Failure

vercel bot deployed to Preview – thirdweb_playground June 30, 2024 02:54 View deployment

vercel bot deployed to Preview – thirdweb-www June 30, 2024 03:04 View deployment

joaquim-verges force-pushed the 06-21-joaquim_rn-connect-ui-2 branch from 5eb4405 to 5a7989a Compare June 30, 2024 07:33

vercel bot deployed to Preview – wallet-ui June 30, 2024 07:37 View deployment

vercel bot deployed to Preview – thirdweb_playground June 30, 2024 07:40 View deployment

vercel bot deployed to Preview – thirdweb-www June 30, 2024 07:49 View deployment

joaquim-verges force-pushed the 06-21-joaquim_rn-connect-ui-2 branch from 5a7989a to 2d3636c Compare June 30, 2024 09:00

vercel bot deployed to Preview – wallet-ui June 30, 2024 09:03 View deployment

vercel bot deployed to Preview – thirdweb_playground June 30, 2024 09:04 View deployment

vercel bot deployed to Preview – thirdweb-www June 30, 2024 09:14 View deployment

vercel bot had a problem deploying to Preview – thirdweb_playground July 1, 2024 00:27 Failure

vercel bot had a problem deploying to Preview – wallet-ui July 1, 2024 00:27 Failure

joaquim-verges force-pushed the 06-21-joaquim_rn-connect-ui-2 branch from 8c1e181 to dc70116 Compare July 1, 2024 00:46

vercel bot deployed to Preview – wallet-ui July 1, 2024 00:49 View deployment

vercel bot deployed to Preview – thirdweb_playground July 1, 2024 00:50 View deployment

vercel bot deployed to Preview – thirdweb-www July 1, 2024 01:00 View deployment

joaquim-verges force-pushed the 06-21-joaquim_rn-connect-ui-2 branch from dc70116 to 37aae17 Compare July 1, 2024 01:10

vercel bot deployed to Preview – wallet-ui July 1, 2024 01:13 View deployment

vercel bot deployed to Preview – thirdweb_playground July 1, 2024 01:14 View deployment

vercel bot deployed to Preview – thirdweb-www July 1, 2024 01:24 View deployment

joaquim-verges added 2 commits July 1, 2024 13:47

Merge remote-tracking branch 'origin/main' into joaquim/rn-ui-connect

20fd0b0

joaquim/rn-connect-ui-2

359aa3c

joaquim-verges force-pushed the joaquim/rn-ui-connect branch from 196e258 to 20fd0b0 Compare July 1, 2024 01:49

joaquim-verges requested review from jnsdls and arcoraven as code owners July 1, 2024 01:49

joaquim-verges force-pushed the 06-21-joaquim_rn-connect-ui-2 branch from 37aae17 to c6ba194 Compare July 1, 2024 01:49

vercel bot deployed to Preview – wallet-ui July 1, 2024 01:55 View deployment

vercel bot deployed to Preview – thirdweb_playground July 1, 2024 01:56 View deployment

vercel bot deployed to Preview – thirdweb-www July 1, 2024 02:05 View deployment

joaquim-verges force-pushed the 06-21-joaquim_rn-connect-ui-2 branch from c6ba194 to e96a1e2 Compare July 1, 2024 08:33

send screen

cd436b3

joaquim-verges force-pushed the 06-21-joaquim_rn-connect-ui-2 branch from e96a1e2 to cd436b3 Compare July 1, 2024 08:34

vercel bot deployed to Preview – wallet-ui July 1, 2024 08:39 View deployment

vercel bot deployed to Preview – thirdweb_playground July 1, 2024 08:40 View deployment

vercel bot deployed to Preview – thirdweb-www July 1, 2024 08:58 View deployment

jnsdls requested changes Jul 1, 2024

View reviewed changes

joaquim-verges force-pushed the joaquim/rn-ui-connect branch from 20fd0b0 to ce03f72 Compare July 1, 2024 19:42

joaquim-verges merged commit 3590a41 into joaquim/rn-ui-connect Jul 1, 2024
29 of 30 checks passed

joaquim-verges deleted the 06-21-joaquim_rn-connect-ui-2 branch July 1, 2024 20:12

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Connect components in React Native [part 2] #3438

feat: Connect components in React Native [part 2] #3438

joaquim-verges commented Jun 21, 2024 •

edited by pr-codex bot

Loading

vercel bot commented Jun 21, 2024 •

edited

Loading

changeset-bot bot commented Jun 21, 2024 •

edited

Loading

joaquim-verges commented Jun 21, 2024

graphite-app bot commented Jun 21, 2024

codspeed-hq bot commented Jun 21, 2024 •

edited

Loading

codecov bot commented Jun 21, 2024 •

edited

Loading

github-actions bot commented Jun 27, 2024 •

edited

Loading

socket-security bot commented Jul 1, 2024 •

edited

Loading

jnsdls Jul 1, 2024

jnsdls Jul 1, 2024

jnsdls Jul 1, 2024

jnsdls Jul 1, 2024

jnsdls Jul 1, 2024

jnsdls Jul 1, 2024

jnsdls Jul 1, 2024

	// @ts-ignore - missing native types
	// @ts-expect-error - missing native types

feat: Connect components in React Native [part 2] #3438

feat: Connect components in React Native [part 2] #3438

Conversation

joaquim-verges commented Jun 21, 2024 • edited by pr-codex bot Loading

PR-Codex overview

Detailed summary

vercel bot commented Jun 21, 2024 • edited Loading

changeset-bot bot commented Jun 21, 2024 • edited Loading

⚠️ No Changeset found

joaquim-verges commented Jun 21, 2024

graphite-app bot commented Jun 21, 2024

Your org requires the Graphite merge queue for merging into main

codspeed-hq bot commented Jun 21, 2024 • edited Loading

Merging #3438 will improve performances by 10.39%

Summary

Benchmarks breakdown

codecov bot commented Jun 21, 2024 • edited Loading

Codecov Report

github-actions bot commented Jun 27, 2024 • edited Loading

size-limit report 📦

socket-security bot commented Jul 1, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

joaquim-verges commented Jun 21, 2024 •

edited by pr-codex bot

Loading

vercel bot commented Jun 21, 2024 •

edited

Loading

changeset-bot bot commented Jun 21, 2024 •

edited

Loading

codspeed-hq bot commented Jun 21, 2024 •

edited

Loading

codecov bot commented Jun 21, 2024 •

edited

Loading

github-actions bot commented Jun 27, 2024 •

edited

Loading

socket-security bot commented Jul 1, 2024 •

edited

Loading