Wallet service integartion error

[kapil.upwork]

I am using latest 8.12.0 along with latest wagmi . I am trying to implement the wallet UI functionality using the wallet-services-plugin without hooks. I am using the Sepolia chain. I am encountering the following issues: 1. I am getting a CORS error in the console:Access to fetch at ‘https://rpc.sepolia.org/’ from origin ‘https://wallet.web3auth.io’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled. 2. When walletServicesPlugin?.status === ‘connected’, I run walletServicesPlugin.showWalletUi();. This throws the following error in the console: Cannot read properties of undefined (reading ‘tokenAddress’)
at index-DJuSXIJ-.js:68:54412
at Array.reduce ()
at X4 (index-DJuSXIJ-.js:68:54388)
at RAe (index-DJuSXIJ-.js:68:54513)
at Proxy.getTokenBalancesUsingHandler

Is there something extra needs to setup.

[shahbaz]

Hey @kapil.upwork

Please share the code snippets for the initialization and login

[kapil.upwork]

@shahbaz Due to time constrain I did not migrate the code with hooks yet! Here are all the details.

a. I am using sepolia as test environment
2. Adding nothing for wallet services in my app on web3auth dashboard
3. After sign in I am able to do almost every other thing, but the above error are showing in the console.

const walletServicesPlugin = new WalletServicesPlugin({
    wsEmbedOpts: {},
    walletInitOptions: { whiteLabel: { showWidgetButton: true, buttonPosition: "bottom-right" } },
});
web3AuthInstance.addPlugin(walletServicesPlugin); // Add the plugin to web3auth

Exported the walletServicesPlugin from code

export { web3AuthInstance, walletServicesPlugin }

Checking if status is connected then trying to show wallet UI

      if (walletServicesPlugin?.status === 'connected')
        await walletServicesPlugin.showWalletUi();

"dependencies": {
    "@ant-design/icons": "^5.4.0",
    "@emotion/react": "^11.13.0",
    "@emotion/styled": "^11.13.0",
    "@mui/icons-material": "^5.16.5",
    "@mui/material": "^5.16.5",
    "@mui/x-date-pickers": "^7.11.0",
    "@reduxjs/toolkit": "^2.2.6",
    "@sentry/react": "^8.20.0",
    "@tanstack/react-query": "^5.51.11",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^13.0.0",
    "@testing-library/user-event": "^13.2.1",
    "@toruslabs/eccrypto": "^5.0.4",
    "@vitejs/plugin-react": "^4.3.1",
    "@web3auth/base": "^8.12.0",
    "@web3auth/coinbase-adapter": "^8.12.0",
    "@web3auth/ethereum-provider": "^8.12.0",
    "@web3auth/metamask-adapter": "^8.12.0",
    "@web3auth/modal": "^8.12.0",
    "@web3auth/modal-react-hooks": "^8.12.0",
    "@web3auth/openlogin-adapter": "^8.12.0",
    "@web3auth/torus-evm-adapter": "^8.12.0",
    "@web3auth/ui": "^8.12.0",
    "@web3auth/wallet-connect-v2-adapter": "^8.12.0",
    "@web3auth/wallet-services-plugin": "^8.12.0",
    "@web3auth/wallet-services-plugin-react-hooks": "^8.12.0",
    "@web3auth/web3auth-wagmi-connector": "^6.0.0",
    "antd": "^5.19.3",
    "apexcharts": "^3.51.0",
    "axios": "^1.7.2",
    "ethers": "^6.13.1",
    "lodash": "^4.17.21",
    "moment": "^2.30.1",
    "react": "^18.3.1",
    "react-apexcharts": "^1.4.1",
    "react-dom": "^18.3.1",
    "react-hook-form": "^7.52.1",
    "react-icons": "^5.2.1",
    "react-joyride": "^2.8.2",
    "react-phone-number-input": "^3.4.4",
    "react-redux": "^9.1.2",
    "react-router-dom": "^6.25.1",
    "react-share": "^5.1.0",
    "react-spinners": "^0.14.1",
    "react-svg": "^16.1.34",
    "react-toastify": "^10.0.5",
    "sass": "^1.77.8",
    "socket.io-client": "^4.7.5",
    "viem": "^2.18.0",
    "vite": "^5.3.5",
    "wagmi": "^2.12.0",
    "web-vitals": "^2.1.0"
  },
  "devDependencies": {
    "buffer": "^6.0.3",
    "empty-module": "^0.0.2",
    "eslint-config-react-app": "^7.0.1",
    "process": "^0.11.10",
    "source-map-loader": "^4.0.1",
    "vite-plugin-svgr": "^4.2.0"
  },
  "scripts": {
    "start": "vite",
    "build": "vite build",
    "serve": "vite preview",
    "lint": "react-scripts lint"
  },