Whitelabel block even though no whitelabel being used

This is how i instantiate the modal

// Web3Auth Libraries
import { Web3Auth } from '@web3auth/modal'
import { Chain } from 'wagmi'
import { Web3AuthConnector } from './Web3AuthConnector'

export default function Web3AuthConnectorInstance(chains: Chain[]) {
  // Create Web3Auth Instance
  const web3AuthInstance = new Web3Auth({
    clientId: process.env.NEXT_PUBLIC_WEB3_AUTH_ID!,
    chainConfig: {
      chainNamespace: 'eip155',
      chainId: '0x' + chains[0].id.toString(16),
      rpcTarget: chains[0].rpcUrls.default.http[0], // This is the public RPC we have added, please pass on your own endpoint while creating an app
      displayName: chains[0].name,
      tickerName: chains[0].nativeCurrency?.name,
      ticker: chains[0].nativeCurrency?.symbol,
    },
    uiConfig: {
      loginMethodsOrder: ['facebook', 'google'],
      defaultLanguage: 'en',
    },
    web3AuthNetwork: 'cyan',
  })

  return new Web3AuthConnector({
    chains: chains as any,
    options: {
      web3AuthInstance,
    },
  })
}

And im getting this:

im copying import { Web3AuthConnector } from './Web3AuthConnector' from a local place because when using wagmi connector I was also getting this error:

file:///Users/mauro/app/node_modules/@web3auth/web3auth-wagmi-connector/dist/web3authWagmiConnector.esm.js:3
import { log, WALLET_ADAPTERS, ADAPTER_STATUS, CHAIN_NAMESPACES } from '@web3auth/base';
                               ^^^^^^^^^^^^^^
SyntaxError: Named export 'ADAPTER_STATUS' not found. The requested module '@web3auth/base' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@web3auth/base';
const { log, WALLET_ADAPTERS, ADAPTER_STATUS, CHAIN_NAMESPACES } = pkg;

my local version is just a copy paste of whats in your js file so I don’t think that should be causing the issue

I’m not using any whitelabel so I don’t think it should be triggered here. I can’t use my app right now.

Just for reference, here’s how the connector that I copy pasted looks

import _defineProperty from "@babel/runtime/helpers/defineProperty";
import { Connector } from "@wagmi/core";
import {
  log,
  WALLET_ADAPTERS,
  ADAPTER_STATUS,
  CHAIN_NAMESPACES,
} from "@web3auth/base";
import {
  getAddress,
  UserRejectedRequestError,
  createWalletClient,
  custom,
  SwitchChainError,
} from "viem";

