Wait for session to load before redirecting (#29)

Part of [laconicd testnet validator enrollment](https://www.notion.so/laconicd-testnet-validator-enrollment-6fc1d3cafcc64fef8c5ed3affa27c675)

Co-authored-by: Shreerang Kale <shreerangkale@gmail.com>
Reviewed-on: #29
This commit is contained in:
nabarun 2024-08-09 13:00:30 +00:00
parent 8ba837b2f4
commit 663eb42a74
4 changed files with 26 additions and 6 deletions

View File

@ -22,6 +22,7 @@ assert(PROJECT_ID, "Wallet connect project id not provided");
interface ContextValue { interface ContextValue {
connect: () => Promise<void>; connect: () => Promise<void>;
session: SessionTypes.Struct | null; session: SessionTypes.Struct | null;
isSessionLoading: boolean;
signClient: SignClient | undefined; signClient: SignClient | undefined;
checkPersistedState: (client: SignClient) => Promise<void>; checkPersistedState: (client: SignClient) => Promise<void>;
disconnect: () => Promise<void>; disconnect: () => Promise<void>;
@ -30,6 +31,7 @@ interface ContextValue {
const walletConnectContext = createContext<ContextValue>({ const walletConnectContext = createContext<ContextValue>({
connect: () => Promise.resolve(), connect: () => Promise.resolve(),
session: null, session: null,
isSessionLoading: true,
signClient: undefined, signClient: undefined,
checkPersistedState: () => Promise.resolve(), checkPersistedState: () => Promise.resolve(),
disconnect: () => Promise.resolve(), disconnect: () => Promise.resolve(),
@ -47,6 +49,7 @@ export const WalletConnectProvider = ({
}) => { }) => {
const [signClient, setSignClient] = useState<SignClient>(); const [signClient, setSignClient] = useState<SignClient>();
const [session, setSession] = useState<SessionTypes.Struct | null>(null); const [session, setSession] = useState<SessionTypes.Struct | null>(null);
const [isSessionLoading, setIsSessionLoading] = useState(true);
const isSignClientInitializing = useRef<boolean>(false); const isSignClientInitializing = useRef<boolean>(false);
const navigate = useNavigate(); const navigate = useNavigate();
@ -59,6 +62,7 @@ export const WalletConnectProvider = ({
} }
setSession(null); setSession(null);
setIsSessionLoading(false);
}, [signClient, session]); }, [signClient, session]);
const checkPersistedState = useCallback(async (client: SignClient) => { const checkPersistedState = useCallback(async (client: SignClient) => {
@ -67,6 +71,8 @@ export const WalletConnectProvider = ({
const session = client.session.get(client.session.keys[lastKeyIndex]); const session = client.session.get(client.session.keys[lastKeyIndex]);
setSession(session); setSession(session);
} }
setIsSessionLoading(false);
}, []); }, []);
const subscribeToEvents = useCallback( const subscribeToEvents = useCallback(
@ -76,10 +82,12 @@ export const WalletConnectProvider = ({
const currentSession = client.session.get(topic); const currentSession = client.session.get(topic);
const updatedSession = { ...currentSession, namespaces }; const updatedSession = { ...currentSession, namespaces };
setSession(updatedSession); setSession(updatedSession);
setIsSessionLoading(false);
}); });
client.on("session_delete", () => { client.on("session_delete", () => {
setSession(null); setSession(null);
setIsSessionLoading(false);
navigate("/"); navigate("/");
}); });
}, },
@ -133,12 +141,14 @@ export const WalletConnectProvider = ({
try { try {
const session = await approval(); const session = await approval();
setSession(session); setSession(session);
setIsSessionLoading(false);
} catch (error) { } catch (error) {
enqueueSnackbar("User rejected pairing request", { variant: "error" }); enqueueSnackbar("User rejected pairing request", { variant: "error" });
console.log(error); console.log(error);
} }
web3Modal.closeModal(); web3Modal.closeModal();
} }
}; };
useEffect(() => { useEffect(() => {
@ -152,6 +162,7 @@ export const WalletConnectProvider = ({
value={{ value={{
connect, connect,
session, session,
isSessionLoading,
signClient, signClient,
checkPersistedState, checkPersistedState,
disconnect, disconnect,
@ -163,12 +174,13 @@ export const WalletConnectProvider = ({
}; };
export const useWalletConnectContext = () => { export const useWalletConnectContext = () => {
const { connect, session, signClient, checkPersistedState, disconnect } = const { connect, session, signClient, isSessionLoading, checkPersistedState, disconnect } =
useContext(walletConnectContext); useContext(walletConnectContext);
return { return {
connect, connect,
session, session,
isSessionLoading,
signClient, signClient,
checkPersistedState, checkPersistedState,
disconnect, disconnect,

View File

@ -37,7 +37,7 @@ const LandingPage = () => {
</Typography> </Typography>
</Box> </Box>
<TermsAndConditionsBox height="43vh" onLoad={()=>{setIsDisabled(false);}} /> <TermsAndConditionsBox height="43vh" onLoad={()=>{setIsDisabled(false);}} />
<Box mt={2} display="flex" justifyContent="center"> <Box m={2} display="flex" justifyContent="center">
<Button variant="contained" color="primary" onClick={handleAccept} disabled={isDisabled}> <Button variant="contained" color="primary" onClick={handleAccept} disabled={isDisabled}>
Accept Accept
</Button> </Button>

View File

@ -17,19 +17,23 @@ import { ENABLE_KYC, HASHED_SUBSCRIBER_ID_KEY } from "../constants";
const SignWithNitroKey = () => { const SignWithNitroKey = () => {
const { session, signClient } = const { session, signClient, isSessionLoading } =
useWalletConnectContext(); useWalletConnectContext();
const navigate = useNavigate(); const navigate = useNavigate();
const location = useLocation(); const location = useLocation();
useEffect(() => { useEffect(() => {
if (isSessionLoading) {
return;
}
if (!session) { if (!session) {
navigate("/connect-wallet?redirectTo=sign-with-nitro-key", { navigate("/connect-wallet?redirectTo=sign-with-nitro-key", {
state: location.state, state: location.state,
}); });
} }
}, [session, navigate, location.state]); }, [session, isSessionLoading, navigate, location.state]);
const [ethAddress, setEthAddress] = useState(""); const [ethAddress, setEthAddress] = useState("");
const [ethSignature, setEthSignature] = useState(""); const [ethSignature, setEthSignature] = useState("");

View File

@ -13,7 +13,7 @@ import { useWalletConnectContext } from '../context/WalletConnectContext';
import { Participant } from '../types'; import { Participant } from '../types';
const Validator = () => { const Validator = () => {
const { session, signClient } = useWalletConnectContext(); const { session, signClient, isSessionLoading } = useWalletConnectContext();
const navigate = useNavigate(); const navigate = useNavigate();
const [cosmosAddress, setCosmosAddress] = useState(''); const [cosmosAddress, setCosmosAddress] = useState('');
@ -24,10 +24,14 @@ const Validator = () => {
const [isError, setIsError] = useState(false); const [isError, setIsError] = useState(false);
useEffect(() => { useEffect(() => {
if (isSessionLoading) {
return;
}
if (!session) { if (!session) {
navigate("/connect-wallet?redirectTo=validator"); navigate("/connect-wallet?redirectTo=validator");
} }
}, [session, navigate]); }, [session, navigate, isSessionLoading]);
useEffect(() => { useEffect(() => {
if (!cosmosAddress) { if (!cosmosAddress) {