How can I customize modal order?

Please provide the following details too when asking for help in this category:
Hi, I recognized that OAuth providers could be customized orders. but I’m not sure entire order could be customized or not like the second image.

My questions are:

  • Can web3auth customize the entire order like the second image?
  • if it’s possible, could you tell me the document’s URL?

  • SDK Version:
"@web3auth/base": "^5.0.1",
"@web3auth/metamask-adapter": "^5.0.1",
"@web3auth/modal": "^5.0.1",
"@web3auth/torus-evm-adapter": "^5.0.1",
"@web3auth/torus-wallet-connector-plugin": "^5.0.1",
"@web3auth/wallet-connect-v1-adapter": "^5.0.1",
  • Platform: Web (Chrome)

Please provide the Web3Auth initialization and login code snippet below:

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: {
            theme: "light",
            defaultLanguage: 'ja',
          },
          web3AuthNetwork: "testnet",
        });

const torusPlugin = new TorusWalletConnectorPlugin({
          torusWalletOpts: {
            buttonPosition: 'top-left',
          },
          walletInitOptions: {
            whiteLabel: {
              theme: { isDark: false, colors: { primary: "#00a8ff" } },
              logoDark: "https://web3auth.io/community/images/w3a-L-Favicon-1.svg",
              logoLight: "https://web3auth.io/community/images/w3a-D-Favicon-1.svg",
            },
            useWalletConnect: true,
            enableLogging: true,
          },
        });
        await web3auth.addPlugin(torusPlugin);
const walletConnectV1Adapter = new WalletConnectV1Adapter({
          adapterSettings: {
            bridge: "https://bridge.walletconnect.org",
          },
          clientId,
        });

        web3auth.configureAdapter(walletConnectV1Adapter);
const metamaskAdapter = new MetamaskAdapter({
          clientId,
          sessionTime: 3600, // 1 hour in seconds
          web3AuthNetwork: "testnet",
          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: "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: "testnet",
        });

        // 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);

Hello @haru,

Thank you for reaching out to us. We understand that reordering the social, passwordless, and external wallet options is important to you, but currently, this feature is not supported. However, we offer the ability to reorder OAuth provider orders to meet your needs.

We would like to offer a possible solution to help you customize your login UI using our @web3auth/nomodal SDK. With this SDK, you have the flexibility to create your own login UI that perfectly suits your needs.

We are always looking for ways to improve our product, and we appreciate your feedback.

1 Like

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