next.js 将进程挂钩到walletConnect

2vuwiymt  于 2023-11-18  发布在  其他
关注(0)|答案(1)|浏览(99)

我刚刚开始使用walletConnect web 3 Modal来处理我的客户的以太坊钱包连接。我们的身份验证过程是这样的:
1.用户将其钱包连接到应用程序
1.一旦钱包连接,将向服务器发送请求以注册客户端的钱包地址。
1.从服务器返回User对象。
问题是useWeb 3 Modal钩子返回一个名为open()的函数;当模式打开时(而不是当钱包连接成功时)
现在我想写一个钩子来处理这个登录逻辑。问题是如果客户端的钱包没有连接到我的应用程序,我不能在成功连接钱包后请求服务器,因为没有状态定义钱包连接状态。
下面是我的代码:

import {useAccount, useSigner} from "wagmi";
import signMessage from "@/modules/auth/services/signMessage";
import type {Signer} from "@wagmi/core";
import {useWeb3Modal} from "@web3modal/react";

const useLogin = (): () => void => {
    const {isConnected, isConnecting, isReconnecting, address} = useAccount();
    const {open} = useWeb3Modal();
    const signer = useSigner();
    return () => {
        console.log(`isConnected: ${isConnected} isConnecting: ${isConnecting} isReconnecting: ${isReconnecting} address: ${address}`)
        if (!isConnected && !isConnecting && !isReconnecting) {
            open().then(console.log);
            return;
        }

        signMessage(address as string, signer.data as Signer).then(accessToken => {
            console.log(accessToken);
        });
    };
}

export default useLogin;

字符串
我使用这个钩子的方法是这样的:

import {Button} from "@mui/material";
import {useWeb3Modal} from "@web3modal/react";
import useLogin from "../hooks/useLogin";

const Home = (props) => {
    const login = useLogin(); //The hook I've written above
    const {open} = useWeb3Modal();

    return (
        <>
            <Button variant="contained" onClick={() => login()} disableElevation>Connect wallet</Button>
        </>
    )
}


有什么办法吗?

h7appiyu

h7appiyu1#

实际上,我发现了一个更干净的方法来调用一个函数时,钱包连接。

import {useAccount} from "wagmi";

const App = (props) => {
    const { isConnected, address } = useAccount({
        onConnect: ({ address, connector }) => console.log("Connected. address:"+address),
      });
}

字符串

相关问题