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.
Checkout the example apps to see how wagmi works with Web3Auth.
The latest version of wagmi connector is made for @wagmi/core
version 1.0.1
. It supports the viem integration with wagmi.
Installation
- npm
- Yarn
- pnpm
npm install --save @web3auth/web3auth-wagmi-connector
yarn add @web3auth/web3auth-wagmi-connector
pnpm add @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
- Table
- Interface
Parameter | type | description |
---|---|---|
web3AuthInstance | IWeb3Auth or IWeb3AuthModal | Pass the Web3Auth instance here |
loginParams? | OpenloginLoginParams | Login 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) |
export interface Options {
web3AuthInstance: IWeb3Auth | IWeb3AuthModal;
loginParams?: OpenloginLoginParams;
modalConfig?: Record<WALLET_ADAPTER_TYPE, ModalConfig>;
}
modalConfig
- Table
- Interface
modalConfig: { ADAPTER : { params } }
Parameter | Type | Description | Default | Mandatory |
---|---|---|---|---|
label | string | Label of the adapter you want to configure | NA - identifier for corresponding adapter | Yes |
showOnModal? | boolean | Whether to show an adapter in modal or not. | true | No |
showOnDesktop? | boolean | Whether to show an adapter in desktop or not. | true | No |
showOnMobile? | boolean | Whether to show an adapter in mobile or not. | true | No |
Additionally, to configure the Openlogin Adapter's each login method, we have the loginMethods?
parameter.
Parameter | Type | Description | Default | Mandatory |
---|---|---|---|---|
loginMethods? | LoginMethodConfig | To configure visibility of each social login method for the openlogin adapter. | Default LoginMethod for each social login | No |
initModal(params?: {
modalConfig?: Record<WALLET_ADAPTER_TYPE, ModalConfig>;
}): Promise<void>;
interface ModalConfig extends BaseAdapterConfig {
loginMethods?: LoginMethodConfig;
}
interface BaseAdapterConfig {
label: string;
showOnModal?: boolean;
showOnMobile?: boolean;
showOnDesktop?: boolean;
}
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
- Table
- Type Declaration
params
Parameter | Type | Description | Default | Mandatory |
---|---|---|---|---|
name | string | Display Name | Default for Openlogin App | No |
description? | string | Description for button. If provided, it renders as a full length button. else, icon button | Just an icon rendered | No |
logoHover? | string | Logo to be shown on mouse hover | web3auth-logo.svg | No |
logoLight? | string | Logo to be shown on dark background (dark theme) | web3auth-logo.svg | No |
logoDark? | string | Logo to be shown on light background (light theme) | web3auth-logo.svg | No |
mainOption? | boolean | Show login button on the main list | Default for Openlogin App | No |
showOnModal? | string | Whether to show the login button on modal or not | Default for Openlogin App | No |
showOnDesktop? | string | Whether to show the login button on desktop | Default for Openlogin App | No |
showOnMobile? | string | Whether to show the login button on mobile | Default for Openlogin App | No |
declare type LoginMethodConfig = Record<
string,
{
/**
* Display Name. If not provided, we use the default for openlogin app
*/
name: string;
/**
* Description for button. If provided, it renders as a full length button. else, icon button
*/
description?: string;
/**
* Logo to be shown on mouse hover. If not provided, we use the default for openlogin app
*/
logoHover?: string;
/**
* Logo to be shown on dark background (dark theme). If not provided, we use the default for openlogin app
*/
logoLight?: string;
/**
* Logo to be shown on light background (light theme). If not provided, we use the default for openlogin app
*/
logoDark?: string;
/**
* Show login button on the main list
*/
mainOption?: boolean;
/**
* Whether to show the login button on modal or not
*/
showOnModal?: boolean;
/**
* Whether to show the login button on desktop
*/
showOnDesktop?: boolean;
/**
* Whether to show the login button on mobile
*/
showOnMobile?: boolean;
}
>;
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.
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 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.
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.
- JWT
- Auth0
- Discord
- Twitch
- Apple
- GitHub
- Line
- Email Passwordless
- SMS Passwordless
loginParams: {
loginProvider: 'google',
}
loginParams: {
loginProvider: 'facebook',
}
loginParams: {
loginProvider: "jwt",
extraLoginOptions: {
id_token: "idToken", // in JWT Format
verifierIdField: "sub", // same as your JWT Verifier ID
}
}
loginParams: {
loginProvider: "jwt",
extraLoginOptions: {
verifierIdField: "sub", // same as your JWT Verifier ID
domain: "https://YOUR-APPLICATION-DOMAIN", // your Auth0 domain
},
}
loginParams: {
loginProvider: 'email_passwordless',
extraLoginOptions: {
login_hint: "hello@web3auth.io", // email to send the OTP to
},
}
loginParams: {
loginProvider: 'sms_passwordless',
extraLoginOptions: {
login_hint: "+65-XXXXXXX",
}
}
loginParams: {
loginProvider: 'reddit',
}
loginParams: {
loginProvider: 'discord',
}
loginParams: {
loginProvider: 'twitch',
}
loginParams: {
loginProvider: 'apple',
}
loginParams: {
loginProvider: 'github',
}
loginParams: {
loginProvider: 'linkedin',
}
loginParams: {
loginProvider: 'twitter',
}
loginParams: {
loginProvider: 'weibo',
}
loginParams: {
loginProvider: 'line',
}
Example
Here are a few examples of a wagmi client using both the Web3AuthConnector
and the default InjectedConnector
respectively.
Checkout the various examples made for the wagmi connector using various UI Kits for better integration and user experience
Modal SDK
- Basic Example
- Using WhiteLabel Options
- Adding UI Plugin
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,
});
import { Web3AuthConnector } from "@web3auth/web3auth-wagmi-connector";
import { Web3Auth } from "@web3auth/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 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,
};
const web3AuthInstance = new Web3Auth({
clientId: "YOUR_CLIENT_ID",
chainConfig,
uiConfig: {
theme: "light",
loginMethodsOrder: ["twitter", "google"],
defaultLanguage: "en",
appLogo: "https://web3auth.io/images/w3a-L-Favicon-1.svg", // Your App Logo Here
modalZIndex: "2147483647",
appName: name,
},
});
// Add openlogin adapter for customisations
const privateKeyProvider = new EthereumPrivateKeyProvider({ config: { chainConfig } });
const openloginAdapterInstance = new OpenloginAdapter({
privateKeyProvider,
adapterSettings: {
network: "sapphire_mainnet",
uxMode: "popup",
whiteLabel: {
name: "Your app Name",
logoLight: "https://web3auth.io/images/w3a-L-Favicon-1.svg",
logoDark: "https://web3auth.io/images/w3a-D-Favicon-1.svg",
defaultLanguage: "en",
dark: true, // whether to enable dark mode. defaultValue: false
},
},
});
web3AuthInstance.configureAdapter(openloginAdapterInstance);
const wagmiConfig = createConfig({
autoConnect: true,
connectors: [
new Web3AuthConnector({
chains,
options: {
web3AuthInstance,
modalConfig: {
[WALLET_ADAPTERS.OPENLOGIN]: {
loginMethods: {
google: {
name: "google login",
logoDark: "url to your custom logo which will shown in dark mode",
},
facebook: {
// it will hide the facebook option from the Web3Auth modal.
name: "facebook login",
showOnModal: false,
},
},
},
[WALLET_ADAPTERS.WALLET_CONNECT_V1]: {
showOnModal: false,
},
[WALLET_ADAPTERS.WALLET_CONNECT_V2]: {
showOnModal: false,
},
[WALLET_ADAPTERS.TORUS_EVM]: {
showOnModal: false,
},
[WALLET_ADAPTERS.METAMASK]: {
showOnModal: false,
},
[WALLET_ADAPTERS.COINBASE]: {
showOnModal: false,
},
},
},
}),
new InjectedConnector({
chains,
options: {
name: "Injected",
shimDisconnect: true,
},
}),
],
publicClient,
webSocketPublicClient,
});
import { Web3AuthConnector } from "@web3auth/web3auth-wagmi-connector";
import { Web3Auth } from "@web3auth/modal";
import { TorusWalletConnectorPlugin } from "@web3auth/torus-wallet-connector-plugin";
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,
},
});
// Add Torus Wallet Plugin
const torusPlugin = new TorusWalletConnectorPlugin({
torusWalletOpts: {
buttonPosition: "bottom-left",
},
walletInitOptions: {
whiteLabel: {
theme: { isDark: false, colors: { primary: "#00a8ff" } },
logoDark: iconUrl,
logoLight: iconUrl,
},
useWalletConnect: true,
enableLogging: true,
},
});
web3AuthInstance.addPlugin(torusPlugin);
const wagmiConfig = createConfig({
autoConnect: true,
connectors: [
new Web3AuthConnector({
chains,
options: {
web3AuthInstance,
},
}),
new InjectedConnector({
chains,
options: {
name: "Injected",
shimDisconnect: true,
},
}),
],
publicClient,
webSocketPublicClient,
});
No Modal SDK
- Basic Example
- Custom Authentication
- Using WhiteLabel Options
- Adding UI Plugin
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,
});
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 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,
}
const web3AuthInstance = new Web3AuthNoModal({
clientId: "YOUR_CLIENT_ID",
chainConfig,
web3AuthNetwork: "sapphire_mainnet",
});
// Add openlogin adapter for customisations
const privateKeyProvider = new EthereumPrivateKeyProvider({ config: { chainConfig } });
const openloginAdapter = new OpenloginAdapter({
privateKeyProvider,
adapterSettings: {
network: "sapphire_mainnet",
uxMode: "popup",
loginConfig: {
jwt: {
name: "Web3Auth-Auth0-JWT",
verifier: "web3auth-auth0-demo",
typeOfLogin: "jwt",
clientId: "294QRkchfq2YaXUbPri7D6PH7xzHgQMT",
},
},
},
});
web3AuthInstance.configureAdapter(openloginAdapter);
const wagmiConfig = createConfig({
autoConnect: true,
connectors: [
new Web3AuthConnector({
chains,
options: {
web3AuthInstance,
loginParams: {
relogin: true,
loginProvider: "jwt",
extraLoginOptions: {
domain: "https://shahbaz-torus.us.auth0.com",
verifierIdField: "sub",
},
},
},
}),
new InjectedConnector({
chains,
options: {
name: "Injected",
shimDisconnect: true,
},
}),
],
publicClient,
webSocketPublicClient,
});
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 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,
}
const web3AuthInstance = new Web3AuthNoModal({
clientId: "YOUR_CLIENT_ID",
chainConfig,
web3AuthNetwork: "sapphire_mainnet",
});
// Add openlogin adapter for customisations
const privateKeyProvider = new EthereumPrivateKeyProvider({ config: { chainConfig } });
const openloginAdapterInstance = new OpenloginAdapter({
privateKeyProvider,
adapterSettings: {
network: "sapphire_mainnet",
uxMode: "popup",
whiteLabel: {
name: "Your app Name",
logoLight: "https://web3auth.io/images/w3a-L-Favicon-1.svg",
logoDark: "https://web3auth.io/images/w3a-D-Favicon-1.svg",
defaultLanguage: "en",
dark: true, // whether to enable dark mode. defaultValue: false
},
},
});
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,
});
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 { TorusWalletConnectorPlugin } from "@web3auth/torus-wallet-connector-plugin";
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 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,
};
const web3AuthInstance = new Web3AuthNoModal({
clientId: "YOUR_CLIENT_ID",
chainConfig,
web3AuthNetwork: "sapphire_mainnet",
});
// Add openlogin adapter
const privateKeyProvider = new EthereumPrivateKeyProvider({ config: { chainConfig } });
const openloginAdapterInstance = new OpenloginAdapter({
privateKeyProvider,
adapterSettings: {
network: "sapphire_mainnet",
uxMode: "popup",
},
});
web3AuthInstance.configureAdapter(openloginAdapterInstance);
// Add Torus Wallet Plugin
const torusPlugin = new TorusWalletConnectorPlugin({
torusWalletOpts: {
buttonPosition: "bottom-left",
},
walletInitOptions: {
whiteLabel: {
theme: { isDark: false, colors: { primary: "#00a8ff" } },
logoDark: iconUrl,
logoLight: iconUrl,
},
useWalletConnect: true,
enableLogging: true,
},
});
web3AuthInstance.addPlugin(torusPlugin);
const wagmiConfig = createConfig({
autoConnect: true,
connectors: [
new Web3AuthConnector({
chains,
options: {
web3AuthInstance,
loginParams: {
loginProvider: "google",
},
},
}),
new InjectedConnector({
chains,
options: {
name: "Injected",
shimDisconnect: true,
},
}),
],
publicClient,
webSocketPublicClient,
});