chore: add reserve amount in transfer modal

subscan-explorer · Apr 20, 2022 · b3138f1 · b3138f1
1 parent ecd9d82
commit b3138f1
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 30 deletions.
diff --git a/src/components/Args.tsx b/src/components/Args.tsx
@@ -112,7 +112,10 @@ export function Args({ args, className }: ArgsProps) {
         }
 
         if (isBalanceType(type || name) || isCrabValue(name)) {
-          return formatBalance(value, +chain.tokens[0].decimal, { noDecimal: false, withThousandSplit: true }); // FIXME: decimal issue;
+          return formatBalance(value, +chain.tokens[0].decimal, {
+            noDecimal: false,
+            withThousandSplit: true,
+          }); // FIXME: decimal issue;
         }
 
         if (isDownloadType(value)) {

diff --git a/src/components/modals/Transfer.tsx b/src/components/modals/Transfer.tsx
@@ -25,6 +25,7 @@ import { keyring } from '@polkadot/ui-keyring';
 import { KeyringSectionOption } from '@polkadot/ui-keyring/options/types';
 import type { BN } from '@polkadot/util';
 import { BN_HUNDRED, BN_ZERO, isFunction } from '@polkadot/util';
+import { Typography } from 'antd';
 import { flatten } from 'lodash';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -33,6 +34,8 @@ import { AddressPair } from 'src/model';
 import { extractExternal } from 'src/utils';
 import styled from 'styled-components';
 
+const { Text } = Typography;
+
 interface Props {
   className?: string;
   onClose: () => void;
@@ -87,6 +90,7 @@ function Transfer({
   const [multisigExtrinsic, setMultisigExtrinsic] = useState<SubmittableExtrinsic<'promise'> | null>(null);
   const [accountId, setAccountId] = useState<string | null>(null);
   const isExtensionAccount = useIsInjected();
+  const [reserveAmount, setReserveAmount] = useState(0);
 
   const options = useMemo<KeyringSectionOption[]>(
     () =>
@@ -102,6 +106,14 @@ function Transfer({
     all: [],
   });
 
+  const [depositBase, depositFactor] = useMemo(() => {
+    return [Number(api?.consts.multisig.depositBase.toJSON()), Number(api?.consts.multisig.depositFactor.toJSON())];
+  }, [api]);
+
+  const [chainDecimal, chainToken] = useMemo(() => {
+    return [api?.registry.chainDecimals[0], api?.registry.chainTokens[0]];
+  }, [api]);
+
   const createMultiItem = useCallback(
     (option: Option): Option[] => {
       if (option.value === multisigAccount?.address) {
@@ -229,11 +241,36 @@ function Transfer({
       const multiTx = module?.asMulti(...args);
 
       // eslint-disable-next-line no-console
-      console.log('hexCallData', ext.method.toHex());
+      // console.log('hexCallData', ext.method.toHex());
 
       setMultisigExtrinsic(multiTx);
+
+      // Estimate reserve amount
+      try {
+        if (chainDecimal) {
+          setReserveAmount(
+            // eslint-disable-next-line no-magic-numbers
+            (depositBase * 2 + depositFactor * threshold + (depositFactor * (ext.method.toHex().length + 31)) / 32) /
+              Math.pow(10, chainDecimal)
+          );
+        }
+      } catch (err) {
+        setReserveAmount(0);
+      }
     })();
-  }, [canToggleAll, isAll, api, isProtected, amount, recipientId, propSenderId, accountId]);
+  }, [
+    canToggleAll,
+    isAll,
+    api,
+    isProtected,
+    amount,
+    recipientId,
+    propSenderId,
+    accountId,
+    chainDecimal,
+    depositBase,
+    depositFactor,
+  ]);
 
   return (
     <Modal className="app--accounts-Modal" header={t<string>('Send funds')} onClose={onClose} size="large">
@@ -361,32 +398,39 @@ function Transfer({
           </Modal.Columns>
         </div>
       </Modal.Content>
-      <Modal.Actions onCancel={onClose}>
-        <TxButton
-          // accountId={propSenderId || senderId}
-          accountId={accountId}
-          icon="paper-plane"
-          isDisabled={!hasAvailable || !(propRecipientId || recipientId) || !amount || !!recipientPhish}
-          label={t<string>('Make Transfer')}
-          onStart={onClose}
-          extrinsic={multisigExtrinsic}
-          onSuccess={onTxSuccess}
-          // params={
-          //   canToggleAll && isAll
-          //     ? isFunction(api.tx.balances?.transferAll)
-          //       ? [propRecipientId || recipientId, false]
-          //       : [propRecipientId || recipientId, maxTransfer]
-          //     : [propRecipientId || recipientId, amount]
-          // }
-          // tx={
-          //   canToggleAll && isAll && isFunction(api.tx.balances?.transferAll)
-          //     ? api.tx.balances?.transferAll
-          //     : isProtected
-          //     ? api.tx.balances?.transferKeepAlive
-          //     : api.tx.balances?.transfer
-          // }
-        />
-      </Modal.Actions>
+
+      <div className="flex items-center justify-between px-5">
+        <Text style={{ color: 'rgba(78,78,78,0.6)', marginLeft: '20px' }}>
+          {t('multisig.estimate_reserve')} {reserveAmount} {chainToken}
+        </Text>
+
+        <Modal.Actions onCancel={onClose}>
+          <TxButton
+            // accountId={propSenderId || senderId}
+            accountId={accountId}
+            icon="paper-plane"
+            isDisabled={!hasAvailable || !(propRecipientId || recipientId) || !amount || !!recipientPhish}
+            label={t<string>('Make Transfer')}
+            onStart={onClose}
+            extrinsic={multisigExtrinsic}
+            onSuccess={onTxSuccess}
+            // params={
+            //   canToggleAll && isAll
+            //     ? isFunction(api.tx.balances?.transferAll)
+            //       ? [propRecipientId || recipientId, false]
+            //       : [propRecipientId || recipientId, maxTransfer]
+            //     : [propRecipientId || recipientId, amount]
+            // }
+            // tx={
+            //   canToggleAll && isAll && isFunction(api.tx.balances?.transferAll)
+            //     ? api.tx.balances?.transferAll
+            //     : isProtected
+            //     ? api.tx.balances?.transferKeepAlive
+            //     : api.tx.balances?.transfer
+            // }
+          />
+        </Modal.Actions>
+      </div>
     </Modal>
   );
 }

diff --git a/src/utils/helper/balance.ts b/src/utils/helper/balance.ts
@@ -99,7 +99,7 @@ export function prettyNumber(
 
   prefix = prefix.replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,');
 
-  return !noDecimal ? `${prefix}.${suffix}` : prefix;
+  return !noDecimal && Number(suffix) > 0 ? `${prefix}.${suffix}` : prefix;
 }
 
 const completeDecimal = (value: string, bits: number): string => {