# Wagmi setup with global wallet

The following is a quick and easy implementation for getting started with [Wagmi](https://wagmi.sh/) template and the global wallet of choice.

:::warning
To make these instructions concrete, we have created a sample global wallet called **Rapidfire ID**. To interact with it, you can find its SDK in the NPM package directory: [@rapidfire/id](https://www.npmjs.com/package/@rapidfire/id).

You can check out the GitHub [repository for Rapidfire Wallet](https://github.com/openfort-xyz/ecosystem-sample) to learn how to create your own wallet.
:::

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

:::tip
If you need a template or scaffold to start with, you can check out the [Rapidfire Wagmi Example](https://github.com/openfort-xyz/ecosystem-sample/tree/main/usage-examples/wagmi-nextjs).
:::

## Installation

After creating a new Next.js project, install the required dependencies:

```bash
npm install wagmi viem @rapidfire/id
```

:::information
You can also use the command line `npm create wagmi@latest` to create a new full Wagmi project.
:::

## Configuration

::::steps
### Configure Wagmi with Smart Wallet

Update the Wagmi configuration file, set up `baseSepolia` as the primary chain, and configure wallet connector with injected wallet preference.

```ts [wagmi.ts]
import { http, createConfig } from 'wagmi';
import { baseSepolia } from 'wagmi/chains';
import { injected } from 'wagmi/connectors';

export const config = createConfig({
  chains: [baseSepolia],
  connectors: [
    injected(),
  ],
  transports: {
    [baseSepolia.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.

:::code-group
```tsx [app.tsx]
import { useEffect } from 'react'
import { WagmiProvider } from 'wagmi'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { config } from './wagmi'
import { sdk } from './config'

const queryClient = new QueryClient()

function App() {
  useEffect(() => {
    sdk.getEthereumProvider();
  }, []);
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        {children}
      </QueryClientProvider>
    </WagmiProvider>
  )
}
```

```ts [config.ts]
import EcosystemWallet from '@rapidfire/id'

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

### Keep building

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