diff --git a/packages/page-accounts/src/modals/ProxyOverview.tsx b/packages/page-accounts/src/modals/ProxyOverview.tsx index 940283345e..4fc20a0191 100644 --- a/packages/page-accounts/src/modals/ProxyOverview.tsx +++ b/packages/page-accounts/src/modals/ProxyOverview.tsx @@ -6,10 +6,10 @@ import type { SubmittableExtrinsic } from '@polkadot/api/types'; import type { AccountId, ProxyDefinition, ProxyType } from '@polkadot/types/interfaces'; import BN from 'bn.js'; -import React, { useCallback, useEffect, useRef, useState } from 'react'; +import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import styled from 'styled-components'; -import { BatchWarning, Button, Dropdown, InputAddress, MarkError, Modal, TxButton } from '@polkadot/react-components'; +import { BatchWarning, Button, Dropdown, InputAddress, InputBalance, MarkError, Modal, TxButton } from '@polkadot/react-components'; import { useApi, useTxBatch } from '@polkadot/react-hooks'; import { BN_ZERO } from '@polkadot/util'; @@ -152,12 +152,17 @@ function ProxyOverview ({ className, onClose, previousProxy: [existing] = EMPTY_ const [batchPrevious, setBatchPrevious] = useState[]>([]); const [batchAdded, setBatchAdded] = useState[]>([]); const [txs, setTxs] = useState[] | null>(null); - const [previous, setPrevious] = useState( - existing.map(({ delegate, proxyType }): [AccountId, ProxyType] => [delegate, proxyType]) - ); + const [previous, setPrevious] = useState(() => existing.map(({ delegate, proxyType }) => [delegate, proxyType])); const [added, setAdded] = useState([]); const extrinsics = useTxBatch(txs, optTxBatch); + const reservedAmount = useMemo( + () => api.consts.proxy.proxyDepositFactor + .muln(batchPrevious.length + batchAdded.length) + .iadd(api.consts.proxy.proxyDepositBase), + [api, batchPrevious, batchAdded] + ); + const typeOpts = useRef( api.createType('ProxyType').defKeys.map((text, value) => ({ text, value })) ); @@ -269,6 +274,13 @@ function ProxyOverview ({ className, onClose, previousProxy: [existing] = EMPTY_ /> + ('The amount that is reserved for the proxy based on the base deposit and number of proxies')}> + ('reserved balance')} + /> +