Show more info with needed and reserved funds (#265)

Author: Tbaut

packages/ui/src/components/modals/Send.tsx

@@ -20,6 +20,7 @@ import { useCheckBalance } from '../../hooks/useCheckBalance'
 import { useGetSubscanLinks } from '../../hooks/useSubscanLink'
 import FromCallData from '../EasySetup/FromCallData'
 import { ModalCloseButton } from '../library/ModalCloseButton'
+import { formatBnBalance } from '../../utils/formatBnBalance'
 
 const SEND_TOKEN_MENU = 'Send tokens'
 const FROM_CALL_DATA_MENU = 'From call data'
@@ -34,11 +35,11 @@ interface Props {
 
 const Send = ({ onClose, className, onSuccess, onFinalized }: Props) => {
   const { getSubscanExtrinsicLink } = useGetSubscanLinks()
-  const { api, isApiReady } = useApi()
+  const { api, isApiReady, chainInfo } = useApi()
   const [isSubmitting, setIsSubmitting] = useState(false)
   const { selectedMultiProxy, getMultisigAsAccountBaseInfo, getMultisigByAddress } = useMultiProxy()
   const { selectedAccount, selectedSigner } = useAccounts()
-  const [easyOptionErrorMessage, setEasyOptionErrorMessageorMessage] = useState('')
+  const [easyOptionErrorMessage, setEasyOptionErrorMessage] = useState('')
   const [errorMessage, setErrorMessage] = useState('')
   const { addToast } = useToasts()
   const possibleOrigin = useMemo(() => {
@@ -123,7 +124,7 @@ const Send = ({ onClose, className, onSuccess, onFinalized }: Props) => {
     threshold
   ])
 
-  const { multisigProposalNeededFunds } = useMultisigProposalNeededFunds({
+  const { multisigProposalNeededFunds, reserved } = useMultisigProposalNeededFunds({
     threshold,
     signatories: selectedMultisig?.signatories,
     call: multisigTx
@@ -135,11 +136,20 @@ const Send = ({ onClose, className, onSuccess, onFinalized }: Props) => {
 
   useEffect(() => {
     if (!multisigProposalNeededFunds.isZero() && !hasSignerEnoughFunds) {
+      const requiredBalanceString = formatBnBalance(
+        multisigProposalNeededFunds,
+        chainInfo?.tokenDecimals,
+        { tokenSymbol: chainInfo?.tokenSymbol }
+      )
+
+      const reservedString = formatBnBalance(reserved, chainInfo?.tokenDecimals, {
+        tokenSymbol: chainInfo?.tokenSymbol
+      })
       setErrorMessage(
-        `The "Signing with" account doesn't have enough funds to submit this transaction`
+        `The "Signing with" account doesn't have the required ${requiredBalanceString} to submit this transaction. Note that it includes ${reservedString} that will be reserved and returned upon tx approval/cancellation`
       )
     }
-  }, [hasSignerEnoughFunds, multisigProposalNeededFunds])
+  }, [chainInfo, reserved, hasSignerEnoughFunds, multisigProposalNeededFunds])
 
   const onSubmitting = useCallback(() => {
     setIsSubmitting(false)
@@ -163,20 +173,20 @@ const Send = ({ onClose, className, onSuccess, onFinalized }: Props) => {
         <BalancesTransfer
           from={selectedOrigin.address}
           onSetExtrinsic={setExtrinsicToCall}
-          onSetErrorMessage={setEasyOptionErrorMessageorMessage}
+          onSetErrorMessage={setEasyOptionErrorMessage}
         />
       ),
       [MANUEL_EXTRINSIC_MENU]: (
         <ManualExtrinsic
           onSetExtrinsic={setExtrinsicToCall}
-          onSetErrorMessage={setEasyOptionErrorMessageorMessage}
+          onSetErrorMessage={setEasyOptionErrorMessage}
           onSelectFromCallData={() => setSelectedEasyOption(FROM_CALL_DATA_MENU)}
         />
       ),
       [FROM_CALL_DATA_MENU]: (
         <FromCallData
           onSetExtrinsic={setExtrinsicToCall}
-          onSetErrorMessage={setEasyOptionErrorMessageorMessage}
+          onSetErrorMessage={setEasyOptionErrorMessage}
           isProxySelected={!!isProxySelected}
         />
       )
@@ -257,6 +267,8 @@ const Send = ({ onClose, className, onSuccess, onFinalized }: Props) => {
   ])
 
   const onChangeEasySetupOption = useCallback((event: SelectChangeEvent<string>) => {
+    setErrorMessage('')
+    setEasyOptionErrorMessage('')
     setSelectedEasyOption(event.target.value)
   }, [])
 

packages/ui/src/hooks/useMultisigProposalNeededFunds.tsx

@@ -13,6 +13,7 @@ interface Props {
 export const useMultisigProposalNeededFunds = ({ threshold, signatories, call }: Props) => {
   const { isApiReady, api, chainInfo } = useApi()
   const [min, setMin] = useState(new BN(0))
+  const [reserved, setReserved] = useState(new BN(0))
 
   useEffect(() => {
     if (!isApiReady || !api || !signatories || signatories.length < 2) return
@@ -34,12 +35,13 @@ export const useMultisigProposalNeededFunds = ({ threshold, signatories, call }:
         .paymentInfo('5CXQZrh1MSgnGGCdJu3tqvRfCv7t5iQXGGV9UKotrbfhkavs')
         .then((info) => {
           // add the funds reserved for a multisig call
-          const reserved = (api.consts.multisig.depositFactor as unknown as BN)
+          const reservedTemp = (api.consts.multisig.depositFactor as unknown as BN)
             .muln(threshold)
             .add(api.consts.multisig.depositBase as unknown as BN)
 
-          // console.log('reserved', formatBnBalance(reserved, chainInfo.tokenDecimals, { tokenSymbol: chainInfo?.tokenSymbol, numberAfterComma: 3 }))
-          setMin(reserved.add(info.partialFee))
+          // console.log('reservedTemp', formatBnBalance(reservedTemp, chainInfo.tokenDecimals, { tokenSymbol: chainInfo?.tokenSymbol, numberAfterComma: 3 }))
+          setMin(reservedTemp.add(info.partialFee))
+          setReserved(reservedTemp)
         })
         .catch(console.error)
     } catch (e) {
@@ -48,5 +50,5 @@ export const useMultisigProposalNeededFunds = ({ threshold, signatories, call }:
     }
   }, [api, call, chainInfo, isApiReady, signatories, threshold])
 
-  return { multisigProposalNeededFunds: min }
+  return { multisigProposalNeededFunds: min, reserved }
 }