From cae53511a6204cba35fa91fce122ce409d2c1606 Mon Sep 17 00:00:00 2001 From: Nick Date: Sat, 30 Nov 2024 13:02:03 +0330 Subject: [PATCH 1/3] fix: fee issue utilizing fee hook --- .../accountDetails/unlock/Review.tsx | 14 +- .../fullscreen/governance/delegate/index.tsx | 4 +- .../delegate/modify/ModifyDelegate.tsx | 39 ++-- .../delegate/remove/RemoveDelegate.tsx | 4 +- .../governance/post/castVote/Cast.tsx | 2 +- .../governance/post/castVote/index.tsx | 24 +- .../governance/post/decisionDeposit/index.tsx | 31 +-- .../src/fullscreen/manageProxies/Review.tsx | 44 ++-- .../src/fullscreen/socialRecovery/Review.tsx | 23 +- .../stake/pool/commonTasks/SetState.tsx | 20 +- .../commonTasks/manageValidators/Review.tsx | 15 +- .../commonTasks/manageValidators/Review.tsx | 16 +- .../stake/solo/fastUnstake/index.tsx | 22 +- .../fullscreen/stake/solo/pending/index.tsx | 19 +- .../fullscreen/stake/solo/restake/index.tsx | 23 +- .../src/fullscreen/stake/solo/stake/index.tsx | 15 +- .../src/hooks/useIdentity.ts | 2 +- .../src/popup/account/unlock/Review.tsx | 19 +- .../src/popup/manageProxies/Review.tsx | 33 +-- .../src/popup/send/Review.tsx | 214 +----------------- .../src/popup/send/partial/SendTxDetail.tsx | 89 -------- .../partial/SelectValidatorsReview.tsx | 25 +- .../popup/staking/pool/myPool/SetState.tsx | 20 +- .../staking/pool/nominations/remove/index.tsx | 18 +- .../src/popup/staking/pool/redeem/index.tsx | 31 +-- .../src/popup/staking/pool/rewards/Stake.tsx | 28 +-- .../popup/staking/pool/rewards/Withdraw.tsx | 27 +-- .../staking/pool/stake/bondExtra/Review.tsx | 12 +- .../staking/pool/stake/createPool/index.tsx | 4 +- .../src/popup/staking/pool/unstake/Review.tsx | 12 +- .../src/popup/staking/pool/unstake/index.tsx | 10 +- .../popup/staking/solo/fastUnstake/Review.tsx | 29 +-- .../popup/staking/solo/fastUnstake/index.tsx | 28 +-- .../staking/solo/nominations/remove/index.tsx | 18 +- .../src/popup/staking/solo/redeem/index.tsx | 33 +-- .../src/popup/staking/solo/restake/Review.tsx | 17 +- .../src/popup/staking/solo/restake/index.tsx | 23 +- .../staking/solo/rewards/PendingRewards.tsx | 8 +- .../src/popup/staking/solo/rewards/Review.tsx | 36 +-- .../popup/staking/solo/settings/Review.tsx | 2 +- .../src/popup/staking/solo/stake/index.tsx | 4 +- .../src/popup/staking/solo/unstake/Review.tsx | 7 +- .../src/popup/staking/solo/unstake/index.tsx | 10 +- 43 files changed, 230 insertions(+), 844 deletions(-) delete mode 100644 packages/extension-polkagate/src/popup/send/partial/SendTxDetail.tsx diff --git a/packages/extension-polkagate/src/fullscreen/accountDetails/unlock/Review.tsx b/packages/extension-polkagate/src/fullscreen/accountDetails/unlock/Review.tsx index d01869e24..00e80f903 100644 --- a/packages/extension-polkagate/src/fullscreen/accountDetails/unlock/Review.tsx +++ b/packages/extension-polkagate/src/fullscreen/accountDetails/unlock/Review.tsx @@ -10,7 +10,6 @@ import type { ApiPromise } from '@polkadot/api'; import type { SubmittableExtrinsic } from '@polkadot/api/types'; -import type { Balance } from '@polkadot/types/interfaces'; import type { ISubmittableResult } from '@polkadot/types/types'; import type { BN } from '@polkadot/util'; import type { Lock } from '../../../hooks/useAccountLocks'; @@ -20,10 +19,10 @@ import { faLockOpen, faUserAstronaut } from '@fortawesome/free-solid-svg-icons'; import { Container, Grid, useTheme } from '@mui/material'; import React, { useCallback, useEffect, useMemo, useState } from 'react'; -import { BN_ONE, isBn } from '@polkadot/util'; +import { isBn } from '@polkadot/util'; import { AccountHolderWithProxy, AmountFee, SignArea2, Warning, WrongPasswordAlert } from '../../../components'; -import { useInfo, useProxies, useTranslation } from '../../../hooks'; +import { useEstimatedFee, useInfo, useProxies, useTranslation } from '../../../hooks'; import { SubTitle } from '../../../partials'; import { PROXY_TYPE } from '../../../util/constants'; import { amountToHuman } from '../../../util/utils'; @@ -56,7 +55,6 @@ export default function Review ({ address, api, classToUnlock, setDisplayPopup, const [selectedProxy, setSelectedProxy] = useState(); const [proxyItems, setProxyItems] = useState(); const [txInfo, setTxInfo] = useState(); - const [estimatedFee, setEstimatedFee] = useState(); const [params, setParams] = useState[]>(); const [step, setStep] = useState(STEPS.INDEX); @@ -67,6 +65,8 @@ export default function Review ({ address, api, classToUnlock, setDisplayPopup, const unlockClass = api.tx['convictionVoting']['unlock']; // (class) const batchAll = api.tx['utility']['batchAll']; + const estimatedFee = useEstimatedFee(address, batchAll(params)); + const extraInfo = useMemo(() => ({ action: 'Unlock Referenda', amount, @@ -93,12 +93,6 @@ export default function Review ({ address, api, classToUnlock, setDisplayPopup, const params = [...removes, ...unlocks]; setParams(params); - - if (!api?.call?.['transactionPaymentApi']) { - return setEstimatedFee(api?.createType('Balance', BN_ONE) as Balance | undefined); - } - - batchAll(params).paymentInfo(formatted).then((i) => setEstimatedFee(i?.partialFee)).catch(console.error); }, [api, batchAll, formatted, classToUnlock, remove, unlockClass]); useEffect((): void => { diff --git a/packages/extension-polkagate/src/fullscreen/governance/delegate/index.tsx b/packages/extension-polkagate/src/fullscreen/governance/delegate/index.tsx index 38f77e34f..4a359dda8 100644 --- a/packages/extension-polkagate/src/fullscreen/governance/delegate/index.tsx +++ b/packages/extension-polkagate/src/fullscreen/governance/delegate/index.tsx @@ -217,7 +217,7 @@ export function Delegate ({ address, open, setOpen, showDelegationNote }: Props) batch(txList) .paymentInfo(delegateInformation.delegateeAddress) - .then((i) => setEstimatedFee(i?.partialFee)) + .then((i) => setEstimatedFee(api?.createType('Balance', i?.partialFee) as Balance)) .catch(console.error); } else { const tx = delegate(...[ @@ -229,7 +229,7 @@ export function Delegate ({ address, open, setOpen, showDelegationNote }: Props) tx .paymentInfo(delegateInformation.delegateeAddress) - .then((i) => setEstimatedFee(i?.partialFee)) + .then((i) => setEstimatedFee(api?.createType('Balance', i?.partialFee) as Balance)) .catch(console.error); } }, [api, batch, delegate, delegateInformation, delegateInformation?.delegateeAddress]); diff --git a/packages/extension-polkagate/src/fullscreen/governance/delegate/modify/ModifyDelegate.tsx b/packages/extension-polkagate/src/fullscreen/governance/delegate/modify/ModifyDelegate.tsx index 40d13ae8f..c1900bc39 100644 --- a/packages/extension-polkagate/src/fullscreen/governance/delegate/modify/ModifyDelegate.tsx +++ b/packages/extension-polkagate/src/fullscreen/governance/delegate/modify/ModifyDelegate.tsx @@ -1,7 +1,7 @@ // Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors // SPDX-License-Identifier: Apache-2.0 -// @ts-nocheck +//@ts-nocheck /* eslint-disable react/jsx-max-props-per-line */ /** @@ -9,25 +9,27 @@ * this component opens Modify Delegate review page * */ +import type { SubmittableExtrinsic } from '@polkadot/api/types'; import type { Balance } from '@polkadot/types/interfaces'; +import type { ISubmittableResult } from '@polkadot/types/types'; +import type { BN } from '@polkadot/util'; +import type { Lock } from '../../../../hooks/useAccountLocks'; import type { BalancesInfo, Proxy, TxInfo } from '../../../../util/types'; +import type { AlreadyDelegateInformation, DelegateInformation } from '..'; import { Divider, Grid, Typography } from '@mui/material'; import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'; -import { SubmittableExtrinsic } from '@polkadot/api/types'; -import { ISubmittableResult } from '@polkadot/types/types'; -import { BN, BN_ONE, BN_ZERO } from '@polkadot/util'; +import { BN_ONE, BN_ZERO } from '@polkadot/util'; import { Identity, Motion, ShowValue, SignArea2, WrongPasswordAlert } from '../../../../components'; import { useCurrentBlockNumber, useIdentity, useInfo, useTracks, useTranslation } from '../../../../hooks'; -import { Lock } from '../../../../hooks/useAccountLocks'; import { ThroughProxy } from '../../../../partials'; import { PROXY_TYPE } from '../../../../util/constants'; import { amountToHuman, amountToMachine } from '../../../../util/utils'; import DisplayValue from '../../post/castVote/partial/DisplayValue'; import TracksList from '../partial/TracksList'; -import { AlreadyDelegateInformation, DelegateInformation, STEPS } from '..'; +import { STEPS } from '..'; import Modify from './Modify'; interface Props { @@ -51,7 +53,7 @@ interface Props { export type ModifyModes = 'Modify' | 'ReviewModify'; -export default function ModifyDelegate({ accountLocks, address, balances, classicDelegateInformation, formatted, lockedAmount, mixedDelegateInformation, mode, otherDelegatedTracks, selectedProxy, setDelegateInformation, setModalHeight, setMode, setStep, setTxInfo, step }: Props): React.ReactElement { +export default function ModifyDelegate ({ accountLocks, address, balances, classicDelegateInformation, formatted, lockedAmount, mixedDelegateInformation, mode, otherDelegatedTracks, selectedProxy, setDelegateInformation, setModalHeight, setMode, setStep, setTxInfo, step }: Props): React.ReactElement { const { t } = useTranslation(); const { api, chain, decimal, genesisHash, token } = useInfo(address); const { tracks } = useTracks(address); @@ -76,11 +78,19 @@ export default function ModifyDelegate({ accountLocks, address, balances, classi const [newConviction, setNewConviction] = useState(); const selectedProxyAddress = selectedProxy?.delegate as unknown as string; - const undelegate = api && api.tx['convictionVoting']['undelegate']; - const delegate = api && api.tx['convictionVoting']['delegate']; - const batch = api && api.tx['utility']['batchAll']; - - const acceptableConviction = useMemo(() => newConviction !== undefined ? newConviction === 0.1 ? 0 : newConviction : conviction === 0.1 ? 0 : conviction, [conviction, newConviction]); + const undelegate = api?.tx['convictionVoting']['undelegate']; + const delegate = api?.tx['convictionVoting']['delegate']; + const batch = api?.tx['utility']['batchAll']; + + const acceptableConviction = useMemo(() => + newConviction !== undefined + ? newConviction === 0.1 + ? 0 + : newConviction + : conviction === 0.1 + ? 0 + : conviction + , [conviction, newConviction]); const delegateAmountBN = useMemo(() => newDelegateAmount ? amountToMachine(newDelegateAmount, decimal) : classicDelegateInformation ? classicDelegateInformation.delegateAmountBN : BN_ZERO, [classicDelegateInformation, decimal, newDelegateAmount]); const delegatePower = useMemo(() => { @@ -109,6 +119,7 @@ export default function ModifyDelegate({ accountLocks, address, balances, classi useEffect(() => { if (ref) { + // @ts-ignore setModalHeight(ref.current?.offsetHeight as number); } }, [setModalHeight]); @@ -185,8 +196,8 @@ export default function ModifyDelegate({ accountLocks, address, balances, classi } txList.length === 1 - ? txList[0].paymentInfo(formatted).then((i) => setEstimatedFee(i?.partialFee)).catch(console.error) - : batch(txList).paymentInfo(formatted).then((i) => setEstimatedFee(i?.partialFee)).catch(console.error); + ? txList[0].paymentInfo(formatted).then((i) => setEstimatedFee(api?.createType('Balance', i?.partialFee))).catch(console.error) + : batch(txList).paymentInfo(formatted).then((i) => setEstimatedFee(api?.createType('Balance', i?.partialFee))).catch(console.error); }, [api, batch, formatted, txList, undelegate]); const extraInfo = useMemo(() => ({ diff --git a/packages/extension-polkagate/src/fullscreen/governance/delegate/remove/RemoveDelegate.tsx b/packages/extension-polkagate/src/fullscreen/governance/delegate/remove/RemoveDelegate.tsx index bb2e1bcd4..f7658615d 100644 --- a/packages/extension-polkagate/src/fullscreen/governance/delegate/remove/RemoveDelegate.tsx +++ b/packages/extension-polkagate/src/fullscreen/governance/delegate/remove/RemoveDelegate.tsx @@ -100,8 +100,8 @@ export default function RemoveDelegate ({ address, classicDelegateInformation, f } params.length === 1 - ? undelegate(BN_ZERO).paymentInfo(formatted).then((i) => setEstimatedFee(i?.partialFee)).catch(console.error) - : batch(params.map((param) => undelegate(param))).paymentInfo(formatted).then((i) => setEstimatedFee(i?.partialFee)).catch(console.error); + ? undelegate(BN_ZERO).paymentInfo(formatted).then((i) => setEstimatedFee(api?.createType('Balance', i?.partialFee) as Balance)).catch(console.error) + : batch(params.map((param) => undelegate(param))).paymentInfo(formatted).then((i) => setEstimatedFee(api?.createType('Balance', i?.partialFee) as Balance)).catch(console.error); }, [api, batch, formatted, params, setSelectedTracksLength, undelegate]); const extraInfo = useMemo(() => ({ diff --git a/packages/extension-polkagate/src/fullscreen/governance/post/castVote/Cast.tsx b/packages/extension-polkagate/src/fullscreen/governance/post/castVote/Cast.tsx index 62c5efa32..626c32af5 100644 --- a/packages/extension-polkagate/src/fullscreen/governance/post/castVote/Cast.tsx +++ b/packages/extension-polkagate/src/fullscreen/governance/post/castVote/Cast.tsx @@ -170,7 +170,7 @@ export default function Cast ({ address, notVoted, previousVote, refIndex, setSt const dummyVote = undefined; const feeDummyParams = ['1', dummyVote]; - tx(...feeDummyParams).paymentInfo(formatted).then((i) => setEstimatedFee(i?.partialFee)).catch(console.error); + tx(...feeDummyParams).paymentInfo(formatted).then((i) => setEstimatedFee(api?.createType('Balance', i?.partialFee))).catch(console.error); }, [api, formatted, tx]); useEffect(() => { diff --git a/packages/extension-polkagate/src/fullscreen/governance/post/castVote/index.tsx b/packages/extension-polkagate/src/fullscreen/governance/post/castVote/index.tsx index e13196e98..251046bd4 100644 --- a/packages/extension-polkagate/src/fullscreen/governance/post/castVote/index.tsx +++ b/packages/extension-polkagate/src/fullscreen/governance/post/castVote/index.tsx @@ -3,7 +3,6 @@ /* eslint-disable react/jsx-max-props-per-line */ -import type { Balance } from '@polkadot/types/interfaces'; import type { Proxy, ProxyItem, TxInfo } from '../../../../util/types'; import type { Vote } from '../myVote/util'; @@ -12,10 +11,10 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react'; import { AccountsStore } from '@polkadot/extension-base/stores'; import keyring from '@polkadot/ui-keyring'; -import { BN, BN_ONE, noop } from '@polkadot/util'; +import { BN, noop } from '@polkadot/util'; import { cryptoWaitReady } from '@polkadot/util-crypto'; -import { useInfo, useProxies, useTranslation } from '../../../../hooks'; +import { useEstimatedFee, useInfo, useProxies, useTranslation } from '../../../../hooks'; import { PROXY_TYPE } from '../../../../util/constants'; import { amountToHuman, amountToMachine } from '../../../../util/utils'; import { DraggableModalWithTitle } from '../../components/DraggableModalWithTitle'; @@ -76,7 +75,6 @@ export default function Index ({ address, cantModify, hasVoted, myVote, notVoted const [selectedProxy, setSelectedProxy] = useState(); const [proxyItems, setProxyItems] = useState(); const [txInfo, setTxInfo] = useState(); - const [estimatedFee, setEstimatedFee] = useState(); const [voteInformation, setVoteInformation] = useState(); const [step, setStep] = useState(showAbout ? STEPS.ABOUT : STEPS.CHECK_SCREEN); const [alterType, setAlterType] = useState<'modify' | 'remove'>(); @@ -85,6 +83,8 @@ export default function Index ({ address, cantModify, hasVoted, myVote, notVoted const voteTx = api?.tx['convictionVoting']['vote']; const removeTx = api?.tx['convictionVoting']['removeVote']; + const estimatedFee = useEstimatedFee(address, voteTx, ['1', undefined]); + useEffect((): void => { const fetchedProxyItems = proxies?.map((p: Proxy) => ({ proxy: p, status: 'current' })) as ProxyItem[]; @@ -149,22 +149,6 @@ export default function Index ({ address, cantModify, hasVoted, myVote, notVoted } }, [step, hasVoted, alterType, t]); - useEffect(() => { - if (!formatted || !voteTx) { - return; - } - - if (!api?.call?.['transactionPaymentApi']) { - // eslint-disable-next-line @typescript-eslint/no-unsafe-return - return setEstimatedFee(api?.createType('Balance', BN_ONE) as Balance); - } - - const dummyVote = undefined; - const feeDummyParams = ['1', dummyVote]; - - voteTx(...feeDummyParams).paymentInfo(formatted).then((i) => setEstimatedFee(i?.partialFee)).catch(console.error); - }, [api, formatted, voteTx]); - const handleClose = useCallback(() => { if (step === STEPS.PROXY) { setStep(alterType === 'remove' ? STEPS.REMOVE : STEPS.REVIEW); diff --git a/packages/extension-polkagate/src/fullscreen/governance/post/decisionDeposit/index.tsx b/packages/extension-polkagate/src/fullscreen/governance/post/decisionDeposit/index.tsx index d6d46168a..10e936ec3 100644 --- a/packages/extension-polkagate/src/fullscreen/governance/post/decisionDeposit/index.tsx +++ b/packages/extension-polkagate/src/fullscreen/governance/post/decisionDeposit/index.tsx @@ -1,10 +1,9 @@ // Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors // SPDX-License-Identifier: Apache-2.0 -// @ts-nocheck /* eslint-disable react/jsx-max-props-per-line */ -import type { Balance } from '@polkadot/types/interfaces'; +import type { Proxy, ProxyItem, TxInfo } from '../../../../util/types'; import { Close as CloseIcon } from '@mui/icons-material'; import { Grid, Typography, useTheme } from '@mui/material'; @@ -12,16 +11,13 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react'; import { AccountsStore } from '@polkadot/extension-base/stores'; import keyring from '@polkadot/ui-keyring'; -import { BN_ONE } from '@polkadot/util'; import { cryptoWaitReady } from '@polkadot/util-crypto'; import { Identity, ShowBalance, SignArea2, Warning } from '../../../../components'; -import { useAccountDisplay, useBalances, useInfo, useProxies, useTranslation } from '../../../../hooks'; +import { useAccountDisplay, useBalances, useEstimatedFee, useInfo, useProxies, useTranslation } from '../../../../hooks'; import { ThroughProxy } from '../../../../partials'; import { getValue } from '../../../../popup/account/util'; -import { Proxy, ProxyItem, TxInfo } from '../../../../util/types'; import { PROXY_TYPE } from '../../../../util/constants'; -import type { Proxy, ProxyItem, TxInfo } from '../../../../util/types'; import { DraggableModal } from '../../components/DraggableModal'; import SelectProxyModal2 from '../../components/SelectProxyModal2'; import WaitScreen from '../../partials/WaitScreen'; @@ -61,27 +57,12 @@ export default function DecisionDeposit ({ address, open, refIndex, setOpen, tra const [step, setStep] = useState(STEPS.REVIEW); const [txInfo, setTxInfo] = useState(); const [isPasswordError, setIsPasswordError] = useState(false); - const [estimatedFee, setEstimatedFee] = useState(); const [selectedProxy, setSelectedProxy] = useState(); - const tx = api && api.tx['referenda']['placeDecisionDeposit']; + const tx = api?.tx['referenda']['placeDecisionDeposit']; const amount = track?.[1]?.decisionDeposit; const selectedProxyAddress = selectedProxy?.delegate as unknown as string; - - useEffect(() => { - if (!formatted || !tx) { - return; - } - - if (!api?.call?.['transactionPaymentApi']) { - // eslint-disable-next-line @typescript-eslint/no-unsafe-return - return setEstimatedFee(api?.createType('Balance', BN_ONE)); - } - - const feeDummyParams = [1]; - - tx(...feeDummyParams).paymentInfo(formatted).then((i) => setEstimatedFee(i?.partialFee)).catch(console.error); - }, [api, formatted, tx]); + const estimatedFee = useEstimatedFee(address, tx, [1]); useEffect(() => { cryptoWaitReady().then(() => keyring.loadAll({ store: new AccountsStore() })).catch(() => null); @@ -121,6 +102,8 @@ export default function DecisionDeposit ({ address, open, refIndex, setOpen, tra if (step === STEPS.CONFIRM) { return t('Paying Confirmation'); } + + return undefined; }, [step, t]); const HEIGHT = 550; @@ -193,7 +176,7 @@ export default function DecisionDeposit ({ address, open, refIndex, setOpen, tra >; } -function Review({ address, api, chain, depositedValue, newDepositValue, proxyItems, setRefresh, setStep, step }: Props): React.ReactElement { +function Review ({ address, api, chain, depositedValue, newDepositValue, proxyItems, setRefresh, setStep, step }: Props): React.ReactElement { const { t } = useTranslation(); const theme = useTheme(); const formatted = useFormatted(address); const [selectedProxy, setSelectedProxy] = useState(); const selectedProxyAddress = selectedProxy?.delegate as unknown as string; - const [estimatedFee, setEstimatedFee] = useState(); const [isPasswordError, setIsPasswordError] = useState(false); const [txInfo, setTxInfo] = useState(); @@ -66,10 +63,9 @@ function Review({ address, api, chain, depositedValue, newDepositValue, proxyIte } }, [depositedValue, newDepositValue]); - const feeAndDeposit = useCanPayFeeAndDeposit(formatted?.toString(), selectedProxy?.delegate, estimatedFee, depositToPay); - const removeProxy = api && api.tx['proxy']['removeProxy']; /** (delegate, proxyType, delay) **/ - const addProxy = api && api.tx['proxy']['addProxy']; /** (delegate, proxyType, delay) **/ - const batchAll = api && api.tx['utility']['batchAll']; + const removeProxy = api?.tx['proxy']['removeProxy']; /** (delegate, proxyType, delay) **/ + const addProxy = api?.tx['proxy']['addProxy']; /** (delegate, proxyType, delay) **/ + const batchAll = api?.tx['utility']['batchAll']; const changedItems = useMemo(() => proxyItems?.filter(({ status }) => status !== 'current'), [proxyItems]); @@ -97,7 +93,7 @@ function Review({ address, api, chain, depositedValue, newDepositValue, proxyIte return { mode: 'managing proxy(ies)', - reviewText: `You are ${toAdds && toAdds > 0 ? `adding ${toAdds} ${toRemoves && toRemoves > 0 ? ' and' : ''}` : ''} ${toRemoves && toRemoves > 0 ? `removing ${toRemoves}` : ''} ${toAdds + toRemoves > 1 ? 'proxies' : 'proxy'}` + reviewText: `You are ${toAdds && toAdds > 0 ? `adding ${toAdds} ${toRemoves && toRemoves > 0 ? ' and' : ''}` : ''} ${toRemoves && toRemoves > 0 ? `removing ${toRemoves}` : ''} ${(toAdds ?? 0) + (toRemoves ?? 0) > 1 ? 'proxies' : 'proxy'}` }; }, [proxyItems]); @@ -120,25 +116,15 @@ function Review({ address, api, chain, depositedValue, newDepositValue, proxyIte : temp[0]; }, [addProxy, batchAll, proxyItems, removeProxy]); + const estimatedFee = useEstimatedFee(address, call); + const feeAndDeposit = useCanPayFeeAndDeposit(formatted?.toString(), selectedProxy?.delegate, estimatedFee, depositToPay); + const extraInfo = useMemo(() => ({ action: 'Proxy Management', fee: String(estimatedFee || 0), subAction: toTitleCase(mode) }), [estimatedFee, mode]); - useEffect(() => { - if (!formatted || !call) { - return; - } - - if (!api?.call?.['transactionPaymentApi']) { - return setEstimatedFee(api?.createType('Balance', BN_ONE)); - } - - // eslint-disable-next-line no-void - void call.paymentInfo(formatted).then((i) => setEstimatedFee(i?.partialFee)); - }, [api, formatted, call]); - const backToManage = useCallback(() => { setStep(STEPS.MANAGE); }, [setStep]); diff --git a/packages/extension-polkagate/src/fullscreen/socialRecovery/Review.tsx b/packages/extension-polkagate/src/fullscreen/socialRecovery/Review.tsx index b506ccc73..458dc4277 100644 --- a/packages/extension-polkagate/src/fullscreen/socialRecovery/Review.tsx +++ b/packages/extension-polkagate/src/fullscreen/socialRecovery/Review.tsx @@ -21,12 +21,12 @@ import { faShieldHalved } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { MoreVert as MoreVertIcon } from '@mui/icons-material'; import { Divider, Grid, Skeleton, Typography, useTheme } from '@mui/material'; -import React, { useCallback, useEffect, useMemo, useState } from 'react'; +import React, { useCallback, useMemo, useState } from 'react'; -import { BN_ONE, BN_ZERO } from '@polkadot/util'; +import { BN_ZERO } from '@polkadot/util'; import { CanPayErrorAlert, EndRecoveryIcon, Identity, Infotip2, MakeRecoverableIcon, Motion, RescueRecoveryIcon, ShortAddress, ShowBalance, SignArea2, VouchRecoveryIcon, Warning, WrongPasswordAlert } from '../../components'; -import { useCanPayFeeAndDeposit, useCurrentBlockNumber, useInfo } from '../../hooks'; +import { useCanPayFeeAndDeposit, useCurrentBlockNumber, useEstimatedFee, useInfo } from '../../hooks'; import useTranslation from '../../hooks/useTranslation'; import { ThroughProxy } from '../../partials'; import blockToDate from '../../popup/crowdloans/partials/blockToDate'; @@ -68,7 +68,6 @@ export default function Review ({ activeLost, address, allActiveRecoveries, api, const { chainName, decimal, formatted } = useInfo(address); const currentBlockNumber = useCurrentBlockNumber(address); - const [estimatedFee, setEstimatedFee] = useState(); const [txInfo, setTxInfo] = useState(); const [isPasswordError, setIsPasswordError] = useState(false); const [selectedProxy, setSelectedProxy] = useState(); @@ -105,8 +104,6 @@ export default function Review ({ activeLost, address, allActiveRecoveries, api, } }, [depositValue, mode, recoveryInfo]); - const feeAndDeposit = useCanPayFeeAndDeposit(formatted?.toString(), selectedProxy?.delegate, estimatedFee, depositToPay); - const withdrawTXs = useCallback((): SubmittableExtrinsic<'promise', ISubmittableResult> | undefined => { if (!api || !batchAll || !redeem || !poolRedeem || !unbond || !clearIdentity || !claimRecovery || !removeProxies || !asRecovered || !closeRecovery || !unbonded || !removeRecovery || !chill || !withdrawInfo || !formatted || !transferAll || allActiveRecoveries === undefined) { return; @@ -169,18 +166,8 @@ export default function Review ({ activeLost, address, allActiveRecoveries, api, return undefined; }, [activeLost, batchAll, closeRecovery, createRecovery, initiateRecovery, lostAccountAddress, mode, recoveryConfig, removeRecovery, vouchRecovery, vouchRecoveryInfo, withdrawInfo, withdrawTXs]); - useEffect(() => { - if (!formatted || !call) { - return; - } - - if (!api?.call?.['transactionPaymentApi']) { - return setEstimatedFee(api?.createType('Balance', BN_ONE) as Balance); - } - - // eslint-disable-next-line no-void - void call.paymentInfo(formatted).then((i) => setEstimatedFee(i?.partialFee)); - }, [api, formatted, call]); + const estimatedFee = useEstimatedFee(address, call); + const feeAndDeposit = useCanPayFeeAndDeposit(formatted?.toString(), selectedProxy?.delegate, estimatedFee, depositToPay); const extraInfo = useMemo(() => ({ action: 'Social Recovery', diff --git a/packages/extension-polkagate/src/fullscreen/stake/pool/commonTasks/SetState.tsx b/packages/extension-polkagate/src/fullscreen/stake/pool/commonTasks/SetState.tsx index 8eb1cf2a8..791f91e5e 100644 --- a/packages/extension-polkagate/src/fullscreen/stake/pool/commonTasks/SetState.tsx +++ b/packages/extension-polkagate/src/fullscreen/stake/pool/commonTasks/SetState.tsx @@ -4,7 +4,6 @@ /* eslint-disable react/jsx-max-props-per-line */ import type { ApiPromise } from '@polkadot/api'; -import type { Balance } from '@polkadot/types/interfaces'; import type { MyPoolInfo, TxInfo } from '../../../../util/types'; import type { StakingInputs } from '../../type'; import type { PoolState } from '../partials/PoolCommonTasks'; @@ -15,10 +14,9 @@ import React, { useEffect, useMemo, useState } from 'react'; import { DraggableModal } from '@polkadot/extension-polkagate/src/fullscreen/governance/components/DraggableModal'; import WaitScreen from '@polkadot/extension-polkagate/src/fullscreen/governance/partials/WaitScreen'; -import { BN_ONE } from '@polkadot/util'; import { AccountWithProxyInConfirmation } from '../../../../components'; -import { useTranslation } from '../../../../hooks'; +import { useEstimatedFee, useTranslation } from '../../../../hooks'; import Review from '../../partials/Review'; import { ModalTitle } from '../../solo/commonTasks/configurePayee'; import Confirmation from '../partials/Confirmation'; @@ -40,7 +38,8 @@ export default function SetState ({ address, api, formatted, onClose, pool, setR const [txInfo, setTxInfo] = useState(); const [step, setStep] = useState(STEPS.REVIEW); const [inputs, setInputs] = useState(); - const [estimatedFee, setEstimatedFee] = useState(); + + const estimatedFee = useEstimatedFee(address, inputs?.call, inputs?.params); const helperText = useMemo(() => state === 'Blocked' @@ -85,19 +84,6 @@ export default function SetState ({ address, api, formatted, onClose, pool, setR }); }, [api, extraInfo, formatted, pool.bondedPool?.roles.nominator, pool.bondedPool?.roles.root, pool.poolId, pool.stashIdAccount?.nominators, state]); - useEffect(() => { - if (!api || !inputs?.call) { - return; - } - - if (!api?.call?.['transactionPaymentApi']) { - return setEstimatedFee(api?.createType('Balance', BN_ONE) as Balance); - } - - // eslint-disable-next-line no-void - void inputs?.call(...inputs.params).paymentInfo(formatted).then((i) => setEstimatedFee(i?.partialFee)); - }, [api, formatted, inputs]); - // this page doesn't have an INDEX, When the ModalTitle close button is clicked, it will set the step to STEPS.INDEX, triggering the modal to close useEffect(() => { step === STEPS.INDEX && onClose(); diff --git a/packages/extension-polkagate/src/fullscreen/stake/pool/commonTasks/manageValidators/Review.tsx b/packages/extension-polkagate/src/fullscreen/stake/pool/commonTasks/manageValidators/Review.tsx index 584d40dba..d73daf793 100644 --- a/packages/extension-polkagate/src/fullscreen/stake/pool/commonTasks/manageValidators/Review.tsx +++ b/packages/extension-polkagate/src/fullscreen/stake/pool/commonTasks/manageValidators/Review.tsx @@ -4,13 +4,12 @@ /* eslint-disable react/jsx-max-props-per-line */ import type { DeriveAccountInfo } from '@polkadot/api-derive/types'; -import type { Balance } from '@polkadot/types/interfaces'; import type { BN } from '@polkadot/util'; import type { Proxy, StakingConsts, TxInfo } from '../../../../../util/types'; import type { StakingInputs } from '../../../type'; import { Grid, Typography } from '@mui/material'; -import React, { useCallback, useEffect, useMemo, useState } from 'react'; +import React, { useCallback, useMemo, useState } from 'react'; import DisplayValue from '@polkadot/extension-polkagate/src/fullscreen/governance/post/castVote/partial/DisplayValue'; import { PROXY_TYPE } from '@polkadot/extension-polkagate/src/util/constants'; @@ -18,7 +17,7 @@ import { BN_ZERO } from '@polkadot/util'; import { ShowBalance, SignArea2, WrongPasswordAlert } from '../../../../../components'; import { useTranslation } from '../../../../../components/translate'; -import { useInfo } from '../../../../../hooks'; +import { useEstimatedFee, useInfo } from '../../../../../hooks'; import ValidatorsTableFS from '../../../solo/partials/ValidatorsTableFS'; import { STEPS } from '../../stake'; @@ -38,11 +37,11 @@ export default function Review({ address, allValidatorsIdentities, inputs, setSt const { api, formatted, token } = useInfo(address); - const [estimatedFee, setEstimatedFee] = useState(); const [isPasswordError, setIsPasswordError] = useState(false); const [selectedProxy, setSelectedProxy] = useState(); const { call, params, selectedValidators } = inputs; + const estimatedFee = useEstimatedFee(address, call, params); const extraInfo = useMemo(() => ({ action: 'Pool Staking', @@ -51,14 +50,6 @@ export default function Review({ address, allValidatorsIdentities, inputs, setSt validatorsCount: selectedValidators?.length }), [estimatedFee, selectedValidators?.length]); - useEffect(() => { - if (call && params && formatted) { - call(...params) - .paymentInfo(formatted) - .then((i) => setEstimatedFee(i?.partialFee)) - .catch(console.error); - } - }, [formatted, params, call]); const handleCancel = useCallback(() => setStep(STEPS.INDEX), [setStep]); diff --git a/packages/extension-polkagate/src/fullscreen/stake/solo/commonTasks/manageValidators/Review.tsx b/packages/extension-polkagate/src/fullscreen/stake/solo/commonTasks/manageValidators/Review.tsx index a6fbc795c..8c596e7fd 100644 --- a/packages/extension-polkagate/src/fullscreen/stake/solo/commonTasks/manageValidators/Review.tsx +++ b/packages/extension-polkagate/src/fullscreen/stake/solo/commonTasks/manageValidators/Review.tsx @@ -3,13 +3,12 @@ /* eslint-disable react/jsx-max-props-per-line */ -import type { Balance } from '@polkadot/types/interfaces'; import type { BN } from '@polkadot/util'; import type { Proxy, TxInfo } from '../../../../../util/types'; import type { StakingInputs } from '../../../type'; import { Grid, Typography } from '@mui/material'; -import React, { useCallback, useEffect, useMemo, useState } from 'react'; +import React, { useCallback, useMemo, useState } from 'react'; import DisplayValue from '@polkadot/extension-polkagate/src/fullscreen/governance/post/castVote/partial/DisplayValue'; import { PROXY_TYPE } from '@polkadot/extension-polkagate/src/util/constants'; @@ -17,7 +16,7 @@ import { BN_ZERO } from '@polkadot/util'; import { ShowBalance, SignArea2, WrongPasswordAlert } from '../../../../../components'; import { useTranslation } from '../../../../../components/translate'; -import { useInfo, useStakingAccount, useStakingConsts, useValidators, useValidatorsIdentities } from '../../../../../hooks'; +import { useEstimatedFee, useInfo, useStakingAccount, useStakingConsts, useValidators, useValidatorsIdentities } from '../../../../../hooks'; import { STEPS } from '../../../pool/stake'; import ValidatorsTableFS from '../../partials/ValidatorsTableFS'; @@ -40,11 +39,11 @@ export default function Review({ address, inputs, setStep, setTxInfo, step }: Pr const { api, formatted, token } = useInfo(address); - const [estimatedFee, setEstimatedFee] = useState(); const [isPasswordError, setIsPasswordError] = useState(false); const [selectedProxy, setSelectedProxy] = useState(); const { call, params, selectedValidators } = inputs; + const estimatedFee = useEstimatedFee(address, call, params); const extraInfo = useMemo(() => ({ action: 'Solo Staking', @@ -53,15 +52,6 @@ export default function Review({ address, inputs, setStep, setTxInfo, step }: Pr validatorsCount: selectedValidators?.length }), [estimatedFee, selectedValidators?.length]); - useEffect(() => { - if (call && params && formatted) { - call(...params) - .paymentInfo(formatted) - .then((i) => setEstimatedFee(i?.partialFee)) - .catch(console.error); - } - }, [formatted, params, call]); - const handleCancel = useCallback( () => setStep(STEPS.INDEX) , [setStep]); diff --git a/packages/extension-polkagate/src/fullscreen/stake/solo/fastUnstake/index.tsx b/packages/extension-polkagate/src/fullscreen/stake/solo/fastUnstake/index.tsx index 60ecdb3a7..0e9c8aba3 100644 --- a/packages/extension-polkagate/src/fullscreen/stake/solo/fastUnstake/index.tsx +++ b/packages/extension-polkagate/src/fullscreen/stake/solo/fastUnstake/index.tsx @@ -4,7 +4,6 @@ /* eslint-disable react/jsx-max-props-per-line */ import type { TxInfo } from '@polkadot/extension-polkagate/src/util/types'; -import type { Balance } from '@polkadot/types/interfaces'; import type { StakingInputs } from '../../type'; import { faBolt } from '@fortawesome/free-solid-svg-icons'; @@ -16,10 +15,10 @@ import { DraggableModal } from '@polkadot/extension-polkagate/src/fullscreen/gov import WaitScreen from '@polkadot/extension-polkagate/src/fullscreen/governance/partials/WaitScreen'; import { getValue } from '@polkadot/extension-polkagate/src/popup/account/util'; import { amountToHuman } from '@polkadot/extension-polkagate/src/util/utils'; -import { BN, BN_MAX_INTEGER, BN_ONE } from '@polkadot/util'; +import { BN, BN_MAX_INTEGER } from '@polkadot/util'; import { PButton, Progress, Warning } from '../../../../components'; -import { useBalances, useInfo, useIsExposed, useStakingAccount, useStakingConsts, useTranslation } from '../../../../hooks'; +import { useBalances, useEstimatedFee, useInfo, useIsExposed, useStakingAccount, useStakingConsts, useTranslation } from '../../../../hooks'; import Confirmation from '../../partials/Confirmation'; import Review from '../../partials/Review'; import { STEPS } from '../../pool/stake'; @@ -36,17 +35,18 @@ interface Props { export default function FastUnstake ({ address, setRefresh, setShow, show }: Props): React.ReactElement { const { t } = useTranslation(); const theme = useTheme(); - const { api, decimal, formatted, token } = useInfo(address); + const { api, decimal, token } = useInfo(address); const stakingAccount = useStakingAccount(address); const myBalances = useBalances(address); const stakingConsts = useStakingConsts(address); const isExposed = useIsExposed(address); - const [estimatedFee, setEstimatedFee] = useState(); const [step, setStep] = useState(STEPS.INDEX); const [txInfo, setTxInfo] = useState(); const [inputs, setInputs] = useState(); + const estimatedFee = useEstimatedFee(address, inputs?.call?.()); + const redeemable = useMemo(() => stakingAccount?.redeemable, [stakingAccount?.redeemable]); const fastUnstakeDeposit = api && api.consts['fastUnstake']['deposit'] as unknown as BN; const availableBalance = getValue('available', myBalances); @@ -88,18 +88,6 @@ export default function FastUnstake ({ address, setRefresh, setShow, show }: Pro }); }, [api, availableBalance, decimal, myBalances, staked]); - useEffect((): void => { - if (!api) { - return; - } - - if (!api?.call?.['transactionPaymentApi']) { - return setEstimatedFee(api?.createType('Balance', BN_ONE) as Balance); - } - - inputs?.call && address && inputs.call().paymentInfo(address).then((i) => setEstimatedFee(i?.partialFee)).catch(console.error); - }, [api, address, inputs, formatted]); - const onNext = useCallback(() => { setStep(STEPS.REVIEW); }, []); diff --git a/packages/extension-polkagate/src/fullscreen/stake/solo/pending/index.tsx b/packages/extension-polkagate/src/fullscreen/stake/solo/pending/index.tsx index 1b0c1cf60..6fe208cdf 100644 --- a/packages/extension-polkagate/src/fullscreen/stake/solo/pending/index.tsx +++ b/packages/extension-polkagate/src/fullscreen/stake/solo/pending/index.tsx @@ -35,12 +35,12 @@ interface Props { setRefresh: React.Dispatch> } -export interface ExpandedRewards { - eraIndex: number; - validator: string; - page: number; - value: BN; -} +export type ExpandedRewards = [ + eraIndex: string, + validator: string, + page: number, + value: BN +] export default function Pending ({ address, setRefresh, setShow, show }: Props): React.ReactElement { const { t } = useTranslation(); @@ -98,7 +98,7 @@ export default function Pending ({ address, setRefresh, setShow, show }: Props): [] ); - setExpandedRewards(rewardsArray as any); + setExpandedRewards(rewardsArray); }, [rewards]); const totalPending = useMemo(() => { @@ -144,9 +144,7 @@ export default function Pending ({ address, setRefresh, setShow, show }: Props): const params = selectedToPayout.length === 1 - // @ts-ignore ? [selectedToPayout[0][1], Number(selectedToPayout[0][0]), selectedToPayout[0][2]] - // @ts-ignore : [selectedToPayout.map((p) => payoutStakers(p[1], Number(p[0]), p[2]))]; const amount = amountToHuman(totalSelectedPending, decimal); @@ -281,8 +279,7 @@ export default function Pending ({ address, setRefresh, setShow, show }: Props): : <> {expandedRewards?.map((info, index) => { - // @ts-ignore - const [eraIndex, validator, page, value] = info; + const [eraIndex, validator,, value] = info; return ( diff --git a/packages/extension-polkagate/src/fullscreen/stake/solo/restake/index.tsx b/packages/extension-polkagate/src/fullscreen/stake/solo/restake/index.tsx index b6c35d3d6..94591d395 100644 --- a/packages/extension-polkagate/src/fullscreen/stake/solo/restake/index.tsx +++ b/packages/extension-polkagate/src/fullscreen/stake/solo/restake/index.tsx @@ -4,7 +4,6 @@ /* eslint-disable react/jsx-max-props-per-line */ import type { TxInfo } from '@polkadot/extension-polkagate/src/util/types'; -import type { Balance } from '@polkadot/types/interfaces'; import type { StakingInputs } from '../../type'; import { faArrowRotateLeft } from '@fortawesome/free-solid-svg-icons'; @@ -16,10 +15,10 @@ import WaitScreen from '@polkadot/extension-polkagate/src/fullscreen/governance/ import Asset from '@polkadot/extension-polkagate/src/partials/Asset'; import { MAX_AMOUNT_LENGTH } from '@polkadot/extension-polkagate/src/util/constants'; import { amountToHuman, amountToMachine } from '@polkadot/extension-polkagate/src/util/utils'; -import { BN, BN_ONE, BN_ZERO } from '@polkadot/util'; +import { BN, BN_ZERO } from '@polkadot/util'; import { AmountWithOptions, TwoButtons, Warning } from '../../../../components'; -import { useInfo, useStakingAccount, useTranslation } from '../../../../hooks'; +import { useEstimatedFee, useInfo, useStakingAccount, useTranslation } from '../../../../hooks'; import Confirmation from '../../partials/Confirmation'; import Review from '../../partials/Review'; import { STEPS } from '../../pool/stake'; @@ -36,7 +35,7 @@ interface Props { export default function Unstake ({ address, setRefresh, setShow, show }: Props): React.ReactElement { const { t } = useTranslation(); const theme = useTheme(); - const { api, decimal, formatted, token } = useInfo(address); + const { api, decimal, token } = useInfo(address); const stakingAccount = useStakingAccount(address); @@ -47,13 +46,13 @@ export default function Unstake ({ address, setRefresh, setShow, show }: Props): const [alert, setAlert] = useState(); const [restakeAllAmount, setRestakeAllAmount] = useState(false); const [unlockingAmount, setUnlockingAmount] = useState(); - const [estimatedFee, setEstimatedFee] = useState(); const staked = useMemo(() => stakingAccount?.stakingLedger?.active as BN | undefined, [stakingAccount?.stakingLedger?.active]); const amountAsBN = useMemo(() => restakeAllAmount ? unlockingAmount : amountToMachine(amount, decimal), [amount, decimal, restakeAllAmount, unlockingAmount]); const totalStakeAfter = useMemo(() => staked && unlockingAmount && amountAsBN && staked.add(amountAsBN), [amountAsBN, staked, unlockingAmount]); - const rebonded = api && api.tx['staking']['rebond']; // signer: Controller + const rebonded = api?.tx['staking']['rebond']; // signer: Controller + const estimatedFee = useEstimatedFee(address, rebonded, [amountAsBN]); useEffect(() => { if (!stakingAccount) { @@ -83,18 +82,6 @@ export default function Unstake ({ address, setRefresh, setShow, show }: Props): setAlert(undefined); }, [unlockingAmount, t, amountAsBN]); - useEffect(() => { - if (!rebonded || !formatted) { - return; - } - - if (!api?.call?.['transactionPaymentApi']) { - return setEstimatedFee(api?.createType('Balance', BN_ONE) as Balance); - } - - rebonded(amountAsBN).paymentInfo(formatted).then((i) => setEstimatedFee(i?.partialFee)).catch(console.error); - }, [amountAsBN, api, formatted, rebonded]); - const onChangeAmount = useCallback((value: string) => { if (!decimal) { return; diff --git a/packages/extension-polkagate/src/fullscreen/stake/solo/stake/index.tsx b/packages/extension-polkagate/src/fullscreen/stake/solo/stake/index.tsx index 817913226..211200e68 100644 --- a/packages/extension-polkagate/src/fullscreen/stake/solo/stake/index.tsx +++ b/packages/extension-polkagate/src/fullscreen/stake/solo/stake/index.tsx @@ -4,7 +4,6 @@ /* eslint-disable react/jsx-max-props-per-line */ import type { Payee, ValidatorInfo } from 'extension-polkagate/src/util/types'; -import type { Balance } from '@polkadot/types/interfaces'; import type { BN } from '@polkadot/util'; import type { StakingInputs } from '../../type'; @@ -16,7 +15,7 @@ import { BN_ZERO } from '@polkadot/util'; import { AmountWithOptions, Infotip2, ShowBalance, TwoButtons, Warning } from '../../../../components'; import { useTranslation } from '../../../../components/translate'; -import { useAvailableToSoloStake, useBalances, useInfo, useMinToReceiveRewardsInSolo2, useStakingAccount, useStakingConsts } from '../../../../hooks'; +import { useAvailableToSoloStake, useBalances, useEstimatedFee, useInfo, useMinToReceiveRewardsInSolo2, useStakingAccount, useStakingConsts } from '../../../../hooks'; import { amountToHuman, amountToMachine } from '../../../../util/utils'; import { STEPS } from '../..'; import SelectValidatorsFs from '../partials/SelectValidatorsFs'; @@ -61,7 +60,6 @@ export default function SoloStake ({ inputs, onBack, setInputs, setStep }: Props const availableToSoloStake = useAvailableToSoloStake(address, refresh); const [amount, setAmount] = useState(inputs?.extraInfo?.['amount'] as string); - const [estimatedFee, setEstimatedFee] = useState(); const [isNextClicked, setNextIsClicked] = useState(); const [alert, setAlert] = useState(); const [payee, setPayee] = useState(inputs?.payee); @@ -86,6 +84,8 @@ export default function SoloStake ({ inputs, onBack, setInputs, setStep }: Props return { call: undefined, params: undefined }; }, [amountAsBN, api, newSelectedValidators, payee]); + const estimatedFee = useEstimatedFee(address, call, params); + const buttonDisable = useMemo(() => !!alert || !amount, [alert, amount]); const isBusy = useMemo(() => (!inputs?.estimatedFee || !inputs?.extraInfo?.['amount']) && isNextClicked @@ -135,15 +135,6 @@ export default function SoloStake ({ inputs, onBack, setInputs, setStep }: Props } }, [amount, call, estimatedFee, newSelectedValidators, params, payee, setInputs]); - useEffect(() => { - if (call && params && formatted) { - call(...params) - .paymentInfo(formatted) - .then((i) => setEstimatedFee(i?.partialFee)) - .catch(console.error); - } - }, [formatted, params, call]); - const onChangeAmount = useCallback((value: string) => { if (!balances) { return; diff --git a/packages/extension-polkagate/src/hooks/useIdentity.ts b/packages/extension-polkagate/src/hooks/useIdentity.ts index b77943e2c..cc5a3fb17 100644 --- a/packages/extension-polkagate/src/hooks/useIdentity.ts +++ b/packages/extension-polkagate/src/hooks/useIdentity.ts @@ -16,7 +16,7 @@ interface SubIdentity { display: string } -export default function useIdentity (genesisHash: string | undefined, formatted: string | undefined, accountInfo?: DeriveAccountInfo | null): DeriveAccountInfo | undefined | null { +export default function useIdentity (genesisHash: string | undefined, formatted: string | undefined | null, accountInfo?: DeriveAccountInfo | null): DeriveAccountInfo | undefined | null { const [info, setInfo] = useState(); const { peopleChain } = usePeopleChain(undefined, genesisHash); diff --git a/packages/extension-polkagate/src/popup/account/unlock/Review.tsx b/packages/extension-polkagate/src/popup/account/unlock/Review.tsx index e3ddd6419..600adf20f 100644 --- a/packages/extension-polkagate/src/popup/account/unlock/Review.tsx +++ b/packages/extension-polkagate/src/popup/account/unlock/Review.tsx @@ -10,8 +10,6 @@ import type { ApiPromise } from '@polkadot/api'; import type { SubmittableExtrinsic } from '@polkadot/api/types'; -import type { Chain } from '@polkadot/extension-chains/types'; -import type { Balance } from '@polkadot/types/interfaces'; import type { ISubmittableResult } from '@polkadot/types/types'; import type { BN } from '@polkadot/util'; import type { Lock } from '../../../hooks/useAccountLocks'; @@ -22,10 +20,10 @@ import { Container } from '@mui/material'; import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react'; import keyring from '@polkadot/ui-keyring'; -import { BN_ONE, isBn } from '@polkadot/util'; +import { isBn } from '@polkadot/util'; import { AccountHolderWithProxy, ActionContext, AmountFee, Motion, PasswordUseProxyConfirm, Popup, Warning, WrongPasswordAlert } from '../../../components'; -import { useAccountDisplay, useInfo, useProxies, useTranslation } from '../../../hooks'; +import { useAccountDisplay, useEstimatedFee, useInfo, useProxies, useTranslation } from '../../../hooks'; import { HeaderBrand, SubTitle, WaitScreen } from '../../../partials'; import { signAndSend } from '../../../util/api'; import { PROXY_TYPE } from '../../../util/constants'; @@ -59,7 +57,6 @@ export default function Review ({ address, api, classToUnlock, setRefresh, setSh const [txInfo, setTxInfo] = useState(); const [showWaitScreen, setShowWaitScreen] = useState(false); const [showConfirmation, setShowConfirmation] = useState(false); - const [estimatedFee, setEstimatedFee] = useState(); const [params, setParams] = useState[]>(); const selectedProxyAddress = selectedProxy?.delegate as unknown as string; @@ -70,6 +67,8 @@ export default function Review ({ address, api, classToUnlock, setRefresh, setSh const unlockClass = api.tx['convictionVoting']['unlock']; // (class) const batchAll = api.tx['utility']['batchAll']; + const estimatedFee = useEstimatedFee(address, batchAll(params)); + useEffect((): void => { if (!formatted) { return; @@ -89,12 +88,6 @@ export default function Review ({ address, api, classToUnlock, setRefresh, setSh const params = [...removes, ...unlocks]; setParams(params as any); - - if (!api?.call?.['transactionPaymentApi']) { - return setEstimatedFee(api?.createType('Balance', BN_ONE) as Balance); - } - - batchAll(params).paymentInfo(formatted).then((i) => setEstimatedFee(i?.partialFee)).catch(console.error); }, [api, batchAll, formatted, classToUnlock, remove, unlockClass]); const goToAccount = useCallback(() => { @@ -180,7 +173,7 @@ export default function Review ({ address, api, classToUnlock, setRefresh, setSh (); const [proxiesToChange, setProxiesToChange] = useState(); - const [estimatedFee, setEstimatedFee] = useState(); const [txInfo, setTxInfo] = useState(); const [password, setPassword] = useState(); const [isPasswordError, setIsPasswordError] = useState(false); @@ -56,8 +52,6 @@ export default function Review({ address, api, chain, depositToPay, depositValue const selectedProxyAddress = selectedProxy?.delegate as unknown as string; const selectedProxyName = useAccountDisplay(getSubstrateAddress(selectedProxyAddress)); - const canPayFeeAndDeposit = useCanPayFeeAndDeposit(formatted?.toString(), selectedProxy?.delegate, estimatedFee, depositToPay); - const removeProxy = api.tx['proxy']['removeProxy']; /** (delegate, proxyType, delay) **/ const addProxy = api.tx['proxy']['addProxy']; /** (delegate, proxyType, delay) **/ const batchAll = api.tx['utility']['batchAll']; @@ -82,19 +76,8 @@ export default function Review({ address, api, chain, depositToPay, depositValue }, [addProxy, proxiesToChange, removeProxy]); const tx = useMemo(() => calls.length !== 0 && calls.length > 1 ? batchAll(calls) : calls[0], [batchAll, calls]); - - useEffect(() => { - if (!tx) { - return; - } - - if (!api?.call?.['transactionPaymentApi']) { - return setEstimatedFee(api?.createType('Balance', BN_ONE)); - } - - // eslint-disable-next-line no-void - void tx.paymentInfo(formatted).then((i) => setEstimatedFee(i?.partialFee)); - }, [api, formatted, tx]); + const estimatedFee = useEstimatedFee(address, tx); + const canPayFeeAndDeposit = useCanPayFeeAndDeposit(formatted?.toString(), selectedProxy?.delegate, estimatedFee, depositToPay); const onNext = useCallback(async (): Promise => { try { diff --git a/packages/extension-polkagate/src/popup/send/Review.tsx b/packages/extension-polkagate/src/popup/send/Review.tsx index a6b23e531..86a9de41a 100644 --- a/packages/extension-polkagate/src/popup/send/Review.tsx +++ b/packages/extension-polkagate/src/popup/send/Review.tsx @@ -1,6 +1,5 @@ // Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors // SPDX-License-Identifier: Apache-2.0 -// @ts-nocheck /* eslint-disable react/jsx-max-props-per-line */ @@ -9,31 +8,16 @@ * this component opens send review page * */ -import type { ApiPromise } from '@polkadot/api'; -import type { SubmittableExtrinsicFunction } from '@polkadot/api/types'; -import type { AnyTuple } from '@polkadot/types/types'; - -import { Container, Divider, Grid } from '@mui/material'; -import React, { useCallback, useContext, useEffect, useState } from 'react'; - import type { Chain } from '@polkadot/extension-chains/types'; -import type { Balance } from '@polkadot/types/interfaces'; -import keyring from '@polkadot/ui-keyring'; +import { Divider, Grid } from '@mui/material'; +import React, { } from 'react'; + +import { Identity, ShortAddress } from '../../components'; -import { AccountHolderWithProxy, ActionContext, AmountFee, Identity, Motion, PasswordUseProxyConfirm, Popup, ShortAddress, WrongPasswordAlert } from '../../components'; -import { useAccountDisplay, useDecimal, useFormatted, useProxies, useToken, useTranslation } from '../../hooks'; -import { HeaderBrand, WaitScreen } from '../../partials'; -import Confirmation from '../../partials/Confirmation'; -import SubTitle from '../../partials/SubTitle'; -import broadcast from '../../util/api/broadcast'; -import { PROXY_TYPE } from '../../util/constants'; -import type { Proxy, ProxyItem, TxInfo } from '../../util/types'; -import { amountToMachine, getSubstrateAddress, saveAsHistory } from '../../util/utils'; -import SendTxDetail from './partial/SendTxDetail'; +interface Props { chain: Chain | null, identiconSize?: number, mb?: number, noDivider?: boolean, pt1?: number, pt2?: number, fontSize1?: number, label: string, formatted: string | undefined } -export function To({ chain, fontSize1 = 28, formatted, identiconSize = 31, label, mb = 10, noDivider, pt1 = 0, pt2 = 5 }: - { chain: Chain | null, identiconSize?: number, mb?: number, noDivider?: boolean, pt1?: number, pt2?: number, fontSize1?: number, label: string, formatted: string | undefined }): React.ReactElement { +export function To ({ chain, fontSize1 = 28, formatted, identiconSize = 31, label, mb = 10, noDivider, pt1 = 0, pt2 = 5 }: Props): React.ReactElement { return ( @@ -55,189 +39,3 @@ export function To({ chain, fontSize1 = 28, formatted, identiconSize = 31, label ); } - -type TransferType = 'All' | 'Max' | 'Normal'; - -interface Props { - address: string; - amount: string; - api: ApiPromise | undefined; - chain: Chain | null | undefined; - recipientAddress: string | undefined; - recipientName: string | undefined; - transfer: SubmittableExtrinsicFunction<'promise', AnyTuple> | undefined; - transferType: TransferType | undefined; - setShow: React.Dispatch>; - show: boolean; - estimatedFee: Balance | undefined; -} - -export default function Review({ address, amount, api, chain, estimatedFee, recipientAddress, recipientName, setShow, show, transfer, transferType }: Props): React.ReactElement { - const { t } = useTranslation(); - const formatted = useFormatted(address); - const proxies = useProxies(api, formatted); - const decimal = useDecimal(address); - const token = useToken(address); - const name = useAccountDisplay(address); - const onAction = useContext(ActionContext); - - const [password, setPassword] = useState(); - const [isPasswordError, setIsPasswordError] = useState(false); - const [selectedProxy, setSelectedProxy] = useState(); - const [proxyItems, setProxyItems] = useState(); - const [txInfo, setTxInfo] = useState(); - const [showWaitScreen, setShowWaitScreen] = useState(false); - const [showConfirmation, setShowConfirmation] = useState(false); - - const selectedProxyAddress = selectedProxy?.delegate as unknown as string; - const selectedProxyName = useAccountDisplay(getSubstrateAddress(selectedProxyAddress)); - - const goToMyAccounts = useCallback(() => { - onAction('/'); - }, [onAction]); - - useEffect((): void => { - const fetchedProxyItems = proxies?.map((p: Proxy) => ({ proxy: p, status: 'current' })) as ProxyItem[]; - - setProxyItems(fetchedProxyItems); - }, [proxies]); - - const send = useCallback(async () => { - try { - if (!formatted || !transfer || !api || !decimal) { - return; - } - - const from = selectedProxyAddress ?? formatted; - const signer = keyring.getPair(from); - - signer.unlock(password); - - setShowWaitScreen(true); - let params = []; - - if (['All', 'Max'].includes(transferType)) { - const keepAlive = transferType === 'Max'; - - params = [recipientAddress, keepAlive]; - } else { - const amountAsBN = amountToMachine(amount, decimal); - - params = [recipientAddress, amountAsBN]; - } - - const { block, failureText, fee, success, txHash } = await broadcast(api, transfer, params, signer, formatted, selectedProxy); - - const info = { - action: 'Transfer', - amount, - block: block || 0, - date: Date.now(), - failureText, - fee: fee || String(estimatedFee || 0), - from: { address: formatted, name }, - subAction: 'Send', - success, - throughProxy: selectedProxyAddress ? { address: selectedProxyAddress, name: selectedProxyName } : undefined, - to: { address: recipientAddress, name: recipientName }, - txHash: txHash || '' - }; - - setTxInfo({ ...info, api, chain: chain as any }); - - saveAsHistory(from, info); - - setShowWaitScreen(false); - setShowConfirmation(true); - } catch (e) { - console.log('error:', e); - setIsPasswordError(true); - } - }, [name, amount, api, chain, decimal, estimatedFee, formatted, password, recipientAddress, recipientName, selectedProxy, selectedProxyAddress, selectedProxyName, transfer, transferType]); - - const _onBackClick = useCallback(() => { - setShow(false); - }, [setShow]); - - return ( - - - ('Send Fund')} - withSteps={{ - current: 2, - total: 2 - }} - /> - {isPasswordError && - - } - - - - - - - ('Send')} - genesisHash={chain?.genesisHash} - isPasswordError={isPasswordError} - label={t('Password for {{name}}', { replace: { name: selectedProxyName || name || '' } })} - onChange={setPassword} - onConfirmClick={send} - proxiedAddress={formatted} - proxies={proxyItems} - proxyTypeFilter={PROXY_TYPE.SEND_FUND} - selectedProxy={selectedProxy} - setIsPasswordError={setIsPasswordError} - setSelectedProxy={setSelectedProxy} - style={{ - bottom: '80px', - left: '4%', - position: 'absolute', - width: '92%' - }} - /> - - {txInfo && ( - - - ) - } - - - ); -} diff --git a/packages/extension-polkagate/src/popup/send/partial/SendTxDetail.tsx b/packages/extension-polkagate/src/popup/send/partial/SendTxDetail.tsx deleted file mode 100644 index 03a268721..000000000 --- a/packages/extension-polkagate/src/popup/send/partial/SendTxDetail.tsx +++ /dev/null @@ -1,89 +0,0 @@ -// Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors -// SPDX-License-Identifier: Apache-2.0 - -/* eslint-disable react/jsx-max-props-per-line */ - -import type { TxInfo } from '../../../util/types'; - -import { Divider, Grid, Typography } from '@mui/material'; -import React from 'react'; - -import { ShortAddress } from '../../../components'; -import { useTranslation } from '../../../hooks'; -import ThroughProxy from '../../../partials/ThroughProxy'; - -interface Props { - txInfo: TxInfo; -} - -export default function SendTxDetail ({ txInfo }: Props): React.ReactElement { - const { t } = useTranslation(); - const token = txInfo.api.registry.chainTokens[0]; - - return ( - <> - - - {t('From:')} - - - {txInfo.from.name} - - - - - - {txInfo.throughProxy && - - - - - } - - - {t('To:')} - - - {txInfo?.to?.name} - - - - - - - - - {t('Amount:')} - - - {`${txInfo.amount} ${token}`} - - - - ); -} diff --git a/packages/extension-polkagate/src/popup/staking/partial/SelectValidatorsReview.tsx b/packages/extension-polkagate/src/popup/staking/partial/SelectValidatorsReview.tsx index ca5883caa..2cda4566c 100644 --- a/packages/extension-polkagate/src/popup/staking/partial/SelectValidatorsReview.tsx +++ b/packages/extension-polkagate/src/popup/staking/partial/SelectValidatorsReview.tsx @@ -10,7 +10,6 @@ import type { ApiPromise } from '@polkadot/api'; import type { DeriveAccountInfo } from '@polkadot/api-derive/types'; -import type { Balance } from '@polkadot/types/interfaces'; import type { BN } from '@polkadot/util'; import type { Proxy, ProxyItem, StakingConsts, TxInfo, ValidatorInfo } from '../../../util/types'; @@ -18,10 +17,9 @@ import { Container, Grid } from '@mui/material'; import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react'; import keyring from '@polkadot/ui-keyring'; -import { BN_ONE } from '@polkadot/util'; import { ActionContext, Motion, PasswordUseProxyConfirm, Popup, ShowValue, WrongPasswordAlert } from '../../../components'; -import { useAccountDisplay, useChain, useDecimal, useFormatted, useProxies, useToken, useTranslation } from '../../../hooks'; +import { useAccountDisplay, useEstimatedFee, useInfo, useProxies, useTranslation } from '../../../hooks'; import { HeaderBrand, SubTitle, WaitScreen } from '../../../partials'; import Confirmation from '../../../partials/Confirmation'; import broadcast from '../../../util/api/broadcast'; @@ -44,13 +42,12 @@ interface Props { export default function Review ({ address, allValidatorsIdentities, api, newSelectedValidators, poolId, setShow, show, staked, stakingConsts }: Props): React.ReactElement { const { t } = useTranslation(); - const formatted = useFormatted(address); - const chain = useChain(address); + + const { chain, decimal, formatted, token} = useInfo(address); const proxies = useProxies(api, formatted); - const token = useToken(address); - const decimal = useDecimal(address); const name = useAccountDisplay(address); const onAction = useContext(ActionContext); + const [password, setPassword] = useState(); const [isPasswordError, setIsPasswordError] = useState(false); const [selectedProxy, setSelectedProxy] = useState(); @@ -58,7 +55,6 @@ export default function Review ({ address, allValidatorsIdentities, api, newSele const [txInfo, setTxInfo] = useState(); const [showWaitScreen, setShowWaitScreen] = useState(false); const [showConfirmation, setShowConfirmation] = useState(false); - const [estimatedFee, setEstimatedFee] = useState(); const nominated = api && (poolId ? api.tx['nominationPools']['nominate'] : api.tx['staking']['nominate']); const params = useMemo(() => { @@ -69,6 +65,7 @@ export default function Review ({ address, allValidatorsIdentities, api, newSele const selectedProxyAddress = selectedProxy?.delegate as unknown as string; const selectedProxyName = useAccountDisplay(getSubstrateAddress(selectedProxyAddress)); + const estimatedFee = useEstimatedFee(address, nominated, params); const goToStakingHome = useCallback(() => { setShow(false); @@ -82,18 +79,6 @@ export default function Review ({ address, allValidatorsIdentities, api, newSele onAction('/'); }, [onAction, setShow]); - useEffect((): void => { - if (!api) { - return; - } - - if (!api?.call?.['transactionPaymentApi']) { - return setEstimatedFee(api?.createType('Balance', BN_ONE) as Balance); - } - - nominated && formatted && nominated(...params).paymentInfo(formatted).then((i) => setEstimatedFee(i?.partialFee)).catch(console.error); - }, [nominated, formatted, params, api]); - useEffect((): void => { const fetchedProxyItems = proxies?.map((p: Proxy) => ({ proxy: p, status: 'current' })) as ProxyItem[]; diff --git a/packages/extension-polkagate/src/popup/staking/pool/myPool/SetState.tsx b/packages/extension-polkagate/src/popup/staking/pool/myPool/SetState.tsx index 5395852ca..a4aafc634 100644 --- a/packages/extension-polkagate/src/popup/staking/pool/myPool/SetState.tsx +++ b/packages/extension-polkagate/src/popup/staking/pool/myPool/SetState.tsx @@ -3,7 +3,6 @@ /* eslint-disable react/jsx-max-props-per-line */ -import type { Balance } from '@polkadot/types/interfaces'; import type { AccountId } from '@polkadot/types/interfaces/runtime'; import type { MyPoolInfo, Proxy, ProxyItem, TxInfo } from '../../../../util/types'; @@ -11,10 +10,9 @@ import { Divider, Grid, Typography } from '@mui/material'; import React, { useCallback, useContext, useEffect, useState } from 'react'; import keyring from '@polkadot/ui-keyring'; -import { BN_ONE } from '@polkadot/util'; import { AccountWithProxyInConfirmation, ActionContext, Motion, PasswordUseProxyConfirm, Popup, ShowBalance, WrongPasswordAlert } from '../../../../components'; -import { useAccountDisplay, useInfo, useProxies, useTranslation } from '../../../../hooks'; +import { useAccountDisplay, useEstimatedFee, useInfo, useProxies, useTranslation } from '../../../../hooks'; import { HeaderBrand, SubTitle, WaitScreen } from '../../../../partials'; import Confirmation from '../../../../partials/Confirmation'; import { signAndSend } from '../../../../util/api'; @@ -53,29 +51,15 @@ export default function SetState ({ address, formatted, headerText, helperText, const selectedProxyAddress = selectedProxy?.delegate as unknown as string; const selectedProxyName = useAccountDisplay(getSubstrateAddress(selectedProxyAddress)); - const [estimatedFee, setEstimatedFee] = useState(); - const batchAll = api?.tx['utility']['batchAll']; const chilled = api?.tx['nominationPools']['chill']; const poolSetState = api?.tx['nominationPools']['setState'](pool.poolId.toString(), state); // (poolId, state) + const estimatedFee = useEstimatedFee(address, poolSetState); const backToStake = useCallback(() => { setShow(false); }, [setShow]); - useEffect(() => { - if (!api) { - return; - } - - if (!api?.call?.['transactionPaymentApi']) { - return setEstimatedFee(api?.createType('Balance', BN_ONE) as Balance); - } - - // eslint-disable-next-line no-void - void poolSetState?.paymentInfo(formatted).then((i) => setEstimatedFee(i?.partialFee)); - }, [api, formatted, poolSetState]); - const goToStakingHome = useCallback(() => { setShow(false); diff --git a/packages/extension-polkagate/src/popup/staking/pool/nominations/remove/index.tsx b/packages/extension-polkagate/src/popup/staking/pool/nominations/remove/index.tsx index 015ffb701..64eae0c06 100644 --- a/packages/extension-polkagate/src/popup/staking/pool/nominations/remove/index.tsx +++ b/packages/extension-polkagate/src/popup/staking/pool/nominations/remove/index.tsx @@ -10,17 +10,15 @@ import type { ApiPromise } from '@polkadot/api'; import type { Chain } from '@polkadot/extension-chains/types'; -import type { Balance } from '@polkadot/types/interfaces'; import type { Proxy, ProxyItem, TxInfo } from '../../../../../util/types'; import { Divider, Grid, Typography } from '@mui/material'; import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react'; import keyring from '@polkadot/ui-keyring'; -import { BN_ONE } from '@polkadot/util'; import { AccountHolderWithProxy, ActionContext, Motion, PasswordUseProxyConfirm, Popup, ShowValue, WrongPasswordAlert } from '../../../../../components'; -import { useAccountDisplay, useProxies, useTranslation } from '../../../../../hooks'; +import { useAccountDisplay, useEstimatedFee, useProxies, useTranslation } from '../../../../../hooks'; import { HeaderBrand, SubTitle, WaitScreen } from '../../../../../partials'; import Confirmation from '../../../../../partials/Confirmation'; import broadcast from '../../../../../util/api/broadcast'; @@ -51,10 +49,10 @@ export default function RemoveValidators ({ address, api, chain, formatted, pool const [txInfo, setTxInfo] = useState(); const [showWaitScreen, setShowWaitScreen] = useState(false); const [showConfirmation, setShowConfirmation] = useState(false); - const [estimatedFee, setEstimatedFee] = useState(); const chilled = api?.tx['nominationPools']['chill']; const params = useMemo(() => [poolId], [poolId]); + const estimatedFee = useEstimatedFee(address, chilled, params); const selectedProxyAddress = selectedProxy?.delegate as unknown as string; const selectedProxyName = useAccountDisplay(getSubstrateAddress(selectedProxyAddress)); @@ -77,18 +75,6 @@ export default function RemoveValidators ({ address, api, chain, formatted, pool setProxyItems(fetchedProxyItems); }, [proxies]); - useEffect((): void => { - if (!api) { - return; - } - - if (!api?.call?.['transactionPaymentApi']) { - return setEstimatedFee(api?.createType('Balance', BN_ONE) as Balance); - } - - chilled?.(...params).paymentInfo(formatted).then((i) => setEstimatedFee(i?.partialFee)).catch(console.error); - }, [api, chilled, formatted, params, poolId]); - const remove = useCallback(async () => { try { if (!formatted || !chilled || !api) { diff --git a/packages/extension-polkagate/src/popup/staking/pool/redeem/index.tsx b/packages/extension-polkagate/src/popup/staking/pool/redeem/index.tsx index 855163d99..f7a4d8923 100644 --- a/packages/extension-polkagate/src/popup/staking/pool/redeem/index.tsx +++ b/packages/extension-polkagate/src/popup/staking/pool/redeem/index.tsx @@ -1,6 +1,5 @@ // Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors // SPDX-License-Identifier: Apache-2.0 -// @ts-nocheck /** * @description @@ -8,23 +7,22 @@ * */ import type { ApiPromise } from '@polkadot/api'; +import type { Chain } from '@polkadot/extension-chains/types'; +import type { BN } from '@polkadot/util'; +import type { Proxy, ProxyItem, TxInfo } from '../../../../util/types'; import { Container } from '@mui/material'; import React, { useCallback, useContext, useEffect, useState } from 'react'; -import type { Chain } from '@polkadot/extension-chains/types'; - -import type { Balance } from '@polkadot/types/interfaces'; import keyring from '@polkadot/ui-keyring'; -import { BN, BN_ONE, BN_ZERO } from '@polkadot/util'; +import { BN_ZERO } from '@polkadot/util'; import { AccountHolderWithProxy, ActionContext, AmountFee, FormatBalance, Motion, PasswordUseProxyConfirm, Popup, WrongPasswordAlert } from '../../../../components'; -import { useAccountDisplay, useProxies, useTranslation, useUnSupportedNetwork } from '../../../../hooks'; +import { useAccountDisplay, useEstimatedFee, useProxies, useTranslation, useUnSupportedNetwork } from '../../../../hooks'; import { HeaderBrand, SubTitle, WaitScreen } from '../../../../partials'; import Confirmation from '../../../../partials/Confirmation'; import broadcast from '../../../../util/api/broadcast'; import { PROXY_TYPE, STAKING_CHAINS } from '../../../../util/constants'; -import type { Proxy, ProxyItem, TxInfo } from '../../../../util/types'; import { amountToHuman, getSubstrateAddress, saveAsHistory } from '../../../../util/utils'; import TxDetail from '../rewards/partials/TxDetail'; @@ -40,7 +38,7 @@ interface Props { setRefresh: React.Dispatch> } -export default function RedeemableWithdrawReview({ address, amount, api, available, chain, formatted, setRefresh, setShow, show }: Props): React.ReactElement { +export default function RedeemableWithdrawReview ({ address, amount, api, available, chain, formatted, setRefresh, setShow, show }: Props): React.ReactElement { const { t } = useTranslation(); const proxies = useProxies(api, formatted); const name = useAccountDisplay(address); @@ -55,13 +53,14 @@ export default function RedeemableWithdrawReview({ address, amount, api, availab const [txInfo, setTxInfo] = useState(); const [showWaitScreen, setShowWaitScreen] = useState(false); const [showConfirmation, setShowConfirmation] = useState(false); - const [estimatedFee, setEstimatedFee] = useState(); const selectedProxyAddress = selectedProxy?.delegate as unknown as string; const selectedProxyName = useAccountDisplay(getSubstrateAddress(selectedProxyAddress)); const tx = api.tx['nominationPools']['withdrawUnbonded']; + const estimatedFee = useEstimatedFee(address, tx, [formatted, 100]); /** 100 is a dummy spanCount */ + const decimal = api.registry.chainDecimals[0]; const goToStakingHome = useCallback(() => { @@ -77,20 +76,6 @@ export default function RedeemableWithdrawReview({ address, amount, api, availab setProxyItems(fetchedProxyItems); }, [proxies]); - useEffect((): void => { - if (!api) { - return; - } - - if (!api?.call?.['transactionPaymentApi']) { - return setEstimatedFee(api?.createType('Balance', BN_ONE)); - } - - const params = [formatted, 100];/** 100 is a dummy spanCount */ - - tx(...params).paymentInfo(formatted).then((i) => setEstimatedFee(i?.partialFee)).catch(console.error); - }, [tx, formatted, api]); - const submit = useCallback(async () => { try { if (!formatted) { diff --git a/packages/extension-polkagate/src/popup/staking/pool/rewards/Stake.tsx b/packages/extension-polkagate/src/popup/staking/pool/rewards/Stake.tsx index e930bc8e4..17ce0dd4f 100644 --- a/packages/extension-polkagate/src/popup/staking/pool/rewards/Stake.tsx +++ b/packages/extension-polkagate/src/popup/staking/pool/rewards/Stake.tsx @@ -1,6 +1,5 @@ // Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors // SPDX-License-Identifier: Apache-2.0 -// @ts-nocheck /* eslint-disable react/jsx-max-props-per-line */ @@ -10,23 +9,21 @@ * */ import type { ApiPromise } from '@polkadot/api'; +import type { Chain } from '@polkadot/extension-chains/types'; +import type { BN } from '@polkadot/util'; +import type { Proxy, ProxyItem, TxInfo } from '../../../../util/types'; import { Container } from '@mui/material'; import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react'; -import type { Chain } from '@polkadot/extension-chains/types'; - -import type { Balance } from '@polkadot/types/interfaces'; import keyring from '@polkadot/ui-keyring'; -import { BN, BN_ONE } from '@polkadot/util'; import { AccountHolderWithProxy, ActionContext, AmountFee, Motion, PasswordUseProxyConfirm, Popup, ShowBalance2, WrongPasswordAlert } from '../../../../components'; -import { useAccountDisplay, useProxies, useTranslation } from '../../../../hooks'; +import { useAccountDisplay, useEstimatedFee, useProxies, useTranslation } from '../../../../hooks'; import { HeaderBrand, SubTitle, WaitScreen } from '../../../../partials'; import Confirmation from '../../../../partials/Confirmation'; import broadcast from '../../../../util/api/broadcast'; import { PROXY_TYPE } from '../../../../util/constants'; -import type { Proxy, ProxyItem, TxInfo } from '../../../../util/types'; import { amountToHuman, getSubstrateAddress, saveAsHistory } from '../../../../util/utils'; import TxDetail from './partials/TxDetail'; @@ -42,7 +39,7 @@ interface Props { setRefresh: React.Dispatch>; } -export default function RewardsStakeReview({ address, amount, api, chain, formatted, setRefresh, setShow, show, staked }: Props): React.ReactElement { +export default function RewardsStakeReview ({ address, amount, api, chain, formatted, setRefresh, setShow, show, staked }: Props): React.ReactElement { const { t } = useTranslation(); const proxies = useProxies(api, formatted); const name = useAccountDisplay(address); @@ -55,7 +52,6 @@ export default function RewardsStakeReview({ address, amount, api, chain, format const [txInfo, setTxInfo] = useState(); const [showWaitScreen, setShowWaitScreen] = useState(false); const [showConfirmation, setShowConfirmation] = useState(false); - const [estimatedFee, setEstimatedFee] = useState(); const selectedProxyAddress = selectedProxy?.delegate as unknown as string; const selectedProxyName = useAccountDisplay(getSubstrateAddress(selectedProxyAddress)); @@ -63,6 +59,8 @@ export default function RewardsStakeReview({ address, amount, api, chain, format const params = useMemo(() => ['Rewards'], []); const decimal = api.registry.chainDecimals[0]; + const estimatedFee = useEstimatedFee(address, tx, params); + const goToStakingHome = useCallback(() => { setShow(false); setRefresh(true); @@ -75,18 +73,6 @@ export default function RewardsStakeReview({ address, amount, api, chain, format setProxyItems(fetchedProxyItems); }, [proxies]); - useEffect((): void => { - if (!api) { - return; - } - - if (!api?.call?.['transactionPaymentApi']) { - return setEstimatedFee(api?.createType('Balance', BN_ONE)); - } - - tx(...params).paymentInfo(formatted).then((i) => setEstimatedFee(i?.partialFee)).catch(console.error); - }, [tx, formatted, params, api]); - const submit = useCallback(async () => { try { if (!formatted) { diff --git a/packages/extension-polkagate/src/popup/staking/pool/rewards/Withdraw.tsx b/packages/extension-polkagate/src/popup/staking/pool/rewards/Withdraw.tsx index 5f8d71481..d8bf810a9 100644 --- a/packages/extension-polkagate/src/popup/staking/pool/rewards/Withdraw.tsx +++ b/packages/extension-polkagate/src/popup/staking/pool/rewards/Withdraw.tsx @@ -1,6 +1,5 @@ // Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors // SPDX-License-Identifier: Apache-2.0 -// @ts-nocheck /* eslint-disable react/jsx-max-props-per-line */ @@ -10,23 +9,22 @@ * */ import type { ApiPromise } from '@polkadot/api'; +import type { Chain } from '@polkadot/extension-chains/types'; +import type { BN } from '@polkadot/util'; +import type { Proxy, ProxyItem, TxInfo } from '../../../../util/types'; import { Container } from '@mui/material'; import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react'; -import type { Chain } from '@polkadot/extension-chains/types'; - -import type { Balance } from '@polkadot/types/interfaces'; import keyring from '@polkadot/ui-keyring'; -import { BN, BN_ONE, BN_ZERO } from '@polkadot/util'; +import { BN_ZERO } from '@polkadot/util'; import { AccountHolderWithProxy, ActionContext, AmountFee, Motion, PasswordUseProxyConfirm, Popup, ShowBalance2, WrongPasswordAlert } from '../../../../components'; -import { useAccountDisplay, useProxies, useTranslation } from '../../../../hooks'; +import { useAccountDisplay, useEstimatedFee, useProxies, useTranslation } from '../../../../hooks'; import { HeaderBrand, SubTitle, WaitScreen } from '../../../../partials'; import Confirmation from '../../../../partials/Confirmation'; import broadcast from '../../../../util/api/broadcast'; import { PROXY_TYPE } from '../../../../util/constants'; -import type { Proxy, ProxyItem, TxInfo } from '../../../../util/types'; import { amountToHuman, getSubstrateAddress, saveAsHistory } from '../../../../util/utils'; import TxDetail from './partials/TxDetail'; @@ -54,13 +52,14 @@ export default function RewardsWithdrawReview({ address, amount, api, available, const [txInfo, setTxInfo] = useState(); const [showWaitScreen, setShowWaitScreen] = useState(false); const [showConfirmation, setShowConfirmation] = useState(false); - const [estimatedFee, setEstimatedFee] = useState(); const selectedProxyAddress = selectedProxy?.delegate as unknown as string; const selectedProxyName = useAccountDisplay(getSubstrateAddress(selectedProxyAddress)); const tx = api.tx['nominationPools']['claimPayout']; const params = useMemo(() => [] as unknown[], []); + const estimatedFee = useEstimatedFee(address, tx, params); + const decimal = api.registry.chainDecimals[0]; const goToStakingHome = useCallback(() => { @@ -75,18 +74,6 @@ export default function RewardsWithdrawReview({ address, amount, api, available, setProxyItems(fetchedProxyItems); }, [proxies]); - useEffect((): void => { - if (!api) { - return; - } - - if (!api?.call?.['transactionPaymentApi']) { - return setEstimatedFee(api?.createType('Balance', BN_ONE)); - } - - tx(...params).paymentInfo(formatted).then((i) => setEstimatedFee(i?.partialFee)).catch(console.error); - }, [tx, formatted, params, api]); - const submit = useCallback(async () => { try { if (!formatted) { diff --git a/packages/extension-polkagate/src/popup/staking/pool/stake/bondExtra/Review.tsx b/packages/extension-polkagate/src/popup/staking/pool/stake/bondExtra/Review.tsx index 69fba1b0e..d4d614e47 100644 --- a/packages/extension-polkagate/src/popup/staking/pool/stake/bondExtra/Review.tsx +++ b/packages/extension-polkagate/src/popup/staking/pool/stake/bondExtra/Review.tsx @@ -1,6 +1,5 @@ // Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors // SPDX-License-Identifier: Apache-2.0 -// @ts-nocheck /* eslint-disable react/jsx-max-props-per-line */ @@ -9,12 +8,16 @@ * this component opens bondExtra review page * */ +import type { ApiPromise } from '@polkadot/api'; +import type { DeriveStakingAccount } from '@polkadot/api-derive/types'; import type { Balance } from '@polkadot/types/interfaces'; +//@ts-ignore +import type { PalletNominationPoolsBondedPoolInner, PalletNominationPoolsPoolMember } from '@polkadot/types/lookup'; +import type { MyPoolInfo, Proxy, ProxyItem, TxInfo } from '../../../../../util/types'; import { Divider, Grid, Typography } from '@mui/material'; import React, { useCallback, useContext, useEffect, useState } from 'react'; -import { ApiPromise } from '@polkadot/api'; import keyring from '@polkadot/ui-keyring'; import { BN, BN_ZERO } from '@polkadot/util'; @@ -23,11 +26,8 @@ import { useAccountDisplay, useChain, useFormatted, useProxies, useTranslation } import { Confirmation, HeaderBrand, SubTitle, WaitScreen } from '../../../../../partials'; import { broadcast } from '../../../../../util/api'; import { PROXY_TYPE } from '../../../../../util/constants'; -import type { MyPoolInfo, Proxy, ProxyItem, TxInfo } from '../../../../../util/types'; import { amountToHuman, getSubstrateAddress, saveAsHistory } from '../../../../../util/utils'; import BondExtraTxDetail from './partial/BondExtraTxDetail'; -import type { PalletNominationPoolsBondedPoolInner, PalletNominationPoolsPoolMember } from '@polkadot/types/lookup'; -import type { DeriveStakingAccount } from '@polkadot/api-derive/types'; interface Props { api: ApiPromise; @@ -39,7 +39,7 @@ interface Props { pool: MyPoolInfo; } -export default function Review({ address, api, bondAmount, estimatedFee, pool, setShowReview, showReview }: Props): React.ReactElement { +export default function Review ({ address, api, bondAmount, estimatedFee, pool, setShowReview, showReview }: Props): React.ReactElement { const { t } = useTranslation(); const chain = useChain(address); const onAction = useContext(ActionContext); diff --git a/packages/extension-polkagate/src/popup/staking/pool/stake/createPool/index.tsx b/packages/extension-polkagate/src/popup/staking/pool/stake/createPool/index.tsx index 41f40b386..26ce32038 100644 --- a/packages/extension-polkagate/src/popup/staking/pool/stake/createPool/index.tsx +++ b/packages/extension-polkagate/src/popup/staking/pool/stake/createPool/index.tsx @@ -154,11 +154,11 @@ export default function CreatePool(): React.ReactElement { } if (!api?.call?.['transactionPaymentApi']) { - return setEstimatedFee(api.createType('Balance', BN_ONE)); + return setEstimatedFee(api.createType('Balance', BN_ONE) as Balance); } api && api.tx['nominationPools']['create'](String(amountAsBN.gte(BN_ONE) ? amountAsBN : BN_ONE), formatted, nominatorId, bouncerId).paymentInfo(formatted).then((i) => { - setEstimatedFee(api.createType('Balance', i?.partialFee)); + setEstimatedFee(api.createType('Balance', i?.partialFee) as Balance); }).catch(console.error); api && api.tx['nominationPools']['create'](String(availableBalance), formatted, nominatorId, bouncerId).paymentInfo(formatted).then((i) => { diff --git a/packages/extension-polkagate/src/popup/staking/pool/unstake/Review.tsx b/packages/extension-polkagate/src/popup/staking/pool/unstake/Review.tsx index d2ff2e1f2..96071466d 100644 --- a/packages/extension-polkagate/src/popup/staking/pool/unstake/Review.tsx +++ b/packages/extension-polkagate/src/popup/staking/pool/unstake/Review.tsx @@ -1,6 +1,5 @@ // Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors // SPDX-License-Identifier: Apache-2.0 -// @ts-nocheck /* eslint-disable react/jsx-max-props-per-line */ @@ -11,14 +10,14 @@ import type { ApiPromise } from '@polkadot/api'; import type { SubmittableExtrinsicFunction } from '@polkadot/api/types'; +import type { Chain } from '@polkadot/extension-chains/types'; +import type { Balance } from '@polkadot/types/interfaces'; import type { AnyTuple } from '@polkadot/types/types'; +import type { MyPoolInfo, Proxy, ProxyItem, TxInfo } from '../../../../util/types'; import { Container, Grid } from '@mui/material'; import React, { useCallback, useContext, useEffect, useState } from 'react'; -import type { Chain } from '@polkadot/extension-chains/types'; - -import type { Balance } from '@polkadot/types/interfaces'; import keyring from '@polkadot/ui-keyring'; import { BN, BN_ZERO } from '@polkadot/util'; @@ -27,9 +26,8 @@ import { useAccountDisplay, useDecimal, useProxies, useToken, useTranslation } f import { HeaderBrand, SubTitle, WaitScreen } from '../../../../partials'; import Confirmation from '../../../../partials/Confirmation'; import { signAndSend } from '../../../../util/api'; -import { PROXY_TYPE } from '../../../../util/constants'; import broadcast from '../../../../util/api/broadcast'; -import type { MyPoolInfo, Proxy, ProxyItem, TxInfo } from '../../../../util/types'; +import { PROXY_TYPE } from '../../../../util/constants'; import { amountToMachine, getSubstrateAddress, saveAsHistory } from '../../../../util/utils'; import TxDetail from './partials/TxDetail'; @@ -52,7 +50,7 @@ interface Props { pool: MyPoolInfo } -export default function Review({ address, amount, api, chain, estimatedFee, formatted, maxUnlockingChunks, pool, poolWithdrawUnbonded, redeemDate, setShow, show, total, unbonded, unlockingLen, unstakeAllAmount }: Props): React.ReactElement { +export default function Review ({ address, amount, api, chain, estimatedFee, formatted, maxUnlockingChunks, pool, poolWithdrawUnbonded, redeemDate, setShow, show, total, unbonded, unlockingLen, unstakeAllAmount }: Props): React.ReactElement { const { t } = useTranslation(); const proxies = useProxies(api, formatted); const name = useAccountDisplay(address); diff --git a/packages/extension-polkagate/src/popup/staking/pool/unstake/index.tsx b/packages/extension-polkagate/src/popup/staking/pool/unstake/index.tsx index 486cced61..f565c64a4 100644 --- a/packages/extension-polkagate/src/popup/staking/pool/unstake/index.tsx +++ b/packages/extension-polkagate/src/popup/staking/pool/unstake/index.tsx @@ -1,6 +1,5 @@ // Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors // SPDX-License-Identifier: Apache-2.0 -// @ts-nocheck /* eslint-disable react/jsx-max-props-per-line */ /* eslint-disable react/jsx-first-prop-new-line */ @@ -43,7 +42,7 @@ export const CONDITION_MAP = { REMOVE_ALL: 2 }; -export default function Index(): React.ReactElement { +export default function Index (): React.ReactElement { const { t } = useTranslation(); const { state } = useLocation(); const theme = useTheme(); @@ -147,7 +146,7 @@ export default function Index(): React.ReactElement { const params = [formatted, amountToMachine(amount, decimal)]; if (!api?.call?.['transactionPaymentApi']) { - return setEstimatedFee(api?.createType('Balance', BN_ONE)); + return setEstimatedFee(api?.createType('Balance', BN_ONE) as Balance); } // eslint-disable-next-line no-void @@ -155,12 +154,11 @@ export default function Index(): React.ReactElement { const fee = i?.partialFee; if (unlockingLen < maxUnlockingChunks) { - setEstimatedFee(fee); + setEstimatedFee(api.createType('Balance', fee) as Balance); } else { const dummyParams = [1, 1]; - // eslint-disable-next-line no-void - void poolWithdrawUnbonded(...dummyParams).paymentInfo(formatted).then((j) => setEstimatedFee(api.createType('Balance', fee.add(j?.partialFee)))); + poolWithdrawUnbonded(...dummyParams).paymentInfo(formatted).then((j) => setEstimatedFee(api.createType('Balance', fee.add(j?.partialFee)) as Balance)).catch(console.error); } }).catch(console.error); }, [amount, api, decimal, formatted, maxUnlockingChunks, poolWithdrawUnbonded, unbonded, unlockingLen]); diff --git a/packages/extension-polkagate/src/popup/staking/solo/fastUnstake/Review.tsx b/packages/extension-polkagate/src/popup/staking/solo/fastUnstake/Review.tsx index 3604519e5..99ee6de57 100644 --- a/packages/extension-polkagate/src/popup/staking/solo/fastUnstake/Review.tsx +++ b/packages/extension-polkagate/src/popup/staking/solo/fastUnstake/Review.tsx @@ -1,6 +1,5 @@ // Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors // SPDX-License-Identifier: Apache-2.0 -// @ts-nocheck /* eslint-disable react/jsx-max-props-per-line */ @@ -10,23 +9,22 @@ * */ import type { ApiPromise } from '@polkadot/api'; +import type { Chain } from '@polkadot/extension-chains/types'; +import type { BN } from '@polkadot/util'; +import type { Proxy, ProxyItem, TxInfo } from '../../../../util/types'; import { Container, Grid, useTheme } from '@mui/material'; import React, { useCallback, useContext, useEffect, useState } from 'react'; -import type { Chain } from '@polkadot/extension-chains/types'; - -import type { Balance } from '@polkadot/types/interfaces'; import keyring from '@polkadot/ui-keyring'; -import { BN, BN_ONE, BN_ZERO } from '@polkadot/util'; +import { BN_ZERO } from '@polkadot/util'; import { AccountHolderWithProxy, ActionContext, AmountFee, Motion, PasswordUseProxyConfirm, Popup, ShowBalance2, Warning } from '../../../../components'; -import { useAccountDisplay, useDecimal, useProxies, useTranslation } from '../../../../hooks'; +import { useAccountDisplay, useDecimal, useEstimatedFee, useProxies, useTranslation } from '../../../../hooks'; import { HeaderBrand, SubTitle, WaitScreen } from '../../../../partials'; import Confirmation from '../../../../partials/Confirmation'; import broadcast from '../../../../util/api/broadcast'; import { PROXY_TYPE } from '../../../../util/constants'; -import type { Proxy, ProxyItem, TxInfo } from '../../../../util/types'; import { amountToHuman, getSubstrateAddress, saveAsHistory } from '../../../../util/utils'; import TxDetail from '../partials/TxDetail'; @@ -41,7 +39,7 @@ interface Props { available: BN; } -export default function FastUnstakeReview({ address, amount, api, available, chain, formatted, setShow, show }: Props): React.ReactElement { +export default function FastUnstakeReview ({ address, amount, api, available, chain, formatted, setShow, show }: Props): React.ReactElement { const { t } = useTranslation(); const proxies = useProxies(api, formatted); const name = useAccountDisplay(String(address)); @@ -56,12 +54,13 @@ export default function FastUnstakeReview({ address, amount, api, available, cha const [txInfo, setTxInfo] = useState(); const [showWaitScreen, setShowWaitScreen] = useState(false); const [showConfirmation, setShowConfirmation] = useState(false); - const [estimatedFee, setEstimatedFee] = useState(); const selectedProxyAddress = selectedProxy?.delegate as unknown as string; const selectedProxyName = useAccountDisplay(getSubstrateAddress(selectedProxyAddress)); const tx = api.tx['fastUnstake']['registerFastUnstake']; + const estimatedFee = useEstimatedFee(address, tx()); + const goToStakingHome = useCallback(() => { setShow(false); @@ -74,18 +73,6 @@ export default function FastUnstakeReview({ address, amount, api, available, cha setProxyItems(fetchedProxyItems); }, [proxies]); - useEffect((): void => { - if (!api) { - return; - } - - if (!api?.call?.['transactionPaymentApi']) { - return setEstimatedFee(api?.createType('Balance', BN_ONE)); - } - - tx().paymentInfo(formatted).then((i) => setEstimatedFee(i?.partialFee)).catch(console.error); - }, [api, tx, formatted]); - const submit = useCallback(async () => { try { if (!formatted || !decimal) { diff --git a/packages/extension-polkagate/src/popup/staking/solo/fastUnstake/index.tsx b/packages/extension-polkagate/src/popup/staking/solo/fastUnstake/index.tsx index f8118e5a7..1a8b829ea 100644 --- a/packages/extension-polkagate/src/popup/staking/solo/fastUnstake/index.tsx +++ b/packages/extension-polkagate/src/popup/staking/solo/fastUnstake/index.tsx @@ -4,19 +4,18 @@ /* eslint-disable react/jsx-max-props-per-line */ import type { ApiPromise } from '@polkadot/api'; -import type { Balance } from '@polkadot/types/interfaces'; import type { AccountStakingInfo, StakingConsts } from '../../../../util/types'; import CheckCircleOutlineSharpIcon from '@mui/icons-material/CheckCircleOutlineSharp'; import { Grid, Typography, useTheme } from '@mui/material'; -import React, { useCallback, useEffect, useMemo, useState } from 'react'; +import React, { useCallback, useMemo, useState } from 'react'; import { useParams } from 'react-router'; import { useHistory, useLocation } from 'react-router-dom'; -import { BN, BN_ONE, BN_ZERO } from '@polkadot/util'; +import { BN, BN_ZERO } from '@polkadot/util'; import { Motion, PButton, Progress, Warning } from '../../../../components'; -import { useBalances, useInfo, useIsExposed, useStakingAccount, useStakingConsts, useTranslation, useUnSupportedNetwork } from '../../../../hooks'; +import { useBalances, useEstimatedFee, useInfo, useIsExposed, useStakingAccount, useStakingConsts, useTranslation, useUnSupportedNetwork } from '../../../../hooks'; import { HeaderBrand, SubTitle } from '../../../../partials'; import { STAKING_CHAINS } from '../../../../util/constants'; import { amountToHuman } from '../../../../util/utils'; @@ -52,8 +51,12 @@ export default function Index (): React.ReactElement { const redeemable = useMemo(() => stakingAccount?.redeemable, [stakingAccount?.redeemable]); const availableBalance = useMemo(() => getValue('available', balances), [balances]); - const [estimatedFee, setEstimatedFee] = useState(); const [showFastUnstakeReview, setShowReview] = useState(false); + + const staked = useMemo((): BN | undefined => stakingAccount ? stakingAccount.stakingLedger.active as unknown as BN : undefined, [stakingAccount]); + const tx = api?.tx['fastUnstake']['registerFastUnstake']; + + const estimatedFee = useEstimatedFee(address, tx?.()); const hasEnoughDeposit = fastUnstakeDeposit && stakingConsts && myBalances && estimatedFee && getValue('available', myBalances) ? new BN(fastUnstakeDeposit).add(estimatedFee).lt(getValue('available', myBalances) || BN_ZERO) : undefined; @@ -65,21 +68,6 @@ export default function Index (): React.ReactElement { ? !isExposed && !hasUnlockingAndRedeemable && hasEnoughDeposit : undefined; - const staked = useMemo((): BN | undefined => stakingAccount ? stakingAccount.stakingLedger.active as unknown as BN : undefined, [stakingAccount]); - const tx = api?.tx['fastUnstake']['registerFastUnstake']; - - useEffect((): void => { - if (!api) { - return; - } - - if (!api?.call?.['transactionPaymentApi']) { - return setEstimatedFee(api?.createType('Balance', BN_ONE) as Balance); - } - - tx && formatted && tx().paymentInfo(formatted).then((i) => setEstimatedFee(i?.partialFee)).catch(console.error); - }, [api, tx, formatted]); - const onBackClick = useCallback(() => { history.push({ pathname: `/solo/${address}`, diff --git a/packages/extension-polkagate/src/popup/staking/solo/nominations/remove/index.tsx b/packages/extension-polkagate/src/popup/staking/solo/nominations/remove/index.tsx index a4842d44a..08ec9f4a4 100644 --- a/packages/extension-polkagate/src/popup/staking/solo/nominations/remove/index.tsx +++ b/packages/extension-polkagate/src/popup/staking/solo/nominations/remove/index.tsx @@ -10,17 +10,15 @@ import type { ApiPromise } from '@polkadot/api'; import type { Chain } from '@polkadot/extension-chains/types'; -import type { Balance } from '@polkadot/types/interfaces'; import type { Proxy, ProxyItem, TxInfo } from '../../../../../util/types'; import { Divider, Grid, Typography } from '@mui/material'; import React, { useCallback, useContext, useEffect, useState } from 'react'; import keyring from '@polkadot/ui-keyring'; -import { BN_ONE } from '@polkadot/util'; import { AccountHolderWithProxy, ActionContext, Motion, PasswordUseProxyConfirm, Popup, ShowValue, WrongPasswordAlert } from '../../../../../components'; -import { useAccountDisplay, useProxies, useTranslation } from '../../../../../hooks'; +import { useAccountDisplay, useEstimatedFee, useProxies, useTranslation } from '../../../../../hooks'; import { HeaderBrand, SubTitle, WaitScreen } from '../../../../../partials'; import Confirmation from '../../../../../partials/Confirmation'; import broadcast from '../../../../../util/api/broadcast'; @@ -51,9 +49,9 @@ export default function RemoveValidators ({ address, api, chain, formatted, setS const [txInfo, setTxInfo] = useState(); const [showWaitScreen, setShowWaitScreen] = useState(false); const [showConfirmation, setShowConfirmation] = useState(false); - const [estimatedFee, setEstimatedFee] = useState(); const chilled = api?.tx['staking']['chill']; + const estimatedFee = useEstimatedFee(address, chilled?.()); const selectedProxyAddress = selectedProxy?.delegate as unknown as string; const selectedProxyName = useAccountDisplay(getSubstrateAddress(selectedProxyAddress)); @@ -76,18 +74,6 @@ export default function RemoveValidators ({ address, api, chain, formatted, setS setProxyItems(fetchedProxyItems); }, [proxies]); - useEffect((): void => { - if (!api) { - return; - } - - if (!api?.call?.['transactionPaymentApi']) { - return setEstimatedFee(api?.createType('Balance', BN_ONE) as Balance); - } - - chilled?.().paymentInfo(formatted).then((i) => setEstimatedFee(i?.partialFee)).catch(console.error); - }, [api, chilled, formatted]); - const remove = useCallback(async () => { try { if (!formatted || !api || !chilled) { diff --git a/packages/extension-polkagate/src/popup/staking/solo/redeem/index.tsx b/packages/extension-polkagate/src/popup/staking/solo/redeem/index.tsx index 3a85bd294..b170d7693 100644 --- a/packages/extension-polkagate/src/popup/staking/solo/redeem/index.tsx +++ b/packages/extension-polkagate/src/popup/staking/solo/redeem/index.tsx @@ -1,6 +1,5 @@ // Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors // SPDX-License-Identifier: Apache-2.0 -// @ts-nocheck /* eslint-disable react/jsx-max-props-per-line */ @@ -10,24 +9,23 @@ * */ import type { ApiPromise } from '@polkadot/api'; +import type { Chain } from '@polkadot/extension-chains/types'; +import type { AccountId } from '@polkadot/types/interfaces/runtime'; +import type { BN } from '@polkadot/util'; +import type { Proxy, ProxyItem, TxInfo } from '../../../../util/types'; import { Container } from '@mui/material'; import React, { useCallback, useContext, useEffect, useState } from 'react'; -import type { Chain } from '@polkadot/extension-chains/types'; - -import type { Balance } from '@polkadot/types/interfaces'; -import type { AccountId } from '@polkadot/types/interfaces/runtime'; import keyring from '@polkadot/ui-keyring'; -import { BN, BN_ONE, BN_ZERO } from '@polkadot/util'; +import { BN_ZERO } from '@polkadot/util'; import { AccountHolderWithProxy, ActionContext, AmountFee, Motion, PasswordUseProxyConfirm, Popup, ShowBalance2, WrongPasswordAlert } from '../../../../components'; -import { useAccountDisplay, useProxies, useTranslation } from '../../../../hooks'; +import { useAccountDisplay, useEstimatedFee, useProxies, useTranslation } from '../../../../hooks'; import { HeaderBrand, SubTitle, WaitScreen } from '../../../../partials'; import Confirmation from '../../../../partials/Confirmation'; import broadcast from '../../../../util/api/broadcast'; import { PROXY_TYPE } from '../../../../util/constants'; -import type { Proxy, ProxyItem, TxInfo } from '../../../../util/types'; import { amountToHuman, getSubstrateAddress, saveAsHistory } from '../../../../util/utils'; import TxDetail from '../partials/TxDetail'; @@ -43,7 +41,7 @@ interface Props { setRefresh: React.Dispatch> } -export default function RedeemableWithdrawReview({ address, amount, api, available, chain, formatted, setRefresh, setShow, show }: Props): React.ReactElement { +export default function RedeemableWithdrawReview ({ address, amount, api, available, chain, formatted, setRefresh, setShow, show }: Props): React.ReactElement { const { t } = useTranslation(); const proxies = useProxies(api, formatted); const name = useAccountDisplay(String(address)); @@ -56,12 +54,13 @@ export default function RedeemableWithdrawReview({ address, amount, api, availab const [txInfo, setTxInfo] = useState(); const [showWaitScreen, setShowWaitScreen] = useState(false); const [showConfirmation, setShowConfirmation] = useState(false); - const [estimatedFee, setEstimatedFee] = useState(); const selectedProxyAddress = selectedProxy?.delegate as unknown as string; const selectedProxyName = useAccountDisplay(getSubstrateAddress(selectedProxyAddress)); const tx = api.tx['staking']['withdrawUnbonded']; // sign by controller + const estimatedFee = useEstimatedFee(String(address), tx, [100]);/** 100 is a dummy spanCount */ + const decimal = api.registry.chainDecimals[0]; const goToStakingHome = useCallback(() => { @@ -77,20 +76,6 @@ export default function RedeemableWithdrawReview({ address, amount, api, availab setProxyItems(fetchedProxyItems); }, [proxies]); - useEffect((): void => { - if (!api) { - return; - } - - if (!api?.call?.['transactionPaymentApi']) { - return setEstimatedFee(api?.createType('Balance', BN_ONE)); - } - - const params = [100];/** 100 is a dummy spanCount */ - - tx(...params).paymentInfo(formatted).then((i) => setEstimatedFee(i?.partialFee)).catch(console.error); - }, [api, tx, formatted]); - const submit = useCallback(async () => { try { if (!formatted) { diff --git a/packages/extension-polkagate/src/popup/staking/solo/restake/Review.tsx b/packages/extension-polkagate/src/popup/staking/solo/restake/Review.tsx index 1edb64d9a..75c12e150 100644 --- a/packages/extension-polkagate/src/popup/staking/solo/restake/Review.tsx +++ b/packages/extension-polkagate/src/popup/staking/solo/restake/Review.tsx @@ -1,6 +1,5 @@ // Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors // SPDX-License-Identifier: Apache-2.0 -// @ts-nocheck /* eslint-disable react/jsx-max-props-per-line */ @@ -11,24 +10,23 @@ import type { ApiPromise } from '@polkadot/api'; import type { SubmittableExtrinsicFunction } from '@polkadot/api/types'; +import type { Chain } from '@polkadot/extension-chains/types'; +import type { Balance } from '@polkadot/types/interfaces'; import type { AnyTuple } from '@polkadot/types/types'; +import type { BN } from '@polkadot/util'; +import type { Proxy, ProxyItem, TxInfo } from '../../../../util/types'; import { Container } from '@mui/material'; import React, { useCallback, useContext, useEffect, useState } from 'react'; -import type { Chain } from '@polkadot/extension-chains/types'; - -import type { Balance } from '@polkadot/types/interfaces'; import keyring from '@polkadot/ui-keyring'; -import { BN } from '@polkadot/util'; import { AccountHolderWithProxy, ActionContext, AmountFee, Motion, PasswordUseProxyConfirm, Popup, ShowBalance2, WrongPasswordAlert } from '../../../../components'; -import { useAccountDisplay, useDecimal, useProxies, useToken, useTranslation } from '../../../../hooks'; +import { useAccountDisplay, useInfo, useProxies, useTranslation } from '../../../../hooks'; import { HeaderBrand, SubTitle, WaitScreen } from '../../../../partials'; import Confirmation from '../../../../partials/Confirmation'; import broadcast from '../../../../util/api/broadcast'; import { PROXY_TYPE } from '../../../../util/constants'; -import type { Proxy, ProxyItem, TxInfo } from '../../../../util/types'; import { amountToHuman, getSubstrateAddress, saveAsHistory } from '../../../../util/utils'; import TxDetail from './partials/TxDetail'; @@ -46,12 +44,11 @@ interface Props { rebonded: SubmittableExtrinsicFunction<'promise', AnyTuple> | undefined; } -export default function Review({ address, amount, api, chain, estimatedFee, formatted, rebonded, setShow, show, total }: Props): React.ReactElement { +export default function Review ({ address, amount, api, chain, estimatedFee, formatted, rebonded, setShow, show, total }: Props): React.ReactElement { const { t } = useTranslation(); - const decimal = useDecimal(address); + const { decimal, token } = useInfo(address); const name = useAccountDisplay(address); const proxies = useProxies(api, formatted); - const token = useToken(address); const onAction = useContext(ActionContext); const [password, setPassword] = useState(); diff --git a/packages/extension-polkagate/src/popup/staking/solo/restake/index.tsx b/packages/extension-polkagate/src/popup/staking/solo/restake/index.tsx index da6d71991..aa285c2d1 100644 --- a/packages/extension-polkagate/src/popup/staking/solo/restake/index.tsx +++ b/packages/extension-polkagate/src/popup/staking/solo/restake/index.tsx @@ -1,11 +1,9 @@ // Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors // SPDX-License-Identifier: Apache-2.0 -// @ts-nocheck /* eslint-disable react/jsx-max-props-per-line */ import type { ApiPromise } from '@polkadot/api'; -import type { Balance } from '@polkadot/types/interfaces'; import type { AccountStakingInfo, StakingConsts } from '../../../../util/types'; import { Grid, useTheme } from '@mui/material'; @@ -13,10 +11,10 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react'; import { useParams } from 'react-router'; import { useHistory, useLocation } from 'react-router-dom'; -import { BN, BN_ONE, BN_ZERO } from '@polkadot/util'; +import { BN, BN_ZERO } from '@polkadot/util'; import { AmountWithOptions, Motion, PButton, Warning } from '../../../../components'; -import { useInfo, useStakingAccount, useTranslation, useUnSupportedNetwork } from '../../../../hooks'; +import { useEstimatedFee, useInfo, useStakingAccount, useTranslation, useUnSupportedNetwork } from '../../../../hooks'; import { HeaderBrand, SubTitle } from '../../../../partials'; import Asset from '../../../../partials/Asset'; import { MAX_AMOUNT_LENGTH, STAKING_CHAINS } from '../../../../util/constants'; @@ -42,7 +40,6 @@ export default function Index(): React.ReactElement { useUnSupportedNetwork(address, STAKING_CHAINS); const stakingAccount = useStakingAccount(formatted, state?.stakingAccount); - const [estimatedFee, setEstimatedFee] = useState(); const [amount, setAmount] = useState(); const [alert, setAlert] = useState(); const [showReview, setShowReview] = useState(false); @@ -53,7 +50,9 @@ export default function Index(): React.ReactElement { const amountAsBN = useMemo(() => amountToMachine(amount, decimal), [amount, decimal]); const totalStakeAfter = useMemo(() => staked && unlockingAmount && staked.add(amountAsBN), [amountAsBN, staked, unlockingAmount]); - const rebonded = api && api.tx['staking']['rebond']; // signer: Controller + const rebonded = api?.tx['staking']['rebond']; + + const estimatedFee = useEstimatedFee(address, rebonded, [amountAsBN]); useEffect(() => { if (!stakingAccount) { @@ -83,18 +82,6 @@ export default function Index(): React.ReactElement { setAlert(undefined); }, [unlockingAmount, t, amountAsBN]); - useEffect(() => { - if (!rebonded || !formatted) { - return; - } - - if (!api?.call?.['transactionPaymentApi']) { - return setEstimatedFee(api?.createType('Balance', BN_ONE)); - } - - rebonded(amountAsBN).paymentInfo(formatted).then((i) => setEstimatedFee(i?.partialFee)).catch(console.error); - }, [amountAsBN, api, formatted, rebonded]); - const onBackClick = useCallback(() => { history.push({ pathname: `/solo/${address}`, diff --git a/packages/extension-polkagate/src/popup/staking/solo/rewards/PendingRewards.tsx b/packages/extension-polkagate/src/popup/staking/solo/rewards/PendingRewards.tsx index 4fff19b92..b536e8811 100644 --- a/packages/extension-polkagate/src/popup/staking/solo/rewards/PendingRewards.tsx +++ b/packages/extension-polkagate/src/popup/staking/solo/rewards/PendingRewards.tsx @@ -1,6 +1,5 @@ // Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors // SPDX-License-Identifier: Apache-2.0 -// @ts-nocheck /* eslint-disable react/jsx-max-props-per-line */ @@ -8,16 +7,17 @@ * @description to show pending rewards and let user to call payout * */ +import type { ApiPromise } from '@polkadot/api'; import type { DeriveSessionProgress } from '@polkadot/api-derive/types'; +import type { ExpandedRewards } from '@polkadot/extension-polkagate/src/fullscreen/stake/solo/pending'; import type { Forcing } from '@polkadot/types/interfaces'; +import type { BN } from '@polkadot/util'; import { Grid, Skeleton, Typography, useTheme } from '@mui/material'; import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react'; import { useParams } from 'react-router'; -import { ApiPromise } from '@polkadot/api'; -import type { ExpandedRewards } from '@polkadot/extension-polkagate/src/fullscreen/stake/solo/pending'; -import { BN, BN_ONE, BN_ZERO } from '@polkadot/util'; +import { BN_ONE, BN_ZERO } from '@polkadot/util'; import { ActionContext, Checkbox2, Identity, Motion, ShowBalance, TwoButtons } from '../../../../components'; import { useCurrentBlockNumber, useInfo, usePendingRewards2, useTranslation } from '../../../../hooks'; diff --git a/packages/extension-polkagate/src/popup/staking/solo/rewards/Review.tsx b/packages/extension-polkagate/src/popup/staking/solo/rewards/Review.tsx index 2f0c66b3a..0a706a104 100644 --- a/packages/extension-polkagate/src/popup/staking/solo/rewards/Review.tsx +++ b/packages/extension-polkagate/src/popup/staking/solo/rewards/Review.tsx @@ -1,6 +1,5 @@ // Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors // SPDX-License-Identifier: Apache-2.0 -// @ts-nocheck /* eslint-disable react/jsx-max-props-per-line */ @@ -9,23 +8,23 @@ * this component opens unstake review page * */ +import type { SubmittableExtrinsic } from '@polkadot/api/types/submittable'; +import type { ExpandedRewards } from '@polkadot/extension-polkagate/src/fullscreen/stake/solo/pending'; +import type { ISubmittableResult } from '@polkadot/types/types'; +import type { BN } from '@polkadot/util'; +import type { Proxy, ProxyItem, TxInfo } from '../../../../util/types'; + import { Container, Grid, useTheme } from '@mui/material'; import React, { useCallback, useContext, useEffect, useState } from 'react'; -import { SubmittableExtrinsic } from '@polkadot/api/types/submittable'; -import { ExpandedRewards } from '@polkadot/extension-polkagate/src/fullscreen/stake/solo/pending'; -import type { Balance } from '@polkadot/types/interfaces'; -import { ISubmittableResult } from '@polkadot/types/types'; import keyring from '@polkadot/ui-keyring'; -import { BN, BN_ONE } from '@polkadot/util'; import { AccountHolderWithProxy, ActionContext, AmountFee, Motion, PasswordUseProxyConfirm, Popup, Warning, WrongPasswordAlert } from '../../../../components'; -import { useAccountDisplay, useInfo, useProxies, useTranslation } from '../../../../hooks'; +import { useAccountDisplay, useEstimatedFee, useInfo, useProxies, useTranslation } from '../../../../hooks'; import { HeaderBrand, SubTitle, WaitScreen } from '../../../../partials'; import Confirmation from '../../../../partials/Confirmation'; import { signAndSend } from '../../../../util/api'; import { PROXY_TYPE } from '../../../../util/constants'; -import type { Proxy, ProxyItem, TxInfo } from '../../../../util/types'; import { amountToHuman, getSubstrateAddress, saveAsHistory } from '../../../../util/utils'; import TxDetail from './TxDetail'; @@ -37,7 +36,7 @@ interface Props { selectedToPayout: ExpandedRewards[] } -export default function Review({ address, amount, selectedToPayout, setShow, show }: Props): React.ReactElement { +export default function Review ({ address, amount, selectedToPayout, setShow, show }: Props): React.ReactElement { const { t } = useTranslation(); const theme = useTheme(); const { api, chain, decimal, formatted, token } = useInfo(address); @@ -54,13 +53,14 @@ export default function Review({ address, amount, selectedToPayout, setShow, sho const [showConfirmation, setShowConfirmation] = useState(false); const amountInHuman = amountToHuman(amount, decimal); const [tx, setTx] = useState | undefined>(); - const [estimatedFee, setEstimatedFee] = useState(); const selectedProxyAddress = selectedProxy?.delegate as unknown as string; const selectedProxyName = useAccountDisplay(getSubstrateAddress(selectedProxyAddress)); - const payoutStakers = api && api.tx['staking']['payoutStakersByPage']; - const batch = api && api.tx['utility']['batchAll']; + const payoutStakers = api?.tx['staking']['payoutStakersByPage']; + const batch = api?.tx['utility']['batchAll']; + + const estimatedFee = useEstimatedFee(address, tx); const goToStakingHome = useCallback(() => { setShow(false); @@ -86,18 +86,6 @@ export default function Review({ address, amount, selectedToPayout, setShow, sho setTx(_tx); }, [batch, payoutStakers, selectedToPayout]); - useEffect((): void => { - if (!tx || !formatted) { - return; - } - - if (!api?.call?.['transactionPaymentApi']) { - return setEstimatedFee(api?.createType('Balance', BN_ONE)); - } - - tx.paymentInfo(formatted).then((i) => setEstimatedFee(i?.partialFee)).catch(console.error); - }, [api, formatted, tx]); - useEffect((): void => { const fetchedProxyItems = proxies?.map((p: Proxy) => ({ proxy: p, status: 'current' })) as ProxyItem[]; diff --git a/packages/extension-polkagate/src/popup/staking/solo/settings/Review.tsx b/packages/extension-polkagate/src/popup/staking/solo/settings/Review.tsx index 3cf4f709c..958e62985 100644 --- a/packages/extension-polkagate/src/popup/staking/solo/settings/Review.tsx +++ b/packages/extension-polkagate/src/popup/staking/solo/settings/Review.tsx @@ -128,7 +128,7 @@ export default function Review({ address, api, newSettings, setRefresh, setShow, const tx = txs.length === 2 ? batchAll(txs) : txs[0]; setTx(tx); - tx && tx.paymentInfo(formatted).then((i) => setEstimatedFee(api.createType('Balance', i?.partialFee ?? BN_ZERO))).catch(console.error); + tx && tx.paymentInfo(formatted).then((i) => setEstimatedFee(api.createType('Balance', i?.partialFee ?? BN_ZERO)) as Balance).catch(console.error); }, [api, batchAll, formatted, isControllerDeprecated, newSettings?.controllerId, newSettings?.payee, setController, setPayee, settings.controllerId, settings.payee, settings.stashId]); const goToStakingHome = useCallback(() => { diff --git a/packages/extension-polkagate/src/popup/staking/solo/stake/index.tsx b/packages/extension-polkagate/src/popup/staking/solo/stake/index.tsx index c30fb9b65..9be0f742e 100644 --- a/packages/extension-polkagate/src/popup/staking/solo/stake/index.tsx +++ b/packages/extension-polkagate/src/popup/staking/solo/stake/index.tsx @@ -122,12 +122,12 @@ export default function Index (): React.ReactElement { if (isFirstTimeStaking && autoSelectedValidators?.length) { const ids = autoSelectedValidators.map((v) => v.accountId); - batchAll([tx(...params), nominated(ids)]).paymentInfo(formatted).then((i) => setEstimatedFee(i?.partialFee)).catch(console.error); + batchAll([tx(...params), nominated(ids)]).paymentInfo(formatted).then((i) => setEstimatedFee(api.createType('Balance', i?.partialFee) as Balance)).catch(console.error); return; } - tx(...params).paymentInfo(formatted).then((i) => setEstimatedFee(i?.partialFee)).catch(console.error); + tx(...params).paymentInfo(formatted).then((i) => setEstimatedFee(api.createType('Balance', i?.partialFee) as Balance)).catch(console.error); }, [amountAsBN, api, autoSelectedValidators, batchAll, bond, formatted, isFirstTimeStaking, nominated, params, tx]); useEffect(() => { diff --git a/packages/extension-polkagate/src/popup/staking/solo/unstake/Review.tsx b/packages/extension-polkagate/src/popup/staking/solo/unstake/Review.tsx index 08f231aa3..42ded6071 100644 --- a/packages/extension-polkagate/src/popup/staking/solo/unstake/Review.tsx +++ b/packages/extension-polkagate/src/popup/staking/solo/unstake/Review.tsx @@ -1,6 +1,5 @@ // Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors // SPDX-License-Identifier: Apache-2.0 -// @ts-nocheck /* eslint-disable react/jsx-max-props-per-line */ @@ -11,13 +10,14 @@ import type { SubmittableExtrinsicFunction } from '@polkadot/api/types'; import type { AnyTuple } from '@polkadot/types/types'; +import type { BN } from '@polkadot/util'; +import type { Proxy, ProxyItem, TxInfo } from '../../../../util/types'; import { Container, Grid } from '@mui/material'; import React, { useCallback, useContext, useEffect, useState } from 'react'; import { type Balance } from '@polkadot/types/interfaces'; import keyring from '@polkadot/ui-keyring'; -import { BN } from '@polkadot/util'; import { AccountHolderWithProxy, ActionContext, AmountFee, Motion, PasswordUseProxyConfirm, Popup, ShowBalance2, WrongPasswordAlert } from '../../../../components'; import { useAccountDisplay, useInfo, useProxies, useTranslation } from '../../../../hooks'; @@ -25,7 +25,6 @@ import { HeaderBrand, SubTitle, WaitScreen } from '../../../../partials'; import Confirmation from '../../../../partials/Confirmation'; import { signAndSend } from '../../../../util/api'; import { PROXY_TYPE } from '../../../../util/constants'; -import type { Proxy, ProxyItem, TxInfo } from '../../../../util/types'; import { amountToHuman, amountToMachine, getSubstrateAddress, saveAsHistory } from '../../../../util/utils'; import TxDetail from './partials/TxDetail'; @@ -47,7 +46,7 @@ interface Props { isUnstakeAll: boolean; } -export default function Review({ address, amount, chilled, estimatedFee, hasNominator, isUnstakeAll, maxUnlockingChunks, redeem, redeemDate, setShow, show, staked, total, unbonded, unlockingLen }: Props): React.ReactElement { +export default function Review ({ address, amount, chilled, estimatedFee, hasNominator, isUnstakeAll, maxUnlockingChunks, redeem, redeemDate, setShow, show, staked, total, unbonded, unlockingLen }: Props): React.ReactElement { const { t } = useTranslation(); const { api, chain, decimal, formatted, token } = useInfo(address); const proxies = useProxies(api, formatted); diff --git a/packages/extension-polkagate/src/popup/staking/solo/unstake/index.tsx b/packages/extension-polkagate/src/popup/staking/solo/unstake/index.tsx index 5b5dd676c..ab7e97cd0 100644 --- a/packages/extension-polkagate/src/popup/staking/solo/unstake/index.tsx +++ b/packages/extension-polkagate/src/popup/staking/solo/unstake/index.tsx @@ -1,11 +1,11 @@ // Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors // SPDX-License-Identifier: Apache-2.0 -// @ts-nocheck /* eslint-disable react/jsx-max-props-per-line */ import type { ApiPromise } from '@polkadot/api'; import type { Balance } from '@polkadot/types/interfaces'; +import type { BN } from '@polkadot/util'; import type { AccountStakingInfo, StakingConsts } from '../../../../util/types'; import { Grid, useTheme } from '@mui/material'; @@ -13,7 +13,7 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react'; import { useParams } from 'react-router'; import { useHistory, useLocation } from 'react-router-dom'; -import { BN, BN_ONE, BN_ZERO } from '@polkadot/util'; +import { BN_ONE, BN_ZERO } from '@polkadot/util'; import { AmountWithOptions, Motion, PButton, Warning } from '../../../../components'; import { useInfo, useStakingAccount, useStakingConsts, useTranslation, useUnSupportedNetwork } from '../../../../hooks'; @@ -30,7 +30,7 @@ interface State { stakingAccount: AccountStakingInfo | undefined } -export default function Index(): React.ReactElement { +export default function Index (): React.ReactElement { const { t } = useTranslation(); const { state } = useLocation(); const theme = useTheme(); @@ -89,7 +89,7 @@ export default function Index(): React.ReactElement { const txs = []; if (api && !api?.call?.['transactionPaymentApi']) { - return setEstimatedFee(api?.createType('Balance', BN_ONE)); + return setEstimatedFee(api?.createType('Balance', BN_ONE) as Balance); } if (redeem && chilled && unbonded && maxUnlockingChunks !== undefined && unlockingLen !== undefined && formatted && staked) { @@ -109,7 +109,7 @@ export default function Index(): React.ReactElement { const partialFee = (await finalTx.paymentInfo(formatted))?.partialFee; - setEstimatedFee(api?.createType('Balance', partialFee)); + setEstimatedFee(api?.createType('Balance', partialFee) as Balance); } }, [amountAsBN, api, chilled, formatted, maxUnlockingChunks, redeem, staked, unbonded, unlockingLen, isUnstakeAll]); From 6b58042633ac430e31735b04755081a576e3a104 Mon Sep 17 00:00:00 2001 From: Nick Date: Sat, 30 Nov 2024 15:20:38 +0330 Subject: [PATCH 2/3] refactor: handle undefined case --- .../src/fullscreen/accountDetails/unlock/Review.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/extension-polkagate/src/fullscreen/accountDetails/unlock/Review.tsx b/packages/extension-polkagate/src/fullscreen/accountDetails/unlock/Review.tsx index 00e80f903..2473b3d90 100644 --- a/packages/extension-polkagate/src/fullscreen/accountDetails/unlock/Review.tsx +++ b/packages/extension-polkagate/src/fullscreen/accountDetails/unlock/Review.tsx @@ -65,7 +65,7 @@ export default function Review ({ address, api, classToUnlock, setDisplayPopup, const unlockClass = api.tx['convictionVoting']['unlock']; // (class) const batchAll = api.tx['utility']['batchAll']; - const estimatedFee = useEstimatedFee(address, batchAll(params)); + const estimatedFee = useEstimatedFee(address, params ? batchAll(params) : undefined); const extraInfo = useMemo(() => ({ action: 'Unlock Referenda', From a24f3e8ce33f77deaa291179031d71961b84d69f Mon Sep 17 00:00:00 2001 From: Amir Ekbatanifard Date: Mon, 2 Dec 2024 19:21:18 +0330 Subject: [PATCH 3/3] fix: useEffects deps (#1680) --- .../src/fullscreen/accountDetails/unlock/Review.tsx | 2 +- .../extension-polkagate/src/popup/account/unlock/Review.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/extension-polkagate/src/fullscreen/accountDetails/unlock/Review.tsx b/packages/extension-polkagate/src/fullscreen/accountDetails/unlock/Review.tsx index 2473b3d90..a1dcf976c 100644 --- a/packages/extension-polkagate/src/fullscreen/accountDetails/unlock/Review.tsx +++ b/packages/extension-polkagate/src/fullscreen/accountDetails/unlock/Review.tsx @@ -93,7 +93,7 @@ export default function Review ({ address, api, classToUnlock, setDisplayPopup, const params = [...removes, ...unlocks]; setParams(params); - }, [api, batchAll, formatted, classToUnlock, remove, unlockClass]); + }, [classToUnlock, formatted, remove, unlockClass]); useEffect((): void => { const fetchedProxyItems = proxies?.map((p: Proxy) => ({ proxy: p, status: 'current' })) as ProxyItem[]; diff --git a/packages/extension-polkagate/src/popup/account/unlock/Review.tsx b/packages/extension-polkagate/src/popup/account/unlock/Review.tsx index 600adf20f..52168d247 100644 --- a/packages/extension-polkagate/src/popup/account/unlock/Review.tsx +++ b/packages/extension-polkagate/src/popup/account/unlock/Review.tsx @@ -88,7 +88,7 @@ export default function Review ({ address, api, classToUnlock, setRefresh, setSh const params = [...removes, ...unlocks]; setParams(params as any); - }, [api, batchAll, formatted, classToUnlock, remove, unlockClass]); + }, [classToUnlock, formatted, remove, unlockClass]); const goToAccount = useCallback(() => { setShow(false);