Docs

ConnectEmbed

ConnectEmbed component renders a UI to connect to various wallets. it renders the same UI as the ConnectWallet component's Modal UI. This is really useful for Implementing a "Sign in" / "Welcome" page.

You can start writing code with our React Native Connect Embed template.

Usage

  • Configure supportedWallets in ThirdwebProvider

    To Configure which wallets to show in the ConnectEmbed UI, you need to configure the supportedWallets prop in the ThirdwebProvider component which wraps your entire application.

    To display a Recommended tag below a wallet provider, pass in the recommended: true property in the wallet configurator function.

    import {
      ThirdwebProvider,
      metamaskWallet,
      coinbaseWallet,
      walletConnect,
    } from "@thirdweb-dev/react-native";
     
    function AppWithProviders() {
      return (
        <ThirdwebProvider
          supportedWallets={[
            metamaskWallet({
              recommended: true,
            }),
            coinbaseWallet(),
            walletConnect(),
          ]}
          clientId="<your_client_id>"
        >
          <App />
        </ThirdwebProvider>
      );
    }

    If supportedWallets is not configured in the ThirdwebProvider, the ConnectWallet Modal show the default wallets:

  • Configure ConnectEmbed

    Render the ConnectEmbed component anywhere in your application. Refer to Props to see the configuration options available

    import { ConnectEmbed } from "@thirdweb-dev/react-native";
     
    function Example() {
      return <ConnectEmbed />;
    }

Props

Templates

ConnectEmbed usage in React Native