embeddedWallet

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

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

  • 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>