feat: Enable click max when address is empty. (#2932)

* feat: Enable click max when address is empty.

Use placeholder address to generate tx.

* fix: Fix test case

* fix: Add ignore for last address and only ignore address for max send.

* fix: Ignore last item when check the max button status

* fix: Change max to reset when is sending max.

packages/neuron-ui/src/components/Send/hooks.ts

@@ -10,7 +10,10 @@ import {
   shannonToCKBFormatter,
   calculateFee,
   validateOutputs,
+  DefaultLockInfo,
 } from 'utils'
+import { scriptToAddress } from '@nervosnetwork/ckb-sdk-utils'
+import { PlaceHolderArgs } from 'utils/const'
 
 let generateTxTimer: ReturnType<typeof setTimeout>
 
@@ -330,10 +333,7 @@ export const useInitialize = (
   const [errorMessage, setErrorMessage] = useState('')
   const [isSendMax, setIsSendMax] = useState(false)
 
-  const outputs = useMemo(
-    () => items.map(item => ({ ...item, disabled: isSendMax || sending })),
-    [items, isSendMax, sending]
-  )
+  const outputs = useMemo(() => items.map(item => ({ ...item, disabled: sending })), [items, sending])
 
   const updateIsSendMax = useCallback(
     (payload: boolean) => {
@@ -358,7 +358,19 @@ export const useInitialize = (
   const updateSendingAllTransaction = useCallback(() => {
     updateTransactionWith(generateSendingAllTx)({
       walletID,
-      items,
+      items: items.map(v => ({
+        ...v,
+        address:
+          v.address ||
+          scriptToAddress(
+            {
+              codeHash: DefaultLockInfo.CodeHash,
+              hashType: DefaultLockInfo.HashType,
+              args: PlaceHolderArgs,
+            },
+            isMainnet
+          ),
+      })),
       price,
       setTotalAmount,
       setErrorMessage,
@@ -413,6 +425,7 @@ export const useInitialize = (
     setErrorMessage,
     isSendMax,
     onSendMaxClick,
+    updateIsSendMax,
   }
 }
 

packages/neuron-ui/src/components/Send/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react'
+import React, { useState, useCallback, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { List } from 'office-ui-fabric-react'
 import { useState as useGlobalState, useDispatch, appState } from 'states'
@@ -21,6 +21,7 @@ import {
 import { HIDE_BALANCE } from 'utils/const'
 
 import { isErrorWithI18n } from 'exceptions'
+import { useSearchParams } from 'react-router-dom'
 import { useInitialize } from './hooks'
 import styles from './send.module.scss'
 
@@ -81,8 +82,18 @@ const Send = () => {
     setErrorMessage,
     isSendMax,
     onSendMaxClick: handleSendMaxClick,
+    updateIsSendMax,
   } = useInitialize(walletID, send.outputs, send.generatedTx, send.price, sending, isMainnet, dispatch, t)
 
+  const [searchParams] = useSearchParams()
+
+  useEffect(() => {
+    if (searchParams.get('isSendMax')) {
+      updateIsSendMax(true)
+    }
+    // only when router change init send max
+  }, [searchParams, updateIsSendMax])
+
   const [locktimeIndex, setLocktimeIndex] = useState<number>(-1)
 
   const handleLocktimeClick = useCallback(
@@ -128,13 +139,18 @@ const Send = () => {
     }
   }
 
-  const disabled = connectionStatus === 'offline' || sending || !!errorMessageUnderTotal || !send.generatedTx
+  const disabled =
+    connectionStatus === 'offline' ||
+    sending ||
+    !!errorMessageUnderTotal ||
+    !send.generatedTx ||
+    outputs.some(v => !v.address)
 
   const outputErrors = useOutputErrors(outputs, isMainnet)
 
   const isMaxBtnDisabled = (() => {
     try {
-      validateOutputs(outputs, isMainnet, true)
+      validateOutputs(outputs.slice(0, -1), isMainnet)
     } catch {
       return true
     }

packages/neuron-ui/src/components/SendFieldset/index.tsx

@@ -112,11 +112,11 @@ const SendFieldset = ({
         value={item.amount ? localNumberFormatter(item.amount) : ''}
         placeholder={t('send.input-amount')}
         onChange={onItemChange}
-        disabled={item.disabled}
+        disabled={item.disabled || isSendMax}
         suffix={
           isMaxBtnShow && (
             <Button disabled={isMaxBtnDisabled} type="text" onClick={onSendMaxClick} className={styles.max}>
-              Max
+              {isSendMax ? t('send.reset') : 'Max'}
             </Button>
           )
         }

packages/neuron-ui/src/tests/validators/outputs/index.test.ts

@@ -15,7 +15,7 @@ describe(`Test outputs validator`, () => {
         expect(e).not.toBeUndefined()
       }
     } else {
-      expect(validateOutputs()).toBeTruthy()
+      expect(validateOutputs(outputs, false, ignoreLastAmount)).toBeTruthy()
     }
   })
 })

packages/neuron-ui/src/utils/const.ts

@@ -81,3 +81,5 @@ export const MILLISECONDS = HOURS_PER_EPOCH * 60 * 60 * 1000
 
 export const ADDRESS_MIN_LENGTH = 86
 export const ADDRESS_HEAD_TAIL_LENGTH = 34
+
+export const PlaceHolderArgs = `0x${'00'.repeat(21)}`