Merge pull request #507 from Magickbase/develop

components/AccountOverview/index.tsx

@@ -78,7 +78,7 @@ export interface MetaContract extends AccountBase {
 }
 
 export type AccountOverviewProps = {
-  account: EthUser | EthAddrReg | PolyjuiceCreator | PolyjuiceContract | Udt | MetaContract | UnknownUser
+  account: EthUser | EthAddrReg | PolyjuiceCreator | PolyjuiceContract | Udt | MetaContract | UnknownUser | null
   isOverviewLoading?: boolean
   isBalanceLoading?: boolean
   balance: string
@@ -203,6 +203,31 @@ const AccountOverview: React.FC<AccountOverviewProps & { refetch: () => Promise<
 }) => {
   const [t] = useTranslation(['account', 'common'])
 
+  if (!account) {
+    return (
+      <div className={styles.container}>
+        <InfoList
+          title={t('basicInfo')}
+          list={[
+            {
+              field: t('type'),
+              content: <Skeleton animation="wave" width="100%" />,
+            },
+          ]}
+        />
+        <InfoList
+          title={t('overview')}
+          list={[
+            {
+              field: t('ckbBalance'),
+              content: <Skeleton animation="wave" />,
+            },
+          ]}
+        />
+      </div>
+    )
+  }
+
   return (
     <div className={styles.container} data-account-type={account.type}>
       {account.type === GraphQLSchema.AccountType.MetaContract ? (

pages/account/[id].tsx

@@ -181,16 +181,14 @@ const Account = () => {
           <CopyBtn content={id as string} />
           <QRCodeBtn content={id as string} />
         </div>
-        {account ? (
-          <AccountOverview
-            isOverviewLoading={isOverviewLoading}
-            isBalanceLoading={isBalanceLoading}
-            account={account}
-            balance={balance}
-            deployerAddr={deployerAddr}
-            refetch={refetchAccountOverview}
-          />
-        ) : null}
+        <AccountOverview
+          isOverviewLoading={isOverviewLoading}
+          isBalanceLoading={isBalanceLoading}
+          account={account}
+          balance={balance}
+          deployerAddr={deployerAddr}
+          refetch={refetchAccountOverview}
+        />
         <div className={styles.list}>
           <Tabs
             value={tabs.findIndex(tabItem => tabItem.key === tab)}

pages/block/[id].tsx

@@ -31,8 +31,7 @@ const Block = () => {
   } = useRouter()
 
   const { isLoading: isBlockLoading, data: block } = useQuery(['block', id], () => fetchBlock(id as string), {
-    refetchInterval: 10000,
-    enabled: !isFinalized,
+    refetchInterval: isFinalized ? undefined : 10000,
   })
 
   useEffect(() => {

pages/token/[id].tsx

@@ -110,7 +110,7 @@ const Token: React.FC<Props> = () => {
       ),
     },
     {
-      field: 'description',
+      field: t('description'),
       content: token ? token.description || '-' : <Skeleton animation="wave" />,
     },
   ]

pages/tx/[hash].tsx

@@ -1,5 +1,5 @@
 import type { GetStaticPaths, GetStaticProps } from 'next'
-import { useMemo } from 'react'
+import { useMemo, useState, useEffect } from 'react'
 import { useRouter } from 'next/router'
 import { useTranslation } from 'next-i18next'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
@@ -42,11 +42,12 @@ const Tx = () => {
     },
     replace,
   } = useRouter()
-  const [t] = useTranslation('tx')
+  const [t, { language }] = useTranslation('tx')
+  const [isFinalized, setIsFinalized] = useState(false)
 
   const { isLoading: isTxLoading, data: tx } = useQuery(['tx', hash], () => fetchTx(hash as string), {
     enabled: !!hash,
-    refetchInterval: 10000,
+    refetchInterval: isFinalized ? undefined : 10000,
   })
 
   const { isLoading: isTransferListLoading, data: transferList } = useQuery(
@@ -75,8 +76,14 @@ const Tx = () => {
     },
   )
 
+  useEffect(() => {
+    if (tx?.status === 'finalized') {
+      setIsFinalized(true)
+    }
+  }, [tx, setIsFinalized])
+
   if (!isTxLoading && !tx?.hash) {
-    replace(`/404?search=${hash}`)
+    replace(`${language}/404?query=${hash}`)
   }
 
   const downloadItems = [{ label: t('ERC20Records'), href: DOWNLOAD_HREF_LIST.txTransferList(hash as string) }]