我试图重定向用户到onboard
页面时,他成功地连接到他的钱包. Web3Button是不返回任何东西.
怎么做?我被困在这里了。
import React, { useEffect } from "react";
import { Web3Button } from "@web3modal/react";
import { useProvider } from "wagmi";
import { useRouter } from "next/router";
const Hero = () => {
const router = useRouter();
const provider = useProvider();
const handleConnect = async () => {
try {
if (provider) {
router.push("/onboard");
}
} catch (error) {
console.log(error);
}
};
return (
<main className="container mx-auto">
<div className="flex flex-col flex-wrap items-center space-y-6 justify-center h-[70vh]">
<h2 className="text-2xl px-4 text-center md:text-4xl sm:text-3xl lg:text-5xl font-bold ">
Title
</h2>
<p className="px-4 text-center text-md md:text-xl lg:text-2xl">
Description
</p>
<Web3Button />
</div>
</main>
);
};
export default Hero;
2条答案
按热度按时间cbeh67ev1#
您似乎希望在用户使用
Web3Button
组件成功连接钱包时将用户重定向到/onboard
页面。但是,当用户连接钱包时,Web3Button
组件不提供任何回调或返回值。因此,您需要使用不同的方法来检测用户何时成功连接了他们的钱包,然后将他们重定向到/onboard
页面。一种方法是使用
useEffect
钩子来监听provider
变量的变化,当用户连接他们的钱包时,该变量将被更新。当provider
变量发生变化时,您可以检查它是否真实(即用户已经连接了他们的钱包),然后使用router.push
方法将它们重定向到/onboard
页面。下面是如何修改代码来实现这一点:
在这个修改后的代码中,我们添加了一个新的状态变量
isConnected
来跟踪用户是否连接了他们的钱包。我们还添加了两个useEffect
钩子:第一个监听provider
变量的变化,如果isConnected
状态变量为true,则将其设置为true;第二个监听isConnected
状态变量的变化,如果为真,则将用户重定向到/onboard
页面。我们还向
Web3Button
组件添加了onClick
属性,并定义了handleConnect
函数,您可以使用该函数在将用户重定向到/onboard
页面之前执行所需的任何操作。gev0vcfq2#
从metamask获取帐户时,您已连接到metamask
如果你得到的帐户,这意味着你是连接
但我不认为连接到metamask是不够的,你还应该添加逻辑,看看是否连接网络是正确的网络,然后你应该重定向用户