Send Transaction with WalletService Plugin via wallet connect linked at opensea or any bridge service

Help - Plug n Play PnP Web SDKs
1
  • SDK Version(package.json):
    “@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”,
  • Platform: Nuxt3
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'

      this.walletServicesPlugin = new WalletServicesPlugin({
        wsEmbedOpts: {
          web3AuthClientId: config.public.web3AuthClientId,
          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,
        },
      })

      // Web3Authインスタンスにプラグインを追加
      this.web3auth.addPlugin(this.walletServicesPlugin)

      // 接続イベントリスナーを追加
      this.walletServicesPlugin.on('connected', () => {
        this.walletServicesPluginConnected = true
      })
    } catch (error) {
      console.error('Wallet Servicesの設定エラー:', error)
    }
  }

I am using the web3auth-nodal library for wallet integration and the walletservice plugin.
・Use case
Copy the Wallet Connect URL from OpenSea, etc., and paste it into the Web3Auth Wallet icon to integrate.
I have confirmed that the integration is working, but is it possible to process NFT-related transactions on Opensea?
If so, please provide me with some sample code.

スクリーンショット 2025-08-14 6.10.45

thanks in advance

2

Thank you for your detailed question and for sharing your code and context!

Summary of Your Setup

  • SDK: Web3Auth Plug and Play (PnP) Web SDK
  • SDK Version: ^9.7.0 for all relevant packages
  • Platform: Nuxt3 (Vue 3)
  • Feature Used: WalletServices Plugin with WalletConnect integration
  • Use Case:
    • User copies a WalletConnect URL (e.g., from OpenSea)
    • Pastes it into the Web3Auth Wallet widget to connect
    • You want to know if NFT-related transactions (e.g., on OpenSea) can be processed, and if so, how to do it (with sample code).

Answer & Guidance

1. WalletConnect & NFT Transactions

The WalletServices Plugin with WalletConnect allows your users to connect to dApps like OpenSea. When a user pastes a WalletConnect URI (from OpenSea or a bridge), the Web3Auth wallet acts as the signer for any transaction requests initiated by that dApp—including NFT transactions (buy, sell, transfer, etc.).

In short:
If the WalletConnect session is established, your users can sign and send NFT transactions on OpenSea via the Web3Auth Wallet UI. The transaction approval and signing are handled in the WalletServices modal.

2. Sample Flow

You do not need to write custom code to process NFT transactions specifically. The flow is:

  1. User opens your dApp and logs in with Web3Auth.
  2. User opens the Wallet widget (from Web3Auth WalletServices).
  3. User pastes the WalletConnect URI from OpenSea into the WalletConnect section.
  4. OpenSea initiates a transaction (e.g., NFT purchase/sale).
  5. The WalletServices modal will prompt the user to approve/sign the transaction.
  6. Once approved, the transaction is broadcasted to the blockchain.

All transaction types supported by the connected dApp (including NFTs) will work, as long as the chain is supported and the user has sufficient funds.

3. Sample Code

You already have the correct integration for WalletServices and WalletConnect. There is no additional code required for NFT transactions; it is handled via the WalletConnect protocol.

If you want to programmatically trigger WalletConnect, you can use the plugin API, but for most use cases, the UI flow is sufficient.

Example (from your code, already correct):

this.walletServicesPlugin = new WalletServicesPlugin({
  wsEmbedOpts: {
    web3AuthClientId: config.public.web3AuthClientId,
    web3AuthNetwork: config.public.web3AuthNetwork as WEB3AUTH_NETWORK_TYPE,
  },
  walletInitOptions: {
    whiteLabel: {
      showWidgetButton: true,
      buttonPosition: 'bottom-right',
      // ...other options
    },
    confirmationStrategy: CONFIRMATION_STRATEGY.MODAL,
  },
})
this.web3auth.addPlugin(this.walletServicesPlugin)

No additional code is needed for NFT transactions via WalletConnect.

4. References

5. Notes & Recommendations

  • Supported Chains: Make sure your WalletServices config supports the same chain as OpenSea (usually Ethereum mainnet or Polygon).
  • Production Use: WalletServices is a paid feature (Scale plan and above), but can be tested on sapphire_devnet for free.
  • Custom Actions: If you need to trigger WalletConnect or manage sessions programmatically, refer to the WalletServices Plugin API.

If you encounter any errors during the connection or transaction process, please provide:

  • Browser console logs/screenshots
  • Any error messages shown in the WalletServices modal
  • Details about the chain/network you are using

Let us know if you have any specific issues or errors during the flow! Otherwise, you should be able to process NFT transactions on OpenSea via WalletConnect with your current setup.

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

Can you please try it with Web3Auth v10?