const IS_SERVER = typeof window === "undefined";
function isIWeb3AuthModal(obj) {
  return typeof obj.initModal !== "undefined";
}
function normalizeChainId(chainId) {
  if (typeof chainId === "string")
    return Number.parseInt(
      chainId,
      chainId.trim().substring(0, 2) === "0x" ? 16 : 10
    );
  if (typeof chainId === "bigint") return Number(chainId);
  return chainId;
}
class Web3AuthConnector extends Connector {
  constructor(_ref) {
    let { chains, options } = _ref;
    super({
      chains,
      options,
    });
    _defineProperty(this, "ready", !IS_SERVER);
    _defineProperty(this, "id", "web3auth");
    _defineProperty(this, "name", "Web3Auth");
    _defineProperty(this, "provider", null);
    _defineProperty(this, "loginParams", void 0);
    _defineProperty(this, "modalConfig", void 0);
    _defineProperty(this, "web3AuthInstance", void 0);
    _defineProperty(this, "onAccountsChanged", (accounts) => {
      if (accounts.length === 0) this.emit("disconnect");
      else
        this.emit("change", {
          account: getAddress(accounts[0]),
        });
    });
    _defineProperty(this, "onChainChanged", (chainId) => {
      const id = normalizeChainId(chainId);
      const unsupported = this.isChainUnsupported(id);
      log.info("chainChanged", id, unsupported);
      this.emit("change", {
        chain: {
          id,
          unsupported,
        },
      });
    });
    this.web3AuthInstance = options.web3AuthInstance;
    this.loginParams = options.loginParams || null;
    this.modalConfig = options.modalConfig || null;
  }
  async connect() {
    let { chainId } =
      arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
    try {
      this.emit("message", {
        type: "connecting",
      });
      await this.getProvider();
      this.provider.on("accountsChanged", this.onAccountsChanged);
      this.provider.on("chainChanged", this.onChainChanged);
      if (!this.web3AuthInstance.connected) {
        if (isIWeb3AuthModal(this.web3AuthInstance)) {
          await this.web3AuthInstance.connect();
        } else if (this.loginParams) {
          await this.web3AuthInstance.connectTo(
            WALLET_ADAPTERS.OPENLOGIN,
            this.loginParams
          );
        } else {
          log.error(
            "please provide valid loginParams when using @web3auth/no-modal"
          );
          throw new UserRejectedRequestError(
            "please provide valid loginParams when using @web3auth/no-modal"
          );
        }
      }
      const [account, connectedChainId] = await Promise.all([
        this.getAccount(),
        this.getChainId(),
      ]);
      let unsupported = this.isChainUnsupported(connectedChainId);
      let id = connectedChainId;
      if (chainId && connectedChainId !== chainId) {
        // try switching chain
        const chain = await this.switchChain(chainId);
        id = chain.id;
        unsupported = this.isChainUnsupported(id);
      }
      return {
        account,
        chain: {
          id,
          unsupported,
        },
      };
    } catch (error) {
      log.error("error while connecting", error);
      this.onDisconnect();
      throw new UserRejectedRequestError("Something went wrong");
    }
  }
  async getWalletClient() {
    let { chainId } =
      arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
    const [provider, account] = await Promise.all([
      this.getProvider(),
      this.getAccount(),
    ]);
    const chain = this.chains.find((x) => x.id === chainId);
    if (!provider) throw new Error("provider is required.");
    return createWalletClient({
      account,
      chain,
      transport: custom(provider),
    });
  }
  async getAccount() {
    const provider = await this.getProvider();
    const accounts = await provider.request({
      method: "eth_accounts",
    });
    return getAddress(accounts[0]);
  }
  async getProvider() {
    if (this.provider) {
      return this.provider;
    }
    if (this.web3AuthInstance.status === ADAPTER_STATUS.NOT_READY) {
      if (isIWeb3AuthModal(this.web3AuthInstance)) {
        await this.web3AuthInstance.initModal({
          modalConfig: this.modalConfig,
        });
      } else if (this.loginParams) {
        await this.web3AuthInstance.init();
      } else {
        log.error(
          "please provide valid loginParams when using @web3auth/no-modal"
        );
        throw new UserRejectedRequestError(
          "please provide valid loginParams when using @web3auth/no-modal"
        );
      }
    }
    this.provider = this.web3AuthInstance.provider;
    return this.provider;
  }
  async isAuthorized() {
    try {
      const account = await this.getAccount();
      return !!account;
    } catch {
      return false;
    }
  }
  async getChainId() {
    await this.getProvider();
    const chainId = await this.provider.request({
      method: "eth_chainId",
    });
    log.info("chainId", chainId);
    return normalizeChainId(chainId);
  }
  async switchChain(chainId) {
    try {
      var _chain$blockExplorers, _chain$nativeCurrency, _chain$nativeCurrency2;
      const chain = this.chains.find((x) => x.id === chainId);
      if (!chain)
        throw new SwitchChainError(new Error("chain not found on connector."));
      await this.web3AuthInstance.addChain({
        chainNamespace: CHAIN_NAMESPACES.EIP155,
        chainId: `0x${chain.id.toString(16)}`,
        rpcTarget: chain.rpcUrls.default.http[0],
        displayName: chain.name,
        blockExplorer:
          ((_chain$blockExplorers = chain.blockExplorers) === null ||
          _chain$blockExplorers === void 0
            ? void 0
            : _chain$blockExplorers.default.url[0]) || "",
        ticker:
          ((_chain$nativeCurrency = chain.nativeCurrency) === null ||
          _chain$nativeCurrency === void 0
            ? void 0
            : _chain$nativeCurrency.symbol) || "ETH",
        tickerName:
          ((_chain$nativeCurrency2 = chain.nativeCurrency) === null ||
          _chain$nativeCurrency2 === void 0
            ? void 0
            : _chain$nativeCurrency2.name) || "Ethereum",
        decimals: chain.nativeCurrency.decimals || 18,
      });
      log.info("Chain Added: ", chain.name);
      await this.web3AuthInstance.switchChain({
        chainId: `0x${chain.id.toString(16)}`,
      });
      log.info("Chain Switched to ", chain.name);
      return chain;
    } catch (error) {
      log.error("Error: Cannot change chain", error);
      throw new SwitchChainError(error);
    }
  }
  async disconnect() {
    await this.web3AuthInstance.logout();
    const provider = await this.getProvider();
    provider.removeListener("accountsChanged", this.onAccountsChanged);
    provider.removeListener("chainChanged", this.onChainChanged);
  }
  isChainUnsupported(chainId) {
    return !this.chains.some((x) => x.id === chainId);
  }
  onDisconnect() {
    this.emit("disconnect");
  }
}

export { Web3AuthConnector };
//# sourceMappingURL=web3authWagmiConnector.esm.js.map

And here’s the typescript declaration that I also copied from you

import {
  Address,
  Chain,
  Connector,
  ConnectorData,
  WalletClient,
} from "@wagmi/core";
import { type SafeEventEmitterProvider } from "@web3auth/base";
import type { Options } from "./interfaces";
export declare class Web3AuthConnector extends Connector<
  SafeEventEmitterProvider,
  Options
> {
  ready: boolean;
  readonly id = "web3auth";
  readonly name = "Web3Auth";
  protected provider: SafeEventEmitterProvider | null;
  private loginParams;
  private modalConfig;
  private web3AuthInstance;
  constructor({ chains, options }: { chains?: Chain[]; options: Options });
  connect({ chainId }?: { chainId?: number }): Promise<Required<ConnectorData>>;
  getWalletClient({ chainId }?: { chainId?: number }): Promise<WalletClient>;
  getAccount(): Promise<Address>;
  getProvider(): Promise<SafeEventEmitterProvider>;
  isAuthorized(): Promise<boolean>;
  getChainId(): Promise<number>;
  switchChain(chainId: number): Promise<Chain>;
  disconnect(): Promise<void>;
  protected onAccountsChanged: (accounts: string[]) => void;
  protected isChainUnsupported(chainId: number): boolean;
  protected onChainChanged: (chainId: string | number) => void;
  protected onDisconnect(): void;
}

Sadly this also wasn’t enough for wagmi and had to do this

const web3Auth = Web3AuthConnectorInstance(chains) as any
export const config = createConfig({
  autoConnect: true,
  connectors: [web3Auth],
  publicClient,
  webSocketPublicClient,
})

I just want to fix the whitelabel issue for now.

@mauro.guz.bejar Thanks your recent communication.

Please remove the uiconfig parameter from your code.

Also, wagmi-connector is yet to be upgraded to V7. Our team will update once that is complete.

You can update the dependencies for wagmi-connector as shown:

    "peerDependencies": {
    "@wagmi/core": "^1.x",
    "@web3auth/base": "^7.x",
    "@web3auth/modal": "^7.x",
    "@web3auth/no-modal": "^7.x",
    "@web3auth/openlogin-adapter": "^7.x",
    "viem": "^1.x"
  },

