Skip to main content

Wagmi Connector for Web3Auth PnP Web SDKs

@web3auth/web3auth-wagmi-connector​

wagmi is a collection of React Hooks containing everything you need to start working with Ethereum. @web3auth/web3auth-wagmi-connector is a connector for the popular wagmi library to help you integrate web3auth plug and play packages. It works with both the @web3auth/no-modal as well as the @web3auth/modal packages.

This package can be used to initialize a wagmi client that will seamlessly manage the interaction(wallet connection state and configuration, such as: auto-connection, connectors, and ethers providers) of your dApp with Web3Auth.

DEMO

Checkout the example apps to see how wagmi works with Web3Auth.

note

The latest version of wagmi connector is made for @wagmi/core version 1.0.1. It supports the viem integration with wagmi.

Installation​

npm install --save @web3auth/web3auth-wagmi-connector

Initialization​

Import the Web3AuthConnector class from @web3auth/web3auth-wagmi-connector​

import { Web3AuthConnector } from "@web3auth/web3auth-wagmi-connector";

Assign the Web3AuthConnector class to a variable​

const connector = new Web3AuthConnector(chains?, options);

Arguments​

web3AuthOptions: Options​

Parametertypedescription
web3AuthInstanceIWeb3Auth or IWeb3AuthModalPass the Web3Auth instance here
loginParams?OpenloginLoginParamsLogin Parameters (only meant while using the @web3auth/no-modal package)
modalConfig?Record<WALLET_ADAPTER_TYPE, ModalConfig>Initialisation Parameters (only meant while using the @web3auth/modal package)
modalConfig​

modalConfig: { ADAPTER : { params } }

ParameterTypeDescriptionDefaultMandatory
labelstringLabel of the adapter you want to configureNA - identifier for corresponding adapterYes
showOnModal?booleanWhether to show an adapter in modal or not.trueNo
showOnDesktop?booleanWhether to show an adapter in desktop or not.trueNo
showOnMobile?booleanWhether to show an adapter in mobile or not.trueNo

Additionally, to configure the Openlogin Adapter's each login method, we have the loginMethods? parameter.

ParameterTypeDescriptionDefaultMandatory
loginMethods?LoginMethodConfigTo configure visibility of each social login method for the openlogin adapter.Default LoginMethod for each social loginNo

loginMethods: { label: { params } }

In loginMethods, you can configure the visibility of each social login method for the openlogin adapter. The social login is corresponded by the label parameter. Below is the table indicating the different params available for customization.

For labels you can choose between these options: google, facebook, twitter, reddit, discord, twitch, apple, line, github, kakao, linkedin, weibo, wechat, email_passwordless

params

ParameterTypeDescriptionDefaultMandatory
namestringDisplay NameDefault for Openlogin AppNo
description?stringDescription for button. If provided, it renders as a full length button. else, icon buttonJust an icon renderedNo
logoHover?stringLogo to be shown on mouse hoverweb3auth-logo.svgNo
logoLight?stringLogo to be shown on dark background (dark theme)web3auth-logo.svgNo
logoDark?stringLogo to be shown on light background (light theme)web3auth-logo.svgNo
mainOption?booleanShow login button on the main listDefault for Openlogin AppNo
showOnModal?stringWhether to show the login button on modal or notDefault for Openlogin AppNo
showOnDesktop?stringWhether to show the login button on desktopDefault for Openlogin AppNo
showOnMobile?stringWhether to show the login button on mobileDefault for Openlogin AppNo

Usage​

Since this package acts like a connector, it basically takes in your whole Web3Auth instance and makes it readable for the wagmi library. While connecting the web3auth web packages, you need to initialise the Web3Auth Instance as mentioned in the modal docs and no-modal docs. You can configure this instance with all the options available in Web3Auth Modal package and set it up as you wish.

