ConnectorController.setConnectors: Not possible to add connector

Developer Discussion Extension
1

I’m currently developing an application using WalletConnect to connect MetaMask. When running the app on localhost, the following error appears in the console:

inpage.js:1 ConnectorController.setConnectors: Not possible to add connector
SecurityError: Blocked a frame with origin http ://localhost:3001 from accessing a cross-origin frame.

image
image1064×229 21.5 KB

What I Have Tried:

  • I have installed the latest version of MetaMask and made sure I am logged in.

Environment:

  • MetaMask Chrome Extension: 12.5.0 (latest version)
  • @reown/appkit: ^1.1.7
  • @reown/appkit-adapter-ethers: ^1.1.7
  • ethers: ^6.13.4
  • @vitejs/plugin-react: ^4.0.0
  • vite: ^4.3.9
  • vite-plugin-compression2: ^0.10.2
  • react: ^17.0.2

Question:

Does anyone have any ideas on why this might be happening or how to resolve this error?

2

Hi are you using any source code, walletconnect maybe. Could you share steps to reproduce before you ran into this error. Could you share your code please

1 Like
3 
import { createAppKit, useAppKit, useAppKitAccount, useAppKitProvider, useAppKitState } from '@reown/appkit/react'
import { EthersAdapter } from '@reown/appkit-adapter-ethers'
import { bsc, defineChain } from '@reown/appkit/networks'
import { BrowserProvider, ethers } from 'ethers'
import { useEffect } from 'react'

const projectId = 'projectId'
const metadata = {
  name: 'test',
  description: 'test',
  url: 'http://localhost:3001/',
  icons: ['']
}

const customNetwork = defineChain({
  //hide
})

const ConnectWallet = () => {
  const { t } = useTranslation()
  createAppKit({
   adapters: [new EthersAdapter()],
    networks:[bsc],
    metadata,
    projectId,
    features: {
      analytics: true, // Optional - defaults to your Cloud configuration
      email: false,
      socials: false,
    },
    featuredWalletIds: [
      'c57ca95b47569778a828d19178114f4db188b89b763c899ba0be274e97267d96',
    ],
    enableWalletConnect: false,
    allowUnsupportedChain: true,
    debug: true,
  })

  const { open } = useAppKit()
  const { address, isConnected, caipAddress, status } = useAppKitAccount()
  const { walletProvider } = useAppKitProvider('eipxxxx')

  const handleConnectWallet = async () => {
    try {
      await open()
    } catch (error) {
      console.error(error)
    }
  }

  return (
    <>
      <Button circle onClick={() => handleConnectWallet()}>connectWallet</Button>
    </>
  )
}
export default ConnectWallet
`
4

Have you tried a different port, why do you use localhost:3001 are you following any docs?

5

it’s my company’s setting

6

Are you using any hosting provider and VPS maybe

1 Like