diff --git a/packages/react-signer/src/PaymentInfo.tsx b/packages/react-signer/src/PaymentInfo.tsx index 48a5192e04..d9602c8ea9 100644 --- a/packages/react-signer/src/PaymentInfo.tsx +++ b/packages/react-signer/src/PaymentInfo.tsx @@ -2,16 +2,19 @@ // SPDX-License-Identifier: Apache-2.0 import type { SubmittableExtrinsic } from '@polkadot/api/promise/types'; +import type { DeriveBalancesAll } from '@polkadot/api-derive/types'; import type { RuntimeDispatchInfo } from '@polkadot/types/interfaces'; import BN from 'bn.js'; import React, { useEffect, useState } from 'react'; import { Trans } from 'react-i18next'; -import { Expander } from '@polkadot/react-components'; -import { useApi, useIsMountedRef } from '@polkadot/react-hooks'; +import { Expander, MarkWarning } from '@polkadot/react-components'; +import { useApi, useCall, useIsMountedRef } from '@polkadot/react-hooks'; import { formatBalance, isFunction } from '@polkadot/util'; +import { useTranslation } from './translate'; + interface Props { accountId?: string | null; className?: string; @@ -22,8 +25,11 @@ interface Props { } function PaymentInfo ({ accountId, className = '', extrinsic }: Props): React.ReactElement | null { + const { t } = useTranslation(); const { api } = useApi(); const [dispatchInfo, setDispatchInfo] = useState(null); + const balances = useCall(api.derive.balances.all, [accountId]); + const [isBelowExistential, setBelowExistential] = useState(false); const mountedRef = useIsMountedRef(); useEffect((): void => { @@ -41,19 +47,32 @@ function PaymentInfo ({ accountId, className = '', extrinsic }: Props): React.Re }, 0); }, [api, accountId, extrinsic, mountedRef]); + useEffect((): void => { + setBelowExistential(!!( + extrinsic && !api.tx.balances?.transfer.is(extrinsic) && + dispatchInfo && balances && api.consts.balances && + balances.availableBalance.sub(dispatchInfo.partialFee).lte(api.consts.balances.existentialDeposit) + )); + }, [api, balances, dispatchInfo, extrinsic]); + if (!dispatchInfo) { return null; } return ( - - Fees of {formatBalance(dispatchInfo.partialFee, { withSiFull: true })} will be applied to the submission - - } - /> + <> + + Fees of {formatBalance(dispatchInfo.partialFee, { withSiFull: true })} will be applied to the submission + + } + /> + {isBelowExistential && ( + ('The account does not have enough funds to cover the transaction fees without dropping the balance below the account existential amount.')} /> + )} + ); }