Migration Guide from v7 to v8 for Web3Auth Modal SDK
Overview
This migration guide provides steps for upgrading from version 7 (v7) to version 8 (v8) of the Web3Auth Modal SDK. The guide outlines significant
changes and enhancements, including the introduction of getDefaultExternalAdapters
for easy adapter management, updates to the CustomChainConfig
and the Web3AuthOptions
interface.
Changes in Detail
CustomChainConfig
Before (v7):
Earlier, CustomChainConfig
did not require logo
and isTestnet
, and blockExplorer
was used instead of blockExplorerUrl
.
const chainConfig: CustomChainConfig = {
chainNamespace: CHAIN_NAMESPACES.OTHER,
chainId: "0x1",
rpcTarget: "https://mainnet-algorand.api.purestake.io/ps2",
displayName: "Algorand Mainnet",
blockExplorer: "",
ticker: "ALGO",
tickerName: "Algorand",
};
After (v8):
ChainConfig
now requires a logo
parameter for the chain's logo and the parameter formerly called blockExplorer
has been renamed to
blockExplorerUrl
. Additionally, isTestnet
has been introduced which can be used to define whether the network is testnet or not.
From v8, parameters apart from chainId
, rpcTarget
, and chainNamespace
are now optional. Please note, while using
Wallet Services you have to also pass the optional parameters.
type CustomChainConfig = {
chainNamespace: ChainNamespaceType;
chainId: string;
rpcTarget: string;
wsTarget?: string;
displayName: string;
blockExplorerUrl: string;
ticker: string;
tickerName: string;
decimals?: number;
logo: string;
isTestnet?: boolean;
};
const chainConfig = {
chainId: "0x3",
displayName: "Solana Testnet",
chainNamespace: CHAIN_NAMESPACES.SOLANA,
tickerName: "SOLANA",
ticker: "SOL",
decimals: 18,
rpcTarget: "https://api.testnet.solana.com",
blockExplorerUrl: "https://explorer.solana.com/?cluster=testnet",
logo: "https://images.toruswallet.io/sol.svg",
isTestnet: true,
};
Web3AuthOptions
Before (v7):
Earlier, the privateKeyProvider
provider was not required, and chainConfig
was mandatory.
After (v8):
In v8, the privateKeyProvider
is introduced to Web3AuthOptions
, and chainConfig
is now optional.
const chainConfig = {
chainId: "0x1", // Please use 0x1 for Mainnet
rpcTarget: "https://rpc.ankr.com/eth",
displayName: "Ethereum Mainnet",
blockExplorerUrl: "https://etherscan.io/",
ticker: "ETH",
tickerName: "Ethereum",
logo: "https://images.toruswallet.io/eth.svg",
};
const ethereumPrivateKeyProvider = EthereumPrivateKeyProvider({
config: {chainConfig}
});
const web3auth = new Web3Auth({
clientId: "", // Get your Client ID from the Web3Auth Dashboard
web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
uiConfig: {
// Access the LANGUAGES from @toruslabs/openlogin-utils
defaultLanguage: LANGUAGES.tr, // Supported languages en, de, ja, ko, zh, es, fr, pt, nl
}
privateKeyProvider: ethereumPrivateKeyProvider,
});
WalletConnect v2 Adapter
Before (v7):
Earlier, getWalletConnectV2Settings
was used to accept a list of numbers, instead of a list of strings for chainId
.
const defaultWcSettings = await getWalletConnectV2Settings("eip155", [1], "projectId");
After (v8):
import { WalletConnectModal } from "@walletconnect/modal";
import { getWalletConnectV2Settings, WalletConnectV2Adapter } from "@web3auth/wallet-connect-v2-adapter";
const defaultWcSettings = await getWalletConnectV2Settings("eip155", ["1"], "projectId");
const walletConnectModal = new WalletConnectModal({ projectId: "projectId" });
const walletConnectV2Adapter = new WalletConnectV2Adapter({
adapterSettings: { qrcodeModal: walletConnectModal, ...defaultWcSettings.adapterSettings },
loginSettings: { ...defaultWcSettings.loginSettings },
});
web3auth.configureAdapter(walletConnectV2Adapter);
Adapter Management with getDefaultExternalAdapters
To use adapters other than OpenLogin, it is mandatory to use the getDefaultExternalAdapters
method to get the default adapters to configure them.
Before (v7):
Adapters were manually configured and instantiated.
After (v8):
Two new adapters, @web3auth/default-evm-adapter
and @web3auth/default-solana-adpater
have been introduced to help developers configure default
external adapters quickly for EIP155 and SOLANA namespace.
@web3auth/default-evm-adapter
Default EVM adapter allows you to create & configure external adapters for EIP155, like @web3auth/torus-evm
, @web3auth/metamask
, and
@web3auth/wallet-connect-v2
easily.
Installation
- npm
- Yarn
- pnpm
npm install --save @web3auth/default-evm-adapter
yarn add @web3auth/default-evm-adapter
pnpm add @web3auth/default-evm-adapter
Usage
const chainConfig = {
chainId: "0x1", // Please use 0x1 for Mainnet
rpcTarget: "https://rpc.ankr.com/eth",
displayName: "Ethereum Mainnet",
blockExplorerUrl: "https://etherscan.io/",
ticker: "ETH",
tickerName: "Ethereum",
logo: "https://images.toruswallet.io/eth.svg",
};
const privateKeyProvider = new EthereumPrivateKeyProvider({ config: { chainConfig } });
const web3AuthOptions: Web3AuthOptions = {
clientId,
web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
privateKeyProvider: privateKeyProvider,
};
const adapters = await getDefaultExternalAdapters({ options: web3AuthOptions });
adapters.forEach((adapter) => {
web3auth.configureAdapter(adapter);
});
@web3auth/default-solana-adapter
Default Solana adapter allows you to create & configure external adapters for SOLANA namespace, like @web3auth/torus-solana
, and @web3auth/phantom
easily.
Installation
- npm
- Yarn
- pnpm
npm install --save @web3auth/default-solana-adapter
yarn add @web3auth/default-solana-adapter
pnpm add @web3auth/default-solana-adapter
Usage
const chainConfig = {
chainId: "0x3",
displayName: "Solana Testnet",
chainNamespace: CHAIN_NAMESPACES.SOLANA,
tickerName: "SOLANA",
ticker: "SOL",
decimals: 18,
rpcTarget: "https://api.testnet.solana.com",
blockExplorerUrl: "https://explorer.solana.com/?cluster=testnet",
logo: "https://images.toruswallet.io/sol.svg",
isTestnet: true,
};
const privateKeyProvider = new SolanaPrivateKeyProvider({ config: { chainConfig } });
const web3AuthOptions: Web3AuthOptions = {
clientId,
web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
privateKeyProvider: privateKeyProvider,
};
const adapters = await getDefaultExternalAdapters({ options: web3AuthOptions });
adapters.forEach((adapter) => {
web3auth.configureAdapter(adapter);
});