Skip to main content

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.

note

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​

note

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 install --save @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 install --save @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);
});