fix: fee issue utilizing fee hook (#1679)

Co-authored-by: Amir Ekbatanifard <amiref007@gmail.com>
PolkaGate · Dec 2, 2024 · b52a392 · b52a392
1 parent 205d4d6
commit b52a392
Show file tree

Hide file tree

Showing 43 changed files with 232 additions and 846 deletions.
diff --git 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<Proxy | undefined>();
   const [proxyItems, setProxyItems] = useState<ProxyItem[]>();
   const [txInfo, setTxInfo] = useState<TxInfo | undefined>();
-  const [estimatedFee, setEstimatedFee] = useState<Balance>();
   const [params, setParams] = useState<SubmittableExtrinsic<'promise', ISubmittableResult>[]>();
   const [step, setStep] = useState<number>(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, params ? batchAll(params) : undefined);
+
   const extraInfo = useMemo(() => ({
     action: 'Unlock Referenda',
     amount,
@@ -93,13 +93,7 @@ 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]);
+  }, [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/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
@@ -1,33 +1,35 @@
 // 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 */
 
 /**
  * @description
  * 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<Props> {
+export default function ModifyDelegate ({ accountLocks, address, balances, classicDelegateInformation, formatted, lockedAmount, mixedDelegateInformation, mode, otherDelegatedTracks, selectedProxy, setDelegateInformation, setModalHeight, setMode, setStep, setTxInfo, step }: Props): React.ReactElement<Props> {
   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<number | undefined>();
 
   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
@@ -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
@@ -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
@@ -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<Proxy | undefined>();
   const [proxyItems, setProxyItems] = useState<ProxyItem[]>();
   const [txInfo, setTxInfo] = useState<TxInfo | undefined>();
-  const [estimatedFee, setEstimatedFee] = useState<Balance>();
   const [voteInformation, setVoteInformation] = useState<VoteInformation | undefined>();
   const [step, setStep] = useState<number>(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
@@ -1,27 +1,23 @@
 // 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';
 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<number>(STEPS.REVIEW);
   const [txInfo, setTxInfo] = useState<TxInfo | undefined>();
   const [isPasswordError, setIsPasswordError] = useState(false);
-  const [estimatedFee, setEstimatedFee] = useState<Balance>();
   const [selectedProxy, setSelectedProxy] = useState<Proxy | undefined>();
 
-  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
             </Grid>
             <Grid container item sx={{ bottom: '20px', left: '4%', position: 'absolute', width: '92%' }}>
               <SignArea2
-                address={address as string}
+                address={address!}
                 call={tx}
                 disabled={notEnoughBalance}
                 extraInfo={extraInfo}