fix: issues for history page

nervosnetwork · Jun 14, 2023 · 424a2e6 · 424a2e6
1 parent 37e00b1
commit 424a2e6
Show file tree

Hide file tree

Showing 10 changed files with 149 additions and 144 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -16,5 +16,6 @@
     "typescript",
     "typescriptreact"
   ],
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "i18next.i18nPaths": "/Users/jeffreyma/workspace/neuron/packages/neuron-wallet/dist/locales,/Users/jeffreyma/workspace/neuron/packages/neuron-wallet/src/locales,/Users/jeffreyma/workspace/neuron/packages/neuron-ui/src/locales,/Users/jeffreyma/workspace/neuron/packages/neuron-wallet/coverage/lcov-report/src/locales"
 }
diff --git a/packages/neuron-ui/src/components/History/RowExtend.tsx b/packages/neuron-ui/src/components/History/RowExtend.tsx
@@ -2,7 +2,7 @@ import React, { useCallback } from 'react'
 import { useDispatch } from 'states'
 import { openExternal } from 'services/remote'
 
-import { getExplorerUrl, localNumberFormatter, RoutePath, useLocalDescription } from 'utils'
+import { clsx, getExplorerUrl, localNumberFormatter, RoutePath, useLocalDescription } from 'utils'
 import { TableProps } from 'widgets/Table'
 import CopyZone from 'widgets/CopyZone'
 import { useNavigate } from 'react-router-dom'
