DOCS

Connecting Wallets

There are two ways you connect user's wallet to your application using thirdweb's React Native SDK

1. ConnectWallet component

ConnectWallet component renders a button which when clicked opens a modal to allow users to connect to wallets specified in the ThirdwebProvider's supportedWallets prop.

If supportedWallets is not configured in the ThirdwebProvider, the ConnectWallet Modal shows the below shown default wallets:

import {
  ThirdwebProvider,
  ConnectWallet,
  // import the wallets you want
  metamaskWallet,
  walletConnect,
} from "@thirdweb-dev/react-native";

// wrap your App with ThirdwebProvider and set supportedWallets prop

function App() {
  return (
    <ThirdwebProvider
      supportedWallets={[metamaskWallet(), walletConnect()]}
      activeChain="mumbai"
      clientId="your-client-id"
    >
      <Main />
    </ThirdwebProvider>
  );
}

// render ConnectWallet component in your App - that's it!

function Main() {
  return <ConnectWallet />;
}

2. Create a custom UI to connect wallet

Connecting a wallet involves a few steps:

  • Create a wallet instance
  • Call the connect method on the wallet instance
  • Set the connected wallet instance as "connected wallet"

If you just want to connect a wallet as mentioned above - there's a simple way to do it using the useConnect hook which does all the above steps for you.

But if you need to create wallet instance and call some methods on the wallet instance before connecting the wallet, you can do these steps manually as shown below using the useCreateWalletInstance, useSetConnectionStatus and useSetConnectedWallet hooks.

Once the wallet is connected, you can use React Native SDK's 100+ hooks to show connected wallet's Details, send transactions, interact with smart contracts, sign messages and utilize common standards such as tokens, NFTs, marketplaces; all with built-in caching, RPC URLs, IPFS gateways, and more!

Here is a list of few hooks that will be useful when creating custom UI

HookDescription
useAddressget connected wallet's account address
useDisconnectdisconnect the connected wallet
useWalletget connected wallet instance
useWalletConfigget connected wallet's config
useConnectionStatusget status of wallet connection