Getting Wallet Initialization Error. User can't even see the auth popup

Help - Plug n Play PnP Web SDKs
1

When asking for help in this category, please make sure to provide the following details:

  • SDK Version(package.json):
    “@web3auth/base”: “^8.12.4”,
    “@web3auth/modal”: “^8.12.4”,
    “@web3auth/solana-provider”: “^8.12.4”,
    “@web3auth/wallet-services-plugin”: “^8.12.4”,
  • Platform: Web PnP
  • Browser Console Screenshots:
    WalletInitializationError: Wallet is not ready yet, Login modal is not initialized at Zt.fromCode (base.esm.js:70:12) at Zt.notReady (base.esm.js:81:38) at lf.connect (modal.esm.js:386:59) at Ye (App.tsx:519:22) at Object.Pe (react-dom.production.min.js:54:317) at Fe (react-dom.production.min.js:54:471) at react-dom.production.min.js:55:35 at Nn (react-dom.production.min.js:105:68) at jn (react-dom.production.min.js:106:380) at react-dom.production.min.js:117:104

const chainConfig = {
chainNamespace: CHAIN_NAMESPACES.SOLANA,
chainId: “0x1”, // Please use 0x1 for Mainnet
rpcTarget: “https://sly-virulent-sanctuary.solana-mainnet.quiknode.pro/1ae4556ec8c1fcee2b1b314a70ce41994a3f3aec”,
displayName: “Solana Mainnet”,
blockExplorer: “https://explorer.solana.com”,
ticker: “SOL”,
tickerName: “Solana”,
};

const connection = new Connection(chainConfig.rpcTarget, ‘confirmed’);
const privateKeyProvider = new SolanaPrivateKeyProvider({ config: { chainConfig } });

const web3auth = new Web3Auth(web3AuthOptions as Web3AuthOptions);

  const openloginAdapter = new OpenloginAdapter({
    loginSettings: {
      mfaLevel: "none",
      curve: "ed25519", // allowed values "secp256k1" (default, EVM) or "ed25519" (Solana)
    },
    adapterSettings: {
      uxMode: "redirect", // "redirect" | "popup"
      whiteLabel: {
        logoLight: "https://thelive.bet/favicon.ico",
        logoDark: "https://thelive.bet/favicon.ico",
        defaultLanguage: "en", // en, de, ja, ko, zh, es, fr, pt, nl, tr
        mode: "light", // whether to enable dark, light or auto mode. defaultValue: auto [ system theme]
      },
    },
  });
  web3auth.configureAdapter(openloginAdapter);

  setWeb3auth(web3auth);

  await web3auth.initModal({
    modalConfig: {
      [WALLET_ADAPTERS.OPENLOGIN]: {
        label: "openlogin",
        loginMethods: {
          google: {
            name: "google",
            showOnModal: true,
            mainOption: true
          },
          twitter: {
            name: "twitter",
            showOnModal: true,
            mainOption: true
          },
          farcaster: {
            name: "farcaster",
            showOnModal: false
          },
          apple: {
            name: "apple",
            showOnModal: false
          },
          discord: {
            name: "discord",
            showOnModal: false
          },
          wechat: {
            name: "wechat",
            showOnModal: false
          },
          twitch: {
            name: "twitch",
            showOnModal: false
          },
          facebook: {
            name: "facebook",
            showOnModal: false
          },
          reddit: {
            name: "reddit",
            showOnModal: false
          },
          weibo: {
            name: "weibo",
            showOnModal: false
          },
          line: {
            name: "line",
            showOnModal: false
          },
          linkedin: {
            name: "linkedin",
            showOnModal: false
          },
          kakao: {
            name: "kakao",
            showOnModal: false
          },
          github: {
            name: "github",
            showOnModal: false
          },
          // Disable email_passwordless and sms_passwordless
          email_passwordless: {
            name: "email_passwordless",
            showOnModal: false
          },
          sms_passwordless: {
            name: "sms_passwordless",
            showOnModal: false
          }
        }
      }
    }
  });

So only 1 of our users is seeing that error. This user has successfully login before, but can’t login anymore now (clearing the cache and trying in incognito mode both did’t work). Other users are fine.

Please absolutely help fix. This impact our core business. There might be similar users like him.

2

Hello Zhe Wang,

Thanks for reaching out. It looks like you’re facing a WalletInitializationError when trying to initialize and display the Web3Auth login popup on the web using the PnP Web SDK. Let’s break down the provided details for clarity:

SDK Details

  • SDK: PnP Web SDK
  • SDK Version:
    • @web3auth/base version: ^8.12.4
    • @web3auth/modal version: ^8.12.4
    • @web3auth/solana-provider version: ^8.12.4
    • @web3auth/wallet-services-plugin version: ^8.12.4
  • Platform: Web PnP