This is my package.json file with your suggestions but still getting the same error…

{
  "name": "lydian-bot",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev -p 3001",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "format": "prettier --write \"components/**/*.{ts,tsx,js,jsx}\" \"lib/**/*.{ts,tsx,js,jsx}\" \"nest/**/*.{ts,tsx,js,jsx}\" \"pages/**/*.{ts,tsx,js,jsx}\" ",
    "prepare": "husky install"
  },
  "dependencies": {
    "@babel/runtime": "^7.22.15",
    "@chakra-ui/icons": "^2.0.17",
    "@chakra-ui/react": "^2.8.1",
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@json-rpc-tools/utils": "^1.7.6",
    "@react-icons/all-files": "^4.1.0",
    "@types/node": "18.15.0",
    "@types/react": "18.0.28",
    "@types/react-dom": "18.0.11",
    "@web3auth/web3auth-wagmi-connector": "^5.0.0",
    "algorand-walletconnect-qrcode-modal": "^1.8.0",
    "algosdk": "^2.1.0",
    "axios": "^1.4.0",
    "bignumber.js": "^9.1.1",
    "cookie": "^0.5.0",
    "crisp-sdk-web": "^1.0.21",
    "dotenv": "^16.0.3",
    "eslint": "8.35.0",
    "eslint-config-next": "13.2.4",
    "ethers": "^6.7.1",
    "formik": "^2.2.9",
    "framer-motion": "^10.16.4",
    "i18next": "^23.4.4",
    "lru-cache": "^10.0.1",
    "luxon": "^3.3.0",
    "next": "^13.3.0",
    "next-cookies": "^2.0.3",
    "next-i18next": "^14.0.0",
    "prettier": "^2.8.7",
    "qrcode.react": "^3.1.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-i18next": "^13.1.2",
    "react-icons": "^4.8.0",
    "react-loader-spinner": "^5.3.4",
    "react-query": "^3.39.3",
    "siwe": "^2.1.4",
    "socket.io-client": "^4.7.1",
    "typescript": "^5.2.2",
    "use-debounce": "^9.0.4",
    "viem": "^1.10.9",
    "wagmi": "^1.4.1",
    "yup": "^1.1.1",
    "@wagmi/core": "^1.x",
    "@web3auth/base": "^7.x",
    "@web3auth/modal": "^7.x",
    "@web3auth/no-modal": "^7.x",
    "@web3auth/openlogin-adapter": "^7.x"
  },
  "peerDependencies": {
    "@wagmi/core": "^1.x",
    "@web3auth/base": "^7.x",
    "@web3auth/modal": "^7.x",
    "@web3auth/no-modal": "^7.x",
    "@web3auth/openlogin-adapter": "^7.x",
    "viem": "^1.x"
  },
  "devDependencies": {
    "@types/luxon": "^3.3.0",
    "husky": "^8.0.3"
  }
}

I also took the ui config out and it looks like this:

// Web3Auth Libraries
import { Web3Auth } from '@web3auth/modal'
import { Chain } from 'wagmi'
import { Web3AuthConnector } from './Web3AuthConnector'
// import { Web3AuthConnector } from '@web3auth/web3auth-wagmi-connector'

export default function Web3AuthConnectorInstance(chains: Chain[]) {
  // Create Web3Auth Instance
  const web3AuthInstance = new Web3Auth({
    clientId: process.env.NEXT_PUBLIC_WEB3_AUTH_ID!,
    chainConfig: {
      chainNamespace: 'eip155',
      chainId: '0x' + chains[0].id.toString(16),
      rpcTarget: chains[0].rpcUrls.default.http[0], // This is the public RPC we have added, please pass on your own endpoint while creating an app
      displayName: chains[0].name,
      tickerName: chains[0].nativeCurrency?.name,
      ticker: chains[0].nativeCurrency?.symbol,
    },
    web3AuthNetwork: 'cyan',
  })

  return new Web3AuthConnector({
    chains: chains as any,
    options: {
      web3AuthInstance,
    },
  })
}

But still getting whitelabel issue somehow… Yesterday when taking the ui part out I would get an error saying “missing default language” maybe updating the packages changed that. But the whiltelabel part still remains. I tried it on brave and safari also just in case

Do you know around when the new version will arrive?? I can’t really use the app anymore

1 Like

@mauro.guz.bejar 7.0.2 is released. You wouldn’t get the default language issue, remove the uiConfig and you should be good to go.

hi @maharshi you mean the wagmi connector 7.0.2 ? I try downloading that exact version but it says only this

The ui config is fully gone but im still getting the whitelabel error… And if I try using the wagmi connector I still get the same error

SyntaxError: Named export 'ADAPTER_STATUS' not found. The requested module '@web3auth/base' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@web3auth/base';
const { log, WALLET_ADAPTERS, ADAPTER_STATUS, CHAIN_NAMESPACES } = pkg;

im geting same error too please fix its been so long with this bug

@maharshi @vjgee this wagmi-connector issue should be your top problem right now, its causing so many issues a very buggy start to v7

@maharshi @vjgee Also, when was this whitelabel change made? It’s never a good precedent to take away features from users and then arbitrarily put them behind a paywall. We all know that these whitelabel features don’t add any additional computational overhead for you guys.

I’ve been a really active promoter of web3auth but now with complete removal of whitelabel options i’m not so sure. There are account abstraction features coming out more and more, would hate to have to start telling my 700 discord members to switch but this doesn’t make it easier.

@maharshi @vjgee

Can someone please take a look at this? I’m pretty sure there is a bug on your side.

I’ve removed any reference to uiconfig or custom whitelabel fields, even removed adapters. Still getting the whitelabel error.

Checked the console messages and see this url in the error:

the url itself labels the torus integration as is_whitelabel=true. how is this set?

