fix issues mentioned in #9

.env

@@ -2,7 +2,7 @@ VITE_PROJECT_ID = 2719448e2ce94fdd269a3c8587123bcc
 VITE_DEPLOYMENT_MODE = testnet
 VITE_APP_NAME = "Collator Staking - RingDAO"
 VITE_APP_DESCRIPTION = "Elevate your earnings and effortlessly manage your staking positions with the RingDAO collator staking page."
-VITE_KOI_GRAPHQL_API_URL = "https://thegraph.darwinia.network/dip7/subgraphs/name/dip7index-koi"
+VITE_KOI_GRAPHQL_API_URL = "https://thegraph-g2.darwinia.network/training/subgraphs/name/dip7index-koi-kv"
 VITE_CRAB_GRAPHQL_API_URL = "https://thegraph.darwinia.network/dip7/subgraphs/name/dip7index-crab"
 VITE_DARWINIA_GRAPHQL_API_URL = "https://thegraph.darwinia.network/dip7/subgraphs/name/dip7index-darwinia"
 

src/components/collator/join.tsx

@@ -1,6 +1,7 @@
 import { Button, Tooltip } from '@nextui-org/react';
 import { CircleHelp } from 'lucide-react';
 import { useCallback, useEffect, useMemo, useState } from 'react';
+import useCheckWaitingIndexing from '@/hooks/useWaitingIndexing';
 import TransactionStatus from '../transaction-status';
 import { useSetSessionKey } from './_hooks/set-session-key';
 import { useCreateCollator, useCreateAndCollator } from './_hooks/collator';
