add indexing error modal (#32)

* add indexing error modal

* fix ts error

src/components/collator/_hooks/collator.ts

@@ -75,7 +75,7 @@ export const useCreateCollator = ({
     abi: hubAbi,
     address: hubAddress,
     functionName: 'assetsToVotes',
-    args: [stakedOf ?? 0n, commission],
+    args: [commission, stakedOf ?? 0n],
     query: {
       enabled: isEnabled && !!stakedOf && enabled
     }

src/components/waiting-indexing/context.tsx

@@ -1,10 +1,14 @@
 import { createContext, useState, ReactNode } from 'react';
 import WaitingIndexing from '@/components/waiting-indexing';
+import IndexingErrorModal from '@/components/waiting-indexing/error-modal'; // Assuming this component exists
 
 interface WaitingIndexingContextProps {
   isOpen: boolean;
   open: () => void;
   close: () => void;
+  openError: () => void;
+  closeError: () => void;
+  isErrorOpen: boolean;
 }
 
 export const WaitingIndexingContext = createContext<WaitingIndexingContextProps | undefined>(
@@ -13,14 +17,20 @@ export const WaitingIndexingContext = createContext<WaitingIndexingContextProps
 
 export function WaitingIndexingProvider({ children }: { children: ReactNode }) {
   const [isOpen, setIsOpen] = useState(false);
+  const [isErrorOpen, setIsErrorOpen] = useState(false);
 
   const open = () => setIsOpen(true);
   const close = () => setIsOpen(false);
+  const openError = () => setIsErrorOpen(true);
+  const closeError = () => setIsErrorOpen(false);
 
   return (
-    <WaitingIndexingContext.Provider value={{ isOpen, open, close }}>
+    <WaitingIndexingContext.Provider
+      value={{ isOpen, open, close, isErrorOpen, openError, closeError }}
+    >
       {children}
       <WaitingIndexing isOpen={isOpen} onClose={close} />
+      <IndexingErrorModal isOpen={isErrorOpen} onClose={closeError} />
     </WaitingIndexingContext.Provider>
   );
 }

src/components/waiting-indexing/error-modal.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Modal, ModalBody, ModalContent, ModalHeader } from '@nextui-org/modal';
+import { CircleAlert } from 'lucide-react';
+
+interface IndexingErrorModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const IndexingErrorModal: React.FC<IndexingErrorModalProps> = ({ isOpen, onClose }) => {
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      placement="center"
+      className="bg-background"
+      size="sm"
+      backdrop="opaque"
+    >
+      <ModalContent className="">
+        <ModalHeader className="flex items-center gap-2 text-[1.125rem] text-foreground">
+          <CircleAlert />
+          Indexing Service Error
+        </ModalHeader>
+        <ModalBody>
+          <div className="pb-4 font-normal text-foreground">
+            Indexing service error, please report it at{' '}
+            <a
+              href="https://github.com/darwinia-network/collator-staking-ui-v2/issues/new"
+              target="_blank"
+              rel="noreferrer"
+              className="text-primary"
+            >
+              https://github.com/darwinia-network/collator-staking-ui-v2/issues/new
+            </a>
+          </div>
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default IndexingErrorModal;

src/hooks/useWaitingIndexing.ts

@@ -8,7 +8,7 @@ import useWalletStatus from './useWalletStatus';
 
 function useCheckWaitingIndexing() {
   const { currentChainId } = useWalletStatus();
-  const { open } = useWaitingIndexing();
+  const { open, openError } = useWaitingIndexing();
   const [isLoading, setIsLoading] = useState(false);
 
   const checkWaitingIndexing = useCallback(async () => {
@@ -25,7 +25,11 @@ function useCheckWaitingIndexing() {
         }),
         fetchDeploymentMeta(currentChainId)
       ]);
-
+      if (!deploymentMeta?._meta?.block?.timestamp) {
+        openError();
+        setIsLoading(false);
+        return { isDeployed: false, error: null };
+      }
       if (deploymentMeta?._meta?.block?.timestamp) {
         const contractTimestamp = updateTimeStamp ? BigInt(updateTimeStamp.toString()) : 0n;
         const indexedTimestamp = BigInt(deploymentMeta._meta.block.timestamp);
@@ -36,7 +40,7 @@ function useCheckWaitingIndexing() {
         return { isDeployed, error: null };
       }
 
-      return { isDeployed: false, error: null };
+      return { isDeployed: false, error: new Error('Indexing service error') };
     } catch (error) {
       return {
         isDeployed: false,
@@ -45,7 +49,7 @@ function useCheckWaitingIndexing() {
     } finally {
       setIsLoading(false);
     }
-  }, [currentChainId, open]);
+  }, [currentChainId, open, openError]);
 
   return { checkWaitingIndexing, isLoading };
 }