Url: https://signer.tor.us/api/feature-access?client_id=BAxYODrW10EUBmpateLV_hsVdaqDMuNQZUhyHlIdeuH5p50QIqNOrMlc4ZnlVWX3gCcoMnfx8Ovvy3t7CiNv1xk&network=mainnet**&is_whitelabel=true**&session_time=86400&is_custom_auth=false&enable_gating=true

rather than kick back an error, couldn’t you instead just ignore whitelabel config on your side? seems like a much less error prone implementation

hello, i’m pretty sure the issue is the logic that is setting tor.us signer to “is_whitelabel=true”

i’ve taken the react evm modal example code and swapped in my client id and commented out the entire uiconfig section and still getting error

my modified app.tsx


import { useEffect, useState } from "react";
import { Web3Auth } from "@web3auth/modal";
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import { CHAIN_NAMESPACES, IProvider } from "@web3auth/base";
import {
  OpenloginAdapter,
  OPENLOGIN_NETWORK,
} from "@web3auth/openlogin-adapter";
import "./App.css";
import RPC from "./web3RPC"; // for using web3.js
//import RPC from "./ethersRPC"; // for using ethers.js

// Plugins
import { TorusWalletConnectorPlugin } from "@web3auth/torus-wallet-connector-plugin";

// Adapters
// import { MetamaskAdapter } from "@web3auth/metamask-adapter";
// import { TorusWalletAdapter } from "@web3auth/torus-evm-adapter";

const clientId =
  //"BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ"; // get from https://dashboard.web3auth.io
  "BGaoN2IjPn0qruzfDFr5z0HD9wJeOuU8RBkKBOF5DTZB3ZW6YTSa-3kDtOMx2WTPk5T4FjiksT4sQS1UVveIfAw"; // get from https://dashboard.web3auth.io

