Web3库,并在刷新页面后继续记录状态
我正在使用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 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论