About Wallet Service Plugin

yu.jongmin · June 19, 2025, 10:57pm

I’m planning to use Wallet Service, and I’m trying it out on sapphire_devnet right now.
Is it correct that what I set from Chains & Networks and Wallet Configuration in Web3Auth Dashboard is reflected in the wallet?
Also, is it possible to set up a chain list in the wallet that I want?

"@web3auth/auth-adapter": "^9.7.0",
"@web3auth/base": "^9.7.0",
"@web3auth/ethereum-provider": "^9.7.0",
"@web3auth/no-modal": "^9.7.0",
"@web3auth/wallet-connect-v2-adapter": "^9.7.0",
"@web3auth/wallet-services-plugin": "^9.7.0",

nuxt3
code

      this.web3auth = new Web3AuthNoModal({
        clientId,
        web3AuthNetwork: web3AuthNetwork as WEB3AUTH_NETWORK_TYPE,
        privateKeyProvider,
        sessionTime: 86400 * 30,
      })
......
private async setupWalletServices(config: RuntimeConfig) {
    try {
      if (!this.web3auth) return

      // ロゴURLを環境変数から取得
      const logoDark = config.public.logoDark || 'https://web3auth.io/images/web3auth-logo---Dark.svg'
      const logoLight = config.public.logoLight || 'https://web3auth.io/images/web3auth-logo.svg'

      // Wallet Servicesプラグインの初期化
      // this.walletServicesPlugin = new WalletServicesPlugin({
      //   walletInitOptions: {
      //     whiteLabel: {
      //       showWidgetButton: true,
      //       buttonPosition: 'bottom-right',
      //       hideTopup: true,
      //       hideTransfers: false,
      //       hideNftDisplay: false,
      //       hideTokenDisplay: true,
      //       hideReceive: false,
      //       hideSwap: true,
      //       defaultPortfolio: 'token',
      //       logoDark,
      //       logoLight,
      //       defaultLanguage: this.getBrowserLanguage(),
      //     },
      //   },
      // })

      this.walletServicesPlugin = new WalletServicesPlugin({
        wsEmbedOpts: {
          web3AuthClientId: config.public.web3AuthClientId as string,
          web3AuthNetwork: config.public.web3AuthNetwork as WEB3AUTH_NETWORK_TYPE,
        },
        walletInitOptions: {
          whiteLabel: {
            showWidgetButton: true,
            buttonPosition: 'bottom-right',
            hideSwap: true,
            hideTopup: true,
            logoDark,
            logoLight,
            defaultLanguage: this.getBrowserLanguage(),
            defaultPortfolio: 'token',
          },
          confirmationStrategy: CONFIRMATION_STRATEGY.MODAL,
        },
      })

      this.web3auth.addPlugin(this.walletServicesPlugin)

      this.walletServicesPlugin.on('connected', () => {
        this.walletServicesPluginConnected = true
      })
    } catch (error) {
      console.error('Wallet Services:', error)
    }
  }

thanks in advance

w3abot · June 19, 2025, 10:58pm

Thank you for your detailed question and for sharing your code and SDK versions. Here’s a summary and some guidance based on your queries:

Your Setup

SDK: Web3Auth Plug and Play (PnP) Web SDK
SDK Versions: All packages at ^9.7.0
Platform: Nuxt3 (Vue 3)
Network: sapphire_devnet
Plugin: @web3auth/wallet-services-plugin

Your Questions & Answers

1. Are Chains & Networks and Wallet Configuration set in the Web3Auth Dashboard reflected in the wallet?

Yes, the chain configurations and wallet settings you define in the Web3Auth Dashboard are automatically fetched and applied to your wallet instance at runtime, provided you initialize the SDK with your clientId and the correct network (web3AuthNetwork).

The SDK will use the chain list and wallet configuration associated with your project’s clientId.
These settings include supported chains, default chain, and wallet UI customization.

Reference:

2. Can I set up a custom chain list in the wallet?

Yes, you can customize the chain list.

You can add custom chains either from the Web3Auth Dashboard (recommended for most use-cases), or programmatically by passing a chains array in your Web3Auth initialization options.
Only the chains you specify will be available in the wallet interface.

Example:

this.web3auth = new Web3AuthNoModal({
  clientId,
  web3AuthNetwork,
  privateKeyProvider,
  sessionTime: 86400 * 30,
  chains: [
    {
      chainNamespace: "eip155",
      chainId: "0x1", // Ethereum Mainnet
      rpcTarget: "https://mainnet.infura.io/v3/YOUR_INFURA_ID",
      displayName: "Ethereum Mainnet",
      blockExplorer: "https://etherscan.io",
      ticker: "ETH",
      tickerName: "Ethereum",
    },
    // Add more chains as needed
  ],
})