Web3 Wallet Libraries

RainbowKit

You can guide your partners to add your wallet as a recommended wallet in their app. To do so, they will create a custom connector, as described below, which will should your wallet. When clicked, the wallet will render a QR code, which will work with Dynamic’s QR scanning feature.

Step 1: Import connectorsForWallets and getWalletConnectConnector

import { RainbowKitProvider, connectorsForWallets, Wallet, getWalletConnectConnector, darkTheme } from '@rainbow-me/rainbowkit';

Step 2: Create a custom connector

export interface MyWalletOptions {
  projectId: string;
}

export const legionkey = ({ projectId }: MyWalletOptions): Wallet => ({
  id: 'legion-key',
  name: 'LegionKey',
  iconUrl: './images/legion-key.png',
  iconBackground: '#985d3c',

  mobile: {
    getUri: (uri: string) => uri,
  },
  qrCode: {
    getUri: (uri: string) => uri,
    instructions: {
      learnMoreUrl: 'https://my-wallet/learn-more',
      steps: [
        {
          description:
            'We recommend putting My Wallet on your home screen for faster access to your wallet.',
          step: 'install',
          title: 'Open the My Wallet app',
        },
        {
          description:
            'After you scan, a connection prompt will appear for you to connect your wallet.',
          step: 'scan',
          title: 'Tap the scan button',
        },
      ],
    },
  },
  extension: {
    instructions: {
      learnMoreUrl: 'https://my-wallet/learn-more',
      steps: [
        {
          description:
            'We recommend pinning My Wallet to your taskbar for quicker access to your wallet.',
          step: 'install',
          title: 'Install the My Wallet extension',
        },
        {
          description:
            'Be sure to back up your wallet using a secure method. Never share your secret phrase with anyone.',
          step: 'create',
          title: 'Create or Import a Wallet',
        },
        {
          description:
            'Once you set up your wallet, click below to refresh the browser and load up the extension.',
          step: 'refresh',
          title: 'Refresh your browser',
        },
      ],
    },
  },
  createConnector: getWalletConnectConnector({ projectId }),
});

Step 3: Config the connectors

const connectors = connectorsForWallets(
  [
    {
      groupName: 'Recommended',
      wallets: [legionkey],
    },
    {
      groupName: 'Common',
      wallets: [rainbowWallet, walletConnectWallet],
    },
  ],
  {
    appName: 'My RainbowKit App',
    projectId: 'YOUR_PROJECT_ID',
  }
);

Step 4: Add to the Rainbowkit Configuration

const config = createConfig({
  connectors,
  ...
});

ReOwn AppKit (formally WalletConnect)

To integrate ReOwn AppKit (formally WalletConnect), follow these steps to submit your wallet as an official wallet into the ReOwn ecosystem:

Step 1: Create an account on reown.com

• Visit reown.com and sign up for a new account if you don’t already have one.
• Verify your email address and complete the account setup process.

Step 2: Create a new walletKit project

• Log in to your ReOwn account.
• Navigate to the dashboard and look for the option to create a new walletKit project.
• Fill in the required information about your wallet, including its name, description, and supported networks.

Step 3: Submit your wallet for review

• Once your walletKit project is set up, you’ll need to submit your wallet for review.
• Provide all necessary documentation, including your wallet’s features, security measures, and any other relevant information.
• Ensure that your wallet meets all of ReOwn’s guidelines and requirements for official wallets.

Step 4: Once approved, it will show up in any AppKit list

• After submission, the ReOwn team will review your wallet.
• When approved, your wallet will be added to the official ReOwn ecosystem.
• It will then appear in AppKit lists, making it easily discoverable for users across various dApps that implement ReOwn AppKit.
• Edit the WalletKit project ID in the Dynamic Dashboard here.

By following these steps, you’ll integrate your wallet with ReOwn AppKit, increasing its visibility and accessibility within the ReOwn ecosystem.