使用 React 连接到元掩码，Next.js 不起作用

Question

我正在遵循使用 Next.js 构建 NFT 市场的指南。我被困在构建一个应该打开元掩码的按钮的部分。据我了解 'connectWallet('injected')' 应该打开元掩码，但对我来说，什么也没有发生。甚至没有错误消息。这里可能有什么问题？

import type { NextPage } from 'next'
import Header from '../components/Header'
import Hero from '../components/Hero'
import { useWeb3 } from '@3rdweb/hooks'

const style = {
  wrapper: ``,
  walletConnectWrapper: `flex flex-col justify-center items-center h-screen w-screen bg-[#3b3d42] `,
  button: `border border-[#282b2f] bg-[#2081e2] p-[0.8rem] text-xl font-semibold rounded-lg cursor-pointer text-black`,
  details: `text-lg text-center text=[#282b2f] font-semibold mt-4`,
}

const Home: NextPage = () => {
  const { address, connectWallet } = useWeb3()
  return (
    <div className={style.wrapper}>
      {address ? (
     <>
      <Header/>
     <Hero/>
     </>
     ) : (
       <div className={style.walletConnectWrapper}>
        <button
          className={style.button}
          onClick={() => connectWallet('injected')}
        > 
          Connect Wallet

        </button>
       </div>
     )}
   
    </div>
  
  )
}

export default Home

Answer 1

我认为您没有包装 _app.js。基于此文档

import { ThirdwebWeb3Provider } from '@3rdweb/hooks'


const supportedChainIds = [1,4,137]
const connectors = {
  injected: {},
}

function MyApp({ Component, pageProps }) {
  return (
    <ThirdwebWeb3Provider
      supportedChainIds={supportedChainIds}
      connectors={connectors}
    >
      <Component {...pageProps} />
    </ThirdwebWeb3Provider>
  )
}