Fix multisig address (#2767)

* fix: multisig address * fix * fix: PageContainer * feat: update style
nervosnetwork · Jul 12, 2023 · 85ec4bf · 85ec4bf · github-actions · Jul 12, 2023
1 parent a22fb7c
commit 85ec4bf
Show file tree

Hide file tree

Showing 10 changed files with 82 additions and 56 deletions.
diff --git a/packages/neuron-ui/src/components/MultisigAddress/hooks.ts b/packages/neuron-ui/src/components/MultisigAddress/hooks.ts
@@ -134,7 +134,7 @@ export const useConfigManage = ({ walletId, isMainnet }: { walletId: string; isM
   const configs = useMemo<MultisigConfig[]>(
     () =>
       searchKeywords
-        ? allConfigs.filter(v => v.alias?.includes(searchKeywords) || v.fullPayload === searchKeywords)
+        ? allConfigs.filter(v => v.alias?.includes(searchKeywords) || v.fullPayload.includes(searchKeywords))
         : allConfigs,
     [allConfigs, searchKeywords]
   )

diff --git a/packages/neuron-ui/src/components/MultisigAddress/index.tsx b/packages/neuron-ui/src/components/MultisigAddress/index.tsx
@@ -183,7 +183,13 @@ const MultisigAddress = () => {
                   render(_, __, item) {
                     return (
                       <label htmlFor={`${item.id}`}>
-                        <input id={`${item.id}`} data-config-id={item.id} type="checkbox" onChange={onChangeChecked} />
+                        <input
+                          id={`${item.id}`}
+                          data-config-id={item.id}
+                          type="checkbox"
+                          onChange={onChangeChecked}
+                          checked={selectIds.includes(item.id)}
+                        />
                         <span />
                       </label>
                     )
@@ -264,7 +270,9 @@ const MultisigAddress = () => {
                   isBalance: true,
                   render(_, __, item, show) {
                     return (
-                      <div>{show ? shannonToCKBFormatter(multisigBanlances[item.fullPayload]) : HIDE_BALANCE} CKB</div>
+                      <div>
+                        {show ? shannonToCKBFormatter(multisigBanlances[item.fullPayload] || '0') : HIDE_BALANCE} CKB
+                      </div>
                     )
                   },
                 },
@@ -346,8 +354,8 @@ const MultisigAddress = () => {
 
       <AlertDialog
         show={showDeleteDialog}
-        title={t('send.remove-receiving-address')}
-        message={t('send.remove-receiving-address-msg')}
+        title={t('multisig-address.remove-multisig-address')}
+        message={t('multisig-address.remove-multisig-address-msg')}
         type="warning"
         onCancel={() => setShowDeleteDialog(false)}
         onOk={() => {

diff --git a/packages/neuron-ui/src/components/PageContainer/pageContainer.module.scss b/packages/neuron-ui/src/components/PageContainer/pageContainer.module.scss
@@ -6,6 +6,7 @@
   display: flex;
   flex-direction: column;
   min-height: 100vh;
+  height: 100vh;
 
   .head {
     display: flex;

diff --git a/packages/neuron-ui/src/components/SendFieldset/index.tsx b/packages/neuron-ui/src/components/SendFieldset/index.tsx
@@ -8,7 +8,7 @@ import { ReactComponent as Attention } from 'widgets/Icons/ExperimentalAttention
 import TimeClock from 'widgets/Icons/TimeClock.svg'
 
 import { formatDate } from 'widgets/DatetimePickerDialog'
-import { localNumberFormatter, PlaceHolders, isSecp256k1Address, clsx } from 'utils'
+import { localNumberFormatter, isSecp256k1Address, clsx } from 'utils'
 import { ErrorWithI18n } from 'exceptions'
 
 import styles from './sendFieldset.module.scss'
@@ -109,8 +109,8 @@ const SendFieldset = ({
         label={t('send.amount')}
         field="amount"
         data-idx={idx}
-        value={localNumberFormatter(item.amount)}
-        placeholder={isSendMax ? PlaceHolders.send.Calculating : PlaceHolders.send.Amount}
+        value={item.amount ? localNumberFormatter(item.amount) : ''}
+        placeholder={t('send.input-amount')}
         onChange={onItemChange}
         disabled={item.disabled}
         suffix={

diff --git a/packages/neuron-ui/src/components/SendFromMultisigDialog/hooks.ts b/packages/neuron-ui/src/components/SendFromMultisigDialog/hooks.ts
@@ -120,8 +120,8 @@ export const useSendInfo = ({
       setSendInfoList(v => {
         const copy = [...v]
         if (field === 'amount') {
-          const amount = value.replace(/,/g, '') || '0'
-          if (Number.isNaN(+amount) || /[^\d.]/.test(amount) || +amount < 0) {
+          const amount = value.replace(/,/g, '') || undefined
+          if (amount && (Number.isNaN(+amount) || /[^\d.]/.test(amount) || +amount < 0)) {
             return copy
           }
           copy[+idx][field] = amount
@@ -173,45 +173,40 @@ export const useSendInfo = ({
     }, 300)
   }, [sendInfoList, setErrorMessage, multisigConfig, dispatch, t, isMainnet, outputErrors])
   const [isSendMax, setIsSendMax] = useState(false)
-  const onSendMaxClick = useCallback(
-    (e: React.BaseSyntheticEvent) => {
-      const {
-        dataset: { isOn = 'false' },
-      } = e.currentTarget
-      setIsSendMax(isOn === 'false')
-      if (isOn === 'false') {
-        generateMultisigTxWith(generateMultisigSendAllTx)({
-          sendInfoList,
-          setErrorMessage,
-          multisigConfig,
-          dispatch,
-          t,
-          isMainnet,
-        }).then(res => {
-          if (res && res.outputs && res.outputs.length) {
-            setSendInfoList(v => [
-              ...v.slice(0, v.length - 1),
-              {
-                ...v[v.length - 1],
-                amount: shannonToCKBFormatter(res.outputs[res.outputs.length - 1].capacity, false, ''),
-                disabled: true,
-              },
-            ])
-          }
-        })
-      } else {
-        setSendInfoList(v => [
-          ...v.slice(0, v.length - 1),
-          {
-            ...v[v.length - 1],
-            amount: '0',
-            disabled: false,
-          },
-        ])
-      }
-    },
-    [setIsSendMax, sendInfoList, setErrorMessage, multisigConfig, dispatch, t, isMainnet]
-  )
+  const onSendMaxClick = useCallback(() => {
+    if (!isSendMax) {
+      setIsSendMax(true)
+      generateMultisigTxWith(generateMultisigSendAllTx)({
+        sendInfoList,
+        setErrorMessage,
+        multisigConfig,
+        dispatch,
+        t,
+        isMainnet,
+      }).then(res => {
+        if (res && res.outputs && res.outputs.length) {
+          setSendInfoList(v => [
+            ...v.slice(0, v.length - 1),
+            {
+              ...v[v.length - 1],
+              amount: shannonToCKBFormatter(res.outputs[res.outputs.length - 1].capacity, false, ''),
+              disabled: true,
+            },
+          ])
+        }
+      })
+    } else {
+      setIsSendMax(false)
+      setSendInfoList(v => [
+        ...v.slice(0, v.length - 1),
+        {
+          ...v[v.length - 1],
+          amount: '0',
+          disabled: false,
+        },
+      ])
+    }
+  }, [setIsSendMax, sendInfoList, setErrorMessage, multisigConfig, dispatch, t, isMainnet])
   const isMaxBtnDisabled = useMemo(() => {
     try {
       validateOutputs(sendInfoList, isMainnet, true)

diff --git a/packages/neuron-ui/src/components/SendFromMultisigDialog/index.tsx b/packages/neuron-ui/src/components/SendFromMultisigDialog/index.tsx
@@ -6,7 +6,7 @@ import { Copy } from 'widgets/Icons/icon'
 import CopyZone from 'widgets/CopyZone'
 import TextField from 'widgets/TextField'
 import SendFieldset from 'components/SendFieldset'
-import { calculateFee, isMainnet as isMainnetUtil, shannonToCKBFormatter, validateTotalAmount } from 'utils'
+import { calculateFee, isMainnet as isMainnetUtil, shannonToCKBFormatter, validateTotalAmount, clsx } from 'utils'
 import { useState as useGlobalState } from 'states'
 import { ReactComponent as Add } from 'widgets/Icons/Add.svg'
 import Button from 'widgets/Button'
@@ -122,19 +122,20 @@ const SendFromMultisigDialog = ({
           <div className={styles.sendFieldContainer}>
             {sendInfoList.map((item, idx) => (
               <SendFieldset
-                key={item.address || idx}
+                // eslint-disable-next-line react/no-array-index-key
+                key={idx}
                 idx={idx}
                 item={item}
                 errors={outputErrors[idx]}
                 isSendMax={isSendMax}
                 isMaxBtnDisabled={isMaxBtnDisabled}
                 isTimeLockable={false}
-                isMaxBtnShow={false}
+                isMaxBtnShow={idx === sendInfoList.length - 1}
                 isRemoveBtnShow={sendInfoList.length > 1}
                 onOutputRemove={deleteSendInfo}
                 onItemChange={onSendInfoChange}
                 onSendMaxClick={onSendMaxClick}
-                className={styles.flexWrap}
+                className={clsx(styles.flexWrap, styles.sendItem)}
                 isMainnet={isMainnet}
               />
             ))}
@@ -161,7 +162,7 @@ const SendFromMultisigDialog = ({
               value={`${shannonToCKBFormatter(fee)} CKB`}
               readOnly
               disabled
-              width="100%"
+              width="230px"
             />
           </div>
         </div>

diff --git a/packages/neuron-ui/src/components/SendFromMultisigDialog/sendFromMultisigDialog.module.scss b/packages/neuron-ui/src/components/SendFromMultisigDialog/sendFromMultisigDialog.module.scss
@@ -3,7 +3,7 @@
 }
 
 .container {
-  width: 680px;
+  width: 730px;
 
   .header {
     display: flex;
@@ -90,11 +90,23 @@
 .flexWrap {
   padding: 0;
   display: flex;
+  align-items: baseline;
   column-gap: 16px;
   & > div {
-    flex: 1;
+    &:first-child {
+      flex: 1;
+    }
   }
   &:last-child {
     margin-top: 16px;
   }
 }
+
+.sendItem {
+  & > div {
+    input {
+      width: 125px !important;
+      height: 56px !important;
+    }
+  }
+}
diff --git a/packages/neuron-ui/src/locales/en.json b/packages/neuron-ui/src/locales/en.json
@@ -204,6 +204,7 @@
       "address": "Send to",
       "input-address": "Please input receiving address",
       "amount": "Amount (CKB)",
+      "input-amount": "Please input amount",
       "send": "Send",
       "reset": "Reset",
       "confirm-password": "Confirm Password",
@@ -1026,6 +1027,8 @@
         "notice": "Only one configuration can be imported at a time. If the content of the file is an array, the first one is imported by default."
       },
       "delete-failed": "Delete multisig config failed",
+      "remove-multisig-address": "Remove Multisig Address",
+      "remove-multisig-address-msg": "Are you sure you want to remove the selected multisig address?",
       "send-ckb": {
         "title": "Send CKB from multisig address",
         "detail": "Send CKB from {{m}}-of-{{n}} multisig address: <0></0>",

diff --git a/packages/neuron-ui/src/locales/zh-tw.json b/packages/neuron-ui/src/locales/zh-tw.json
@@ -197,6 +197,7 @@
       "address": "收款地址",
       "input-address": "請輸入收款地址",
       "amount": "转账金額（CKB）",
+      "input-amount": "請輸入转账金額",
       "send": "發送",
       "reset": "重置",
       "confirm-password": "確認密碼",
@@ -996,6 +997,8 @@
         "notice": "導入配置一次只能導入一個，如果是文件內容是數組默認取第一個導入"
       },
       "delete-failed": "刪除多簽配置失敗",
+      "remove-multisig-address": "刪除多簽地址",
+      "remove-multisig-address-msg": "確定要刪除所選多簽地址？",
       "send-ckb": {
         "title": "多簽地址轉賬",
         "detail": "從 {{m}}-of-{{n}} 多簽地址 <0></0> 轉賬",

diff --git a/packages/neuron-ui/src/locales/zh.json b/packages/neuron-ui/src/locales/zh.json
@@ -197,6 +197,7 @@
       "address": "收款地址",
       "input-address": "请输入收款地址",
       "amount": "转账金额（CKB）",
+      "input-amount": "请输入转账金额",
       "send": "发送",
       "reset": "重置",
       "confirm-password": "确认密码",
@@ -1018,6 +1019,8 @@
         "notice": "导入配置一次只能导入一个，如果是文件内容是数组默认取第一个导入"
       },
       "delete-failed": "删除多签配置失败",
+      "remove-multisig-address": "刪除多签地址",
+      "remove-multisig-address-msg": "确定要刪除所选多签地址？",
       "send-ckb": {
         "title": "多签地址转账",
         "detail": "从 {{m}}-of-{{n}} 多签地址 <0></0> 转账",