[Archive] primaryButton and showOnModal does not seem to do anything

Embedded Wallets (Web3Auth)
1

:classical_building: Archived Content from Web3Auth Community

This topic was originally posted by dev12 on 10/8/2023.
This content has been migrated from our previous community forum to preserve valuable discussions.

I’ve upgraded to the growth plan, running on Sapphire mainnet. When attempting to configure the modal, by forcing the connect your wallet to be the primary button (shown first), and to hide some of our unused/not ready social logins, it seems like the uiConfig doesn’t do anything. Even in testing on ready/used social logins, there is no change. I also cannot hide the torus wallet.
Version:
“@web3auth/base”: “^7.0.1”,
“@web3auth/base-provider”: “^7.0.1”,
“@web3auth/coinbase-adapter”: “^7.0.1”,
“@web3auth/ethereum-provider”: “^7.0.1”,
“@web3auth/metamask-adapter”: “^7.0.1”,
“@web3auth/modal”: “^7.0.2”,
“@web3auth/openlogin-adapter”: “^7.0.1”,
“@web3auth/phantom-adapter”: “^7.0.1”,
“@web3auth/solana-provider”: “^7.0.1”,
“@web3auth/solana-wallet-connector-plugin”: “^7.0.1”,
“@web3auth/solflare-adapter”: “^7.0.2”,
“@web3auth/torus-wallet-connector-plugin”: “^7.0.1”,
“@web3auth/wallet-connect-v2-adapter”: “^7.0.2”,

Initialization Code:

const web3auth = new Web3Auth({
clientId: process.env.NEXT_PUBLIC_WEB3AUTH_CLIENT_ID,
web3AuthNetwork: “sapphire_mainnet”, // mainnet, aqua, cyan or testnet
chainConfig: {
chainNamespace: CHAIN_NAMESPACES.SOLANA,
chainId: “0x1”, // Please use 0x1 for Mainnet, 0x2 for Testnet, 0x3 for Devnet
rpcTarget: process.env.NEXT_PUBLIC_RPC_URL, // This is the public RPC we have added, please pass on your own endpoint while creating an app

      },
      uiConfig: {
        appName: "xxxxxx",
        appUrl: "https://xxxxxx.so",
        logoLight: "https://arweave.net/DZS-xxxxxx?ext=svg",
        logoDark: "https://arweave.net/DZS-xxxxxx?ext=svg",
        mode: 'dark',
        primaryButton: "externalLogin",
        loginMethodsOrder: [
          "google", "discord", "twitter", "wechat"
        ],
        [WALLET_ADAPTERS.TORUS_SOLANA]:{
          showOnModal:false,
          showOnDesktop:false,
          showOnMobile:false,
        },
        [WALLET_ADAPTERS.WALLET_CONNECT_V2]: {
          showOnModal: true
        },
      },
    })
    // Configure adapters
    const openloginAdapter = new OpenloginAdapter({
      loginSettings: {
        mfaLevel: "optional", // Pass on the mfa level of your choice: default, optional, mandatory, none
      },
      adapterSettings: {
        whiteLabel: {
          appName: "xxxxxx",
          logoLight: "https://arweave.net/DZS-xxxxxx?ext=svg",
          logoDark: "https://arweave.net/DZS-xxxxxx?ext=svg",
          defaultLanguage: "en",
          mode: 'dark' // whether to enable dark mode. defaultValue: false
        },
        loginConfig: {
          email_passwordless: {
            verifier: "xxxxxx-email-passwordless", // Pass the Verifier name here
            typeOfLogin: "jwt", // Pass on the login provider of the verifier you've created
            jwtParameters: {
              domain: "https://xxxxxx-so.us.auth0.com",
              client_id: "xxxxxx",
              verifierIdField: "name",
            }
          },
          twitterauth0: {
            verifier: "xxxxxx-twitter", // Pass the Verifier name here
            typeOfLogin: "twitter", // Pass on the login provider of the verifier you've created
            clientId: "xxxxxx", // Pass on the Google `Client ID` here
            // verifierSubIdentifier: "Sub"
          },
          discord: {
            verifier: "xxxxxx-discord", // Pass the Verifier name here
            typeOfLogin: "discord", // Pass on the login provider of the verifier you've created
            clientId: 'xxxxxx',
          },
          githubauth0: {
            verifier: "xxxxxx-github",
            typeOfLogin: "github",
            jwtParameters: {
              domain: "https://xxxxxx-so.us.auth0.com",
              client_id: "xxxxxx",
              verifierIdField: "Sub",
            }
          },
          googleauth0: {
            verifier: "xxxxxx-google-auth0",
            typeOfLogin: "google",
            jwtParameters: {
              domain: "https://xxxxxx-so.us.auth0.com",
              client_id: "xxxxxx",
              verifierIdField: "Sub",
            }
          },
          facebook: {
            verifier: "xxxxxx-facebook",
            typeOfLogin: "facebook",
            jwtParameters: {
              client_id: "xxxxxx",
            }
          },
          twitch: {
            verifier: "xxxxxx-twitch",
            typeOfLogin: "twitch",
            showOnModal: false,
          },
          reddit: {
            verifier: "xxxxxx-reddit",
            typeOfLogin: "reddit",
            showOnModal: false,
          },
          linkedin: {
            verifier: "xxxxxx-linkedin",
            typeOfLogin: "linkedin",
            showOnModal: false,
            showOnDesktop: false,
            showOnMobile: false 
          }
        }
      }
    });
    web3auth.configureAdapter(openloginAdapter);

