EmbeddedWallet

A wallet configurator for Embedded Wallet (email + Google 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, { ... });

email (optional)

Whether to turn on or off the email login option.

• If set to true (default), an email input text field will be shown on the modal.
• If set to false, the email input text field will not be shown on the modal.

Must be a `boolean`.

```ts
embeddedWallet({
  email: true,
});

oauthOptions (optional)

Whether to show the Sign In with different providers. Right now, only Google is supported.

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 after logging in with Google.

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

embeddedWallet({
  oauthOptions: {
    providers: ["google"],
    redirectUrl: "your.scheme://",
  },
});

Installation

To use the embeddedWallet you need to add the following dependencies to your project:

• amazon-cognito-identity-js: "^6.3.3"

• react-native-quick-base64

• react-native-quick-crypto

• @react-native-community/netinfo

• react-native-inappbrowser-reborn: "^3.7.0" (for Google Sign In)

  • There's an open issue on RN > 0.72: https://github.com/margelo/react-native-quick-crypto/issues/186 which you can fix by adding the following to your android/app/build.gradle file:

    packagingOptions {
        pickFirst 'lib/x86/libcrypto.so'
        pickFirst 'lib/x86_64/libcrypto.so'
        pickFirst 'lib/armeabi-v7a/libcrypto.so'
        pickFirst 'lib/arm64-v8a/libcrypto.so'
    }

  • When building the iOS app in release mode for RN 0.71 you need to enable the OpenSSL framework in XCode. There are several solutions for this here:

    • https://github.com/margelo/react-native-quick-crypto/issues/121#issuecomment-1369924076
    • https://github.com/margelo/react-native-quick-crypto/issues/121#issuecomment-1537576444

• react-native-aes-gcm-crypto

  • This package requires minSdkVersion = 26 on Android

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>