gistfile1.txt

import { Web3Button, useWeb3Modal } from "@web3modal/react";
import { useState, useEffect } from "react";
import Or from "components/signin/Or";
import Welcome from "components/signin/Welcome";
import { useRouter } from "next/router";
import { useAccount } from "wagmi";

function IndexPage() {

  // open modal in first connections
  const { open, close, isOpen } = useWeb3Modal();
  const [firstOpened, setFirstOpened] = useState(true);

  // go to app
  const { isConnected, status } = useAccount();
  const router = useRouter();
  useEffect(() => {
    console.log(isConnected, firstOpened, isOpen, status)
    if (isConnected) {
      close();
      router.push("/swap");
    }
    if (!isConnected && isOpen && firstOpened) {
      close();
    }
    if (firstOpened && isOpen) {
      close();
    }
    if (firstOpened && !isOpen && !isConnected) {
      open();
      setFirstOpened(false);
    }
    if (!isConnected && !firstOpened && isOpen ) {
      console.log("close")
      close();
      open();
    }
    if (!isConnected && !firstOpened && !isOpen ) {
      close();
    }
  }, [isConnected, firstOpened, isOpen]);

  const headerStyle = {
    marginLeft: "max(calc((100% - 71.25rem) / 2), 4rem)",
    marginRight: "max(calc((100% - 71.25rem) / 2), 4rem)",
  };

  return (
    <>
      <div className="flex flex-col xs:w-full lg:w-[60%] bg-[#F2F5F84D] h-screen">
        {/* Call To Action */}
        <header className="pt-16" style={headerStyle}>
          <div className="w-full flex flex-row jusify-between align-center">
            <img src="svgs/stnd_logo_black.svg" className="w-32" />
          </div>
          {/* Text */}
          <div className="pt-16 my-4 ">
            <h1 className="leading-normal xs:text-[30px] sm:text-5xl font-semibold">
              Make the most of your crypto trading experiences
            </h1>
            <h1 className="pt-8 xs:text-[20px] sm:text-[28px] break-words">
              Enter the Standard. Please connect your wallet to the blockchain
              network by clicking the button below.
            </h1>
          </div>
        </header>
        {/* Web3 Button */}
        <div className="w-full h-40 px-28 py-8 flex flex-col justify-center items-center">
          <Web3Button />
        </div>

        {/* Or */}
      </div>
      {/* Image panel */}
      <div className="xs:hidden lg:block lg:w-[40%] h-full z-10 object-cover">
        <img
          src={`pngs/login-page/get_started.png`}
          className="absolute xs:hidden lg:block lg:w-[40%] h-full top-0 right-0 object-cover border-l-4 border-black"
        />
      </div>
    </>
  );
}

export default IndexPage;