const name = "My App Name";
const iconUrl = "https://web3auth.io/docs/contents/logo-ethereum.png";
const chainConfig = {
    chainNamespace: CHAIN_NAMESPACES.EIP155,
    chainId: "0x"+chains[0].id.toString(16),
    rpcTarget: chains[0].rpcUrls.default.http[0], // This is the public RPC we have added, please pass on your own endpoint while creating an app
    displayName: chains[0].name,
    tickerName: chains[0].nativeCurrency?.name,
    ticker: chains[0].nativeCurrency?.symbol,
    blockExplorer: chains[0].blockExplorers?.default.url[0] as string,
};
// set up your web3auth instance with all the features you want
const web3AuthInstance = new Web3Auth({
  clientId: "YOUR_CLIENT_ID",
  chainConfig,
  // optional - add whitelabel config
  uiConfig: {...},
  web3AuthNetwork: "sapphire_mainnet",
});

// Optional - Add openlogin adapter for customisations
const privateKeyProvider = new EthereumPrivateKeyProvider({ config: { chainConfig } });
const openloginAdapterInstance = new OpenloginAdapter({
  privateKeyProvider,
  adapterSettings: {...},
  loginSettings: {...},
});
web3AuthInstance.configureAdapter(openloginAdapterInstance);

// Optional - Add Torus Wallet Plugin
const torusPlugin = new TorusWalletConnectorPlugin({...});
web3AuthInstance.addPlugin(torusPlugin);

While all the parameters can be passed directly to the instance, the only parameters that remain during the initialisation remains (passed on to the initModal() function). You can pass these parameters to the modalConfig object in the Web3AuthConnector class.

modalConfig: {
  [WALLET_ADAPTERS.OPENLOGIN]: {
    loginMethods: {
      google: {
        name: "google login",
        logoDark: "url to your custom logo which will shown in dark mode",
      },
      facebook: {...},
    },
  },
}

No Modal SDK​

const name = "My App Name";
const iconUrl = "https://web3auth.io/docs/contents/logo-ethereum.png";
const chainConfig = {
    chainNamespace: CHAIN_NAMESPACES.EIP155,
    chainId: "0x"+chains[0].id.toString(16),
    rpcTarget: chains[0].rpcUrls.default.http[0], // This is the public RPC we have added, please pass on your own endpoint while creating an app
    displayName: chains[0].name,
    tickerName: chains[0].nativeCurrency?.name,
    ticker: chains[0].nativeCurrency?.symbol,
    blockExplorer: chains[0].blockExplorers?.default.url[0] as string,
};
// set up your web3auth instance with all the features you want
const web3AuthInstance = new Web3AuthNoModal({
  clientId: "YOUR_CLIENT_ID",
  chainConfig,
  // optional - add whitelabel config
  uiConfig: {...},
  web3AuthNetwork: "sapphire_mainnet",
});

// Mandatory - Add openlogin adapter
const privateKeyProvider = new EthereumPrivateKeyProvider({ config: { chainConfig } });
const openloginAdapterInstance = new OpenloginAdapter({
  privateKeyProvider,
  adapterSettings: {...},
  loginSettings: {...},
});
web3AuthInstance.configureAdapter(openloginAdapterInstance);

// Optional - Add Torus Wallet Plugin
const torusPlugin = new TorusWalletConnectorPlugin({...});
web3AuthInstance.addPlugin(torusPlugin);

While all the parameters can be passed directly to the instance, the only parameters that remain during the login remains (passed on to the connectTo() function). You can pass these parameters to the loginParams object in the Web3AuthConnector class.

caution

It is mandatory to pass loginParams object while using the connector with Web3Auth Core package. This is because the connectTo() function requires params to connect to the adapter/ social login desired by the user.

loginParams: {
  loginProvider: 'google',
}

Example​

Here are a few examples of a wagmi client using both the Web3AuthConnector and the default InjectedConnector respectively.

examples

Checkout the various examples made for the wagmi connector using various UI Kits for better integration and user experience

