文章/答案/技术大牛

发布

社区首页 >问答首页 >当url在下一个JS项目中有一个查询参数时，Wagmi useSigner钩子无法工作

问当url在下一个JS项目中有一个查询参数时，Wagmi useSigner钩子无法工作
EN

Ethereum用户

提问于 2022-12-18 19:10:07

回答 1查看 521关注 0票数 0

我正在尝试使用wagmi的useSigner钩子。

我的项目是下一个JS项目，我使用彩虹工具包按钮连接。

如果我在一个具有url (如localhost:3000 )的页面上，则签名者在页面加载时加载，但如果我位于url (如localhost:3000?id=1 )，则签名者为空。

你可以从这里重新创建窃听器

我的_app.tsx看起来像这样

import {AppProps} from 'next/app';
import Head from 'next/head';
import '@rainbow-me/rainbowkit/styles.css';
import {
  getDefaultWallets,
  RainbowKitProvider,
  darkTheme
} from '@rainbow-me/rainbowkit';
import {
  configureChains,
  createClient,
  WagmiConfig,
} from 'wagmi';
import {alchemyProvider} from 'wagmi/providers/alchemy';
import {publicProvider} from 'wagmi/providers/public';
import {useState, useEffect} from "react";
import {polygonMumbai} from "@wagmi/chains";

export default function App(props: AppProps) {
  const [user, setUser] = useState(null);
  const {Component, pageProps} = props;
  const {chains, provider, webSocketProvider} = configureChains(
      [polygonMumbai],
      [
        alchemyProvider({apiKey: process.env.NEXT_PUBLIC_ALCHEMY_API_KEY!}),
        publicProvider()
      ]
  );
  const {connectors} = getDefaultWallets({
    appName: 'Dynamic Audio NFTs',
    chains
  });
  const wagmiClient = createClient({
    autoConnect: true,
    connectors,
    provider,
    webSocketProvider
  })


  return (
      <>
        <Head>
          <title>The Crypto Studio</title>
        </Head>
        <WagmiConfig client={wagmiClient}>
          <RainbowKitProvider chains={chains} theme={darkTheme()}>
                  <Component {...pageProps} />
          </RainbowKitProvider>
        </WagmiConfig>
      </>
  );
}

这是index.tsx

import {ConnectButton} from "@rainbow-me/rainbowkit";
import {useSigner} from "wagmi";

export default function Home() {
  const {data: signer} = useSigner()
  console.log("signer", signer)

  return (
      <>
        <ConnectButton />
      </>
  )
}

the package.json

{
  "name": "rainbow-kit",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@next/font": "13.0.7",
    "@rainbow-me/rainbowkit": "^0.8.1",
    "@types/node": "18.11.17",
    "@types/react": "18.0.26",
    "@types/react-dom": "18.0.9",
    "ethers": "^5.7.2",
    "next": "13.0.7",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "typescript": "4.9.4",
    "wagmi": "^0.9.4"
  }
}

ethers.js

wagmi

rainbowkit

回答 1

Ethereum用户

回答已采纳

发布于 2022-12-19 19:25:10

这个问题已经解决了，这里唯一需要做的就是

const {chains, provider, webSocketProvider} = configureChains(
      [polygonMumbai],
      [
        alchemyProvider({apiKey: process.env.NEXT_PUBLIC_ALCHEMY_API_KEY!}),
        publicProvider()
      ]
  );
  const {connectors} = getDefaultWallets({
    appName: 'Dynamic Audio NFTs',
    chains
  });
  const wagmiClient = createClient({
    autoConnect: true,
    connectors,
    provider,
    webSocketProvider
  })

需要放置在App函数之外。

所以现在，_app.tsx看起来就像

const {chains, provider, webSocketProvider} = configureChains(
      [polygonMumbai],
      [
        alchemyProvider({apiKey: process.env.NEXT_PUBLIC_ALCHEMY_API_KEY!}),
        publicProvider()
      ]
  );
  const {connectors} = getDefaultWallets({
    appName: 'Dynamic Audio NFTs',
    chains
  });
  const wagmiClient = createClient({
    autoConnect: true,
    connectors,
    provider,
    webSocketProvider
  })
export default function App(props: AppProps) {
  const [user, setUser] = useState(null);
  const {Component, pageProps} = props;
  


  return (
      <>
        <Head>
          <title>The Crypto Studio</title>
        </Head>
        <WagmiConfig client={wagmiClient}>
          <RainbowKitProvider chains={chains} theme={darkTheme()}>
                  <Component {...pageProps} />
          </RainbowKitProvider>
        </WagmiConfig>
      </>
  );
}

票数 1

页面原文内容由Ethereum提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://ethereum.stackexchange.com/questions/141442

复制

相似问题

问当url在下一个JS项目中有一个查询参数时，Wagmi useSigner钩子无法工作
EN

回答 1

Ethereum用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当url在下一个JS项目中有一个查询参数时，Wagmi useSigner钩子无法工作EN

回答 1

Ethereum用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当url在下一个JS项目中有一个查询参数时，Wagmi useSigner钩子无法工作
EN