Cross-ecosystem Connectivity
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.
Was this page helpful?