Add wiki link info about reserved funds (#426)

ChainSafe · Oct 30, 2023 · 6379a49 · 6379a49
1 parent a44a9c9
commit 6379a49
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 17 deletions.
diff --git a/packages/ui/src/components/modals/Send.tsx b/packages/ui/src/components/modals/Send.tsx
@@ -21,6 +21,7 @@ import { ModalCloseButton } from '../library/ModalCloseButton'
 import { formatBnBalance } from '../../utils/formatBnBalance'
 import { useGetMultisigTx } from '../../hooks/useGetMultisigTx'
 import SetIdentity from '../EasySetup/SetIdentity'
+import { getErrorMessageReservedFunds } from '../../utils/getErrorMessageReservedFunds'
 
 export enum EasyTransferTitle {
   SendTokens = 'Send tokens',
@@ -46,7 +47,7 @@ const Send = ({ onClose, className, onSuccess, onFinalized, preselected }: Props
   const { selectedMultiProxy, getMultisigAsAccountBaseInfo, getMultisigByAddress } = useMultiProxy()
   const { selectedAccount, selectedSigner } = useAccounts()
   const [easyOptionErrorMessage, setEasyOptionErrorMessage] = useState('')
-  const [errorMessage, setErrorMessage] = useState('')
+  const [errorMessage, setErrorMessage] = useState<ReactNode | string>('')
   const { addToast } = useToasts()
   const possibleOrigin = useMemo(() => {
     const proxyBaseInfo = {
@@ -106,9 +107,12 @@ const Send = ({ onClose, className, onSuccess, onFinalized, preselected }: Props
       const reservedString = formatBnBalance(reserved, chainInfo?.tokenDecimals, {
         tokenSymbol: chainInfo?.tokenSymbol
       })
-      setErrorMessage(
-        `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`
+      const errorWithReservedFunds = getErrorMessageReservedFunds(
+        '"Signing with" account',
+        requiredBalanceString,
+        reservedString
       )
+      setErrorMessage(errorWithReservedFunds)
     }
   }, [chainInfo, reserved, hasSignerEnoughFunds, multisigProposalNeededFunds])
 
@@ -430,7 +434,7 @@ export default styled(Send)(
   }
 
   .errorMessage {
-    margin-top: 0.5rem;
+    margin-top: 1rem;
     color: ${theme.custom.error};
   }
 `

diff --git a/packages/ui/src/components/modals/WalletConnectSigning.tsx b/packages/ui/src/components/modals/WalletConnectSigning.tsx
@@ -1,6 +1,6 @@
 import { Alert, CircularProgress, Dialog, DialogContent, DialogTitle, Grid } from '@mui/material'
 import { Button } from '../library'
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { ReactNode, useCallback, useEffect, useMemo, useState } from 'react'
 import { styled } from '@mui/material/styles'
 import { useAccounts } from '../../contexts/AccountsContext'
 import { useApi } from '../../contexts/ApiContext'
@@ -21,6 +21,7 @@ import { getWalletConnectErrorResponse } from '../../utils/getWalletConnectError
 import { useMultisigProposalNeededFunds } from '../../hooks/useMultisigProposalNeededFunds'
 import { useCheckBalance } from '../../hooks/useCheckBalance'
 import { formatBnBalance } from '../../utils/formatBnBalance'
+import { getErrorMessageReservedFunds } from '../../utils/getErrorMessageReservedFunds'
 
 export interface SigningModalProps {
   onClose: () => void
@@ -43,7 +44,7 @@ const ProposalSigning = ({ onClose, className, request, onSuccess }: SigningModa
   const [selectedMultisig, setSelectedMultisig] = useState(selectedMultiProxy?.multisigs[0])
   const { selectedAccount, selectedSigner } = useAccounts()
   const multisigList = useMemo(() => getMultisigAsAccountBaseInfo(), [getMultisigAsAccountBaseInfo])
-  const [errorMessage, setErrorMessage] = useState('')
+  const [errorMessage, setErrorMessage] = useState<ReactNode | string>('')
   const { addToast } = useToasts()
   const originAddress = request.params.request.params.address
   const isProxySelected = useMemo(
@@ -86,9 +87,12 @@ const ProposalSigning = ({ onClose, className, request, onSuccess }: SigningModa
       const reservedString = formatBnBalance(reserved, chainInfo?.tokenDecimals, {
         tokenSymbol: chainInfo?.tokenSymbol
       })
-      setErrorMessage(
-        `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`
+      const errorWithReservedFunds = getErrorMessageReservedFunds(
+        '"Signing with" account',
+        requiredBalanceString,
+        reservedString
       )
+      setErrorMessage(errorWithReservedFunds)
     }
   }, [chainInfo, reserved, hasSignerEnoughFunds, multisigProposalNeededFunds])
 

diff --git a/packages/ui/src/pages/Creation/Summary.tsx b/packages/ui/src/pages/Creation/Summary.tsx
@@ -1,5 +1,5 @@
 import { Alert, Box, Chip, Paper } from '@mui/material'
-import { useEffect, useMemo, useState } from 'react'
+import { ReactNode, useEffect, useMemo, useState } from 'react'
 import { styled } from '@mui/material/styles'
 import AccountDisplay from '../../components/AccountDisplay'
 import SignerSelection from '../../components/select/SignerSelection'
@@ -10,6 +10,7 @@ import { AccountBadge } from '../../types'
 import BN from 'bn.js'
 import { formatBnBalance } from '../../utils/formatBnBalance'
 import { useApi } from '../../contexts/ApiContext'
+import { getErrorMessageReservedFunds } from '../../utils/getErrorMessageReservedFunds'
 
 interface Props {
   className?: string
@@ -42,7 +43,7 @@ const Summary = ({
 }: Props) => {
   const { ownAddressList } = useAccounts()
   const { chainInfo } = useApi()
-  const [errorMessage, setErrorMessage] = useState('')
+  const [errorMessage, setErrorMessage] = useState<ReactNode | string>('')
 
   useEffect(() => {
     if (!isBalanceError) {
@@ -62,14 +63,12 @@ const Summary = ({
           tokenSymbol: chainInfo?.tokenSymbol
         })
 
-    const reservedMessage = reservedString
-      ? `Note that it includes ${reservedString} that will be reserved. ${
-          !isCreationSummary ? 'It will be returned upon transaction approval/rejection' : ''
-        }`
-      : ''
-    setErrorMessage(
-      `The selected signer doesn't have the required ${requiredBalanceString} to submit this transaction. ${reservedMessage}`
+    const errorWithReservedFunds = getErrorMessageReservedFunds(
+      'selected signer',
+      requiredBalanceString,
+      reservedString
     )
+    setErrorMessage(errorWithReservedFunds)
   }, [balanceMin, chainInfo, isBalanceError, isCreationSummary, reservedBalance])
 
   const possibleSigners = useMemo(() => {

diff --git a/packages/ui/src/utils/getErrorMessageReservedFunds.tsx b/packages/ui/src/utils/getErrorMessageReservedFunds.tsx
@@ -0,0 +1,34 @@
+export const wikiLinkReservedFunds =
+  'https://github.com/ChainSafe/Multix/wiki/Why-are-funds-reserved%3F'
+
+export const getErrorMessageReservedFunds = (
+  identifier: string,
+  requiredBalanceString?: string,
+  reservedString?: string
+) => {
+  if (!requiredBalanceString) return ''
+
+  return (
+    <span>
+      The {identifier} doesn't have the required {requiredBalanceString} to submit this transaction.{' '}
+      <ReservedMessage reservedAmount={reservedString} />
+    </span>
+  )
+}
+
+const ReservedMessage = ({ reservedAmount }: { reservedAmount?: string }) => {
+  if (!reservedAmount) return null
+
+  return (
+    <span>
+      Note that it includes ${reservedAmount} that will be reserved.{' '}
+      <a
+        href={wikiLinkReservedFunds}
+        target="_blank"
+        rel="noreferrer"
+      >
+        More info.
+      </a>
+    </span>
+  )
+}