@@ -64,47 +64,42 @@ const RowExtend = ({ column, columns, isMainnet, id, bestBlockNumber }: RowExten
       <td colSpan={columns.length} className={styles.extendWrapper} style={{ paddingLeft: `${columns?.[0]?.width}` }}>
         <div className={styles.extendBox} style={{ gridColumn: `${2 / columns.length}` }}>
           <div className={styles.infoBox}>
-            <div className={styles.infoBlock}>
+            <div className={clsx(styles.infoBlock, styles.confirmCount)}>
               <div className={styles.infoBlockTitle}>{t('history.confirmations')}</div>
               <div>{confirmationsLabel}</div>
             </div>
-
             <div className={styles.infoBlock}>
               <div className={styles.infoBlockTitle}>{t('history.description')}</div>
-              <div>
-                <Tooltip
-                  placement="left-bottom"
-                  tip={
-                    <div className={styles.descTipRoot}>
-                      <div className={styles.autoHeight}>
-                        <textarea
-                          className={styles.descInput}
-                          data-is-selected={isSelected}
-                          data-description-key={column.hash}
-                          value={isSelected ? localDescription.description : description}
-                          onChange={onDescriptionChange}
-                          onKeyDown={onDescriptionPress}
-                        />
-
-                        <Edit
-                          data-description-key={column.hash}
-                          data-description-value={column.description}
-                          onClick={onDescriptionSelected}
-                        />
-                      </div>
-                      <div className={styles.hidden}>
-                        {isSelected ? localDescription.description : description}
-                        <Edit />
-                      </div>
+              <Tooltip
+                tip={
+                  <div className={styles.descTipRoot}>
+                    <div className={styles.autoHeight}>
+                      <textarea
+                        className={styles.descInput}
+                        data-is-selected={isSelected}
+                        data-description-key={column.hash}
+                        value={isSelected ? localDescription.description : description}
+                        onChange={onDescriptionChange}
+                        onKeyDown={onDescriptionPress}
+                      />
+                      <Edit
+                        data-description-key={column.hash}
+                        data-description-value={column.description}
+                        onClick={onDescriptionSelected}
+                      />
+                    </div>
+                    <div className={styles.hidden}>
+                      {isSelected ? localDescription.description : description}
+                      <Edit />
                     </div>
-                  }
-                  showTriangle
-                  isTriggerNextToChild
-                  className={styles.description}
-                >
-                  <span className={styles.descText}>{description || t('addresses.default-description')}</span>
-                </Tooltip>
-              </div>
+                  </div>
+                }
+                showTriangle
+                isTriggerNextToChild
+                className={styles.description}
+              >
+                <div className={styles.descText}>{description || t('addresses.default-description')}</div>
+              </Tooltip>
             </div>
           </div>
 

diff --git a/packages/neuron-ui/src/components/History/history.module.scss b/packages/neuron-ui/src/components/History/history.module.scss
@@ -1,5 +1,6 @@
 @import '../../styles/mixin.scss';
 @import '../../styles/theme.scss';
+@import '../../styles/animation.scss';
 
 $history-info-title-color: #999;
 $history-button-color: #8da394;
@@ -60,11 +61,9 @@ body {
 
     .infoBox {
       display: flex;
-      margin-bottom: 16px;
     }
 
     .infoBlock {
-      flex: 1;
       &Title {
         margin-bottom: 8px;
         color: $history-info-title-color;
@@ -76,7 +75,15 @@ body {
         gap: 10px;
         font-family: 'JetBrains Mono';
       }
+      .descText {
+        padding-bottom: 16px;
+        word-break: break-all;
+      }
+    }
+    .confirmCount {
+      min-width: 50%;
     }
+
     .infoOperationBox {
       display: flex;
       margin-top: 20px;
@@ -120,6 +127,12 @@ body {
     filter: invert(1);
   }
 }
+
+.confirm {
+  @include infinite-rotation;
+  margin-left: 4px;
+}
+
 .arrow {
   transition: transform 0.1s ease-in-out;
 

diff --git a/packages/neuron-ui/src/components/History/index.tsx b/packages/neuron-ui/src/components/History/index.tsx
@@ -6,7 +6,8 @@ import SUDTAvatar from 'widgets/SUDTAvatar'
 import Button from 'widgets/Button'
 import Table, { TableProps } from 'widgets/Table'
 import TextField from 'widgets/TextField'
-import { DownloadIcon, SearchIcon, ArrowOpenRightIcon } from 'widgets/Icons/icon'
+import CopyZone from 'widgets/CopyZone'
+import { Confirming, DownloadIcon, SearchIcon, ArrowOpenRightIcon } from 'widgets/Icons/icon'
 
 import PageContainer from 'components/PageContainer'
 import { getDisplayName, isTonkenInfoStandardUAN, UANTonkenSymbol } from 'components/UANDisplay'
@@ -26,6 +27,7 @@ import {
   sUDTAmountFormatter,
   sudtValueToAmount,
   shannonToCKBFormatter,
+  complexNumberToPureNumber,
 } from 'utils'
 import { onEnter } from 'utils/inputDevice'
 import { CONFIRMATION_THRESHOLD, DEFAULT_SUDT_FIELDS, HIDE_BALANCE } from 'utils/const'
@@ -194,17 +196,22 @@ const History = () => {
             isReceive = !amount.includes('-')
           }
         }
-        return sudtAmount ? (
-          <>
-            {show ? sudtAmount : HIDE_BALANCE}&nbsp;
-            <UANTonkenSymbol
-              className={styles.symbol}
-              name={item.sudtInfo!.sUDT.tokenName}
-              symbol={item.sudtInfo!.sUDT.symbol}
-            />
-          </>
-        ) : (
-          <span className={show && isReceive ? styles.isReceive : ''}>{amount}</span>
+
+        return (
+          <CopyZone content={`${complexNumberToPureNumber(sudtAmount && sudtAmount !== '' ? sudtAmount : amount)}`}>
+            {sudtAmount ? (
+              <>
+                {show ? sudtAmount : HIDE_BALANCE}&nbsp;
+                <UANTonkenSymbol
+                  className={styles.symbol}
+                  name={item.sudtInfo!.sUDT.tokenName}
+                  symbol={item.sudtInfo!.sUDT.symbol}
+                />
+              </>
+            ) : (
+              <span className={show && isReceive ? styles.isReceive : ''}>{amount}</span>
+            )}
+          </CopyZone>
         )
       },
     },
@@ -225,7 +232,7 @@ const History = () => {
           status = 'confirming'
         }
 
-        return t(`history.${status}`)
+        return status === 'confirming' ? <Confirming className={styles.confirm} /> : t(`history.${status}`)
       },
     },
     {

diff --git a/packages/neuron-ui/src/components/HistoryDetailPage/index.tsx b/packages/neuron-ui/src/components/HistoryDetailPage/index.tsx
@@ -194,7 +194,7 @@ const HistoryDetailPage = () => {
         const { address } = handleListData(item)
         return (
           <>
-            <CopyZone content={address} name={t('history.copy-address')} className={styles.address}>
+            <CopyZone content={address} className={styles.address}>
               {`${address.slice(0, 20)}...${address.slice(-20)}`}
             </CopyZone>
             <ScriptTag isMainnet={isMainnet} script={item.lock} onClick={() => setLockInfo(item.lock)} />
@@ -209,13 +209,7 @@ const HistoryDetailPage = () => {
       isBalance: true,
       render(_, __, item, show: boolean) {
         const { capacity } = handleListData(item)
-        return show ? (
-          <CopyZone content={capacity.replace(/,/g, '')} name={t('history.copy-balance')}>
-            {`${capacity} CKB`}
-          </CopyZone>
-        ) : (
-          HIDE_BALANCE
-        )
+        return show ? <CopyZone content={capacity.replace(/,/g, '')}>{`${capacity} CKB`}</CopyZone> : HIDE_BALANCE
       },
     },
   ]

diff --git a/packages/neuron-ui/src/components/LockInfoDialog/index.tsx b/packages/neuron-ui/src/components/LockInfoDialog/index.tsx
@@ -1,12 +1,9 @@
 import { useTranslation } from 'react-i18next'
-import React, { useState, useRef } from 'react'
+import React, { useRef } from 'react'
 import { bech32Address, AddressPrefix } from '@nervosnetwork/ckb-sdk-utils'
 import CopyZone from 'widgets/CopyZone'
 import Dialog from 'widgets/Dialog'
-import { ReactComponent as Copy } from 'widgets/Icons/TinyCopy.svg'
-import { ReactComponent as Check } from 'widgets/Icons/Check.svg'
 import { useDialog } from 'utils'
-import { onEnter } from 'utils/inputDevice'
 import getLockSupportShortAddress from '../../utils/getLockSupportShortAddress'
 
 import styles from './lockInfoDialog.module.scss'
@@ -40,7 +37,7 @@ const ShortAddr = ({ lockScript, isMainnet }: { lockScript: CKBComponents.Script
         {t('transaction.deprecated-address-format')}
       </div>
       <div className={styles.shortAddr}>
-        <CopyZone content={shortAddr} name={t('history.copy-address')}>
+        <CopyZone content={shortAddr}>
           <span>{shortAddr}</span>
         </CopyZone>
       </div>
@@ -50,12 +47,9 @@ const ShortAddr = ({ lockScript, isMainnet }: { lockScript: CKBComponents.Script
 
 const LockInfoDialog = ({ lockInfo, isMainnet, onDismiss }: LockInfoDialogProps) => {
   const [t] = useTranslation()
-  const [copied, setCopied] = useState(false)
   const dialogRef = useRef<HTMLDialogElement | null>(null)
   useDialog({ show: !!lockInfo, dialogRef, onClose: onDismiss })
 
-  const timer = useRef<ReturnType<typeof setTimeout>>()
-
   if (!lockInfo) {
     return null
   }
@@ -66,16 +60,6 @@ const LockInfoDialog = ({ lockInfo, isMainnet, onDismiss }: LockInfoDialogProps)
     "args": "${lockInfo.args}"
   }`
 
-  const handleCopy = () => {
-    setCopied(true)
-    window.navigator.clipboard.writeText(rawLock)
-
-    clearTimeout(timer.current!)
-    timer.current = setTimeout(() => {
-      setCopied(false)
-    }, 1000)
-  }
-
   return (
     <Dialog
       show={Boolean(lockInfo)}
@@ -84,20 +68,17 @@ const LockInfoDialog = ({ lockInfo, isMainnet, onDismiss }: LockInfoDialogProps)
       onCancel={onDismiss}
       showFooter={false}
     >
-      <>
-        <div className={styles.container}>
-          <div title={t('transaction.lock-script')} className={`${styles.title} ${styles.lockScriptTitle}`}>
-            {t('transaction.lock-script')}
-          </div>
-          <div className={styles.lock}>
-            <div className={styles.copyBtn} onClick={handleCopy} onKeyPress={onEnter(handleCopy)} role="none">
-              {copied ? <Check /> : <Copy />}
-            </div>
+      <div className={styles.container}>
+        <div title={t('transaction.lock-script')} className={`${styles.title} ${styles.lockScriptTitle}`}>
+          {t('transaction.lock-script')}
+        </div>
+        <div className={styles.lock}>
+          <CopyZone content={rawLock}>
             <pre>{rawLock}</pre>
-          </div>
-          <ShortAddr isMainnet={isMainnet} lockScript={lockInfo} />
+          </CopyZone>
         </div>
-      </>
+        <ShortAddr isMainnet={isMainnet} lockScript={lockInfo} />
+      </div>
     </Dialog>
   )
 }

diff --git a/packages/neuron-ui/src/utils/formatters.ts b/packages/neuron-ui/src/utils/formatters.ts
@@ -304,3 +304,14 @@ export const errorFormatter = (error: string | FailureFromController['message'],
 
   return error.content || unknownError
 }
+
+/**
+ * Convert complex numbers for millennial counting to pure numbers.
+ * ex:
+ * -100.00002362 CKB ---> -100.00002362
+ * +10,000 CKB ---> 10000
+ *  */
+export const complexNumberToPureNumber = (value: string) => {
+  const num = Number(value.replace(/[^-0-9.]/g, ''));
+  return num;
+}
diff --git a/packages/neuron-ui/src/widgets/CopyZone/copyZone.module.scss b/packages/neuron-ui/src/widgets/CopyZone/copyZone.module.scss
@@ -28,7 +28,6 @@
   }
 
   &:hover {
-    padding-right: 14px;
     .hoverShow {
       display: flex;
       .copyIcon {

diff --git a/packages/neuron-ui/src/widgets/CopyZone/index.tsx b/packages/neuron-ui/src/widgets/CopyZone/index.tsx
@@ -15,14 +15,18 @@ const CopyZone = ({ children, content, name, style, className = '' }: CopyZonePr
   const timer = useRef<ReturnType<typeof setTimeout>>()
   const prompt = copied ? t('common.copied') : name || t(`common.copy`)
 
-  const onCopy = useCallback(() => {
-    setCopied(true)
-    window.navigator.clipboard.writeText(content)
-    clearTimeout(timer.current!)
-    timer.current = setTimeout(() => {
-      setCopied(false)
-    }, 1000)
-  }, [setCopied, content])
+  const onCopy = useCallback(
+    (event: React.MouseEvent<HTMLDivElement>) => {
+      event.stopPropagation()
+      setCopied(true)
+      window.navigator.clipboard.writeText(content)
+      clearTimeout(timer.current!)
+      timer.current = setTimeout(() => {
+        setCopied(false)
+      }, 1000)
+    },
+    [setCopied, content]
+  )
 
   return (
     <div