function App() {
  const [web3auth, setWeb3auth] = useState<Web3Auth | null>(null);
  const [torusPlugin, setTorusPlugin] =
    useState<TorusWalletConnectorPlugin | null>(null);
  const [provider, setProvider] = useState<IProvider | null>(null);
  const [loggedIn, setLoggedIn] = useState(false);

  useEffect(() => {
    const init = async () => {
      try {
        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",
            // appLogo: "https://web3auth.io/images/w3a-L-Favicon-1.svg", // Your App Logo Here
            theme: {
              primary: "red",
            },
            mode: "dark",
            logoLight: "https://web3auth.io/images/w3a-L-Favicon-1.svg",
            logoDark: "https://web3auth.io/images/w3a-D-Favicon-1.svg",
            defaultLanguage: "en", // en, de, ja, ko, zh, es, fr, pt, nl
            loginGridCol: 3,
            primaryButton: "externalLogin", // "externalLogin" | "socialLogin" | "emailLogin"
          }, */
          web3AuthNetwork: OPENLOGIN_NETWORK.SAPPHIRE_MAINNET,
        });

        const openloginAdapter = new OpenloginAdapter({
          loginSettings: {
            mfaLevel: "optional",
          },
          adapterSettings: {
            uxMode: "redirect", // "redirect" | "popup"
            /*whiteLabel: {
              logoLight: "https://web3auth.io/images/w3a-L-Favicon-1.svg",
              logoDark: "https://web3auth.io/images/w3a-D-Favicon-1.svg",
              defaultLanguage: "en", // en, de, ja, ko, zh, es, fr, pt, nl
              mode: "dark", // whether to enable dark, light or auto mode. defaultValue: auto [ system theme]
            },*/
            mfaSettings: {
              deviceShareFactor: {
                enable: true,
                priority: 1,
                mandatory: true,
              },
              backUpShareFactor: {
                enable: true,
                priority: 2,
                mandatory: false,
              },
              socialBackupFactor: {
                enable: true,
                priority: 3,
                mandatory: false,
              },
              passwordFactor: {
                enable: true,
                priority: 4,
                mandatory: false,
              },
            },
          },
        });
        web3auth.configureAdapter(openloginAdapter);

        // plugins and adapters are optional and can be added as per your requirement
        // read more about plugins here: https://web3auth.io/docs/sdk/web/plugins/

        // adding torus wallet connector plugin

        const torusPlugin = new TorusWalletConnectorPlugin({
          torusWalletOpts: {},
          walletInitOptions: {
            whiteLabel: {
              theme: { isDark: true, colors: { primary: "#00a8ff" } },
              logoDark: "https://web3auth.io/images/w3a-L-Favicon-1.svg",
              logoLight: "https://web3auth.io/images/w3a-D-Favicon-1.svg",
            },
            useWalletConnect: true,
            enableLogging: true,
          },
        });
        setTorusPlugin(torusPlugin);
        await web3auth.addPlugin(torusPlugin);

        // read more about adapters here: https://web3auth.io/docs/sdk/pnp/web/adapters/

        // adding metamask adapter
        // const metamaskAdapter = new MetamaskAdapter({
        //   clientId,
        //   sessionTime: 3600, // 1 hour in seconds
        //   web3AuthNetwork: "cyan",
        //   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
        //   },
        // });
        // // we can change the above settings using this function
        // metamaskAdapter.setAdapterSettings({
        //   sessionTime: 86400, // 1 day in seconds
        //   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
        //   },
        //   web3AuthNetwork: "cyan",
        // });

        // // it will add/update  the metamask adapter in to web3auth class
        // web3auth.configureAdapter(metamaskAdapter);

        // const torusWalletAdapter = new TorusWalletAdapter({
        //   clientId,
        // });

        // // it will add/update  the torus-evm adapter in to web3auth class
        // web3auth.configureAdapter(torusWalletAdapter);

        setWeb3auth(web3auth);

        await web3auth.initModal();

        // await web3auth.initModal({
        //   modalConfig: {
        //     [WALLET_ADAPTERS.OPENLOGIN]: {
        //       label: "openlogin",
        //       loginMethods: {
        //         // Disable facebook and reddit
        //         facebook: {
        //           name: "facebook",
        //           showOnModal: false
        //         },
        //         reddit: {
        //           name: "reddit",
        //           showOnModal: false
        //         },
        //         // Disable email_passwordless and sms_passwordless
        //         email_passwordless: {
        //           name: "email_passwordless",
        //           showOnModal: false
        //         },
        //         sms_passwordless: {
        //           name: "sms_passwordless",
        //           showOnModal: false
        //         }
        //       }
        //     }
        //   }
        // });
        setProvider(web3auth.provider);

        if (web3auth.connected) {
          setLoggedIn(true);
        }
      } catch (error) {
        console.error(error);
      }
    };

    init();
  }, []);

  const login = async () => {
    if (!web3auth) {
      uiConsole("web3auth not initialized yet");
      return;
    }
    const web3authProvider = await web3auth.connect();
    setProvider(web3authProvider);
  };

  const authenticateUser = async () => {
    if (!web3auth) {
      uiConsole("web3auth not initialized yet");
      return;
    }
    const idToken = await web3auth.authenticateUser();
    uiConsole(idToken);
  };

  const getUserInfo = async () => {
    if (!web3auth) {
      uiConsole("web3auth not initialized yet");
      return;
    }
    const user = await web3auth.getUserInfo();
    uiConsole(user);
  };

  const logout = async () => {
    if (!web3auth) {
      uiConsole("web3auth not initialized yet");
      return;
    }
    await web3auth.logout();
    setProvider(null);
    setLoggedIn(false);
  };

  const showWCM = async () => {
    if (!torusPlugin) {
      uiConsole("torus plugin not initialized yet");
      return;
    }
    torusPlugin.showWalletConnectScanner();
    uiConsole();
  };

  const initiateTopUp = async () => {
    if (!torusPlugin) {
      uiConsole("torus plugin not initialized yet");
      return;
    }
    torusPlugin.initiateTopup("moonpay", {
      selectedAddress: "0x8cFa648eBfD5736127BbaBd1d3cAe221B45AB9AF",
      selectedCurrency: "USD",
      fiatValue: 100,
      selectedCryptoCurrency: "ETH",
      chainNetwork: "mainnet",
    });
  };

  const getChainId = async () => {
    if (!provider) {
      uiConsole("provider not initialized yet");
      return;
    }
    const rpc = new RPC(provider);
    const chainId = await rpc.getChainId();
    uiConsole(chainId);
  };

  const addChain = async () => {
    if (!provider) {
      uiConsole("provider not initialized yet");
      return;
    }
    const newChain = {
      chainId: "0x5",
      displayName: "Goerli",
      chainNamespace: CHAIN_NAMESPACES.EIP155,
      tickerName: "Goerli",
      ticker: "ETH",
      decimals: 18,
      rpcTarget: "https://rpc.ankr.com/eth_goerli",
      blockExplorer: "https://goerli.etherscan.io",
    };
    await web3auth?.addChain(newChain);
    uiConsole("New Chain Added");
  };

  const switchChain = async () => {
    if (!provider) {
      uiConsole("provider not initialized yet");
      return;
    }
    await web3auth?.switchChain({ chainId: "0x5" });
    uiConsole("Chain Switched");
  };

  const getAccounts = async () => {
    if (!provider) {
      uiConsole("provider not initialized yet");
      return;
    }
    const rpc = new RPC(provider);
    const address = await rpc.getAccounts();
    uiConsole(address);
  };

  const getBalance = async () => {
    if (!provider) {
      uiConsole("provider not initialized yet");
      return;
    }
    const rpc = new RPC(provider);
    const balance = await rpc.getBalance();
    uiConsole(balance);
  };

  const sendTransaction = async () => {
    if (!provider) {
      uiConsole("provider not initialized yet");
      return;
    }
    const rpc = new RPC(provider);
    const receipt = await rpc.sendTransaction();
    uiConsole(receipt);
  };

  const signMessage = async () => {
    if (!provider) {
      uiConsole("provider not initialized yet");
      return;
    }
    const rpc = new RPC(provider);
    const signedMessage = await rpc.signMessage();
    uiConsole(signedMessage);
  };

  const getPrivateKey = async () => {
    if (!provider) {
      uiConsole("provider not initialized yet");
      return;
    }
    const rpc = new RPC(provider);
    const privateKey = await rpc.getPrivateKey();
    uiConsole(privateKey);
  };

  // const changeNetwork = async () => {
  //   if (!provider) {
  //     uiConsole("provider not initialized yet");
  //     return;
  //   }
  //   const rpc = new RPC(provider);
  //   const privateKey = await rpc.getPrivateKey();
  //   uiConsole(privateKey);
  // };

  function uiConsole(...args: any[]): void {
    const el = document.querySelector("#console>p");
    if (el) {
      el.innerHTML = JSON.stringify(args || {}, null, 2);
    }
  }

  const loggedInView = (
    <>
      <div className="flex-container">
        <div>
          <button onClick={getUserInfo} className="card">
            Get User Info
          </button>
        </div>
        <div>
          <button onClick={authenticateUser} className="card">
            Get ID Token
          </button>
        </div>
        <div>
          <button onClick={showWCM} className="card">
            Show Wallet Connect Modal
          </button>
        </div>
        <div>
          <button onClick={initiateTopUp} className="card">
            initiateTopUp
          </button>
        </div>
        <div>
          <button onClick={getChainId} className="card">
            Get Chain ID
          </button>
        </div>
        <div>
          <button onClick={addChain} className="card">
            Add Chain
          </button>
        </div>
        <div>
          <button onClick={switchChain} className="card">
            Switch Chain
          </button>
        </div>
        <div>
          <button onClick={getAccounts} className="card">
            Get Accounts
          </button>
        </div>
        <div>
          <button onClick={getBalance} className="card">
            Get Balance
          </button>
        </div>
        <div>
          <button onClick={signMessage} className="card">
            Sign Message
          </button>
        </div>
        <div>
          <button onClick={sendTransaction} className="card">
            Send Transaction
          </button>
        </div>
        <div>
          <button onClick={getPrivateKey} className="card">
            Get Private Key
          </button>
        </div>
        <div>
          <button onClick={logout} className="card">
            Log Out
          </button>
        </div>
      </div>
      <div id="console" style={{ whiteSpace: "pre-line" }}>
        <p style={{ whiteSpace: "pre-line" }}></p>
      </div>
    </>
  );

  const unloggedInView = (
    <button onClick={login} className="card">
      Login
    </button>
  );

  return (
    <div className="container">
      <h1 className="title">
        <a target="_blank" href="http://web3auth.io/" rel="noreferrer">
          Web3Auth{" "}
        </a>
        & ReactJS Ethereum Example
      </h1>

      <div className="grid">{loggedIn ? loggedInView : unloggedInView}</div>

      <footer className="footer">
        <a
          href="https://github.com/Web3Auth/examples/tree/main/web-modal-sdk/evm/react-evm-modal-example"
          target="_blank"
          rel="noopener noreferrer"
        >
          Source code
        </a>
      </footer>
    </div>
  );
}

