Wagmi template to create a web app

The following is a quick and easy implementation for getting started with Wagmi template and the ecosystem wallet of choice.

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.

This guide will walk you through integrating the ecosystem wallet Rapidfire ID.

If you need a template or scaffold to start with, you can check out the Rapidfire Wagmi Example.

Create a new Wagmi project

Run the project creation command using your preferred package manager
Follow the CLI prompts to set up your project

terminal

npm create wagmi

Install dependencies and start development server

Install all required dependencies
Start the development server
Your app should now be running on localhost

terminal

npm install @rapidfire/id
npm install
npm run dev

Configure Wagmi with Smart Wallet

Update the Wagmi configuration file.
Set up polygonAmoy as the primary chain.
Configure wallet connector with injected wallet preference.

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;
  }
}

Wrap App in Context Provider

Wrap your app in the WagmiProvider React Context Provider and pass the config you created earlier to the value property.

app.tsx

config.ts

import { WagmiProvider } from 'wagmi'
import { config } from './config'
function App() {
  useEffect(() => {
    config.getEthereumProvider();
  }, []);
  return (
    <WagmiProvider config={config}>
      {/** ... */}
    </WagmiProvider>
  )
}

Keep building

You can find everything you need here: https://wagmi.sh/react/api/hooks