Skip to main content

PnP Modal SDK - v6 to v7

General​

web3auth.connect() now returns a provider of type IProvider​

The new provider object now works with the latest version of web3.js.​

With V7, the connect() method now returns a provider of type IProvider which is a hard-coded provider, ensuring compatibility with the latest version of web3.js. Previously, we had been using a proxy provider i.e. SafeEventEmitterProvider which gave errors with the breaking changes that came with web3.js v4. Remember, you can import the type IProvider from the @web3auth/base package.

// With V7
connect(): Promise<IProvider | null>;

appLogo is replaced by logoLight and logoDark​

uiConfig is in line with the whitelabel object in OpenLoginAdapter.​

With v7, the uiConfig object now accepts logoLight and logoDark instead of appLogo. This is done to bring consistency to the naming convention.

const web3auth = new Web3Auth({
  clientId,
  chainConfig: {
    chainNamespace: CHAIN_NAMESPACES.EIP155,
    chainId: "0x1",
    rpcTarget: "https://rpc.ankr.com/eth", // This is the public RPC we have added, please pass on your own endpoint while creating an app
  },
  // uiConfig refers to the whitelabeling options, which is available only on Growth Plan and above
  // Please remove this parameter if you're on the Base Plan
  uiConfig: {
    appName: "W3A",
    theme: {
      primary: "red",
    },
    mode: "dark",
    logoLight: "https://web3auth.io/images/web3auth-logo.svg",
    logoDark: "https://web3auth.io/images/web3auth-logo---Dark.svg",
    defaultLanguage: "en", // en, de, ja, ko, zh, es, fr, pt, nl
    loginGridCol: 3,
    primaryButton: "externalLogin", // "externalLogin" | "socialLogin" | "emailLogin"
  },
  web3AuthNetwork: "sapphire_mainnet",
});

OpenLoginAdapter​

Change in the naming of some whitelabel parameters for OpenLoginAdapter​

name and url are now appName and appUrl, respectively.​

In adapterSettings, the whitelabel object now accepts appName and appUrl instead of name and url, respectively. This is done to bring consistency to the naming convention.

Light and dark mode is now toggled by the mode parameter instead of dark.​

mode accepts a string from the following options: auto, light or dark. This replaces the dark boolean parameter from previous versions.

const openloginAdapter = new OpenloginAdapter({
  adapterSettings: {
    whiteLabel: {
      appName: "W3A Heroes",
      appUrl: "https://web3auth.io",
      logoLight: "https://web3auth.io/images/web3auth-logo.svg",
      logoDark: "https://web3auth.io/images/web3auth-logo---Dark.svg",
      defaultLanguage: "en", // en, de, ja, ko, zh, es, fr, pt, nl
      mode: "auto", // whether to enable dark mode. defaultValue: false
      theme: {
        primary: "#768729",
      },
      useLogoLoader: true,
    },
  },
  privateKeyProvider,
});

Other changes​

Extra parameters for solana-provider and xrpl-provider​

For Solana​

For Solana, SolanaWallet in package "@web3auth/solana-provider", the request typings require both input and output now use string[] when input placeholder is needed

// With V7
const connectionConfig = await solanaWallet.request<string[], CustomChainConfig>({
  method: "solana_provider_config",
  params: [],
});
const conn = new Connection(connectionConfig.rpcTarget);

For XRPL​

For XRPL, after the change of "@web3auth/xrpl-provider" version to v7, the request typings require both input and output now so use never when input or output placeholder is needed

// With V7
const txSign = await this.provider.request<{ signature: string }, never>({
  method: "xrpl_signMessage",
  params: {
    signature: hexMsg,
  },
});

const accounts = await this.provider.request<never, string[]>({
  method: "xrpl_getAccounts",
});

wallet-connect-v2-adapter requires different parameters​

With the deprecation of @wallet-connect/qr-code-modal, wallet-connect-v2-adapter now requires @walletconnect/modal.​

import { WalletConnectModal } from "@walletconnect/modal";
import {
  getWalletConnectV2Settings,
  WalletConnectV2Adapter,
} from "@web3auth/wallet-connect-v2-adapter";

const defaultWcSettings = await getWalletConnectV2Settings(
  "eip155",
  [1],
  "04309ed1007e77d1f119b85205bb779d",
);
const walletConnectModal = new WalletConnectModal({
  projectId: "04309ed1007e77d1f119b85205bb779d",
});
const walletConnectV2Adapter = new WalletConnectV2Adapter({
  adapterSettings: { qrcodeModal: walletConnectModal, ...defaultWcSettings.adapterSettings },
  loginSettings: { ...defaultWcSettings.loginSettings },
});