The Wallet button has diasppeared

Help - Plug n Play PnP Web SDKs
1

I had a simple setup with modal, it was working fine, but today the button that should show the wallet UI disappeared. The element is technically still there, bit under the iframe I see only 5 hidden blocks of content with nothing inside, just some svg image. It seems either something’s wrong with the web3auth servers or some settings have changed making that button hidden by default, and I can’t find the way to reveal it.

SDK Version: “@web3auth/modal”: “^10.0.2”,
Platform: JS

Init settings:

  const web3auth = new Web3Auth({
    clientId: clientId, // Get your Client ID from Web3Auth Dashboard
    web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_DEVNET, // or WEB3AUTH_NETWORK.SAPPHIRE_MAINNET
    modalConfig: {
      connectors: {
        [WALLET_CONNECTORS.AUTH]: {
          label: 'auth',
          loginMethods: {
            google: {
              name: 'google login',
              showOnModal: true,
              // logoDark: "url to your custom logo which will shown in dark mode",
            },
            email_passwordless: {
              name: 'email passwordless login',
              showOnModal: true,
              authConnectionId: 'prop-test-email',
            },
          },
          showOnModal: true, // set to false to hide all social login methods
        },
      },
      hideWalletDiscovery: false, // set to true to hide external wallets discovery
    },
    mfaLevel: MFA_LEVELS.NONE,
  });

image
image1017×909 95.1 KB

2

Thank you for the detailed report, Gleb! Here’s a summary of your issue and the details you’ve provided for the support team:

Issue Summary

  • Problem: The Wallet button in the Web3Auth modal has disappeared. The element is present in the DOM but only shows hidden blocks and an SVG, with no visible wallet UI.
  • When: The setup was working previously but broke recently, possibly due to server-side or configuration changes.
  • SDK: PnP Web SDK (@web3auth/modal)
  • SDK Version: ^10.0.2
  • Platform: JavaScript (JS)
  • Network: SAPPHIRE_DEVNET
  • Initialization Code:
    const web3auth = new Web3Auth({
  clientId: clientId,
  web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_DEVNET,
  modalConfig: {
    connectors: {
      [WALLET_CONNECTORS.AUTH]: {
        label: 'auth',
        loginMethods: {
          google: {
            name: 'google login',
            showOnModal: true,
          },
          email_passwordless: {
            name: 'email passwordless login',
            showOnModal: true,
            authConnectionId: 'prop-test-email',
          },
        },
        showOnModal: true,
      },
    },
    hideWalletDiscovery: false,
  },
  mfaLevel: MFA_LEVELS.NONE,
});
  • Screenshot: Provided (shows the modal with missing wallet button/content).

Next Steps & Suggestions

  1. Check for Recent SDK Changes: There may have been a breaking change or update in the SDK or on the Web3Auth servers. Please ensure you’re using the latest version, or check the changelog for any recent updates.
  2. Dashboard Settings: Since whitelabel and modal customization can also be managed from the Web3Auth Dashboard, please verify that no changes were made there that could hide the wallet button.
  3. Browser Console Logs: If possible, please provide a screenshot of your browser’s console when the modal loads. This can help identify if there are any errors or warnings related to rendering the wallet button.
  4. Test with Default Config: Try initializing Web3Auth with the minimal config (without modalConfig) to see if the wallet button appears. This can help isolate if the issue is with your custom config.

Reference Docs:

Support Team Note:

  • SDK: @web3auth/modal v10.0.2
  • Platform: JS
  • Network: SAPPHIRE_DEVNET
  • Custom modalConfig provided
  • User reports UI element present but hidden, with only SVG visible
  • Screenshot attached

Gleb, if you could share a browser console screenshot and let us know if you’ve recently changed any dashboard settings, that would help us troubleshoot further. Thank you for your patience!

Note: This response was generated by an AI bot and may require further verification. The Web3Auth support team has tracked this issue and will be responding as soon as possible.

Additionally, we would recommend you to join our biweekly Office Hours to get this resolved even faster. Web3Auth Developer Office Hours

3

I have made no changes in the dashboard.

The console is clear, there are no web3-auth related messages there except for these, which are standard and obviously not relevant:

@web3auth_modal.js?v=9f8d6564:22500 Download the React DevTools for a better development experience: https://react.dev/link/react-devtools
chunk-I3L5S4XX.js?v=9f8d6564:4729  WARNING! You are on sapphire_devnet. Please set network: 'mainnet' or 'sapphire_mainnet' in production

commenting out the modalConfig does not change the siituation

4

I’ve upgraded the lib to 10.2.0, it didn’t work, but seems like I found the cause. Apparently it’s mandatory to set some logo in the uiConfig. Like this:

const web3auth = new Web3Auth({
...
    uiConfig: {
      logoDark:
        'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==',
      logoLight:
        'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==',
    },
})

Omitting that property results in the button not showing, as well as setting empty strings as values. No default option. That’s a shame

5

btw a relative path in the value also doesn’t work because this image is displayed in the iframe, so you’ll get a 403 error from the wallet.web3auth.io GET request