Issue Details

  • Error Message (from browser console):
    WalletInitializationError: Wallet is not ready yet, Login modal is not initialized
    at Zt.fromCode (base.esm.js:70:12)
    at Zt.notReady (base.esm.js:81:38)
    at lf.connect (modal.esm.js:386:59)
    at Ye (App.tsx:519:22)
    at Object.Pe (react-dom.production.min.js:54:317)
    at Fe (react-dom.production.min.js:54:471)
    at react-dom.production.min.js:55:35
    at Nn (react-dom.production.min.js:105:68)
    at jn (react-dom.production.min.js:106:380)
    at react-dom.production.min.js:117:104

Initialization & Login Code Snippet

const chainConfig = {
  chainNamespace: CHAIN_NAMESPACES.SOLANA,
  chainId: "0x1", // Please use 0x1 for Mainnet
  rpcTarget: "https://sly-virulent-sanctuary.solana-mainnet.quiknode.pro/1ae4556ec8c1fcee2b1b314a70ce41994a3f3aec",
  displayName: "Solana Mainnet",
  blockExplorer: "https://explorer.solana.com",
  ticker: "SOL",
  tickerName: "Solana",
};

const connection = new Connection(chainConfig.rpcTarget, 'confirmed');
const privateKeyProvider = new SolanaPrivateKeyProvider({ config: { chainConfig } });

const web3auth = new Web3Auth(web3AuthOptions as Web3AuthOptions);

const openloginAdapter = new OpenloginAdapter({
  loginSettings: {
    mfaLevel: "none",
    curve: "ed25519",
  },
  adapterSettings: {
    uxMode: "redirect",
    whiteLabel: {
      logoLight: "https://thelive.bet/favicon.ico",
      logoDark: "https://thelive.bet/favicon.ico",
      defaultLanguage: "en",
      mode: "light",
    },
  },
});
web3auth.configureAdapter(openloginAdapter);

setWeb3auth(web3auth);

await web3auth.initModal({
  modalConfig: {
    [WALLET_ADAPTERS.OPENLOGIN]: {
      label: "openlogin",
      loginMethods: {
        google: {
          name: "google",
          showOnModal: true,
          mainOption: true
        },
        twitter: {
          name: "twitter",
          showOnModal: true,
          mainOption: true
        },
        farcaster: {
          name: "farcaster",
          showOnModal: false
        },
        apple: {
          name: "apple",
          showOnModal: false
        },
        discord: {
          name: "discord",
          showOnModal: false
        },
        wechat: {
          name: "wechat",
          showOnModal: false
        },
        twitch: {
          name: "twitch",
          showOnModal: false
        },
        facebook: {
          name: "facebook",
          showOnModal: false
        },
        reddit: {
          name: "reddit",
          showOnModal: false
        },
        weibo: {
          name: "weibo",
          showOnModal: false
        },
        line: {
          name: "line",
          showOnModal: false
        },
        linkedin: {
          name: "linkedin",
          showOnModal: false
        },
        kakao: {
          name: "kakao",
          showOnModal: false
        },
        github: {
          name: "github",
          showOnModal: false
        },
        email_passwordless: {
          name: "email_passwordless",
          showOnModal: false
        },
        sms_passwordless: {
          name: "sms_passwordless",
          showOnModal: false
        }
      }
    }
  }
});

Potential Causes & Solutions:

  1. Initialization Not Complete: Ensure that the web3auth.initModal call is completed before attempting any connection or login since the modal initialization is async.
  2. Network Issues: There could be intermittent network issues preventing the modal from fetching necessary data. Verify the network connection and rpcTarget URL.
  3. Single User Issue: Since it is affecting only a single user, it might be related to specific browser settings or extensions. Resetting the browser settings or trying a different browser might help.
  4. Caching Issue: The issue could be related to old data cached in the user’s browser. Clearing cache and cookies and trying in incognito mode, which you mentioned has been attempted, usually resolves this.

However, the error message suggests that the modal is not initialized, which can indicate:

  • There might be some delay in fetching or setting up configurations through the network.
  • Possible issues in the async handling of the modal initialization.

Suggested Fix:

Make sure that any calls to web3auth.connect are made after web3auth.initModal has fully completed.

await web3auth.initModal({
  // modalConfig...
});

// Ensure initialization is complete before connecting
try {
  await web3auth.connect();
} catch (error) {
  console.error("Error during connecting:", error);
}

It’s also a good practice to wrap these in try-catch blocks to handle any potential initialization errors gracefully.

This response was generated by the Web3Auth Bot, and a person from the Web3Auth team will come to give a more detailed answer to your query.

3

The response isn’t helpful.

We already did all of that.

4

Hey @zhew1991,
We’ll need a bit more information to investigate this further. Could you please ask the user to submit a recording using a tool like jam.dev, including the network logs? Since you mentioned that only one user is facing this issue, which is unexpected, this will help us diagnose the problem more accurately. Usually, implementation errors affect all users, so having this recording will give us deeper insights.