export default App;

here’s another attempt with almost everything commented out. still showing up as whitelisted and throwing error:


import { useEffect, useState } from "react";
import { Web3Auth } from "@web3auth/modal";
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import { CHAIN_NAMESPACES, IProvider } from "@web3auth/base";
import {
  OpenloginAdapter,
  OPENLOGIN_NETWORK,
} from "@web3auth/openlogin-adapter";
import "./App.css";
import RPC from "./web3RPC"; // for using web3.js
//import RPC from "./ethersRPC"; // for using ethers.js

// Plugins
import { TorusWalletConnectorPlugin } from "@web3auth/torus-wallet-connector-plugin";

// Adapters
// import { MetamaskAdapter } from "@web3auth/metamask-adapter";
// import { TorusWalletAdapter } from "@web3auth/torus-evm-adapter";

const clientId =
  //"BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ"; // get from https://dashboard.web3auth.io
  "BGaoN2IjPn0qruzfDFr5z0HD9wJeOuU8RBkKBOF5DTZB3ZW6YTSa-3kDtOMx2WTPk5T4FjiksT4sQS1UVveIfAw"; // get from https://dashboard.web3auth.io

function App() {
  const [web3auth, setWeb3auth] = useState<Web3Auth | null>(null);
  const [torusPlugin, setTorusPlugin] =
    useState<TorusWalletConnectorPlugin | null>(null);
  const [provider, setProvider] = useState<IProvider | null>(null);
  const [loggedIn, setLoggedIn] = useState(false);

  useEffect(() => {
    const init = async () => {
      try {
        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",
            // appLogo: "https://web3auth.io/images/w3a-L-Favicon-1.svg", // Your App Logo Here
            theme: {
              primary: "red",
            },
            mode: "dark",
            logoLight: "https://web3auth.io/images/w3a-L-Favicon-1.svg",
            logoDark: "https://web3auth.io/images/w3a-D-Favicon-1.svg",
            defaultLanguage: "en", // en, de, ja, ko, zh, es, fr, pt, nl
            loginGridCol: 3,
            primaryButton: "externalLogin", // "externalLogin" | "socialLogin" | "emailLogin"
          }, */
          web3AuthNetwork: OPENLOGIN_NETWORK.SAPPHIRE_MAINNET,
        });
/*
        const openloginAdapter = new OpenloginAdapter({
          loginSettings: {
            mfaLevel: "optional",
          },
          adapterSettings: {
            uxMode: "redirect", // "redirect" | "popup"
            whiteLabel: {
              logoLight: "https://web3auth.io/images/w3a-L-Favicon-1.svg",
              logoDark: "https://web3auth.io/images/w3a-D-Favicon-1.svg",
              defaultLanguage: "en", // en, de, ja, ko, zh, es, fr, pt, nl
              mode: "dark", // whether to enable dark, light or auto mode. defaultValue: auto [ system theme]
            },
            mfaSettings: {
              deviceShareFactor: {
                enable: true,
                priority: 1,
                mandatory: true,
              },
              backUpShareFactor: {
                enable: true,
                priority: 2,
                mandatory: false,
              },
              socialBackupFactor: {
                enable: true,
                priority: 3,
                mandatory: false,
              },
              passwordFactor: {
                enable: true,
                priority: 4,
                mandatory: false,
              },
            },
          },
        });
        web3auth.configureAdapter(openloginAdapter);*/

        // plugins and adapters are optional and can be added as per your requirement
        // read more about plugins here: https://web3auth.io/docs/sdk/web/plugins/

        // adding torus wallet connector plugin
/*
        const torusPlugin = new TorusWalletConnectorPlugin({
          torusWalletOpts: {},
          walletInitOptions: {
            whiteLabel: {
              theme: { isDark: true, colors: { primary: "#00a8ff" } },
              logoDark: "https://web3auth.io/images/w3a-L-Favicon-1.svg",
              logoLight: "https://web3auth.io/images/w3a-D-Favicon-1.svg",
            },
            useWalletConnect: true,
            enableLogging: true,
          },
        });
        setTorusPlugin(torusPlugin);
        await web3auth.addPlugin(torusPlugin);*/

        // read more about adapters here: https://web3auth.io/docs/sdk/pnp/web/adapters/

        // adding metamask adapter
        // const metamaskAdapter = new MetamaskAdapter({
        //   clientId,
        //   sessionTime: 3600, // 1 hour in seconds
        //   web3AuthNetwork: "cyan",
        //   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
        //   },
        // });
        // // we can change the above settings using this function
        // metamaskAdapter.setAdapterSettings({
        //   sessionTime: 86400, // 1 day in seconds
        //   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
        //   },
        //   web3AuthNetwork: "cyan",
        // });

        // // it will add/update  the metamask adapter in to web3auth class
        // web3auth.configureAdapter(metamaskAdapter);

        // const torusWalletAdapter = new TorusWalletAdapter({
        //   clientId,
        // });

        // // it will add/update  the torus-evm adapter in to web3auth class
        // web3auth.configureAdapter(torusWalletAdapter);

        setWeb3auth(web3auth);

        await web3auth.initModal();

        // await web3auth.initModal({
        //   modalConfig: {
        //     [WALLET_ADAPTERS.OPENLOGIN]: {
        //       label: "openlogin",
        //       loginMethods: {
        //         // Disable facebook and reddit
        //         facebook: {
        //           name: "facebook",
        //           showOnModal: false
        //         },
        //         reddit: {
        //           name: "reddit",
        //           showOnModal: false
        //         },
        //         // Disable email_passwordless and sms_passwordless
        //         email_passwordless: {
        //           name: "email_passwordless",
        //           showOnModal: false
        //         },
        //         sms_passwordless: {
        //           name: "sms_passwordless",
        //           showOnModal: false
        //         }
        //       }
        //     }
        //   }
        // });
        setProvider(web3auth.provider);

        if (web3auth.connected) {
          setLoggedIn(true);
        }
      } catch (error) {
        console.error(error);
      }
    };

    init();
  }, []);

  const login = async () => {
    if (!web3auth) {
      uiConsole("web3auth not initialized yet");
      return;
    }
    const web3authProvider = await web3auth.connect();
    setProvider(web3authProvider);
  };

  const authenticateUser = async () => {
    if (!web3auth) {
      uiConsole("web3auth not initialized yet");
      return;
    }
    const idToken = await web3auth.authenticateUser();
    uiConsole(idToken);
  };

  const getUserInfo = async () => {
    if (!web3auth) {
      uiConsole("web3auth not initialized yet");
      return;
    }
    const user = await web3auth.getUserInfo();
    uiConsole(user);
  };

  const logout = async () => {
    if (!web3auth) {
      uiConsole("web3auth not initialized yet");
      return;
    }
    await web3auth.logout();
    setProvider(null);
    setLoggedIn(false);
  };

  const showWCM = async () => {
    if (!torusPlugin) {
      uiConsole("torus plugin not initialized yet");
      return;
    }
    torusPlugin.showWalletConnectScanner();
    uiConsole();
  };

  const initiateTopUp = async () => {
    if (!torusPlugin) {
      uiConsole("torus plugin not initialized yet");
      return;
    }
    torusPlugin.initiateTopup("moonpay", {
      selectedAddress: "0x8cFa648eBfD5736127BbaBd1d3cAe221B45AB9AF",
      selectedCurrency: "USD",
      fiatValue: 100,
      selectedCryptoCurrency: "ETH",
      chainNetwork: "mainnet",
    });
  };

  const getChainId = async () => {
    if (!provider) {
      uiConsole("provider not initialized yet");
      return;
    }
    const rpc = new RPC(provider);
    const chainId = await rpc.getChainId();
    uiConsole(chainId);
  };

  const addChain = async () => {
    if (!provider) {
      uiConsole("provider not initialized yet");
      return;
    }
    const newChain = {
      chainId: "0x5",
      displayName: "Goerli",
      chainNamespace: CHAIN_NAMESPACES.EIP155,
      tickerName: "Goerli",
      ticker: "ETH",
      decimals: 18,
      rpcTarget: "https://rpc.ankr.com/eth_goerli",
      blockExplorer: "https://goerli.etherscan.io",
    };
    await web3auth?.addChain(newChain);
    uiConsole("New Chain Added");
  };

  const switchChain = async () => {
    if (!provider) {
      uiConsole("provider not initialized yet");
      return;
    }
    await web3auth?.switchChain({ chainId: "0x5" });
    uiConsole("Chain Switched");
  };

  const getAccounts = async () => {
    if (!provider) {
      uiConsole("provider not initialized yet");
      return;
    }
    const rpc = new RPC(provider);
    const address = await rpc.getAccounts();
    uiConsole(address);
  };

  const getBalance = async () => {
    if (!provider) {
      uiConsole("provider not initialized yet");
      return;
    }
    const rpc = new RPC(provider);
    const balance = await rpc.getBalance();
    uiConsole(balance);
  };

  const sendTransaction = async () => {
    if (!provider) {
      uiConsole("provider not initialized yet");
      return;
    }
    const rpc = new RPC(provider);
    const receipt = await rpc.sendTransaction();
    uiConsole(receipt);
  };

  const signMessage = async () => {
    if (!provider) {
      uiConsole("provider not initialized yet");
      return;
    }
    const rpc = new RPC(provider);
    const signedMessage = await rpc.signMessage();
    uiConsole(signedMessage);
  };

  const getPrivateKey = async () => {
    if (!provider) {
      uiConsole("provider not initialized yet");
      return;
    }
    const rpc = new RPC(provider);
    const privateKey = await rpc.getPrivateKey();
    uiConsole(privateKey);
  };

  // const changeNetwork = async () => {
  //   if (!provider) {
  //     uiConsole("provider not initialized yet");
  //     return;
  //   }
  //   const rpc = new RPC(provider);
  //   const privateKey = await rpc.getPrivateKey();
  //   uiConsole(privateKey);
  // };

  function uiConsole(...args: any[]): void {
    const el = document.querySelector("#console>p");
    if (el) {
      el.innerHTML = JSON.stringify(args || {}, null, 2);
    }
  }

  const loggedInView = (
    <>
      <div className="flex-container">
        <div>
          <button onClick={getUserInfo} className="card">
            Get User Info
          </button>
        </div>
        <div>
          <button onClick={authenticateUser} className="card">
            Get ID Token
          </button>
        </div>
        <div>
          <button onClick={showWCM} className="card">
            Show Wallet Connect Modal
          </button>
        </div>
        <div>
          <button onClick={initiateTopUp} className="card">
            initiateTopUp
          </button>
        </div>
        <div>
          <button onClick={getChainId} className="card">
            Get Chain ID
          </button>
        </div>
        <div>
          <button onClick={addChain} className="card">
            Add Chain
          </button>
        </div>
        <div>
          <button onClick={switchChain} className="card">
            Switch Chain
          </button>
        </div>
        <div>
          <button onClick={getAccounts} className="card">
            Get Accounts
          </button>
        </div>
        <div>
          <button onClick={getBalance} className="card">
            Get Balance
          </button>
        </div>
        <div>
          <button onClick={signMessage} className="card">
            Sign Message
          </button>
        </div>
        <div>
          <button onClick={sendTransaction} className="card">
            Send Transaction
          </button>
        </div>
        <div>
          <button onClick={getPrivateKey} className="card">
            Get Private Key
          </button>
        </div>
        <div>
          <button onClick={logout} className="card">
            Log Out
          </button>
        </div>
      </div>
      <div id="console" style={{ whiteSpace: "pre-line" }}>
        <p style={{ whiteSpace: "pre-line" }}></p>
      </div>
    </>
  );

  const unloggedInView = (
    <button onClick={login} className="card">
      Login
    </button>
  );

  return (
    <div className="container">
      <h1 className="title">
        <a target="_blank" href="http://web3auth.io/" rel="noreferrer">
          Web3Auth{" "}
        </a>
        & ReactJS Ethereum Example
      </h1>

      <div className="grid">{loggedIn ? loggedInView : unloggedInView}</div>

      <footer className="footer">
        <a
          href="https://github.com/Web3Auth/examples/tree/main/web-modal-sdk/evm/react-evm-modal-example"
          target="_blank"
          rel="noopener noreferrer"
        >
          Source code
        </a>
      </footer>
    </div>
  );
}

