fix(hydrationerror): fix hydration error

ringecosystem · Aug 24, 2024 · 0ed0772 · 0ed0772
1 parent d88a489
commit 0ed0772
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 36 deletions.
diff --git a/src/components/accountButton.tsx b/src/components/accountButton.tsx
@@ -2,7 +2,7 @@ import DisconnectButton from "./disconnetButton";
 import data from "../data/data.json";
 import Image from "next/image";
 import { MouseEventHandler, useCallback, useEffect, useMemo, useState } from "react";
-import { useAccount } from "wagmi";
+import { useAccount, useNetwork, useSwitchNetwork } from "wagmi";
 import { useTalisman, useTransfer } from "@/hooks";
 import { isValidAddress, parseCross, toShortAdrress, formatBalance, getAssetIconSrc } from "@/utils";
 import { WalletID } from "@/types";
@@ -11,6 +11,8 @@ export default function AccountButton() {
   const { talismanAccounts } = useTalisman();
 
   const { address } = useAccount();
+  const { chain } = useNetwork();
+  const { chains, error, isLoading, pendingChainId, switchNetwork } = useSwitchNetwork();
 
   const { defaultSourceAssetOptions } = parseCross();
   const {
@@ -34,6 +36,16 @@ export default function AccountButton() {
     setSubMenu((prev) => !prev);
   }, []);
 
+  console.log("source chain", sourceChain.id);
+  console.log("connected chain", chain?.id);
+
+  useEffect(() => {
+    if (chain && sourceChain && switchNetwork && chain.id !== sourceChain.id) {
+      console.log("change");
+      switchNetwork(sourceChain.id);
+    }
+  }, [sourceChain, chain, switchNetwork]);
+
   return (
     <div className="relative">
       <div

diff --git a/src/components/appBox.tsx b/src/components/appBox.tsx
@@ -128,8 +128,6 @@ export default function AppBox() {
   const { switchNetwork } = useSwitchNetwork();
   const { address } = useAccount();
 
-  console.log("lists: -------------------", sender, activeSenderWallet, activeSenderAccount, address);
-
   const needSwitchNetwork = useMemo(
     () => activeSenderWallet === WalletID.EVM && chain && chain.id !== sourceChain.id,
     [chain, sourceChain, activeSenderWallet],
@@ -275,7 +273,6 @@ export default function AppBox() {
   }, [selectedAsset]);
 
   useEffect(() => {
-    console.log("names on change source", targetChain.name, sourceChain.name);
     console.log(allowedChain);
     if (allowedChain.length > 0) {
       if (sourceChain.name === allowedChain[0].name && targetChain.name === allowedChain[0].name) {
@@ -290,7 +287,6 @@ export default function AppBox() {
   }, [sourceChain]);
 
   useEffect(() => {
-    console.log("names on change target", targetChain.name, sourceChain.name);
     if (allowedChain.length > 0) {
       if (targetChain.name === allowedChain[0].name && sourceChain.name == allowedChain[0].name) {
         setSourceChain(allowedChain[1]);

diff --git a/src/components/chainSelectInput.tsx b/src/components/chainSelectInput.tsx
@@ -67,7 +67,6 @@ export default function ChainSelectInput({ who, options }: { who: string; option
   const [open, setOpen] = useState<boolean>(false);
 
   const name = "Polkadot AssetHub";
-  console.log(name.replace("assetHub", ""));
   return (
     <div
       className="relative cursor-pointer"

diff --git a/src/components/header.tsx b/src/components/header.tsx
@@ -2,22 +2,20 @@
 
 import Image from "next/image";
 import Link from "next/link";
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import data from "../data/data.json";
 import WalletButton from "./walletButton";
 import AccountButton from "./accountButton";
 import ChainButton from "./chainButton";
 import { useAccount, useChainId } from "wagmi";
 import { useTransfer } from "@/hooks";
 import { parseCross } from "@/utils";
-import { animated, useTrail } from "@react-spring/web";
 import WalletSelectionModal from "./walletSelectionModal";
 
 export default function Header() {
   const [connectModal, setConnectModal] = useState(false);
+  const [connected, setConnected] = useState(false);
   const { address: activeAddress } = useAccount();
-  const chainId = useChainId();
-  console.log("chainId", chainId);
 
   const handleClose = useCallback(() => {
     setConnectModal(false);
@@ -34,25 +32,34 @@ export default function Header() {
     setShowMenu(false);
   }, []);
 
-  const trails = useTrail(3, {
-    from: { opacity: 0 },
-    to: { opacity: 1 },
-  });
+  useEffect(() => {
+    if (activeAddress) {
+      setConnected(true);
+    } else {
+      setConnected(false);
+    }
+  }, [activeAddress]);
 
   return (
     <section className="flex h-[50px] w-full items-center justify-between px-[10px] lg:h-[56px] lg:px-[30px]">
-      <animated.div style={trails[0]}>
+      <div>
         <Link href="/">
           <Image src="/images/paralink-logo.svg" width={90} height={24} alt="Paralink logo" />
         </Link>
-      </animated.div>
+      </div>
       <div className="hidden items-center justify-center gap-[10px] lg:flex">
-        <animated.div style={trails[1]}>
-          {!activeAddress ? <WalletButton openModal={() => setConnectModal(true)} /> : <AccountButton />}
-        </animated.div>
-        <animated.div style={trails[2]}>
+        {!connected ? (
+          <div>
+            <WalletButton openModal={() => setConnectModal(true)} />
+          </div>
+        ) : (
+          <div>
+            <AccountButton />
+          </div>
+        )}
+        <div>
           <ChainButton />
-        </animated.div>
+        </div>
       </div>
       <div className="lg:hidden">
         <div className="flex flex-col items-center justify-center gap-[5px]" onClick={handleOpenMenu}>

diff --git a/src/components/walletButton.tsx b/src/components/walletButton.tsx
@@ -3,14 +3,12 @@ import WalletSelectionModal from "./walletSelectionModal";
 
 export default function WalletButton({ openModal }: { openModal: () => void }) {
   return (
-    <>
-      <div
-        onClick={openModal}
-        className="flex h-[36px] w-[190px] cursor-pointer items-center gap-[5px] rounded-[10px] bg-white px-[10px] hover:shadow-lg lg:w-fit lg:justify-center"
-      >
-        <span className="block h-[19px] w-[19px] bg-[url('/images/icons/wallet-icon.svg')] bg-contain bg-center bg-no-repeat" />
-        <p className="text-[14px] leading-[24px]">Connect Wallet</p>
-      </div>
-    </>
+    <div
+      onClick={openModal}
+      className="flex h-[36px] w-[190px] cursor-pointer items-center gap-[5px] rounded-[10px] bg-white px-[10px] hover:shadow-lg lg:w-fit lg:justify-center"
+    >
+      <span className="block h-[19px] w-[19px] bg-[url('/images/icons/wallet-icon.svg')] bg-contain bg-center bg-no-repeat" />
+      <p className="text-[14px] leading-[24px]">Connect Wallet</p>
+    </div>
   );
 }
diff --git a/src/components/walletSelectionModal.tsx b/src/components/walletSelectionModal.tsx
@@ -34,19 +34,13 @@ export default function WalletSelectionModal({ visible, onClose }: { visible: bo
     ];
   }, [sourceChain.wallets]);
 
-  console.log("active wallet", activeSenderWallet);
-
-  console.log("active wallet", activeSenderWallet);
-
   const senderOptions =
     activeSenderWallet === WalletID.EVM && address
       ? [{ address }]
       : activeSenderWallet === WalletID.TALISMAN
       ? talismanAccounts
       : [];
 
-  console.log("options", senderOptions);
-
   // useEffect(() => {
   //   if (activeSenderWallet) {
   //     const address = senderOptions[0].address;