我刚刚开始使用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>
</>
)
}
型
有什么办法吗?
1条答案
按热度按时间h7appiyu1#
实际上,我发现了一个更干净的方法来调用一个函数时,钱包连接。
字符串