react-native fixes

packages/react-core/src/core/types/wallet.ts

@@ -18,9 +18,9 @@ export type WalletOptions = {
 
 export type WalletInstance = InstanceType<typeof AbstractBrowserWallet>;
 
-export type WalletClass<INS extends WalletInstance = WalletInstance> = {
+export type WalletClass<I extends WalletInstance = WalletInstance> = {
   id: string;
-  new (options: WalletOptions): INS;
+  new (options: WalletOptions): I;
   meta: (typeof AbstractBrowserWallet)["meta"];
 };
 

packages/react-native/src/evm/components/Web3Button.tsx

@@ -141,6 +141,7 @@ export const Web3Button = <TAction extends ActionFn>({
       content = "Switch Network";
     } else if (
       actionMutation.isLoading ||
+      !contract ||
       connectionStatus === "connecting" ||
       connectionStatus === "unknown"
     ) {

packages/react-native/src/evm/index.ts

@@ -1,9 +1,7 @@
-export { CoinbaseWallet } from "./wallets/wallets/coinbase-wallet";
-export {
-  MetaMaskWallet,
-  RainbowWallet,
-  TrustWallet,
-} from "./wallets/wallets/all";
+export { CoinbaseWallet, coinbaseWallet } from "./wallets/wallets/coinbase-wallet";
+export { MetaMaskWallet, metamaskWallet } from "./wallets/wallets/metamask-wallet";
+export { RainbowWallet, rainbowWallet } from "./wallets/wallets/rainbow-wallet";
+export { TrustWallet, trustWallet } from "./wallets/wallets/trust-wallet";
 
 export { ConnectWallet } from "./components/ConnectWallet";
 export { Web3Button } from "./components/Web3Button";

packages/react-native/src/evm/providers/thirdweb-provider.tsx

@@ -8,7 +8,7 @@ import {
 } from "@thirdweb-dev/react-core";
 import { PropsWithChildren } from "react";
 import type { Chain, defaultChains } from "@thirdweb-dev/chains";
-import { metamaskWallet } from "../wallets/wallets/all";
+import { metamaskWallet } from "../wallets/wallets/metamask-wallet";
 
 const DEFAULT_WALLETS = [metamaskWallet(), coinbaseWallet()];
 

packages/react-native/src/evm/wallets/wallets/metamask-wallet.ts

@@ -0,0 +1,67 @@
+import { WalletOptions, WalletConnectV1Options, WalletConnectV1 } from "@thirdweb-dev/wallets";
+import { formatDisplayUri } from "../../utils/uri";
+import { Linking } from "react-native";
+import {
+    WalletOptions as WalletOptionsRC,
+    Wallet,
+    ExtraCoreWalletOptions
+  } from "@thirdweb-dev/react-core";
+import { createAsyncLocalStorage } from "../../../core/AsyncStorage";
+
+type WC1Options = Omit<
+  WalletOptions<WalletConnectV1Options>,
+  "qrcode" | "walletStorage"
+> &
+  ExtraCoreWalletOptions;
+
+export class MetaMaskWallet extends WalletConnectV1 {
+  static id = "metamask" as const;
+  static meta = {
+    id: "metamask",
+    name: "MetaMask",
+    iconURL:
+      "https://registry.walletconnect.org/v2/logo/md/5195e9db-94d8-4579-6f11-ef553be95100",
+    links: {
+      native: "metamask:",
+      universal: "https://metamask.app.link",
+    },
+  };
+
+  constructor(options: WC1Options) {
+    const storage = createAsyncLocalStorage("metamask");
+    super({
+      ...options,
+      walletId: "metamask",
+      walletStorage: storage,
+      qrcode: false,
+    });
+
+    this.on("open_wallet", this._onWCOpenWallet);
+
+    this.on("disconnect", () => {
+      this.removeListener("open_wallet", this._onWCOpenWallet);
+    });
+  }
+
+  _onWCOpenWallet(uri?: string) {
+    const links = MetaMaskWallet.meta.links;
+
+    if (uri) {
+      const fullUrl = formatDisplayUri(uri, links);
+
+      Linking.openURL(fullUrl);
+    } else {
+      const fullUrl = formatDisplayUri("", links);
+
+      Linking.openURL(fullUrl);
+    }
+  }
+}
+
+export const metamaskWallet = () => {
+  return {
+    id: MetaMaskWallet.id,
+    meta: MetaMaskWallet.meta,
+    create: (options: WalletOptionsRC) => new MetaMaskWallet(options),
+  } satisfies Wallet;
+};

packages/react-native/src/evm/wallets/wallets/rainbow-wallet.ts

@@ -0,0 +1,66 @@
+import { WalletOptions, WalletConnectV1Options, WalletConnectV1 } from "@thirdweb-dev/wallets";
+import { formatDisplayUri } from "../../utils/uri";
+import { Linking } from "react-native";
+import {
+    WalletOptions as WalletOptionsRC,
+    Wallet,
+    ExtraCoreWalletOptions
+  } from "@thirdweb-dev/react-core";
+import { createAsyncLocalStorage } from "../../../core/AsyncStorage";
+
+type WC1Options = Omit<
+  WalletOptions<WalletConnectV1Options>,
+  "qrcode" | "walletStorage"
+> &
+  ExtraCoreWalletOptions;
+
+export class RainbowWallet extends WalletConnectV1 {
+    static id = "rainbow" as const;
+    static meta = {
+      id: "rainbow",
+      name: "Rainbow",
+      iconURL:
+        "https://registry.walletconnect.org/v2/logo/md/7a33d7f1-3d12-4b5c-f3ee-5cd83cb1b500",
+      links: {
+        native: "rainbow:",
+        universal: "https://rnbwapp.com",
+      },
+    };
+
+    constructor(options: WC1Options) {
+      const storage = createAsyncLocalStorage("rainbow");
+      super({
+        ...options,
+        walletId: "rainbow",
+        walletStorage: storage,
+        qrcode: false,
+      });
+      this.on("open_wallet", this._onWCOpenWallet);
+
+      this.on("disconnect", () => {
+        this.removeListener("open_wallet", this._onWCOpenWallet);
+      });
+    }
+
+    _onWCOpenWallet(uri?: string) {
+      const links = RainbowWallet.meta.links;
+
+      if (uri) {
+        const fullUrl = formatDisplayUri(uri, links);
+
+        Linking.openURL(fullUrl);
+      } else {
+        const fullUrl = formatDisplayUri("", links);
+
+        Linking.openURL(fullUrl);
+      }
+    }
+  }
+
+  export const rainbowWallet = () => {
+    return {
+      id: RainbowWallet.id,
+      meta: RainbowWallet.meta,
+      create: (options: WalletOptionsRC) => new RainbowWallet(options),
+    } satisfies Wallet;
+  };