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

<!-- start pr-codex -->

## PR-Codex overview
This PR focuses on refactoring, updating dependencies, and improving code organization.

### Detailed summary
- Updated dependencies and file paths
- Refactored wallet-related functions
- Added default wallets for various chains
- Updated UI components and design system configurations

> The following files were skipped due to too many changes: `packages/thirdweb/src/react/web/wallets/shared/OTPLoginUI.tsx`, `packages/thirdweb/src/react/web/ui/ConnectWallet/WalletSelector.tsx`, `packages/thirdweb/src/react/web/wallets/shared/SocialLogin.tsx`, `packages/thirdweb/src/react/native/ui/components/TokenIcon.tsx`, `packages/thirdweb/src/react/web/wallets/shared/PassKeyLogin.tsx`, `packages/thirdweb/src/react/web/ui/PayEmbed.tsx`, `packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatSteps.tsx`, `packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/SmartWalletConnectUI.tsx`, `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/ConnectWallet/screens/SignatureScreen.tsx`, `packages/thirdweb/src/react/web/ui/components/WalletImage.tsx`, `packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/AnyWalletConnectUI.tsx`, `packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/PayWithCrypto.tsx`, `packages/thirdweb/src/react/native/ui/connect/ErrorView.tsx`, `packages/thirdweb/src/react/web/hooks/transaction/useSendTransaction.tsx`, `packages/thirdweb/src/react/native/ui/connect/SuccessView.tsx`, `packages/react-native-adapter/README.md`, `packages/thirdweb/src/react/native/ui/components/text.tsx`, `packages/thirdweb/src/react/native/ui/components/ChainIcon.tsx`, `packages/thirdweb/src/react/web/ui/ConnectWallet/ConnectButton.tsx`, `packages/thirdweb/src/wallets/manager/index.ts`, `packages/thirdweb/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx`, `packages/thirdweb/src/react/native/ui/components/Address.tsx`, `packages/thirdweb/src/react/web/hooks/wallets/useAutoConnect.ts`, `packages/thirdweb/src/react/native/ui/components/RNImage.tsx`, `packages/thirdweb/src/exports/react.native.ts`, `packages/thirdweb/src/react/web/ui/ConnectWallet/ConnectButtonProps.ts`, `packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/BuyScreen.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/ReceiveScreen.tsx`, `packages/thirdweb/src/react/native/ui/components/button.tsx`, `packages/thirdweb/src/exports/react.ts`, `packages/thirdweb/src/react/native/ui/components/WalletImage.tsx`, `packages/thirdweb/src/react/native/ui/connect/ConnectedButton.tsx`, `packages/thirdweb/src/react/core/hooks/wallets/useSendToken.ts`, `packages/thirdweb/src/react/web/ui/ConnectWallet/screens/SendFunds.tsx`, `packages/thirdweb/src/react/native/ui/components/input.tsx`, `packages/thirdweb/src/react/core/utils/wallet.ts`, `packages/thirdweb/src/react/web/ui/components/ChainIcon.tsx`, `packages/thirdweb/src/react/native/ui/connect/ExternalWalletsList.tsx`, `packages/thirdweb/package.json`, `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/SendScreen.tsx`, `packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx`, `packages/thirdweb/src/react/native/ui/connect/ConnectModal.tsx`, `packages/thirdweb/src/react/native/ui/connect/InAppWalletUI.tsx`, `packages/thirdweb/src/react/core/hooks/connection/ConnectEmbedProps.ts`, `packages/thirdweb/src/react/native/ui/connect/ConnectedModal.tsx`, `packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx`, `packages/thirdweb/src/react/web/ui/ConnectWallet/icons/dataUris.ts`, `packages/thirdweb/src/react/native/ui/icons/svgs.ts`, `pnpm-lock.yaml`

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

<!-- end pr-codex -->

packages/react-native-adapter/README.md

@@ -15,7 +15,7 @@ npx expo install thirdweb @thirdweb-dev/react-native-adapter
 Since react native requires installing native dependencies directly, you also have to install these required peer dependencies:
 
 ```shell
-npx expo install react-native-get-random-values @react-native-community/netinfo expo-application @react-native-async-storage/async-storage expo-web-browser react-native-aes-gcm-crypto react-native-quick-crypto@0.7.0-rc.6 amazon-cognito-identity-js
+npx expo install react-native-get-random-values @react-native-community/netinfo expo-application @react-native-async-storage/async-storage expo-web-browser expo-linking react-native-aes-gcm-crypto react-native-quick-crypto@0.7.0-rc.6 amazon-cognito-identity-js @coinbase/wallet-mobile-sdk react-native-mmkv react-native-svg @react-native-clipboard/clipboard
 ```
 
 Here's an explanation of each peer dependency and why its needed:
