Skip to main content

EmbeddedWallet

A wallet configurator for Embedded Wallet (email or Socials Sign In) which allows integrating the wallet with React Native.

import { embeddedWallet } from "@thirdweb-dev/react-native";

const embeddedWalletConfig = embeddedWallet();
customize (optional)

embeddedWalletConfig contains the default config for metadata and UI. you can optionally choose to override the defaults to customize the wallet. Learn more about these configs

const embeddedWalletConfig = embeddedWallet({ ... });

// override metadata
embeddedWalletConfig.meta.name = "..."; // change the name
embeddedWalletConfig.meta.iconURL = "..."; // change the icon

// override connection UI
embeddedWalletConfig.connectUI = embeddedWalletConnectUI; // react component

// custom selection UI
embeddedWalletConfig.selectUI = embeddedWalletSelectUI; // react component

Once the config is ready, you can use it with ConnectWallet component or useConnect hook as shown below

// add to ThirdwebProvider to add it in ConnectWallet's modal
<ThirdwebProvider supportedWallets={[embeddedWalletConfig]} clientId="your-client-id"/>;

// or use it with useConnect hook
const connect = useConnect();
connect(embeddedWalletConfig, { ... });
authentication options (optional)

Whether to show the Sign In with different providers.

To use this feature you will need to enable the Embedded Wallets service for your clientId in your Dashboard Settings and you will need to allowlist your app's redirectUrl (more on this below).

redirectUrl: The redirectUrl must be a deeplink your app supports. This is going to be used to redirect back from the browser when using socials sign in options (Google, Apple, etc).

We wrote a short guide to help you enable deep links support in your mobile app.

embeddedWallet({
  auth: {
    options: ["email", "google", "apple", "facebook"],
    redirectUrl: "deep-link-to-your-app://",
  },
});
walletConnectReceiver

Enables the wallet to be available to listen for WalletConnect events.

Note that to fully support this there needs to be a UI component to handle WalletConnect uris (wc://) and pass it to the wallet.

Defaults to undefined.

export type WalletConnectReceiverConfig = {
  walletConnectReceiver?:
    | {
        walletConnectWalletMetadata?: WCMetadata;
        walletConnectV2ProjectId?: string;
        walletConnectV2RelayUrl?: string;
      }
    | true;
};
walletConnectV2ProjectId

The WalletConnect V2 projectId. You can get one in the WalletConnect portal.

Defaults to a common projectId set by thirdweb. This should be ok for testing but note that if you want to deploy your mobile app it may make sense to create your own as WalletConnect may throttle traffic coming from the same projectId.

walletConnectV2RelayUrl

Define a custom Relay Server URL. Defaults to "wss://relay.walletconnect.com"

walletConnectWalletMetadata

Metadata that will be displayed in the dApp once your SmartWallet is connected to it.

{
  name: string; // defaults to: "Thirdweb Smart Wallet",
  description: string; // defaults to: "Thirdweb Smart Wallet",
  url: string: // defaults to: "https://thirdweb.com",
  icons: string[]; // defaults to: ["https://thirdweb.com/favicon.ico"],
};

Installation​

To use the embeddedWallet you need to add the following dependencies to your project. Find the command to add them all for convenience below.

yarn:

yarn add amazon-cognito-identity-js@6.3.3 react-native-quick-base64 react-native-quick-crypto react-native-aes-gcm-crypto @react-native-community/netinfo react-native-inappbrowser-reborn@3.7.0

npm:

npm install amazon-cognito-identity-js@6.3.3 react-native-quick-base64 react-native-quick-crypto react-native-aes-gcm-crypto @react-native-community/netinfo react-native-inappbrowser-reborn@3.7.0

Here are the dependencies added:

Usage with ConnectWallet​

To allow users to connect to this wallet using the ConnectWallet component, you can add it to ThirdwebProvider's supportedWallets prop.

<ThirdwebProvider
  clientId="your-client-id"
  supportedWallets={[embeddedWallet()]}
>
  <YourApp />
</ThirdwebProvider>

Usage with useEmbeddedWallet​

You can use the useEmbeddedWallet hook to programmatically connect to the wallet without using the ConnectWallet component.

The wallet also needs to be added in ThirdwebProvider's supportedWallets if you want the wallet to auto-connect on next page load.

The hook will return all the necessary functions you'll need to authenticate and connect to the embedded wallet.

Connecting with Google sign in:

Note that if you want to sign in with Facebook or Apple you'll need pass "apple" or "facebook" to the strategy parameter.

function App() {
  const { connect } = useEmbeddedWallet();

  const handleConnect = async () => {
    await connect({
      strategy: "google",
      redirectUrl: "deep-link-to-your-app://",
    });
  };

  return <View> ... </View>;
}

Connecting with email verification:

function App() {
  const { connect, sendVerificationEmail } = useEmbeddedWallet();

  const preLogin = async (email: string) => {
    // send email verification code
    await sendVerificationEmail({ email });
  };

  const handleLogin = async (email: string, verificationCode: string) => {
    // verify email and connect
    await connect({
      strategy: "email_verification",
      email,
      verificationCode,
    });
  };

  return <View> ... </View>;
}

Available connection strategies​

// email verification
type EmailVerificationAuthParams = {
  strategy: "email_verification";
  email: string;
  verificationCode: string;
  recoveryCode?: string;
};

type SocialAuthParams = {
  strategy: "google" | "apple" | "facebook";
  redirectUrl: string;
};

// bring your own authentication
type JwtAuthParams = {
  strategy: "jwt";
  jwt: string;
  encryptionKey?: string;
};
chainId (optional)

If chainId is provided, wallet will be connected to network with given chainId, else wallet will be connected to the activeChain by default.