export default App;

@andrew Thanks for your detailed reply.

I have forwarded your feedback to our Dev team and will get back to you by Monday with an update.

CC: @one2all.test

1 Like

Hello,
i’ve fixed the import issue when using wagmi connector in v5.0.1. Pls upgrade

Hello guys!

Same problem here. This is my NextJS app (view Github issue)

What in this useEffect code can possibly trigger the ‘whitelabel’ thing?

useEffect(() => {
    const init = async () => {
      try {
        const web3auth = new Web3Auth({
          clientId,
          chainConfig: {
            chainNamespace: CHAIN_NAMESPACES.EIP155,
            chainId: "0x1",
            rpcTarget: process.env.NEXT_PUBLIC_ETHEREUM_MAINNET_ENDPOINT
          },
          web3AuthNetwork: "sapphire_mainnet",
        });

        // const torusPlugin = new TorusWalletConnectorPlugin({
        //   torusWalletOpts: {},
        //   walletInitOptions: {
        //     whiteLabel: {
        //       theme: { isDark: true, colors: { primary: "#00a8ff" } },
        //       logoDark: "https://web3auth.io/images/w3a-L-Favicon-1.svg",
        //       logoLight: "https://web3auth.io/images/w3a-D-Favicon-1.svg",
        //     },
        //     useWalletConnect: true,
        //     enableLogging: true,
        //   },
        // });
        // setTorusPlugin(torusPlugin);
        // await web3auth.addPlugin(torusPlugin);

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

        web3auth.configureAdapter(walletConnectV2Adapter);

        // adding metamask adapter

        const metamaskAdapter = new MetamaskAdapter({
          clientId,
          sessionTime: 3600, // 1 hour in seconds
          web3AuthNetwork: "sapphire_mainnet",
          chainConfig: {
            chainNamespace: CHAIN_NAMESPACES.EIP155,
            chainId: "0x1",
            rpcTarget: process.env.NEXT_PUBLIC_ETHEREUM_MAINNET_ENDPOINT
          },
        });
        // we can change the above settings using this function
        // metamaskAdapter.setAdapterSettings({
        //   sessionTime: 86400, // 1 day in seconds
        //   chainConfig: {
        //     chainNamespace: CHAIN_NAMESPACES.EIP155,
        //     chainId: "0x89",
        //     rpcTarget: "https://rpc-mainnet.matic.network", // This is the public RPC we have added, please pass on your own endpoint while creating an app
        //   },
        //   web3AuthNetwork: "sapphire_mainnet",
        // });

        // it will add/update  the metamask adapter in to web3auth class
        // web3auth.configureAdapter(metamaskAdapter);

        // const torusWalletAdapter = new TorusWalletAdapter({
        //   clientId,
        // });

        // it will add/update  the torus-evm adapter in to web3auth class
        // web3auth.configureAdapter(torusWalletAdapter);

        setWeb3auth(web3auth);
        setProvider(web3auth.provider);

        await web3auth.initModal();

        if (web3auth.connected) {
          setLoggedIn(true);
          const ethersProvider = new ethers.BrowserProvider(web3auth.provider);
          const signer = await ethersProvider.getSigner()
          setUserAddress(await signer.getAddress())
        }
      } catch (error) {
        console.error(error);
      }
    };

    init();
  }, []);

Thanks in advance!

1 Like

Hello everyone,
Apologies for the delay in this.
whitelabel setting was falsely triggered due to default language and browser auto mode settings.
This is fixed now on our end and the false prompt won’t be shown anymore.

Thanks for your patience

1 Like

confirmed it is working thanks!

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.