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 Modal Example Apps to see how wagmi works with Web3Auth.

note

This version of wagmi connector is made for @wagmi/core v2.6.5.

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

Arguments

Web3AuthConnectorParams

ParameterDescription
web3AuthInstancePass the Web3Auth instance here. It's the mandatory field and accepts IWeb3Auth or IWeb3AuthModal.
loginParams?Login Parameters (only meant while using the @web3auth/no-modal package). It accepts OpenloginLoginParams.
modalConfig?Initialisation Parameters (only meant while using the @web3auth/modal package). It accepts Record<WALLET_ADAPTER_TYPE, ModalConfig>.
modalConfig

modalConfig: { ADAPTER : { params } }

ParameterDescription
labelLabel of the adapter you want to configure. It's a mandatory field which accepts string.
showOnModal?Whether to show an adapter in modal or not. Default value is true.
showOnDesktop?Whether to show an adapter in desktop or not. Default value is true.
showOnMobile?Whether to show an adapter in mobile or not. Default value is true.

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

ParameterDescription
loginMethods?To configure visibility of each social login method for the auth adapter. It accepts LoginMethodConfig as a value.

loginMethods: { label: { params } }

In loginMethods, you can configure the visibility of each social login method for the auth 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

ParameterDescription
name?Display Name. It accepts string as a value.
description?Description for the button. If provided, it renders as a full length button. else, icon button. It accepts string as a value.
logoHover?Logo to be shown on mouse hover. It accepts string as a value.
logoLight?Light logo for dark background. It accepts string as a value.
logoDark?Dark logo for light background. It accepts string as a value.
mainOption?Show login button on the main list. It accepts oolean as a value. Default value is false.
showOnModal?Whether to show the login button on modal or not. Default value is true.
showOnDesktop?Whether to show the login button on desktop. Default value is true.
showOnMobile?Whether to show the login button on mobile. Default value is true.

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 initialize 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.

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.AUTH]: {
loginMethods: {
google: {
name: "google login",
logoDark: "url to your custom logo which will shown in dark mode",
},
facebook: {...},
},
},
}

Example

No Modal SDK

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.

warning

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',
}

Examples