@@ -34,6 +34,10 @@ expo-web-browser // for oauth flows
 amazon-cognito-identity-js // for authentication
 react-native-aes-gcm-crypto // for encryption
 react-native-quick-crypto@0.7.0-rc.6 //for fast hashing
+
+// needed for the prebuilt UIs
+react-native-svg
+@react-native-clipboard/clipboard
 ```
 
 ### 2. Edit your `metro.config.js`

packages/react-native-adapter/package.json

@@ -34,15 +34,18 @@
     "typescript": ">=5.0.4",
     "@coinbase/wallet-mobile-sdk": "^1",
     "@react-native-async-storage/async-storage": "^1",
+    "@react-native-clipboard/clipboard": "^1",
     "@react-native-community/netinfo": "^11",
     "amazon-cognito-identity-js": "^6",
     "expo-application": "^5",
+    "expo-linking": "^6",
     "expo-web-browser": "^13",
     "react-native-aes-gcm-crypto": "^0.2",
     "react-native-quick-crypto": ">=0.7.0-rc.6 || >=0.7",
     "shamir-secret-sharing": "^0.0.3",
     "react-native": ">=0.70",
-    "react-native-get-random-values": "^1"
+    "react-native-get-random-values": "^1",
+    "react-native-svg": "^15"
   },
   "peerDependenciesMeta": {
     "typescript": {

packages/thirdweb/.gitignore

@@ -1,2 +1,3 @@
 dist/
-coverage/
+coverage/
+.watchmanconfig

packages/thirdweb/package.json

@@ -117,54 +117,22 @@
   },
   "typesVersions": {
     "*": {
-      "adapters/*": [
-        "./dist/types/exports/adapters/*.d.ts"
-      ],
-      "auth": [
-        "./dist/types/exports/auth.d.ts"
-      ],
-      "chains": [
-        "./dist/types/exports/chains.d.ts"
-      ],
-      "contract": [
-        "./dist/types/exports/contract.d.ts"
-      ],
-      "deploys": [
-        "./dist/types/exports/deploys.d.ts"
-      ],
-      "event": [
-        "./dist/types/exports/event.d.ts"
-      ],
-      "extensions/*": [
-        "./dist/types/exports/extensions/*.d.ts"
-      ],
-      "pay": [
-        "./dist/types/exports/pay.d.ts"
-      ],
-      "react": [
-        "./dist/types/exports/react.d.ts"
-      ],
-      "react-native": [
-        "./dist/types/exports/react-native.d.ts"
-      ],
-      "rpc": [
-        "./dist/types/exports/rpc.d.ts"
-      ],
-      "storage": [
-        "./dist/types/exports/storage.d.ts"
-      ],
-      "transaction": [
-        "./dist/types/exports/transaction.d.ts"
-      ],
-      "utils": [
-        "./dist/types/exports/utils.d.ts"
-      ],
-      "wallets": [
-        "./dist/types/exports/wallets.d.ts"
-      ],
-      "wallets/*": [
-        "./dist/types/exports/wallets/*.d.ts"
-      ]
+      "adapters/*": ["./dist/types/exports/adapters/*.d.ts"],
+      "auth": ["./dist/types/exports/auth.d.ts"],
+      "chains": ["./dist/types/exports/chains.d.ts"],
+      "contract": ["./dist/types/exports/contract.d.ts"],
+      "deploys": ["./dist/types/exports/deploys.d.ts"],
+      "event": ["./dist/types/exports/event.d.ts"],
+      "extensions/*": ["./dist/types/exports/extensions/*.d.ts"],
+      "pay": ["./dist/types/exports/pay.d.ts"],
+      "react": ["./dist/types/exports/react.d.ts"],
+      "react-native": ["./dist/types/exports/react-native.d.ts"],
+      "rpc": ["./dist/types/exports/rpc.d.ts"],
+      "storage": ["./dist/types/exports/storage.d.ts"],
+      "transaction": ["./dist/types/exports/transaction.d.ts"],
+      "utils": ["./dist/types/exports/utils.d.ts"],
+      "wallets": ["./dist/types/exports/wallets.d.ts"],
+      "wallets/*": ["./dist/types/exports/wallets/*.d.ts"]
     }
   },
   "browser": {
@@ -211,14 +179,17 @@
     "@aws-sdk/credential-providers": "^3",
     "@coinbase/wallet-mobile-sdk": "^1",
     "@react-native-async-storage/async-storage": "^1",
+    "@react-native-clipboard/clipboard": "^1",
     "amazon-cognito-identity-js": "^6",
     "aws-amplify": "^5",
     "ethers": "^5 || ^6",
+    "expo-linking": "^6",
     "expo-web-browser": "^13",
     "react": ">=18",
     "react-native": ">=0.70",
     "react-native-aes-gcm-crypto": "^0.2",
     "react-native-quick-crypto": ">=0.7.0-rc.6 || >=0.7",
+    "react-native-svg": "^15",
     "typescript": ">=5.0.4"
   },
   "peerDependenciesMeta": {
@@ -237,12 +208,18 @@
     "react-native-aes-gcm-crypto": {
       "optional": true
     },
+    "expo-linking": {
+      "optional": true
+    },
     "expo-web-browser": {
       "optional": true
     },
     "react-native-quick-crypto": {
       "optional": true
     },
+    "react-native-svg": {
+      "optional": true
+    },
     "aws-amplify": {
       "optional": true
     },
@@ -258,6 +235,9 @@
     "@react-native-async-storage/async-storage": {
       "optional": true
     },
+    "@react-native-clipboard/clipboard": {
+      "optional": true
+    },
     "@coinbase/wallet-mobile-sdk": {
       "optional": true
     }
@@ -297,6 +277,7 @@
     "@aws-sdk/credential-providers": "3.577.0",
     "@coinbase/wallet-mobile-sdk": "1.0.13",
     "@react-native-async-storage/async-storage": "^1.23.1",
+    "@react-native-clipboard/clipboard": "1.14.1",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
@@ -307,11 +288,13 @@
     "amazon-cognito-identity-js": "6.3.12",
     "aws-amplify": "5.3.18",
     "cross-spawn": "7.0.3",
+    "expo-linking": "6.3.1",
     "expo-web-browser": "13.0.3",
     "happy-dom": "^14.12.0",
     "react-native": "0.74.2",
     "react-native-aes-gcm-crypto": "0.2.2",
     "react-native-quick-crypto": "0.7.0-rc.6",
+    "react-native-svg": "15.3.0",
     "vitest": "1.6.0"
   }
-}
+}

packages/thirdweb/src/exports/react.native.ts

@@ -1,5 +1,12 @@
 export { ThirdwebProvider } from "../react/core/providers/thirdweb-provider.js";
 
+// theme
+export { darkTheme, lightTheme } from "../react/core/design-system/index.js";
+export type {
+  Theme,
+  ThemeOverrides,
+} from "../react/core/design-system/index.js";
+
 // wallet hooks
 export { useActiveWallet } from "../react/native/hooks/wallets/useActiveWallet.js";
 export { useActiveWalletChain } from "../react/native/hooks/wallets/useActiveWalletChain.js";
@@ -77,11 +84,18 @@ export {
 export { AutoConnect } from "../react/native/ui/AutoConnect/AutoConnect.js";
 export type { AutoConnectProps } from "../react/core/hooks/connection/types.js";
 
-export { TransactionButton } from "../react/native/ui/TransactionButton/TrabsactionButton.js";
+export { TransactionButton } from "../react/native/ui/transaction/TransactionButton.js";
 export type { TransactionButtonProps } from "../react/core/hooks/transaction/transaction-button-utils.js";
 
+export type {
+  ConnectButtonProps,
+  ConnectButton_connectButtonOptions,
+  ConnectButton_connectModalOptions,
+  ConnectButton_detailsButtonOptions,
+  ConnectButton_detailsModalOptions,
+} from "../react/core/hooks/connection/ConnectButtonProps.js";
+export { ConnectButton } from "../react/native/ui/connect/ConnectButton.js";
+export { ConnectEmbed } from "../react/native/ui/connect/ConnectModal.js";
+
 // wallet info
-export {
-  useWalletInfo,
-  useWalletImage,
-} from "../react/web/ui/hooks/useWalletInfo.js";
+export { useWalletInfo, useWalletImage } from "../react/core/utils/wallet.js";

packages/thirdweb/src/exports/react.ts

@@ -5,18 +5,16 @@ export type {
 } from "../react/core/design-system/index.js";
 
 export { ConnectButton } from "../react/web/ui/ConnectWallet/ConnectButton.js";
-export {
-  ConnectEmbed,
-  type ConnectEmbedProps,
-} from "../react/web/ui/ConnectWallet/Modal/ConnectEmbed.js";
+export { ConnectEmbed } from "../react/web/ui/ConnectWallet/Modal/ConnectEmbed.js";
+export { type ConnectEmbedProps } from "../react/core/hooks/connection/ConnectEmbedProps.js";
 
 export type {
   ConnectButtonProps,
   ConnectButton_connectButtonOptions,
   ConnectButton_connectModalOptions,
   ConnectButton_detailsButtonOptions,
   ConnectButton_detailsModalOptions,
-} from "../react/web/ui/ConnectWallet/ConnectButtonProps.js";
+} from "../react/core/hooks/connection/ConnectButtonProps.js";
 export type { NetworkSelectorProps } from "../react/web/ui/ConnectWallet/NetworkSelector.js";
 export type { WelcomeScreen } from "../react/web/ui/ConnectWallet/screens/types.js";
 export type { LocaleId } from "../react/web/ui/types.js";
@@ -30,8 +28,8 @@ export { ThirdwebProvider } from "../react/core/providers/thirdweb-provider.js";
 export type {
   SupportedTokens,
   TokenInfo,
-} from "../react/web/ui/ConnectWallet/defaultTokens.js";
-export { defaultTokens } from "../react/web/ui/ConnectWallet/defaultTokens.js";
+} from "../react/core/utils/defaultTokens.js";
+export { defaultTokens } from "../react/core/utils/defaultTokens.js";
 
 // Media Renderer
 export { MediaRenderer } from "../react/web/ui/MediaRenderer/MediaRenderer.js";
@@ -123,18 +121,15 @@ export {
   type PayEmbedProps,
   type PayEmbedConnectOptions,
 } from "../react/web/ui/PayEmbed.js";
-export type { PayUIOptions } from "../react/web/ui/ConnectWallet/ConnectButtonProps.js";
+export type { PayUIOptions } from "../react/core/hooks/connection/ConnectButtonProps.js";
 
 export {
   useConnectModal,
   type UseConnectModalOptions,
 } from "../react/web/ui/ConnectWallet/useConnectModal.js";
 
 // wallet info
-export {
-  useWalletInfo,
-  useWalletImage,
-} from "../react/web/ui/hooks/useWalletInfo.js";
+export { useWalletInfo, useWalletImage } from "../react/core/utils/wallet.js";
 
 export {
   useWalletDetailsModal,

packages/thirdweb/src/exports/wallets/in-app.ts

@@ -13,4 +13,4 @@ export { type GetAuthenticatedUserParams } from "../../wallets/in-app/core/authe
 
 export { hasStoredPasskey } from "../../wallets/in-app/web/lib/auth/passkeys.js";
 
-export { socialIcons } from "../../react/web/wallets/in-app/socialIcons.js";
+export { socialIcons } from "../../react/core/utils/socialIcons.js";

packages/thirdweb/src/react/web/ui/ConnectWallet/ConnectButtonProps.ts → packages/thirdweb/src/react/core/hooks/connection/ConnectButtonProps.ts

@@ -3,12 +3,12 @@ import type { ThirdwebClient } from "../../../../client/client.js";
 import type { Account, Wallet } from "../../../../wallets/interfaces/wallet.js";
 import type { SmartWalletOptions } from "../../../../wallets/smart/types.js";
 import type { AppMetadata } from "../../../../wallets/types.js";
-import type { Theme } from "../../../core/design-system/index.js";
-import type { SiweAuthOptions } from "../../../core/hooks/auth/useSiweAuth.js";
-import type { LocaleId } from "../types.js";
-import type { NetworkSelectorProps } from "./NetworkSelector.js";
-import type { SupportedTokens } from "./defaultTokens.js";
-import type { WelcomeScreen } from "./screens/types.js";
+import type { NetworkSelectorProps } from "../../../web/ui/ConnectWallet/NetworkSelector.js";
+import type { WelcomeScreen } from "../../../web/ui/ConnectWallet/screens/types.js";
+import type { LocaleId } from "../../../web/ui/types.js";
+import type { Theme } from "../../design-system/index.js";
+import type { SupportedTokens } from "../../utils/defaultTokens.js";
+import type { SiweAuthOptions } from "../auth/useSiweAuth.js";
 
 export type PayUIOptions = {
   /**
@@ -699,10 +699,7 @@ export type ConnectButtonProps = {
    * />
    * ```
    */
-  onDisconnect?: (info: {
-    wallet: Wallet;
-    account: Account;
-  }) => void;
+  onDisconnect?: (info: { wallet: Wallet; account: Account }) => void;
 
   /**
    * Configure options for WalletConnect