Merge pull request #2280 from nervosnetwork/allow-user-to-deposit-all…

…-without-balance

feat: add a balance-not-reserved checkbox in Nervos DAO

packages/neuron-ui/src/components/DepositDialog/depositDialog.module.scss

@@ -67,3 +67,10 @@
     margin-left: 9px;
   }
 }
+
+.isBalanceReserved {
+  display: flex;
+  align-items: center;
+  font-size: 0.75rem;
+  color: #d50000;
+}

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

@@ -27,6 +27,8 @@ interface DepositDialogProps {
   isDepositing: boolean
   errorMessage: string
   isTxGenerated: boolean
+  isBalanceReserved: boolean
+  onIsBalanceReservedChange: (e: React.SyntheticEvent<HTMLInputElement>) => void
 }
 
 const DepositDialog = ({
@@ -42,6 +44,8 @@ const DepositDialog = ({
   isDepositing,
   errorMessage,
   isTxGenerated,
+  isBalanceReserved,
+  onIsBalanceReservedChange,
 }: DepositDialogProps) => {
   const [t] = useTranslation()
   const dialogRef = useRef<HTMLDialogElement | null>(null)
@@ -104,6 +108,15 @@ const DepositDialog = ({
             error={errorMessage}
           />
           <Slider value={value} min={0} max={maxValue} step={1} showValue={false} onChange={onSlide} />
+          <div className={styles.isBalanceReserved}>
+            <input
+              type="checkbox"
+              id="is-balance-reserved"
+              checked={!isBalanceReserved}
+              onChange={onIsBalanceReservedChange}
+            />
+            <label htmlFor="is-balance-reserved">{t(`nervos-dao.balance-not-reserved`)}</label>
+          </div>
           <div className={styles.notice}>
             <Attention />
             <Trans i18nKey="nervos-dao.deposit-terms" components={[rfcLink]} />

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

@@ -41,34 +41,36 @@ export const useUpdateMaxDeposit = ({
   setMaxDepositAmount,
   setMaxDepositTx,
   setMaxDepositErrorMessage,
+  isBalanceReserved,
 }: {
   wallet: State.Wallet
   setMaxDepositAmount: React.Dispatch<React.SetStateAction<bigint>>
   setMaxDepositTx: React.Dispatch<React.SetStateAction<any>>
   setMaxDepositErrorMessage: React.Dispatch<React.SetStateAction<string>>
+  isBalanceReserved: boolean
 }) => {
   useEffect(() => {
     generateDaoDepositAllTx({
       walletID: wallet.id,
       feeRate: `${MEDIUM_FEE_RATE}`,
+      isBalanceReserved,
     })
-      .then(res => {
+      .then((res: any) => {
         if (isSuccessResponse(res)) {
-          const fee = BigInt(res.result.fee)
-          const maxValue = fee < BigInt(wallet.balance) ? BigInt(wallet.balance) - fee : BigInt(0)
+          const maxValue = BigInt(res.result.outputs[0]?.capacity ?? 0)
           setMaxDepositAmount(maxValue)
           setMaxDepositTx(res.result)
           setMaxDepositErrorMessage('')
         } else {
           throw new Error(`${typeof res.message === 'string' ? res.message : res.message.content}`)
         }
       })
-      .catch(err => {
+      .catch((err: any) => {
         setMaxDepositAmount(BigInt(0))
         setMaxDepositTx(undefined)
         setMaxDepositErrorMessage(err.message)
       })
-  }, [wallet.id, wallet.balance, setMaxDepositAmount, setMaxDepositErrorMessage, setMaxDepositTx])
+  }, [wallet.id, wallet.balance, setMaxDepositAmount, setMaxDepositErrorMessage, setMaxDepositTx, isBalanceReserved])
 }
 
 export const useInitData = ({
@@ -123,6 +125,7 @@ export const useUpdateDepositValue = ({
   dispatch,
   walletID,
   maxDepositErrorMessage,
+  isBalanceReserved,
   t,
 }: {
   setDepositValue: React.Dispatch<React.SetStateAction<string>>
@@ -133,6 +136,7 @@ export const useUpdateDepositValue = ({
   dispatch: React.Dispatch<StateAction>
   walletID: string
   maxDepositErrorMessage: string
+  isBalanceReserved: boolean
   t: TFunction
 }) =>
   useCallback(
@@ -185,7 +189,9 @@ export const useUpdateDepositValue = ({
             type: AppActions.UpdateGeneratedTx,
             payload: maxDepositTx,
           })
-          setErrorMessage(maxDepositErrorMessage || t('messages.remain-ckb-for-withdraw'))
+          if (!isBalanceReserved) {
+            setErrorMessage(maxDepositErrorMessage || t('messages.remain-ckb-for-withdraw'))
+          }
         } else {
           setErrorMessage(t(`messages.codes.${ErrorCode.AmountNotEnough}`))
         }
@@ -202,6 +208,7 @@ export const useUpdateDepositValue = ({
       t,
       setDepositValue,
       setErrorMessage,
+      isBalanceReserved,
     ]
   )
 

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

@@ -14,6 +14,7 @@ import {
   shannonToCKBFormatter,
   getCurrentUrl,
   getSyncStatus,
+  CKBToShannonFormatter,
 } from 'utils'
 
 import { openExternal } from 'services/remote'
@@ -55,9 +56,6 @@ const NervosDAO = () => {
   } = useGlobalState()
   const dispatch = useDispatch()
   const [t, { language }] = useTranslation()
-  useEffect(() => {
-    backToTop()
-  }, [])
   const [depositValue, setDepositValue] = useState(`${MIN_DEPOSIT_AMOUNT}`)
   const [showDepositDialog, setShowDepositDialog] = useState(false)
   const [activeRecord, setActiveRecord] = useState<State.NervosDAORecord | null>(null)
@@ -69,6 +67,7 @@ const NervosDAO = () => {
   const [maxDepositTx, setMaxDepositTx] = useState<any>(undefined)
   const [maxDepositErrorMessage, setMaxDepositErrorMessage] = useState('')
   const [depositEpochList, setDepositEpochList] = useState<Map<string, string | null>>(new Map())
+  const [isBalanceReserved, setIsBalanceReserved] = useState(true)
   const clearGeneratedTx = hooks.useClearGeneratedTx(dispatch)
   const updateDepositValue = hooks.useUpdateDepositValue({
     setDepositValue,
@@ -79,8 +78,10 @@ const NervosDAO = () => {
     dispatch,
     walletID: wallet.id,
     maxDepositErrorMessage,
+    isBalanceReserved,
     t,
   })
+
   const onDepositValueChange = hooks.useOnDepositValueChange({ updateDepositValue })
   const onDepositDialogDismiss = hooks.useOnDepositDialogDismiss({
     setShowDepositDialog,
@@ -96,7 +97,13 @@ const NervosDAO = () => {
   })
   const onWithdrawDialogDismiss = hooks.useOnWithdrawDialogDismiss(setActiveRecord)
 
-  hooks.useUpdateMaxDeposit({ wallet, setMaxDepositAmount, setMaxDepositTx, setMaxDepositErrorMessage })
+  hooks.useUpdateMaxDeposit({
+    wallet,
+    setMaxDepositAmount,
+    setMaxDepositTx,
+    setMaxDepositErrorMessage,
+    isBalanceReserved,
+  })
   hooks.useInitData({ clearGeneratedTx, dispatch, updateDepositValue, wallet, setGenesisBlockTimestamp })
   hooks.useUpdateGlobalAPC({ bestKnownBlockTimestamp, genesisBlockTimestamp, setGlobalAPC })
   const onWithdrawDialogSubmit = hooks.useOnWithdrawDialogSubmit({
@@ -122,6 +129,11 @@ const NervosDAO = () => {
   const onSlide = hooks.useOnSlide({ updateDepositValue, maxDepositAmount })
   hooks.useUpdateDepositEpochList({ records, setDepositEpochList, connectionStatus })
 
+  const onIsBalanceReservedChange = (e: React.SyntheticEvent<HTMLInputElement>) => {
+    setErrorMessage('')
+    setIsBalanceReserved(!e.currentTarget.checked)
+  }
+
   const fee = `${shannonToCKBFormatter(
     send.generatedTx ? send.generatedTx.fee || calculateFee(send.generatedTx) : '0'
   )} CKB`
@@ -221,8 +233,17 @@ const NervosDAO = () => {
 
   const onDepositDialogOpen = useCallback(() => {
     clearGeneratedTx()
-    updateDepositValue(`${MIN_DEPOSIT_AMOUNT}`)
-  }, [clearGeneratedTx, updateDepositValue])
+  }, [clearGeneratedTx])
+
+  useEffect(() => {
+    backToTop()
+  }, [])
+
+  useEffect(() => {
+    if (BigInt(CKBToShannonFormatter(depositValue)) > maxDepositAmount) {
+      setDepositValue(shannonToCKBFormatter(`${maxDepositAmount}`, false, ''))
+    }
+  }, [maxDepositAmount, depositValue, setDepositValue])
 
   const MemoizedDepositDialog = useMemo(() => {
     return (
@@ -239,6 +260,8 @@ const NervosDAO = () => {
         isDepositing={sending}
         errorMessage={errorMessage}
         isTxGenerated={!!send.generatedTx}
+        isBalanceReserved={isBalanceReserved}
+        onIsBalanceReservedChange={onIsBalanceReservedChange}
       />
     )
     // eslint-disable-next-line
@@ -254,6 +277,8 @@ const NervosDAO = () => {
     sending,
     errorMessage,
     send.generatedTx,
+    isBalanceReserved,
+    onIsBalanceReservedChange,
   ])
 
   const MemoizedWithdrawDialog = useMemo(() => {

packages/neuron-ui/src/locales/en.json

@@ -571,6 +571,7 @@
       "minimal-fee-required": "The minimum deposit capacity is {{minimal}} CKBytes",
       "compensation-accumulated": "{{blockNumber}} blocks compensation accumulated",
       "withdraw-alert": "Hint: there are only {{epochs}} epochs (~{{hours}} hours) until the end of your current lock period. If you wish to withdraw in current lock period, please send withdraw request in time. There are {{nextLeftEpochs}} epochs(~{{days}} days) until the end of your next lock period.",
+      "balance-not-reserved": "(Not recommended) Don't reserve any CKBytes for future DAO operations",
       "deposit-record": {
         "deposited-at": "Deposited",
         "completed-at": "Completed",
@@ -621,25 +622,101 @@
       "quit-and-install": "Install and relaunch"
     },
     "datetime": {
-      "mon": { "full": "Monday", "short": "Mon.", "tag": "M" },
-      "tue": { "full": "Tuesday", "short": "Tue.", "tag": "Tu" },
-      "wed": { "full": "Wednesday", "short": "Wed.", "tag": "W" },
-      "thur": { "full": "Thursday", "short": "Thur.", "tag": "T" },
-      "fri": { "full": "Friday", "short": "Fri.", "tag": "F" },
-      "sat": { "full": "Saturday", "short": "Sat.", "tag": "Sa" },
-      "sun": { "full": "Sunday", "short": "Sun.", "tag": "Su" },
-      "jan": { "full": "January", "short": "Jan.", "tag": "J" },
-      "feb": { "full": "Febrary", "short": "Feb.", "tag": "F" },
-      "mar": { "full": "March", "short": "Mar.", "tag": "M" },
-      "apr": { "full": "April", "short": "Apr.", "tag": "A" },
-      "may": { "full": "May", "short": "May.", "tag": "M" },
-      "june": { "full": "June", "short": "June.", "tag": "J" },
-      "july": { "full": "July", "short": "July.", "tag": "J" },
-      "aug": { "full": "August", "short": "Aug.", "tag": "Aug" },
-      "sept": { "full": "September", "short": "Sept.", "tag": "S" },
-      "oct": { "full": "October", "short": "Oct.", "tag": "O" },
-      "nov": { "full": "November", "short": "Nov.", "tag": "N" },
-      "dec": { "full": "December", "short": "Dec.", "tag": "D" },
+      "mon": {
+        "full": "Monday",
+        "short": "Mon.",
+        "tag": "M"
+      },
+      "tue": {
+        "full": "Tuesday",
+        "short": "Tue.",
+        "tag": "Tu"
+      },
+      "wed": {
+        "full": "Wednesday",
+        "short": "Wed.",
+        "tag": "W"
+      },
+      "thur": {
+        "full": "Thursday",
+        "short": "Thur.",
+        "tag": "T"
+      },
+      "fri": {
+        "full": "Friday",
+        "short": "Fri.",
+        "tag": "F"
+      },
+      "sat": {
+        "full": "Saturday",
+        "short": "Sat.",
+        "tag": "Sa"
+      },
+      "sun": {
+        "full": "Sunday",
+        "short": "Sun.",
+        "tag": "Su"
+      },
+      "jan": {
+        "full": "January",
+        "short": "Jan.",
+        "tag": "J"
+      },
+      "feb": {
+        "full": "Febrary",
+        "short": "Feb.",
+        "tag": "F"
+      },
+      "mar": {
+        "full": "March",
+        "short": "Mar.",
+        "tag": "M"
+      },
+      "apr": {
+        "full": "April",
+        "short": "Apr.",
+        "tag": "A"
+      },
+      "may": {
+        "full": "May",
+        "short": "May.",
+        "tag": "M"
+      },
+      "june": {
+        "full": "June",
+        "short": "June.",
+        "tag": "J"
+      },
+      "july": {
+        "full": "July",
+        "short": "July.",
+        "tag": "J"
+      },
+      "aug": {
+        "full": "August",
+        "short": "Aug.",
+        "tag": "Aug"
+      },
+      "sept": {
+        "full": "September",
+        "short": "Sept.",
+        "tag": "S"
+      },
+      "oct": {
+        "full": "October",
+        "short": "Oct.",
+        "tag": "O"
+      },
+      "nov": {
+        "full": "November",
+        "short": "Nov.",
+        "tag": "N"
+      },
+      "dec": {
+        "full": "December",
+        "short": "Dec.",
+        "tag": "D"
+      },
       "timezone": "Time Zone",
       "start-tomorrow": "Selected time should start from tomorrow."
     },