testnet-onboarding-app/src/pages/ConnectWallet.tsx

import React, { useEffect } from "react";
import {useNavigate } from "react-router-dom";

import { Button, Box, Container } from "@mui/material";

import { useWalletConnectContext } from "../context/WalletConnectContext";

const ConnectWallet = () => {
  const { connect, session } = useWalletConnectContext();

  const navigate = useNavigate();


  useEffect(() => {

    if (session) {
      navigate("/sign-with-nitro-key");
    }
  }, [session, navigate,]);

  const handler = async () => {
    await connect();
  };

  return (
    <Container maxWidth="lg">
      <Box
        display="flex"
        flexDirection="column"
        alignItems="center"
        height="50vh"
        justifyContent="center"
        padding={5}
      >
        <Button
          variant="contained"
          onClick={handler}
          style={{ marginTop: "20px" }}
        >
          Connect Wallet
        </Button>
      </Box>
    </Container>
  );
};

export default ConnectWallet;