const solflareAdapter = new SolflareAdapter({
  clientId: process.env.NEXT_PUBLIC_WEB3AUTH_CLIENT_ID,
});
web3auth.configureAdapter(solflareAdapter);

setWeb3auth(web3auth);

await web3auth.initModal(); // initialize modal
setProvider(web3auth.provider);

if (web3auth.connected) {
  await connect(web3auth);
  return;
};

2

@dev12 Welcome Aboard!

Could you try removing the parameters logoLight? and logoDark? from the uiconfig?

3

Looks like the only change is that the logo disappears

4

@dev12 Your issue has been forwarded to our Dev and we will get back with an update.

5

Hi guys.
This issue is somehow mine too.
I wonder if there is a way that we can hide all buttons and only show the wallet connect button or only show the Google button.
Is there a way?

6

So, after playing around with it a bit, I’ve determined a few things.

  1. Setting “PrimaryButton” only adds styling, makes the “Connect your wallet” button blue. So that seems to work.
  2. When you configure an Adapter after you call new Web3Auth (with your config), it sets that adapter to defaults, which means showOnModal is set to true. Therefore, you need to configure the adapters after you call new Web3Auth with “showOnModal:false/true” in order for it to have an effect.

In order to show only the wallet buttons, or only show the openLogins (google, email, etc), you set showOnModal in the web3Auth.initModal() config, example below:

      const web3auth = new Web3Auth({
      clientId: process.env.NEXT_PUBLIC_WEB3AUTH_CLIENT_ID,
      web3AuthNetwork: "sapphire_mainnet", // mainnet, aqua,  cyan or testnet
      chainConfig: {
        chainNamespace: CHAIN_NAMESPACES.SOLANA,
        chainId: "0x1", // Please use 0x1 for Mainnet, 0x2 for Testnet, 0x3 for Devnet
        rpcTarget: process.env.NEXT_PUBLIC_RPC_URL,
      },
      enableLogging: true,
      uiConfig: web3authUiConfig
    })

const openloginAdapter = new OpenloginAdapter({

});

web3auth.configureAdapter(openloginAdapter);

const solflareAdapter = new SolflareAdapter({
  clientId: process.env.NEXT_PUBLIC_WEB3AUTH_CLIENT_ID,

});
web3auth.configureAdapter(solflareAdapter);



await web3auth.initModal({

modalConfig: {

[WALLET_ADAPTERS.TORUS_SOLANA]: {

showOnModal: false,

label: ‘Torus’,

},

[WALLET_ADAPTERS.OPENLOGIN]: {

showOnModal: true,

label: ‘Openlogin’,

…openLoginAdapterLoginConfig

},

// [WALLET_ADAPTERS.PHANTOM]: {

//   showOnModal: true,

//   label: ‘Phantom’,

// },


    // [WALLET_ADAPTERS.WALLET_CONNECT_V2]: {
    //   showOnModal: true,
    //   label: 'Wallet Connect',
    // },
  }
}); // initialize modal

  1. However, I still am unable to hide specific login methods with this, even though I’m passing the showOnModal:false for some specific login methods. So this still needs to get looked into by the web3auth devs.
7

Thank you very much for the reply.

It would be highly appreciated if you answer my other question:
I wonder if there is a way to detect successful or unsuccessful signup/login by a listener. For example, if we signup/login with web3auth Google, then after closing the Google popup, I want to recognize the successful or unsuccessful signup/login.
Also, if you originally used (without using web3auth) Google auths service with the help of this code:
chrome.identity.launchWebAuthFlow();
You know that after signing up with “chrome.identity.launchWebAuthFlow()”, Google gives us the “access-token” and I wonder if we can access this “access-token” after signing up with Google in web3auth?

8
9

Can’t understand how you are trying to do it. But in our react-evm-modal example, I am able to hide specific login methods using this snippet.

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,
                },
              },
            },
        }});
10

Obviously there’s a way, please look at the other answer. You can select showOnModal: false to choose not to show any particular login method.

11

The web3auth.connected can show you true value on a successful login, that’s done from our side. For any other ways, please try it out yourself and let us know if you face any issue.