From d3a9d12b9a0505314bb8fffe58c6e0980d7689ea Mon Sep 17 00:00:00 2001
From: Keith <keithwhisper@gmail.com>
Date: Sat, 27 Aug 2022 23:41:27 +0800
Subject: [PATCH 1/3] refactor: refine loading of account page

---
 components/AccountOverview/index.tsx | 27 ++++++++++++++++++++++++++-
 pages/account/[id].tsx               | 18 ++++++++----------
 2 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/components/AccountOverview/index.tsx b/components/AccountOverview/index.tsx
index 356a988bd..91f19032c 100644
--- a/components/AccountOverview/index.tsx
+++ b/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 ? (
diff --git a/pages/account/[id].tsx b/pages/account/[id].tsx
index 9ec25e0c3..30c000aa0 100644
--- a/pages/account/[id].tsx
+++ b/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)}

From 4f2db8bd78b8d1da7f48231f17c5351d2897f717 Mon Sep 17 00:00:00 2001
From: Keith <keithwhisper@gmail.com>
Date: Sun, 28 Aug 2022 00:11:14 +0800
Subject: [PATCH 2/3] fix: fix i18n

---
 pages/token/[id].tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/token/[id].tsx b/pages/token/[id].tsx
index e453e4e06..1c065b950 100644
--- a/pages/token/[id].tsx
+++ b/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" />,
     },
   ]

From 6598674b903e8a5b660473118fe6335e5ed20e49 Mon Sep 17 00:00:00 2001
From: Keith <keithwhisper@gmail.com>
Date: Sun, 28 Aug 2022 02:04:37 +0800
Subject: [PATCH 3/3] feat: refine retry in block/tx page

---
 pages/block/[id].tsx |  3 +--
 pages/tx/[hash].tsx  | 15 +++++++++++----
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/pages/block/[id].tsx b/pages/block/[id].tsx
index e3417d47d..d02ba467f 100644
--- a/pages/block/[id].tsx
+++ b/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(() => {
diff --git a/pages/tx/[hash].tsx b/pages/tx/[hash].tsx
index 076a3cc67..cbff8cc17 100644
--- a/pages/tx/[hash].tsx
+++ b/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) }]