feat: provide loading for the detail button on the history page

nervosnetwork · May 6, 2023 · 70c604b · 70c604b
1 parent 0952040
commit 70c604b
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 6 deletions.
diff --git a/packages/neuron-ui/src/components/TransactionList/index.tsx b/packages/neuron-ui/src/components/TransactionList/index.tsx
@@ -48,6 +48,7 @@ const TransactionList = ({
   dispatch,
 }: TransactionListProps) => {
   const [txHash, setTxHash] = useState('')
+  const [isDetailOpening, setIsDetailOpening] = useState(false)
   const [t] = useTranslation()
 
   const {
@@ -115,7 +116,8 @@ const TransactionList = ({
             break
           }
           case 'detail': {
-            showTransactionDetails(btn.dataset.hash)
+            setIsDetailOpening(true)
+            showTransactionDetails(btn.dataset.hash).finally(() => setIsDetailOpening(false))
             break
           }
           default: {
@@ -279,9 +281,10 @@ const TransactionList = ({
                   onClick={onActionBtnClick}
                   data-hash={tx.hash}
                   data-action="detail"
+                  disabled={isDetailOpening}
                 >
                   <Detail />
-                  <span>{t('history.view-detail')}</span>
+                  <span>{isDetailOpening ? t('history.opening') : t('history.view-detail')}</span>
                 </button>
                 <button
                   type="button"

diff --git a/packages/neuron-ui/src/components/TransactionList/transactionList.module.scss b/packages/neuron-ui/src/components/TransactionList/transactionList.module.scss
@@ -296,5 +296,9 @@ $pending-color: #b3b3b3;
     svg {
       height: 16px;
     }
+
+    &[disabled] {
+      background: #9b9bd4;
+    }
   }
 }
diff --git a/packages/neuron-ui/src/locales/en.json b/packages/neuron-ui/src/locales/en.json
@@ -270,6 +270,7 @@
       "view-in-explorer-button-title": "View on explorer",
       "view-detail": "Detail",
       "view-detail-button-title": "View Detail",
+      "opening": "Opening",
       "copy-tx-hash": "Copy Transaction Hash",
       "copy-balance": "Copy Balance",
       "copy-address": "Copy Address",

diff --git a/packages/neuron-ui/src/locales/zh-tw.json b/packages/neuron-ui/src/locales/zh-tw.json
@@ -263,6 +263,7 @@
       "view-in-explorer-button-title": "瀏覽器中查看詳情",
       "view-detail": "詳情",
       "view-detail-button-title": "查看詳情",
+      "opening": "正在打開",
       "copy-tx-hash": "複製交易哈希",
       "copy-balance": "複製餘額",
       "copy-address": "複製地址",

diff --git a/packages/neuron-ui/src/locales/zh.json b/packages/neuron-ui/src/locales/zh.json
@@ -263,6 +263,7 @@
       "view-in-explorer-button-title": "浏览器中查看详情",
       "view-detail": "详情",
       "view-detail-button-title": "查看详情",
+      "opening": "正在打开",
       "copy-tx-hash": "复制交易哈希",
       "copy-balance": "复制余额",
       "copy-address": "复制地址",

diff --git a/packages/neuron-wallet/src/controllers/api.ts b/packages/neuron-wallet/src/controllers/api.ts
@@ -370,8 +370,24 @@ export default class ApiController {
     })
 
     handle('show-transaction-details', async (_, hash: string) => {
-      showWindow(`#/transaction/${hash}`, t(`messageBox.transaction.title`, { hash }), {
-        height: 750
+      const win = showWindow(
+        `#/transaction/${hash}`,
+        t(`messageBox.transaction.title`, { hash }),
+        {
+          height: 750
+        },
+        undefined,
+        (win) => win.webContents.getURL().endsWith(`#/transaction/${hash}`)
+      )
+
+      if (win.isVisible()) return
+
+      return new Promise((resolve, reject) => {
+        win.once('ready-to-show', resolve)
+        CommonUtils.sleep(3e3).then(() => {
+          win.off('ready-to-show', resolve)
+          reject(new Error('Show window timeout'))
+        })
       })
     })
 

diff --git a/packages/neuron-wallet/src/controllers/app/show-window.ts b/packages/neuron-wallet/src/controllers/app/show-window.ts
@@ -7,9 +7,10 @@ const showWindow = (
   url: string,
   title: string,
   options?: Electron.BrowserWindowConstructorOptions,
-  channels?: string[]
+  channels?: string[],
+  comparator: (win: BrowserWindow) => boolean = (win) => win.getTitle() === title
 ): BrowserWindow => {
-  const opened = BrowserWindow.getAllWindows().find(bw => bw.getTitle() === title)
+  const opened = BrowserWindow.getAllWindows().find(comparator)
   if (opened) {
     opened.webContents.send('navigation', url.replace(/^#/, ''))
     opened.focus()