Create wallet button

For the best onboarding experience, we recommend adding a highly visible 'Create' or 'Create Wallet' button to your app's homepage. Adding this button streamlines the onboarding experience for new users and gets them ready to use your app in a few seconds.

Here is an example of how the button looks:

Implementation with Wagmi#

To make these instructions concrete, we have created a sample ecosystem wallet called Rapidfire ID. To interact with it, you can find its SDK in the NPM package directory: @rapidfire/id.

You can check out the GitHub repository for Rapidfire Wallet to learn how to create your own wallet.

Using Wagmi offers a balanced approach that combines flexibility with developer convenience. By integrating the ecosystem wallet with Wagmi, you get access to a comprehensive set of React hooks that handle common wallet operations, state management, and chain interactions. This approach requires both @rapidfire/id and Wagmi dependencies, along with React Query, but provides a more structured development experience. While you'll still need to build your own UI components, Wagmi's hooks significantly reduce the complexity of handling wallet connections, transactions, and chain switching.

Configure Wagmi

First, set up your Wagmi configuration with the required chain and connector settings.

wagmi.ts

import { http, createConfig } from 'wagmi';
import { polygonAmoy } from 'wagmi/chains';
import { injected } from 'wagmi/connectors';
export const config = createConfig({
  chains: [polygonAmoy],
  connectors: [
    injected(),
  ],
  transports: {
    [polygonAmoy.id]: http(),
  },
});
declare module 'wagmi' {
  interface Register {
    config: typeof config;
  }
}

Create the Wallet Logo Component

Create a reusable wallet logo component that will be used in the button.

WalletLogo.tsx

import React from 'react';
const defaultContainerStyles = {
  paddingTop: 2,
  display: 'flex',
  alignItems: 'center',
};
export function WalletLogo({
  size = 24,
  containerStyles = defaultContainerStyles,
}) {
  return (
    <div style={containerStyles}>
      <svg
        width={size}
        height={size}
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <rect
          x="2"
          y="4"
          width="20"
          height="16"
          rx="3"
          stroke="currentColor"
          strokeWidth="2"
        />
        <path
          d="M16 12C16 10.8954 16.8954 10 18 10H22V14H18C16.8954 14 16 13.1046 16 12Z"
          fill="currentColor"
        />
        <circle cx="12" cy="12" r="2" fill="currentColor" />
      </svg>
    </div>
  );
}

Implement the Create Wallet Button

Create the main button component using Wagmi's useConnect hook.

CreateWalletButton.tsx

import React, { useCallback } from 'react';
import { useConnect } from 'wagmi';
import { WalletLogo } from './WalletLogo';
const buttonStyles = {
  background: 'linear-gradient(135deg, #2D3436 0%, #000000 100%)',
  border: '1px solid rgba(255, 255, 255, 0.1)',
  boxSizing: 'border-box' as const,
  display: 'flex',
  alignItems: 'center',
  gap: '12px',
  width: 'auto',
  minWidth: '200px',
  fontFamily: 'Inter, system-ui, sans-serif',
  fontWeight: '600',
  fontSize: '16px',
  color: '#FFFFFF',
  padding: '12px 20px',
  borderRadius: '12px',
  cursor: 'pointer',
  transition: 'all 0.2s ease-in-out',
  boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
  ':hover': {
    transform: 'translateY(-1px)',
    boxShadow: '0 6px 8px -1px rgba(0, 0, 0, 0.1), 0 4px 6px -1px rgba(0, 0, 0, 0.06)',
  },
};
export function CreateWalletButton() {
  const { connectors, connect, data } = useConnect();
  const createWallet = useCallback(() => {
    const injectedConnector = connectors.find(
      (connector) => connector.id === 'injected'
    );
    if (injectedConnector) {
      connect({ connector: injectedConnector });
    }
  }, [connectors, connect]);
  return (
    <button style={buttonStyles} onClick={createWallet}>
      <WalletLogo />
      Create Wallet
    </button>
  );
}

Notes

For more detail, view the useConnect documentation. Upon successful connection, account information can be accessed via data returned from useConnect, or via useAccount.

Implementation with EIP-1193 Provider#

The EIP-1193 Provider approach gives you the most granular control over your ecosystem wallet integration by directly using the SDK's Ethereum provider. This method requires only the @rapidfire/id package and allows you to build everything from scratch. You'll handle all wallet interactions through the standard EIP-1193 provider interface, giving you complete flexibility in implementing wallet creation, connection flows, and transaction handling. While this approach requires more custom development work, it's ideal for applications that need specialized wallet interactions or want to minimize dependencies.

To make these instructions concrete, we have created a sample ecosystem wallet called Rapidfire ID. To interact with it, you can find its SDK in the NPM package directory: @rapidfire/id.

You can check out the GitHub repository for Rapidfire Wallet to learn how to create your own wallet.

Initialize the SDK

Create a new SDK instance with your application configuration.

sdk.ts

import EcosystemWallet from '@rapidfire/id';
// Initialize the SDK with required parameters
export const sdk = new EcosystemWallet({
  appChainIds: [80002],
  appLogoUrl: 'https://a.rgbimg.com/users/b/ba/barunpatro/600/mf6B5Gq.jpg',
  appName: 'Example App',
});

Set up the Provider

Configure the Ethereum provider with chain and policy settings.

Make sure to set up your NEXT_PUBLIC_POLICY_ID in your environment variables.

provider.ts

import { sdk } from './sdk';
// Configure the provider with chain and policy
export const provider = sdk.getEthereumProvider({
  policy: process.env.NEXT_PUBLIC_POLICY_ID
});

Implement the Create Wallet Button

Create the button component that uses the configured provider.

CreateWalletButton.tsx

import React, { useCallback } from 'react';
import { WalletLogo } from './WalletLogo';
import { provider } from './provider';
const buttonStyles = {
  background: 'linear-gradient(135deg, #2D3436 0%, #000000 100%)',
  border: '1px solid rgba(255, 255, 255, 0.1)',
  boxSizing: 'border-box' as const,
  display: 'flex',
  alignItems: 'center',
  gap: '12px',
  width: 'auto',
  minWidth: '200px',
  fontFamily: 'Inter, system-ui, sans-serif',
  fontWeight: '600',
  fontSize: '16px',
  color: '#FFFFFF',
  padding: '12px 20px',
  borderRadius: '12px',
  cursor: 'pointer',
  transition: 'all 0.2s ease-in-out',
  boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
  ':hover': {
    transform: 'translateY(-1px)',
    boxShadow: '0 6px 8px -1px rgba(0, 0, 0, 0.1), 0 4px 6px -1px rgba(0, 0, 0, 0.06)',
  },
};
export function CreateWalletButton({ handleSuccess, handleError }) {
  const createWallet = useCallback(async () => {
    try {
      const [address] = await provider.request({
        method: 'eth_requestAccounts',
      });
      handleSuccess(address);
    } catch (error) {
      handleError(error);
    }
  }, [handleSuccess, handleError]);
  return (
    <button style={buttonStyles} onClick={createWallet}>
      <WalletLogo />
      Create Wallet
    </button>
  );
}