import { Web3AuthConnector } from "@web3auth/web3auth-wagmi-connector";
import { Web3Auth } from "@web3auth/modal";
import { createConfig, WagmiConfig, configureChains } from "wagmi";
import { InjectedConnector } from "wagmi/connectors/injected";
import { publicProvider } from "wagmi/providers/public";

// Configure chains & providers with the Alchemy provider.
// Popular providers are Alchemy (alchemy.com), Infura (infura.io), Quicknode (quicknode.com) etc.
const { chains, publicClient, webSocketPublicClient } = configureChains([mainnet, arbitrum, polygon], [publicProvider()]);

// Instantiating Web3Auth
const web3AuthInstance = new Web3Auth({
  clientId: "YOUR_CLIENT_ID",
  chainConfig: {
    chainNamespace: CHAIN_NAMESPACES.EIP155,
    chainId: "0x" + chains[0].id.toString(16),
    rpcTarget: chains[0].rpcUrls.default, // This is the public RPC we have added, please pass on your own endpoint while creating an app
    displayName: chains[0].name,
    tickerName: chains[0].nativeCurrency?.name,
    ticker: chains[0].nativeCurrency?.symbol,
    blockExplorer: chains[0]?.blockExplorers.default?.url,
  },
  web3AuthNetwork: "sapphire_mainnet",
});

const wagmiConfig = createConfig({
  autoConnect: true,
  connectors: [
    new Web3AuthConnector({
      chains,
      options: {
        web3AuthInstance,
      },
    }),
    new InjectedConnector({
      chains,
      options: {
        name: "Injected",
        shimDisconnect: true,
      },
    }),
  ],
  publicClient,
  webSocketPublicClient,
});

No Modal SDK​

import { Web3AuthConnector } from "@web3auth/web3auth-wagmi-connector";
import { Web3AuthNoModal } from "@web3auth/no-modal";
import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
import { OpenloginAdapter } from "@web3auth/openlogin-adapter";
import { createConfig, WagmiConfig, configureChains } from "wagmi";
import { InjectedConnector } from "wagmi/connectors/injected";
import { publicProvider } from "wagmi/providers/public";

// Configure chains & providers with the Alchemy provider.
// Popular providers are Alchemy (alchemy.com), Infura (infura.io), Quicknode (quicknode.com) etc.
const { chains, publicClient, webSocketPublicClient } = configureChains([mainnet, arbitrum, polygon], [publicProvider()]);
// Instantiating Web3Auth
const web3AuthInstance = new Web3AuthNoModal({
  clientId: "YOUR_CLIENT_ID",
  web3AuthNetwork: "sapphire_mainnet",
  chainConfig: {
    chainNamespace: CHAIN_NAMESPACES.EIP155,
    chainId: "0x" + chains[0].id.toString(16),
    rpcTarget: chains[0].rpcUrls.default.http[0], // This is the public RPC we have added, please pass on your own endpoint while creating an app
    displayName: chains[0].name,
    tickerName: chains[0].nativeCurrency?.name,
    ticker: chains[0].nativeCurrency?.symbol,
    blockExplorer: chains[0]?.blockExplorers.default?.url,
  },
});

// Add openlogin adapter
const privateKeyProvider = new EthereumPrivateKeyProvider({ config: { chainConfig } });
const openloginAdapterInstance = new OpenloginAdapter({
  privateKeyProvider,
  adapterSettings: {
    network: "sapphire_mainnet",
    uxMode: "popup",
  },
});
web3AuthInstance.configureAdapter(openloginAdapterInstance);

const wagmiConfig = createConfig({
  autoConnect: true,
  connectors: [
    new Web3AuthConnector({
      chains,
      options: {
        web3AuthInstance,
        loginParams: {
          loginProvider: "google",
        },
      },
    }),
    new InjectedConnector({
      chains,
      options: {
        name: "Injected",
        shimDisconnect: true,
      },
    }),
  ],
  publicClient,
  webSocketPublicClient,
});