Enhance network switching

src/app/(defi)/page.tsx

@@ -54,6 +54,9 @@ const DefiTabs = () => {
           >
             <span
               className={cn(
+                'transition-colors',
+                'hover:text-primary/80',
+                'active:text-primary/60',
                 'cursor-pointer',
                 isTransactionActive ? transactionActiveClassName : ''
               )}

src/components/claim.tsx

@@ -17,13 +17,14 @@ type ClaimProps = {
 };
 const Claim = ({ onTransactionActiveChange }: ClaimProps) => {
   const { address, isConnected } = useAccount();
-  const { isCorrectChainId, activeChain } = useChain();
+  const { isSupportedChainId, activeChain } = useChain();
 
   const { value, formatted, isLoadingOrRefetching, refetch } = useBigIntContractQuery({
     contractAddress: activeChain.stakingContractAddress,
     abi,
     functionName: 'earned',
-    args: [address!]
+    args: [address!],
+    forceEnabled: isSupportedChainId && isConnected
   });
 
   const { claim, isClaiming, claimData, isClaimTransactionConfirming } = useClaim({
@@ -35,9 +36,9 @@ const Claim = ({ onTransactionActiveChange }: ClaimProps) => {
     }
   });
 
-  const { buttonText, isButtonDisabled } = useClaimState({
+  const { buttonText, isButtonDisabled, isFetching } = useClaimState({
     isConnected,
-    isCorrectChainId,
+    isSupportedChainId,
     isClaiming,
     isClaimTransactionConfirming,
     isLoadingOrRefetching,
@@ -88,7 +89,7 @@ const Claim = ({ onTransactionActiveChange }: ClaimProps) => {
         onClick={claim}
         className="mt-5 w-full rounded-[0.3125rem] text-[0.875rem] text-white"
       >
-        {isLoadingOrRefetching ? <span className="animate-pulse"> {buttonText}</span> : buttonText}
+        {isFetching ? <span className="animate-pulse"> {buttonText}</span> : buttonText}
       </Button>
     </div>
   );

src/components/connect-button/error-chain.tsx

@@ -0,0 +1,41 @@
+import { forwardRef } from 'react';
+import Image from 'next/image';
+import { TooltipArrow } from '@radix-ui/react-tooltip';
+
+import Button from '@/components/ui/ghost-button';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+
+const ErrorChain = forwardRef<HTMLButtonElement, React.ComponentPropsWithoutRef<'button'>>(
+  (props, ref) => {
+    return (
+      <Button ref={ref} {...props} className=" border-red-500 ">
+        <TooltipProvider>
+          <Tooltip delayDuration={0}>
+            <TooltipTrigger asChild>
+              <div className="flex w-full items-center justify-center space-x-2">
+                <Image
+                  src="/images/common/error-network.svg"
+                  width={20}
+                  height={20}
+                  alt="error-network"
+                />
+                <span>Wrong Network</span>
+              </div>
+            </TooltipTrigger>
+            <TooltipContent side="left" sideOffset={20} className="border-red-500">
+              Your wallet&apos;s current network is unsupported.
+              <TooltipArrow
+                style={{
+                  fill: 'red'
+                }}
+              />
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      </Button>
+    );
+  }
+);
+
+ErrorChain.displayName = 'ErrorChain';
+export default ErrorChain;

src/components/connect-button/switch-chain.tsx

@@ -13,6 +13,8 @@ import Button from '@/components/ui/ghost-button';
 import { useChain } from '@/hooks/useChain';
 import { getChains } from '@/utils/chain';
 
+import ErrorChain from './error-chain';
+
 import type { ChainConfig } from '@/types/chains';
 
 const ChainIconAndName = ({ chain }: { chain: ChainConfig }) => {
@@ -39,24 +41,29 @@ const ChainIconAndName = ({ chain }: { chain: ChainConfig }) => {
   );
 };
 
+const chains = getChains();
+
 const SwitchChain = () => {
   const [open, setOpen] = useState(false);
-  const chains = getChains();
-  const { activeChainId, activeChain, switchChain } = useChain();
+  const { activeChainId, activeChain, switchChain, isSupportedChainId } = useChain();
 
   return chains?.length && activeChain ? (
     <DropdownMenu onOpenChange={setOpen}>
       <DropdownMenuTrigger asChild>
-        <Button>
-          <ChainIconAndName chain={activeChain} />
-          <Image
-            src="/images/common/arrow-down.svg"
-            width={16}
-            height={16}
-            alt="arrow-down"
-            className={`transform transition-transform ${open ? 'rotate-180' : ''}`}
-          />
-        </Button>
+        {!isSupportedChainId ? (
+          <ErrorChain />
+        ) : (
+          <Button>
+            <ChainIconAndName chain={activeChain} />
+            <Image
+              src="/images/common/arrow-down.svg"
+              width={16}
+              height={16}
+              alt="arrow-down"
+              className={`transform transition-transform ${open ? 'rotate-180' : ''}`}
+            />
+          </Button>
+        )}
       </DropdownMenuTrigger>
       <DropdownMenuContent className="w-[8.5625rem] gap-[0.625rem] rounded-[0.3125rem] border border-primary p-[0.625rem]">
         {chains.map((chain) => (

src/components/stake.tsx

@@ -29,7 +29,7 @@ const Stake = ({ onTransactionActiveChange }: StakeProps) => {
 
   const queryClient = useQueryClient();
   const { address, isConnected } = useAccount();
-  const { activeChain, isCorrectChainId } = useChain();
+  const { activeChain, isSupportedChainId } = useChain();
   const { refetch: refetchPoolAmount } = usePoolAmount();
 
   const {
@@ -40,7 +40,8 @@ const Stake = ({ onTransactionActiveChange }: StakeProps) => {
     contractAddress: activeChain?.ktonToken.address,
     abi: erc20Abi,
     functionName: 'balanceOf',
-    args: [address!]
+    args: [address!],
+    forceEnabled: isSupportedChainId
   });
 
   const {
@@ -73,9 +74,9 @@ const Stake = ({ onTransactionActiveChange }: StakeProps) => {
     }
   });
 
-  const { isButtonDisabled, buttonText } = useStakeState({
+  const { isButtonDisabled, buttonText, isFetching } = useStakeState({
     isConnected,
-    isCorrectChainId,
+    isSupportedChainId,
     isBalanceLoading,
     isAllowanceLoading,
     needApprove,
@@ -146,11 +147,7 @@ const Stake = ({ onTransactionActiveChange }: StakeProps) => {
         }
         className={cn('mt-5 w-full rounded-[0.3125rem] text-[0.875rem] text-white')}
       >
-        {isAllowanceLoading || isBalanceLoading ? (
-          <span className="animate-pulse"> {buttonText}</span>
-        ) : (
-          buttonText
-        )}
+        {isFetching ? <span className="animate-pulse"> {buttonText}</span> : buttonText}
       </Button>
     </AmountInputForm>
   );

src/components/unstake.tsx

@@ -24,7 +24,7 @@ const UnStake = ({ onTransactionActiveChange }: UnStakeProps) => {
   const formRef: MutableRefObject<Form | null> = useRef(null);
   const [amount, setAmount] = useState<bigint>(0n);
   const { address, isConnected } = useAccount();
-  const { activeChain, isCorrectChainId } = useChain();
+  const { activeChain, isSupportedChainId } = useChain();
 
   const { refetch: refetchPoolAmount } = usePoolAmount();
 
@@ -36,7 +36,8 @@ const UnStake = ({ onTransactionActiveChange }: UnStakeProps) => {
     contractAddress: activeChain.stakingContractAddress,
     abi,
     functionName: 'balanceOf',
-    args: [address!]
+    args: [address!],
+    forceEnabled: isSupportedChainId
   });
 
   const { unStake, isUnStaking, isUnstakeTransactionConfirming } = useUnStake({
@@ -48,9 +49,9 @@ const UnStake = ({ onTransactionActiveChange }: UnStakeProps) => {
     }
   });
 
-  const { buttonText, isButtonDisabled } = useUnStakeState({
+  const { buttonText, isButtonDisabled, isFetching } = useUnStakeState({
     isConnected,
-    isCorrectChainId,
+    isSupportedChainId,
     isAmountLoading,
     isUnStaking,
     isUnstakeTransactionConfirming,
@@ -98,7 +99,7 @@ const UnStake = ({ onTransactionActiveChange }: UnStakeProps) => {
         isLoading={isUnStaking || isUnstakeTransactionConfirming}
         className={cn('mt-5 w-full rounded-[0.3125rem] text-[0.875rem] text-white')}
       >
-        {isAmountLoading ? <span className=" animate-pulse"> {buttonText}</span> : buttonText}
+        {isFetching ? <span className=" animate-pulse"> {buttonText}</span> : buttonText}
       </Button>
     </AmountInputForm>
   );

src/hooks/useBigIntContractQuery.ts

@@ -45,7 +45,7 @@ export const useBigIntContractQuery = <
     functionName,
     args: args as any[],
     query: {
-      enabled: forceEnabled ? true : isConnected
+      enabled: typeof forceEnabled !== undefined ? forceEnabled : isConnected
     }
   });
 

src/hooks/useClaimState.ts

@@ -2,38 +2,40 @@ import { useMemo } from 'react';
 
 export type UseClaimStateType = {
   isConnected: boolean;
-  isCorrectChainId: boolean;
+  isSupportedChainId: boolean;
   isClaiming: boolean;
   isClaimTransactionConfirming: boolean;
   isLoadingOrRefetching: boolean;
   value: bigint;
 };
 export const useClaimState = ({
   isConnected,
-  isCorrectChainId,
+  isSupportedChainId,
   isClaiming,
   isClaimTransactionConfirming,
   isLoadingOrRefetching,
   value
 }: UseClaimStateType) => {
   const buttonText = useMemo(() => {
     if (!isConnected) return 'Wallet Disconnected';
-    if (!isCorrectChainId) return 'Wrong Network';
+    if (!isSupportedChainId) return 'Wrong Network';
     if (isClaiming) return 'Preparing Claim';
     if (isClaimTransactionConfirming) return 'Confirming Claim';
     if (isLoadingOrRefetching) return 'Preparing...';
 
     return 'Claim';
   }, [
     isConnected,
-    isCorrectChainId,
+    isSupportedChainId,
     isClaiming,
     isClaimTransactionConfirming,
     isLoadingOrRefetching
   ]);
 
   const isButtonDisabled =
-    isLoadingOrRefetching || !isConnected || !isCorrectChainId || value === 0n;
+    isLoadingOrRefetching || !isConnected || !isSupportedChainId || value === 0n;
 
-  return { buttonText, isButtonDisabled };
+  const isFetching = isConnected && isSupportedChainId && isLoadingOrRefetching;
+
+  return { buttonText, isButtonDisabled, isFetching };
 };

src/hooks/useStakeState.ts

@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 
 export type UseStakeStateType = {
   isConnected: boolean;
-  isCorrectChainId: boolean;
+  isSupportedChainId: boolean;
   isBalanceLoading: boolean;
   isAllowanceLoading: boolean;
   needApprove: boolean;
@@ -14,7 +14,7 @@ export type UseStakeStateType = {
 };
 export const useStakeState = ({
   isConnected,
-  isCorrectChainId,
+  isSupportedChainId,
   isBalanceLoading,
   isAllowanceLoading,
   needApprove,
@@ -26,7 +26,7 @@ export const useStakeState = ({
 }: UseStakeStateType) => {
   const buttonText = useMemo(() => {
     if (!isConnected) return 'Wallet Disconnected';
-    if (!isCorrectChainId) return 'Wrong Network';
+    if (!isSupportedChainId) return 'Wrong Network';
     if (isApproving) return 'Preparing Approval';
     if (isApproveTransactionConfirming) return 'Confirming Approval';
     if (isStaking) return 'Preparing Stake';
@@ -36,7 +36,7 @@ export const useStakeState = ({
     return 'Stake';
   }, [
     isConnected,
-    isCorrectChainId,
+    isSupportedChainId,
     isBalanceLoading,
     isAllowanceLoading,
     needApprove,
@@ -48,7 +48,8 @@ export const useStakeState = ({
   ]);
 
   const isButtonDisabled =
-    isAllowanceLoading || isBalanceLoading || !isConnected || !isCorrectChainId || amount === 0n;
+    isAllowanceLoading || isBalanceLoading || !isConnected || !isSupportedChainId || amount === 0n;
 
-  return { buttonText, isButtonDisabled };
+  const isFetching = isConnected && isSupportedChainId && (isBalanceLoading || isAllowanceLoading);
+  return { buttonText, isButtonDisabled, isFetching };
 };

src/hooks/useUnstakeState.ts

@@ -2,31 +2,39 @@ import { useMemo } from 'react';
 
 export type UseUnStakeStateType = {
   isConnected: boolean;
-  isCorrectChainId: boolean;
+  isSupportedChainId: boolean;
   isAmountLoading: boolean;
   isUnStaking: boolean;
   isUnstakeTransactionConfirming: boolean;
   amount: bigint;
 };
 export const useUnStakeState = ({
   isConnected,
-  isCorrectChainId,
+  isSupportedChainId,
   isAmountLoading,
   isUnStaking,
   isUnstakeTransactionConfirming,
   amount
 }: UseUnStakeStateType) => {
   const buttonText = useMemo(() => {
     if (!isConnected) return 'Wallet Disconnected';
-    if (!isCorrectChainId) return 'Wrong Network';
+    if (!isSupportedChainId) return 'Wrong Network';
     if (isUnStaking) return 'Preparing Unstake';
     if (isUnstakeTransactionConfirming) return 'Confirming Unstake';
     if (isAmountLoading) return 'Preparing...';
 
     return 'Unstake';
-  }, [isConnected, isCorrectChainId, isAmountLoading, isUnstakeTransactionConfirming, isUnStaking]);
+  }, [
+    isConnected,
+    isSupportedChainId,
+    isAmountLoading,
+    isUnstakeTransactionConfirming,
+    isUnStaking
+  ]);
 
-  const isButtonDisabled = isAmountLoading || !isConnected || !isCorrectChainId || !amount;
+  const isButtonDisabled = isAmountLoading || !isConnected || !isSupportedChainId || !amount;
 
-  return { buttonText, isButtonDisabled };
+  const isFetching = isConnected && isSupportedChainId && isAmountLoading;
+
+  return { buttonText, isButtonDisabled, isFetching };
 };