diff --git a/.vscode/settings.json b/.vscode/settings.json
index f3253b0eca..92447ab654 100644
--- 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
index 33f586116c..6d50f58bb2 100644
--- 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
index c145b99da0..82e5342f99 100644
--- 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
index 19a7aa8d89..5549753561 100644
--- 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
index 04d7597696..38af453172 100644
--- 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
index dbe1878aec..5461f70e5e 100644
--- 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
index e9828fc725..69a66b45ca 100644
--- 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
index ee9389f7f5..3fd2307e5b 100644
--- 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
index 7d62468f70..f320b9f4b2 100644
--- 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
diff --git a/packages/neuron-ui/src/widgets/Tooltip/tooltip.module.scss b/packages/neuron-ui/src/widgets/Tooltip/tooltip.module.scss
index 4ea571b6b6..6466894cb7 100644
--- a/packages/neuron-ui/src/widgets/Tooltip/tooltip.module.scss
+++ b/packages/neuron-ui/src/widgets/Tooltip/tooltip.module.scss
@@ -15,14 +15,14 @@
 }
 
 @mixin left($class) {
-  &[data-placement="left"] {
+  &[data-placement='left'] {
     &#{$class} {
       right: calc(100% - 4px);
       top: 0;
     }
   }
 
-  &[data-placement="left"][data-placement-center="true"] {
+  &[data-placement='left'][data-placement-center='true'] {
     &#{$class} {
       top: 50%;
       transform: translateY(-50%);
@@ -31,14 +31,14 @@
 }
 
 @mixin right($class) {
-  &[data-placement="right"] {
+  &[data-placement='right'] {
     &#{$class} {
       left: calc(100% - 4px);
       top: 0;
     }
   }
 
-  &[data-placement="right"][data-placement-center="true"] {
+  &[data-placement='right'][data-placement-center='true'] {
     &#{$class} {
       top: 50%;
       transform: translateY(-50%);
@@ -47,14 +47,14 @@
 }
 
 @mixin top($class) {
-  &[data-placement="top"] {
+  &[data-placement='top'] {
     &#{$class} {
       left: 0;
       bottom: 100%;
     }
   }
 
-  &[data-placement="top"][data-placement-center="true"] {
+  &[data-placement='top'][data-placement-center='true'] {
     &#{$class} {
       left: 50%;
       transform: translateX(-50%);
@@ -63,13 +63,13 @@
 }
 
 @mixin bottom($class) {
-  &[data-placement="bottom"] {
+  &[data-placement='bottom'] {
     &#{$class} {
       left: 0;
       top: 100%;
     }
   }
-  &[data-placement="bottom"][data-placement-center="true"]{
+  &[data-placement='bottom'][data-placement-center='true'] {
     &#{$class} {
       left: 50%;
       transform: translateX(-50%);
@@ -78,13 +78,13 @@
 }
 
 @mixin left-top($class) {
-  &[data-placement="left-top"] {
+  &[data-placement='left-top'] {
     &#{$class} {
       right: 100%;
       bottom: 100%;
     }
   }
-  &[data-placement="left-top"][data-placement-center="true"]{
+  &[data-placement='left-top'][data-placement-center='true'] {
     &#{$class} {
       right: 50%;
     }
@@ -92,13 +92,13 @@
 }
 
 @mixin right-top($class) {
-  &[data-placement="right-top"] {
+  &[data-placement='right-top'] {
     &#{$class} {
       left: 100%;
       bottom: 100%;
     }
   }
-  &[data-placement="right-top"][data-placement-center="true"]{
+  &[data-placement='right-top'][data-placement-center='true'] {
     &#{$class} {
       left: 50%;
     }
@@ -106,13 +106,13 @@
 }
 
 @mixin left-bottom($class) {
-  &[data-placement="left-bottom"] {
+  &[data-placement='left-bottom'] {
     &#{$class} {
       right: 100%;
       top: 100%;
     }
   }
-  &[data-placement="left-bottom"][data-placement-center="true"]{
+  &[data-placement='left-bottom'][data-placement-center='true'] {
     &#{$class} {
       right: 50%;
     }
@@ -120,13 +120,13 @@
 }
 
 @mixin right-bottom($class) {
-  &[data-placement="right-bottom"] {
+  &[data-placement='right-bottom'] {
     &#{$class} {
       left: 100%;
       top: 100%;
     }
   }
-  &[data-placement="right-bottom"][data-placement-center="true"]{
+  &[data-placement='right-bottom'][data-placement-center='true'] {
     &#{$class} {
       left: 50%;
     }
@@ -138,19 +138,19 @@ $placements: left, right, top, bottom, left-top, right-top, left-bottom, right-b
 @mixin tip-placement($placement, $class) {
   @if $placement == left {
     @include left($class);
-  }@else if $placement == right {
+  } @else if $placement == right {
     @include right($class);
-  }@else if $placement == top {
+  } @else if $placement == top {
     @include top($class);
-  }@else if $placement == bottom {
+  } @else if $placement == bottom {
     @include bottom($class);
-  }@else if $placement == left-top {
+  } @else if $placement == left-top {
     @include left-top($class);
-  }@else if $placement == right-top {
+  } @else if $placement == right-top {
     @include right-top($class);
-  }@else if $placement == left-bottom {
+  } @else if $placement == left-bottom {
     @include left-bottom($class);
-  }@else if $placement == right-bottom {
+  } @else if $placement == right-bottom {
     @include right-bottom($class);
   }
 }
@@ -187,18 +187,18 @@ $placements: left, right, top, bottom, left-top, right-top, left-bottom, right-b
         content: attr(data-tooltip);
       }
 
-      &[data-type="always-dark"] {
+      &[data-type='always-dark'] {
         &::after {
           background: #000000;
-          color: #FFFFFF;
+          color: #ffffff;
         }
       }
-    
+
       @each $placement in $placements {
-        @include tip-placement($placement, "::after");
+        @include tip-placement($placement, '::after');
       }
 
-      &[data-trigger="hover"] {
+      &[data-trigger='hover'] {
         &:hover {
           &::after {
             display: block;
@@ -208,18 +208,18 @@ $placements: left, right, top, bottom, left-top, right-top, left-bottom, right-b
           }
         }
       }
-      
-      &[data-trigger="click"] {
-        &[data-tip-show="true"] .tip {
+
+      &[data-trigger='click'] {
+        &[data-tip-show='true'] .tip {
           display: block;
         }
       }
 
-      &[data-has-trigger="true"] {
-        &[data-placement="bottom"] {
-          &:not([data-trigger-next-to-child="true"]) {
+      &[data-has-trigger='true'] {
+        &[data-placement='bottom'] {
+          &:not([data-trigger-next-to-child='true']) {
             &::after {
-              top: calc(100% + 20px)
+              top: calc(100% + 20px);
             }
           }
           .triangle {
@@ -240,24 +240,24 @@ $placements: left, right, top, bottom, left-top, right-top, left-bottom, right-b
     @include tip;
   }
 
-  &[data-type="always-dark"] {
+  &[data-type='always-dark'] {
     .tip {
       background: #000000;
-      color: #FFFFFF;
+      color: #ffffff;
     }
   }
 
-  &[data-trigger="click"] {
-    &[data-tip-show="true"] .tip {
+  &[data-trigger='click'] {
+    &[data-tip-show='true'] .tip {
       display: block;
     }
   }
 
   @each $placement in $placements {
-    @include tip-placement($placement, " .tip");
+    @include tip-placement($placement, ' .tip');
   }
 
-  &[data-trigger="hover"] {
+  &[data-trigger='hover'] {
     &:hover {
       .tip {
         display: block;
@@ -268,11 +268,11 @@ $placements: left, right, top, bottom, left-top, right-top, left-bottom, right-b
     }
   }
 
-  &[data-has-trigger="true"] {
-    &[data-placement="bottom"] {
-      &:not([data-trigger-next-to-child="true"]) {
+  &[data-has-trigger='true'] {
+    &[data-placement='bottom'] {
+      &:not([data-trigger-next-to-child='true']) {
         & .tip {
-          top: calc(100% + 20px)
+          top: calc(100% + 20px) !important;
         }
       }
     }