Integrating with wagmi

Wagmi is a collection of React hooks for Ethereum, making it easy to interact with wallets and smart contracts. Okto provides seamless integration with Wagmi through its adapter package, allowing you to add social login options via Okto to your existing Wagmi application.

This guide shows how to add Okto wallet support to an existing wagmi application, enabling social login options for your users.

If you're starting from scratch, you have two options:

Installation

Install the Okto wagmi adapter package and other dependencies:

npm i @okto_web3/wagmi-adapter wagmi @tanstack/react-query

Configure Wagmi

Create a configuration file to set up wagmi with the Okto connector:

wagmi.config.ts
import { okto } from '@okto_web3/wagmi-adapter';
import { cookieStorage, createConfig, createStorage, http } from 'wagmi';
import { mainnet, optimism, polygon } from 'wagmi/chains';
 
export function getConfig() {
  return createConfig({
    chains: [polygon],
    connectors: [
      okto({
        environment: 'sandbox',
        clientPrivateKey: '0xprivatekey',
        clientSWA: '0xswa',
        googleClientId: 'xxx',
      }),
    ],
    storage: createStorage({
      storage: cookieStorage,
    }),
    ssr: true,
    transports: {
      [polygon.id]: http(),
    },
  });
}
 
declare module 'wagmi' {
  interface Register {
    config: ReturnType<typeof getConfig>;
  }
}

Okto Configuration Parameters

ParameterDescriptionTypeRequired
environmentEnvironment to use for the SDK'sandbox' | 'production'Yes
clientPrivateKeyYour client private keystringYes
clientSWAYour client SWAstringYes
googleClientIdYour Google client IDstringYes

Set Up Providers

Update your app's root component to include the necessary providers:

providers.tsx
import { headers } from 'next/headers';
import { useState } from 'react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import type { ReactNode } from 'react';
import { WagmiProvider, cookieToInitialState } from 'wagmi';
import { getConfig } from '../wagmi';
 
export default async function RootLayout(props: { children: ReactNode }) {
  const initialState = cookieToInitialState(
    getConfig(),
    (await headers()).get('cookie'),
  );
 
  const [config] = useState(() => getConfig());
  const [queryClient] = useState(() => new QueryClient());
 
  return (
    <html lang="en">
      <head>
        <script src="https://accounts.google.com/gsi/client" async defer />
      </head>
      <body>
        <WagmiProvider config={config} initialState={initialState}>
          <QueryClientProvider client={queryClient}>
            {props.children}
          </QueryClientProvider>
        </WagmiProvider>
      </body>
    </html>
  );
}

Note

Make sure to add the Google Sign-In script to your HTML head for authentication:

<script src="https://accounts.google.com/gsi/client" async defer />

Usage with wagmi Hooks

Once configured, you can use wagmi hooks to offer Okto social login to your users:

import { useAccount, useConnect, useDisconnect } from 'wagmi';
 
function WalletConnection() {
  const { address, isConnected } = useAccount();
  const { connect, connectors } = useConnect();
  const { disconnect } = useDisconnect();
 
  if (isConnected) {
    return (
      <div>
        Connected to {address}
        <button onClick={() => disconnect()}>Disconnect</button>
      </div>
    );
  }
 
  return (
    <div>
      {connectors.map((connector) => (
        <button
          key={connector.id}
          onClick={() => connect({ connector })}
        >
          Connect with {connector.name}
        </button>
      ))}
    </div>
  );
}

On this page