Add: URI chain param

.eslintrc.json

@@ -1,3 +1,7 @@
 {
-  "extends": ["next"]
+  "extends": ["next"],
+  "rules": {
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "off"
+  }
 }

src/app/pool/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { useEffect, useState } from "react";
-import { useAccount } from "wagmi";
+import { useEffect, useMemo, useState } from "react";
+import { useAccount, useChainId, useSwitchChain } from "wagmi";
 
 import { ZERO_ADDRESS } from "@/src/constants";
 
@@ -15,9 +15,12 @@ import { Interaction } from "@/src/components/UI/Pool/Interaction";
 import PoolData from "@/src/contexts/PoolData";
 
 function PoolPage() {
-  const { address: accountAddress = ZERO_ADDRESS } = useAccount();
+  const { address: accountAddress = ZERO_ADDRESS, chainId } = useAccount();
+  const { switchChain }: any = useSwitchChain();
+  const currentId = useChainId();
 
   const [id, setId] = useState<string>("0");
+  const [chain, setChain] = useState<number>(0);
   const [account, setAccount] = useState<`0x${string}`>(accountAddress);
 
   useEffect(() => {
@@ -26,13 +29,23 @@ function PoolPage() {
         ? new URLSearchParams(window.location.search)
         : { get: () => null };
     setId(queryParams.get("id") || "0");
+    setChain(parseInt(queryParams.get("chain") || "0"));
     setAccount((queryParams.get("account") || accountAddress) as `0x${string}`);
   }, [accountAddress]);
 
-  const { pool, pools, refetch } = usePool(id, account);
+  const { pool, pools, refetch } = usePool(id, chain, account);
+
+  const needSwitch = currentId && chainId && currentId !== chainId;
+
+  console.log("needSwitch", needSwitch, currentId, chainId, chain);
+
+  useMemo(() => {
+    if (!chainId || !currentId || !chain) return;
+    switchChain({ chainId: chain });
+  }, [currentId, chainId, switchChain, chain]);
 
   return (
-    <PoolData.Provider value={{ id, pool, pools, refetch }}>
+    <PoolData.Provider value={{ id, chain, pool, pools, refetch }}>
       <section className="custom-screen">
         <div className="flex flex-col gap-2 w-full h-full">
           <div className="w-full h-[40rem]">

src/app/pools/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useContext, useEffect, useState } from "react";
-import { useAccount, useSwitchChain } from "wagmi";
+import { useAccount, useChainId, useSwitchChain } from "wagmi";
 
 import { NavbarContext } from "@/src/app/providers";
 import GradientWrapper from "@/src/components/GradientWrapper";
@@ -23,6 +23,7 @@ import { GiFoundryBucket } from "react-icons/gi";
 const PoolsPage = () => {
   const account = useAccount();
   const { chains, switchChain }: any = useSwitchChain();
+  const chainId = useChainId();
 
   const [page, setPage] = useState(1);
   const [size, setSize] = useState(2);
@@ -116,7 +117,8 @@ const PoolsPage = () => {
               if (!chain.testnet) return;
             }
             const isActive =
-              account.isConnected && account.chainId === chain.id;
+              (account.isConnected && account.chainId === chain.id) ||
+              chainId === chain.id;
             return (
               <a
                 key={chain.id}
@@ -142,7 +144,13 @@ const PoolsPage = () => {
         <div className="mt-2">
           <div className="grid grid-cols-2 gap-2">
             {pools &&
-              pools.map((pool, i) => <Card pool={pool} key={pool.id} />)}
+              pools.map((pool, i) => (
+                <Card
+                  pool={pool}
+                  chain={account.chainId || chainId}
+                  key={pool.id}
+                />
+              ))}
           </div>
         </div>
         {pools && pools.length > 0 ? (

src/components/UI/Pool/Hero/Hero.tsx

@@ -11,8 +11,6 @@ export const Hero = () => {
   const { [id]: metadata } = useMetadata(pools);
   const launchBlock = useTimestamp(pool?.launchBlock);
 
-  console.log("metadata", metadata);
-
   const hasERC20 = useMemo(
     () => (pool?.stakeERC20.tokenAddress ?? ZERO) !== ZERO,
     [pool]

src/components/UI/Pools/Card.tsx

@@ -198,11 +198,9 @@ function formatNumber(
   }
 }
 
-function Card({ pool }: { pool: IPoolExtendedDetails }) {
+function Card({ pool, chain }: { pool: IPoolExtendedDetails; chain?: number }) {
   const { [pool.id]: metadata } = useMetadata([pool]);
 
-  console.log("metadata first", metadata, pool);
-
   const totalStakedERC20 = formatNumber(
     pool?.totalStakedERC20,
     pool?.stakeERC20?.decimals
@@ -247,7 +245,7 @@ function Card({ pool }: { pool: IPoolExtendedDetails }) {
             ></span>
             <div className="text-white text-xl z-20">
               <Link
-                href={`/pool?id=${pool.id}`}
+                href={`/pool?id=${pool.id}${chain ? `&chain=${chain}` : ``}`}
                 className="link decoration-dotted underline-offset-4"
               >
                 {metadata?.name}

src/contexts/PoolData.tsx

@@ -3,6 +3,7 @@ import { createContext } from "react";
 
 const PoolData = createContext<IPoolData>({
   id: "",
+  chain: undefined,
   pool: undefined,
   pools: undefined,
   refetch: () => {},

src/hooks/usePools.ts

@@ -30,13 +30,18 @@ export const usePoolData = (): IPoolData => {
   );
 };
 
-export function usePool(id: string, account: `0x${string}`): IPoolResult {
+export function usePool(
+  id: string,
+  chain: number,
+  account: `0x${string}`
+): IPoolResult {
   const args = useMemo(
     () => (id ? ([account, BigInt(id)] as const) : undefined),
     [id, account]
   );
 
   const { data: dataPool, refetch }: IPoolWagmi = useReadStaqeProtocolGetPool({
+    chainId: (chain ? chain : undefined) as any,
     args,
   });
 

src/interfaces/IPool.ts

@@ -37,6 +37,7 @@ export interface IPoolResult {
 
 export interface IPoolData {
   id: string;
+  chain?: number;
   pool: IPoolExtendedDetails | undefined;
   pools: IPoolExtendedDetails[] | undefined;
   refetch: () => void;