@@ -21,7 +22,7 @@ const CollatorJoin = ({ hasSessionKey, sessionKey, hasPool, refetch }: CollatorJ
   const [commissionHash, setCommissionHash] = useState('');
   const [sessionKeyValue, setSessionKeyValue] = useState('');
   const [commissionValue, setCommissionValue] = useState('');
-
+  const { checkWaitingIndexing, isLoading: isLoadingWaitingIndexing } = useCheckWaitingIndexing();
   const { setSessionKey, isPending: isPendingSetSessionKey } = useSetSessionKey();
 
   const commission = useMemo(() => {
@@ -84,6 +85,10 @@ const CollatorJoin = ({ hasSessionKey, sessionKey, hasPool, refetch }: CollatorJ
   }, []);
 
   const handleSetCommission = useCallback(async () => {
+    const { isDeployed } = await checkWaitingIndexing();
+    if (!isDeployed) {
+      return;
+    }
     if (hasPool) {
       const tx = await createCollator({
         commission
@@ -103,7 +108,7 @@ const CollatorJoin = ({ hasSessionKey, sessionKey, hasPool, refetch }: CollatorJ
         setCommissionHash(tx);
       }
     }
-  }, [hasPool, commission, createCollator, createAndCollator]);
+  }, [hasPool, commission, createCollator, createAndCollator, checkWaitingIndexing]);
 
   const handleSetCommissionSuccess = useCallback(() => {
     setCommissionHash('');
@@ -239,7 +244,7 @@ const CollatorJoin = ({ hasSessionKey, sessionKey, hasPool, refetch }: CollatorJ
             className="h-[2.125rem] w-full"
             isDisabled={!hasSessionKey || !commissionValue || commission < 0n}
             onClick={handleSetCommission}
-            isLoading={isSetCommissionLoading || isLockPeriodLoading}
+            isLoading={isSetCommissionLoading || isLockPeriodLoading || isLoadingWaitingIndexing}
           >
             {hasPool ? 'Collate' : 'Create Nomination Pool & Collate'}
           </Button>

src/components/collator/manage.tsx

@@ -4,6 +4,7 @@ import { CircleHelp } from 'lucide-react';
 import { validSessionKey } from '@/utils';
 import { fetchCollatorSetPrev, useCollatorByAddress } from '@/hooks/useService';
 import useWalletStatus from '@/hooks/useWalletStatus';
+import useCheckWaitingIndexing from '@/hooks/useWaitingIndexing';
 import { DEFAULT_PREV } from '@/utils/getPrevNew';
 import TransactionStatus from '../transaction-status';
 import StopCollation from './stop-collation';
@@ -34,7 +35,7 @@ const CollatorManagement = ({
   const [sessionKeyValue, setSessionKeyValue] = useState('');
   const [commissionValue, setCommissionValue] = useState('');
   const [isLoadingPrev, setIsLoadingPrev] = useState(false);
-
+  const { checkWaitingIndexing, isLoading: isLoadingWaitingIndexing } = useCheckWaitingIndexing();
   const { data: collatorByAddress, isLoading: isLoadingCollatorByAddress } = useCollatorByAddress({
     address: address as `0x${string}`,
     enabled: true
@@ -131,6 +132,10 @@ const CollatorManagement = ({
   }, []);
 
   const handleSetCommission = useCallback(async () => {
+    const { isDeployed } = await checkWaitingIndexing();
+    if (!isDeployed) {
+      return;
+    }
     const oldPrev = await getPrevAddress();
     if (!oldPrev) {
       error('Previous key is missing. Please verify your collator information.');
@@ -142,7 +147,7 @@ const CollatorManagement = ({
     if (tx) {
       setCommissionHash(tx);
     }
-  }, [updateCommission, getPrevAddress]);
+  }, [updateCommission, getPrevAddress, checkWaitingIndexing]);
 
   const handleSetCommissionSuccess = useCallback(() => {
     setCommissionHash('');
@@ -153,6 +158,10 @@ const CollatorManagement = ({
   }, []);
 
   const handleStop = useCallback(async () => {
+    const { isDeployed } = await checkWaitingIndexing();
+    if (!isDeployed) {
+      return;
+    }
     const oldPrev = await getPrevAddress();
     if (!oldPrev) {
       error('Previous key is missing. Please verify your collator information.');
@@ -164,7 +173,7 @@ const CollatorManagement = ({
     if (tx) {
       setStopHash(tx);
     }
-  }, [stop, getPrevAddress]);
+  }, [stop, getPrevAddress, checkWaitingIndexing]);
 
   const handleStopSuccess = useCallback(() => {
     setStopHash('');
@@ -272,7 +281,8 @@ const CollatorManagement = ({
               isLockPeriodLoading ||
               isLoadingUpdateCommission ||
               isLoadingPrev ||
-              isLoadingCollatorByAddress
+              isLoadingCollatorByAddress ||
+              isLoadingWaitingIndexing
             }
           >
             Update Commission
@@ -284,7 +294,7 @@ const CollatorManagement = ({
         color="primary"
         className="h-[2.125rem] w-full"
         variant="light"
-        isLoading={isPendingStop || isLoadingPrev}
+        isLoading={isPendingStop || isLoadingPrev || isLoadingWaitingIndexing}
         onClick={handleStop}
       >
         Stop Collation

src/components/deposit-item.tsx

@@ -1,8 +1,8 @@
 import { Checkbox, Progress, Tooltip } from '@nextui-org/react';
-import dayjs from 'dayjs';
 import { formatEther } from 'viem';
 import FormattedNumberTooltip from './formatted-number-tooltip';
 import type { DepositInfo } from '@/hooks/useUserDepositDetails';
+import { calculateDepositProgress } from '@/utils/date';
 
 interface DepositItemProps {
   item: DepositInfo;
@@ -13,12 +13,12 @@ interface DepositItemProps {
 
 const DepositItem = ({ item, isChecked, symbol, onChange }: DepositItemProps) => {
   const value = formatEther(item?.value || 0n);
-  const startAtDate = dayjs(item?.startAt * 1000).format('YYYY-MM-DD');
-  const endAtDate = dayjs(item?.endAt * 1000).format('YYYY-MM-DD');
-  const now = dayjs().unix();
-  const totalDuration = item?.endAt - item?.startAt;
-  const elapsedDuration = Math.max(0, Math.min(now - item?.startAt, totalDuration));
-  const progressValue = (elapsedDuration / totalDuration) * 100;
+
+  const { startAtDate, endAtDate, progressValue } = calculateDepositProgress(
+    item?.startAt,
+    item?.endAt
+  );
+
   return (
     <Tooltip closeDelay={0} content={`${startAtDate} - ${endAtDate}`} placement="bottom">
       <div

src/components/empty.tsx

@@ -1,7 +1,7 @@
 const Empty = ({ label }: { label: string }) => {
   return (
     <div className="flex h-[10rem] flex-col items-center justify-center gap-[0.625rem] rounded-medium bg-secondary">
-      <div className="flex flex-col items-center gap-[0.625rem]">
+      <div className="flex flex-col items-center gap-[0.825rem]">
         <img src="/images/common/empty.svg" alt="empty" className="h-[56px] w-[116px]" />
         <p className="m-0 text-[0.75rem] font-normal text-foreground/50">{label}</p>
       </div>

src/components/reserved-staking-panel.tsx

@@ -2,8 +2,10 @@ import { useStakingAccount } from '@/hooks/useService';
 import TooltipFormattedNumber from './tooltip-formatter-number';
 import { formatEther } from 'viem';
 import { Skeleton } from '@nextui-org/react';
+import useWalletStatus from '@/hooks/useWalletStatus';
 
 const ReservedStakingPanel = () => {
+  const { nativeTokenIcon, currentChain } = useWalletStatus();
   const { data, isLoading } = useStakingAccount({
     enabled: true
   });
@@ -14,7 +16,15 @@ const ReservedStakingPanel = () => {
   return (
     <div className="relative flex h-[11rem] w-full flex-col items-center justify-center gap-[0.625rem] rounded-medium bg-secondary p-5 md:w-[22.5rem]">
       <div className="relative mt-[0.62rem] size-[3.75rem]">
-        <img src="/images/token/ring.svg" alt="ring" className="h-[60px] w-[60px]" />
+        {nativeTokenIcon ? (
+          <img
+            src={nativeTokenIcon}
+            alt={currentChain?.nativeCurrency?.name}
+            className="h-[60px] w-[60px]"
+          />
+        ) : (
+          <img src="/images/token/ring.svg" alt="ring" className="h-[60px] w-[60px]" />
+        )}
       </div>
       <p className="m-0 text-[0.875rem] font-normal text-foreground">Reserved in Staking</p>
       {isLoading ? (

src/components/unstake-deposit-item.tsx

@@ -1,39 +1,48 @@
 import { Checkbox, Progress, Tooltip } from '@nextui-org/react';
 import { formatEther } from 'viem';
-import dayjs from 'dayjs';
 import FormattedNumberTooltip from './formatted-number-tooltip';
 
 import type { StakedDepositInfo } from '@/view/stake/_hooks/staked';
+import { calculateDepositProgress } from '@/utils/date';
 
 interface UnstakeDepositItemProps {
   item: StakedDepositInfo;
   isChecked?: boolean;
+  isDisabled?: boolean;
   symbol?: string;
   onChange: (id: bigint) => void;
 }
 
-const UnstakeDepositItem = ({ item, isChecked, symbol, onChange }: UnstakeDepositItemProps) => {
+const UnstakeDepositItem = ({
+  item,
+  isChecked,
+  isDisabled,
+  symbol,
+  onChange
+}: UnstakeDepositItemProps) => {
   const value = formatEther(item?.amount || 0n);
 
-  const startAtDate = dayjs(item?.startAt * 1000).format('YYYY-MM-DD');
-  const endAtDate = dayjs(item?.endAt * 1000).format('YYYY-MM-DD');
-  const now = dayjs().unix();
-  const totalDuration = item?.endAt - item?.startAt;
-  const elapsedDuration = Math.max(0, Math.min(now - item?.startAt, totalDuration));
-  const progressValue = (elapsedDuration / totalDuration) * 100;
+  const { startAtDate, endAtDate, progressValue } = calculateDepositProgress(
+    item?.startAt,
+    item?.endAt
+  );
+
   return (
     <Tooltip closeDelay={0} content={`${startAtDate} - ${endAtDate}`} placement="bottom">
       <div
         className="flex cursor-pointer items-start gap-[0.31rem]"
         onClick={() => {
+          if (isDisabled) return;
           onChange(item?.tokenId);
         }}
       >
         <Checkbox
           isSelected={isChecked}
+          isDisabled={isDisabled}
           radius="full"
           className="-mt-[3px]"
           onValueChange={() => {
+            if (isDisabled) return;
             onChange(item?.tokenId);
           }}
           classNames={{

src/components/unstake-deposit-list.tsx

@@ -9,13 +9,14 @@ export type DepositListRef = {
   reset: () => void;
 };
 interface DepositListProps {
+  isDisabled?: boolean;
   maxCount?: number;
   deposits: StakedDepositInfo[];
   onCheckedDepositsChange: (deposits: StakedDepositInfo[]) => void;
 }
 
 const UnstakeDepositList = forwardRef<DepositListRef, DepositListProps>(
-  ({ maxCount = 5, deposits, onCheckedDepositsChange }, ref) => {
+  ({ maxCount = 5, deposits, onCheckedDepositsChange, isDisabled = false }, ref) => {
     const [checkedDeposits, setCheckedDeposits] = useState<StakedDepositInfo[]>([]);
 
     const { chain } = useWalletStatus();
@@ -52,6 +53,7 @@ const UnstakeDepositList = forwardRef<DepositListRef, DepositListProps>(
               <UnstakeDepositItem
                 key={deposit.tokenId}
                 item={deposit}
+                isDisabled={isDisabled}
                 isChecked={checkedDeposits.includes(deposit)}
                 symbol={chain?.nativeCurrency?.symbol}
                 onChange={() => handleDepositChange(deposit)}

src/config/chains/index.ts

@@ -1,4 +1,7 @@
 import { ChainId } from '@/types/chains';
+import { nativeTokenIcon as crabNativeTokenIcon } from './crab';
+import { nativeTokenIcon as darwiniaNativeTokenIcon } from './darwinia';
+import { nativeTokenIcon as koiNativeTokenIcon } from './koi';
 
 export { chain as crab, nativeTokenIcon as crabNativeTokenIcon } from './crab';
 export { chain as darwinia, nativeTokenIcon as darwiniaNativeTokenIcon } from './darwinia';
@@ -10,6 +13,12 @@ export const KTON_TOKEN_MAP = new Map<ChainId, string>([
   [ChainId.KOI, 'PKTON']
 ]);
 
+export const NATIVE_TOKEN_ICON_MAP = new Map<ChainId, string>([
+  [ChainId.CRAB, crabNativeTokenIcon],
+  [ChainId.DARWINIA, darwiniaNativeTokenIcon],
+  [ChainId.KOI, koiNativeTokenIcon]
+]);
+
 export const KTON_TOKEN_INFO_MAP = new Map<
   ChainId,
   { symbol: string; decimals: number; address: `0x${string}` }

src/config/tabs.ts

@@ -13,9 +13,9 @@ export const defiTabs = [
   }
 ];
 
-export const stakeTabs = [
+export const stakeTabs = (tokenName: string) => [
   {
-    label: 'Stake RING',
+    label: `Stake ${tokenName}`,
     key: 'stake-ring'
   },
   {

src/hooks/useService.ts

@@ -36,7 +36,7 @@ export function useCollatorSet({
   };
 
   return useQuery({
-    queryKey: ['collatorSet', params],
+    queryKey: ['collatorSet', params, currentChainId],
     queryFn: async () => {
       const result = await fetchCollatorSet(params, currentChainId!);
 
@@ -104,7 +104,7 @@ export function useCollatorSetNewPrev({
   };
 
   return useQuery({
-    queryKey: ['collatorSetNewPrev', params],
+    queryKey: ['collatorSetNewPrev', params, currentChainId],
     queryFn: async () => {
       const result = await fetchCollatorSet(params, currentChainId!);
       if (result === null) {
@@ -162,7 +162,7 @@ export function useCollatorByAddress({ address, enabled = true }: CollatorByAddr
   };
 
   return useQuery({
-    queryKey: ['collatorByAddress', params],
+    queryKey: ['collatorByAddress', params, currentChainId],
     queryFn: async () => {
       const result = await fetchCollatorSet(params, currentChainId!);
       if (result === null) {
@@ -218,7 +218,7 @@ export function useCollatorSetByAccounts({
     first: 1000
   };
   return useQuery({
-    queryKey: ['collatorSetByAccounts', params],
+    queryKey: ['collatorSetByAccounts', params, currentChainId],
     queryFn: async () => {
       const result = await fetchCollatorSetByAccounts(params, currentChainId!);
       if (result === null) {
@@ -243,7 +243,7 @@ export function useStakingAccount({ enabled = true }: StakingAccountParams) {
     orderBy: 'latestChangeTimestamp',
     orderDirection: 'desc'
   };
-  const queryKey = ['stakingAccounts', params];
+  const queryKey = ['stakingAccounts', params, currentChainId];
   const result = useQuery({
     queryKey,
     queryFn: async () => {