Web3库,并在刷新页面后继续记录状态

发布于 2025-01-18 00:31:55 字数 3011 浏览 4 评论 0原文

我正在使用Web3以太坊钱包进行应用程序,但是当用户刷新页面时,他不再连接到网站时。 在这里,我的主页可以在其中处理Moralis库的记录步骤:

function Main() {
    const [errorMessage, setErrorMessage] = useState(null);
    const [numberOfContractDeployed, setNumberOfContractDeployed] = useState(null);
    const [isLoading, setIsLoading] = useState(false);

    const { logout, authenticate, isAuthenticated, user } = useMoralis();

    useEffect(() => {
        setIsLoading(true);
        getData();
    }, [])


  return (
        <div className='App-header App'>
        {
          isLoading ? <p>fetching data</p> : 
            <div>
                <h1 style={{paddingTop:'60px'}}>Where events meet Nfts</h1>
                <h2>So far we have deployed {numberOfContractDeployed} contracts for events</h2>
            <div>
        </div>
            {(!isAuthenticated) ? 
                <div>
                    <p>Welcome</p>
                    <p>Connect your wallet to get started</p>
                    <button onClick={() => authenticate({ signingMessage:"Nft Night Authentification", onError: (error) => setErrorMessage(error.message)})}>Connect Wallet</button>
                    <p>{errorMessage}</p>
                </div>
                : <div>
                    <Create user={user.get('accounts')} />
                    <button onClick={() => logout()}>Disconnect</button>
                </div>
            }
        </div>
        }
      </div>
  )
}

export default Main

不会丢失任何内容

function Account() {
    const [isLoading, setIsLoading] = useState(false);
    const [userAddress, setUserAddress] = useState(null);
    const { isAuthenticated, user} = useMoralis();


    const getUserInfo = async () => {
        if(isAuthenticated == true){
            let tmp = await user.get('accounts')[0];
            setUserAddress(tmp);
            getEventsCreated(userAddress);
        }
        else{
            console.log(isAuthenticated);
            setIsLoading(false);
            return setErrorMessage("You need to be logged in to view this page");
        }
    };

    useEffect(() => {
        setIsLoading(true);
        getUserInfo();
    }, [])

    return (
    <div className='profile'>
        {isAuthenticated ?
        <div>
            <h1>In this tab you will find all the collection you have created</h1>
            <h2> as {user.get('accounts')}</h2>
            { isLoading ? <p>Fetching data</p> : 
            <div>
                {arrayContract}
            </div>
            }
        </div>
        :
        <div>
            <p style={{color:'red'}}>{errorMessage}</p>
        </div>
        }
    </div>
  )
};

export default Account

如果我刷新此页面,我什么都 在刷新后,我刷新的质量始终是错误的。

I'm making application using web3 ethereum wallet but when the users goes from a first page to another when he refreshes the page he's no longer connected to the website.
Here my home page where I handle the logging step with Moralis library:

function Main() {
    const [errorMessage, setErrorMessage] = useState(null);
    const [numberOfContractDeployed, setNumberOfContractDeployed] = useState(null);
    const [isLoading, setIsLoading] = useState(false);

    const { logout, authenticate, isAuthenticated, user } = useMoralis();

    useEffect(() => {
        setIsLoading(true);
        getData();
    }, [])


  return (
        <div className='App-header App'>
        {
          isLoading ? <p>fetching data</p> : 
            <div>
                <h1 style={{paddingTop:'60px'}}>Where events meet Nfts</h1>
                <h2>So far we have deployed {numberOfContractDeployed} contracts for events</h2>
            <div>
        </div>
            {(!isAuthenticated) ? 
                <div>
                    <p>Welcome</p>
                    <p>Connect your wallet to get started</p>
                    <button onClick={() => authenticate({ signingMessage:"Nft Night Authentification", onError: (error) => setErrorMessage(error.message)})}>Connect Wallet</button>
                    <p>{errorMessage}</p>
                </div>
                : <div>
                    <Create user={user.get('accounts')} />
                    <button onClick={() => logout()}>Disconnect</button>
                </div>
            }
        </div>
        }
      </div>
  )
}

export default Main

if I refresh this page I don't lose anything but now with react router I go the another page the account one:

function Account() {
    const [isLoading, setIsLoading] = useState(false);
    const [userAddress, setUserAddress] = useState(null);
    const { isAuthenticated, user} = useMoralis();


    const getUserInfo = async () => {
        if(isAuthenticated == true){
            let tmp = await user.get('accounts')[0];
            setUserAddress(tmp);
            getEventsCreated(userAddress);
        }
        else{
            console.log(isAuthenticated);
            setIsLoading(false);
            return setErrorMessage("You need to be logged in to view this page");
        }
    };

    useEffect(() => {
        setIsLoading(true);
        getUserInfo();
    }, [])

    return (
    <div className='profile'>
        {isAuthenticated ?
        <div>
            <h1>In this tab you will find all the collection you have created</h1>
            <h2> as {user.get('accounts')}</h2>
            { isLoading ? <p>Fetching data</p> : 
            <div>
                {arrayContract}
            </div>
            }
        </div>
        :
        <div>
            <p style={{color:'red'}}>{errorMessage}</p>
        </div>
        }
    </div>
  )
};

export default Account

this account component returns my logged in address correctly but if I refresh isAuthenticated is always false after a refresh.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文