Hey guys iām using latest hereās my package json
āmoralisā: ā^0.0.44ā,
āreact-moralisā: ā^0.2.2ā
Hereās how Iām using Moralis through a hoc
import hocify from 'hocify'
import { useMoralis, useMoralisWeb3Api, useMoralisWeb3ApiCall } from "react-moralis"
import { create, all } from 'mathjs'
import { useHistory } from 'react-router-dom';
const useHocify = (props) => {
const {history} = useHistory();
const Web3Api = useMoralisWeb3Api()
const {authenticate, logout, isAuthenticated,authError, hasAuthError,user, enableWeb3,isAuthenticating, isWeb3Enabled, Moralis, web3} = useMoralis()
return {Web3Api,history,authenticate, logout, isAuthenticated,authError, hasAuthError,user, enableWeb3, isAuthenticating, isWeb3Enabled, Moralis, web3};
};
const withMoralis = hocify(useHocify);
export default withMoralis
And hereās how Iām using it in a component
import React from 'react'
import { connect } from 'react-redux'
import withMoralis from "../../reusable/Hoc"
class TestComponent extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
componentDidMount(){
}
componentDidUpdate(prevProps) {
}
componentWillUnmount(){
}
static getDerivedStateFromError(error) {
// Update state so the next render will show the fallback UI.
return { hasError: true };
}
componentDidCatch(error, info) {
console.log(error);
console.log(info);
}
render() {
if (this.state.hasError) {
// You can render any custom fallback UI
return <h1>Something went wrong.</h1>;
}else{
return (
<>
{this.props.isAuthenticated && this.props.isWeb3Enabled ? <>
<div><p>logged in </p></div>
</> : <>
<div><p>Not logged in </p></div>
<div><p onClick={async ()=>{
await this.props.Moralis.authenticate({signingMessage:"hello"}).then(async () => {
if (!this.props.authError) {
this.props.enableWeb3().then(async () => {
console.log ("enabled web3 bruh...");
});
} else {
console.log("Login Failed: " +this.props.authError.message);
}
});
}}>Test</p></div>
</> })
}
}
const mapStateToProps = state => ({
loginModalVisibility: state.loginModalVisibility,
sesionCreated: state.sesionCreated
});
const mapDispatchToProps = (dispatch,ownProps) => {
return {
toggleAlert: (_title,_message)=>{
dispatch({type: 'set', alertVisibility: true})
},
toggleModal: ()=>{
dispatch({type: 'set', loginModalVisibility: true})
}
}
}
export default connect(mapStateToProps, mapDispatchToProps)(withMoralis(TestComponent))
So whatās the issue ?
The issue is that when using
await this.props.Moralis.authenticate({signingMessage:"hello"})
I do get the sign in message appearing on meta mask however when you click the metamask button āSignā and it passes through it doesnāt updated the isAuthenticated getter and my react html doesnāt apply the changes i need to refresh the page in order for the getter to work.
If I use
await this.props.authenticate({signingMessage:"hello"})
Everything works as expected the dom reloads and isAuthenticated getās set to true however thereās no sign in message ā¦
Any. help ?