refactor(suite): fee component

trezor · Feb 27, 2025 · 0837ba1 · 0837ba1
1 parent 0959e86
commit 0837ba1
Show file tree

Hide file tree

Showing 22 changed files with 786 additions and 550 deletions.
diff --git a/packages/product-components/src/components/FeeRate/FeeRate.tsx b/packages/product-components/src/components/FeeRate/FeeRate.tsx
@@ -1,20 +1,40 @@
-import { NetworkType } from '@suite-common/wallet-config';
+import { NetworkSymbol, NetworkType, hasNetworkSettlementLayer } from '@suite-common/wallet-config';
 import { getFeeUnits } from '@suite-common/wallet-utils';
 import { BigNumber } from '@trezor/utils';
 
 type FeeRateProps = {
     feeRate?: string | BigNumber;
     networkType: NetworkType;
+    symbol: NetworkSymbol;
 };
 
-export const FeeRate = ({ feeRate, networkType }: FeeRateProps) => {
+export const FeeRate = ({ feeRate, networkType, symbol }: FeeRateProps) => {
     if (!feeRate) return null;
 
-    const fee = typeof feeRate === 'string' ? new BigNumber(feeRate) : feeRate;
+    let fee;
+
+    switch (networkType) {
+        case 'ethereum': {
+            const numOfDecimalPlaces = hasNetworkSettlementLayer(symbol) ? 4 : 2;
+            const multiplier = Math.pow(10, numOfDecimalPlaces);
+            fee = (Math.ceil((Number(feeRate) || 0) * multiplier) / multiplier).toFixed(
+                numOfDecimalPlaces,
+            );
+            break;
+        }
+        case 'bitcoin':
+            fee =
+                typeof feeRate === 'string'
+                    ? new BigNumber(feeRate).toFixed(2)
+                    : feeRate.toFixed(2);
+            break;
+        default:
+            fee = typeof feeRate === 'string' ? feeRate : feeRate.toString();
+    }
 
     return (
         <span>
-            {networkType === 'bitcoin' ? fee.toFixed(2) : fee.toString()}&nbsp;
+            {fee}&nbsp;
             {getFeeUnits(networkType)}
         </span>
     );

diff --git a/...rc/components/suite/modals/ReduxModal/TransactionReviewModal/TransactionReviewSummary.tsx b/...rc/components/suite/modals/ReduxModal/TransactionReviewModal/TransactionReviewSummary.tsx
@@ -46,9 +46,8 @@ export const TransactionReviewSummary = ({
     ) as string;
     const fees = useSelector(state => state.wallet.fees);
     const locale = useLocales();
-
-    const network = networks[account.symbol];
     const { symbol, accountType, index, networkType } = account;
+    const network = networks[symbol];
     const fee = getFee(networkType, tx);
     const estimateTime = getEstimatedTime(networkType, fees[account.symbol], tx);
 
@@ -87,11 +86,11 @@ export const TransactionReviewSummary = ({
                 <Note iconName="gasPump">
                     <Translation id="TR_GAS_PRICE" />
                     {': '}
-                    <FeeRate feeRate={fee} networkType={network.networkType} />
+                    <FeeRate feeRate={fee} networkType={network.networkType} symbol={symbol} />
                 </Note>
             ) : (
                 <Note iconName="receipt">
-                    <FeeRate feeRate={fee} networkType={network.networkType} />
+                    <FeeRate feeRate={fee} networkType={network.networkType} symbol={symbol} />
                 </Note>
             )}
 

diff --git a/.../src/components/suite/modals/ReduxModal/UserContextModal/TxDetailModal/BasicTxDetails.tsx b/.../src/components/suite/modals/ReduxModal/UserContextModal/TxDetailModal/BasicTxDetails.tsx
@@ -151,6 +151,7 @@ export const BasicTxDetails = ({
                         <FeeRate
                             feeRate={tx?.feeRate ? tx.feeRate : getFeeRate(tx)}
                             networkType="bitcoin"
+                            symbol={network.symbol}
                         />
                     </Item>
                 )}
@@ -174,6 +175,7 @@ export const BasicTxDetails = ({
                             <FeeRate
                                 feeRate={fromWei(tx.ethereumSpecific?.gasPrice ?? '0', 'gwei')}
                                 networkType="ethereum"
+                                symbol={network.symbol}
                             />
                         </Item>
 

diff --git a/.../modals/ReduxModal/UserContextModal/TxDetailModal/CancelTransaction/CancelTransaction.tsx b/.../modals/ReduxModal/UserContextModal/TxDetailModal/CancelTransaction/CancelTransaction.tsx
@@ -68,7 +68,11 @@ export const CancelTransaction = ({ tx, selectedAccount }: CancelTransactionProp
                         <Row gap={spacings.md}>
                             <Translation id="TR_CANCEL_TX_FEE" />
                             <Text variant="tertiary">
-                                <FeeRate feeRate={feePerByte} networkType={networkType} />
+                                <FeeRate
+                                    feeRate={feePerByte}
+                                    networkType={networkType}
+                                    symbol={tx.symbol}
+                                />
                             </Text>
                         </Row>
                     }

diff --git a/...components/suite/modals/ReduxModal/UserContextModal/TxDetailModal/ChangeFee/ChangeFee.tsx b/...components/suite/modals/ReduxModal/UserContextModal/TxDetailModal/ChangeFee/ChangeFee.tsx
@@ -30,7 +30,7 @@ const ChangeFeeLoaded = (props: ChangeFeeProps) => {
 
     const feeRate =
         networkType === 'bitcoin' && tx.rbfParams?.feeRate !== undefined ? (
-            <FeeRate feeRate={tx.rbfParams.feeRate} networkType={networkType} />
+            <FeeRate feeRate={tx.rbfParams.feeRate} networkType={networkType} symbol={tx.symbol} />
         ) : null;
 
     const fee = formatNetworkAmount(tx.fee, tx.symbol);

diff --git a/packages/suite/src/components/wallet/Fees/CustomFee.tsx b/packages/suite/src/components/wallet/Fees/CustomFee.tsx
diff --git a/packages/suite/src/components/wallet/Fees/CustomFee/CurrentFee.tsx b/packages/suite/src/components/wallet/Fees/CustomFee/CurrentFee.tsx
@@ -0,0 +1,31 @@
+import { NetworkSymbol, NetworkType } from '@suite-common/wallet-config';
+import { getFeeUnits } from '@suite-common/wallet-utils';
+import { Icon, IconName, Row, Text } from '@trezor/components';
+import { FeeRate } from '@trezor/product-components';
+import { spacings } from '@trezor/theme';
+
+import { Translation } from 'src/components/suite';
+
+type CurrentFeeProps = {
+    networkType: NetworkType;
+    feeIconName: IconName;
+    currentFee: string;
+    symbol: NetworkSymbol;
+};
+
+export const CurrentFee = ({ networkType, feeIconName, currentFee, symbol }: CurrentFeeProps) => (
+    <Row justifyContent="space-between">
+        <Text variant="tertiary" typographyStyle="hint">
+            <Translation id="TR_CURRENT_FEE_CUSTOM_FEES" />
+        </Text>
+        <Text variant="default" typographyStyle="hint">
+            <Row alignItems="center" gap={spacings.xxs}>
+                <Text>
+                    <FeeRate feeRate={currentFee} networkType={networkType} symbol={symbol} />
+                    {getFeeUnits(networkType)}
+                </Text>
+                <Icon name={feeIconName} size="mediumLarge" />
+            </Row>
+        </Text>
+    </Row>
+);