chore: extract FeeRate component

trezor · Feb 13, 2025 · 65a0cfb · 65a0cfb
1 parent 2691333
commit 65a0cfb
Show file tree

Hide file tree

Showing 8 changed files with 57 additions and 26 deletions.
diff --git a/packages/product-components/src/components/FeeRate/FeeRate.tsx b/packages/product-components/src/components/FeeRate/FeeRate.tsx
@@ -0,0 +1,18 @@
+import { NetworkType } from '@suite-common/wallet-config';
+import { getFeeUnits } from '@suite-common/wallet-utils';
+import { BigNumber } from '@trezor/utils';
+
+type FeeRateProps = {
+    feeRate: string | BigNumber;
+    networkType: NetworkType;
+};
+
+export const FeeRate = ({ feeRate, networkType }: FeeRateProps) => {
+    const fee = typeof feeRate === 'string' ? new BigNumber(feeRate) : feeRate;
+
+    return (
+        <span>
+            {fee.toFixed(2)}&nbsp;{getFeeUnits(networkType)}
+        </span>
+    );
+};
diff --git a/packages/product-components/src/index.ts b/packages/product-components/src/index.ts
@@ -22,3 +22,4 @@ export {
 export { NumberInput } from './components/NumberInput/NumberInput';
 export { InputWithOptions } from './components/InputWithOptions/InputWithOptions';
 export { EditableText } from './components/EditableText/EditableText';
+export { FeeRate } from './components/FeeRate/FeeRate';
diff --git a/...rc/components/suite/modals/ReduxModal/TransactionReviewModal/TransactionReviewSummary.tsx b/...rc/components/suite/modals/ReduxModal/TransactionReviewModal/TransactionReviewSummary.tsx
@@ -1,9 +1,9 @@
 import { formatDuration } from '@suite-common/suite-utils';
 import { NetworkType, networks } from '@suite-common/wallet-config';
 import { FeeInfo, GeneralPrecomposedTransactionFinal, StakeType } from '@suite-common/wallet-types';
-import { getFee, getFeeUnits } from '@suite-common/wallet-utils';
+import { getFee } from '@suite-common/wallet-utils';
 import { Box, IconButton, Note, Row, Text } from '@trezor/components';
-import { CoinLogo } from '@trezor/product-components';
+import { CoinLogo, FeeRate } from '@trezor/product-components';
 import { spacings } from '@trezor/theme';
 
 import { AccountLabel, Translation } from 'src/components/suite';
@@ -85,11 +85,11 @@ export const TransactionReviewSummary = ({
                 <Note iconName="gasPump">
                     <Translation id="TR_GAS_PRICE" />
                     {': '}
-                    {fee} {getFeeUnits(network.networkType)}
+                    <FeeRate feeRate={fee} networkType={network.networkType} />
                 </Note>
             ) : (
                 <Note iconName="receipt">
-                    {fee} {getFeeUnits(network.networkType)}
+                    <FeeRate feeRate={fee} networkType={network.networkType} />
                 </Note>
             )}
 

diff --git a/.../src/components/suite/modals/ReduxModal/UserContextModal/TxDetailModal/BasicTxDetails.tsx b/.../src/components/suite/modals/ReduxModal/UserContextModal/TxDetailModal/BasicTxDetails.tsx
@@ -2,7 +2,7 @@ import styled from 'styled-components';
 import { fromWei } from 'web3-utils';
 
 import { Network } from '@suite-common/wallet-config';
-import { getFeeRate, getFeeUnits, getTxIcon, isPending } from '@suite-common/wallet-utils';
+import { getFeeRate, getTxIcon, isPending } from '@suite-common/wallet-utils';
 import {
     Card,
     Divider,
@@ -16,7 +16,7 @@ import {
     Text,
     useElevation,
 } from '@trezor/components';
-import { CoinLogo } from '@trezor/product-components';
+import { CoinLogo, FeeRate } from '@trezor/product-components';
 import { Elevation, borders, mapElevationToBorder, spacings, spacingsPx } from '@trezor/theme';
 
 import { FormattedDateWithBullet, Translation } from 'src/components/suite';
@@ -148,7 +148,10 @@ export const BasicTxDetails = ({
                         {/* tx.feeRate was added in @trezor/blockchain-link 2.1.5 meaning that users
                             might have locally saved old transactions without this field. since we
                             cant reliably migrate this data, we are keeping old way of displaying feeRate in place */}
-                        {`${tx?.feeRate ? tx.feeRate : getFeeRate(tx)} ${getFeeUnits('bitcoin')}`}
+                        <FeeRate
+                            feeRate={tx?.feeRate ? tx.feeRate : getFeeRate(tx)}
+                            networkType="bitcoin"
+                        />
                     </Item>
                 )}
 
@@ -168,9 +171,10 @@ export const BasicTxDetails = ({
                         </Item>
 
                         <Item label={<Translation id="TR_GAS_PRICE" />} iconName="receipt">
-                            {`${fromWei(tx.ethereumSpecific?.gasPrice ?? '0', 'gwei')} ${getFeeUnits(
-                                'ethereum',
-                            )}`}
+                            <FeeRate
+                                feeRate={fromWei(tx.ethereumSpecific?.gasPrice ?? '0', 'gwei')}
+                                networkType="ethereum"
+                            />
                         </Item>
 
                         <Item label={<Translation id="TR_NONCE" />} iconName="receipt">

diff --git a/.../modals/ReduxModal/UserContextModal/TxDetailModal/CancelTransaction/CancelTransaction.tsx b/.../modals/ReduxModal/UserContextModal/TxDetailModal/CancelTransaction/CancelTransaction.tsx
@@ -1,6 +1,7 @@
 import { SelectedAccountLoaded, WalletAccountTransaction } from '@suite-common/wallet-types';
-import { formatNetworkAmount, getFeeUnits } from '@suite-common/wallet-utils';
+import { formatNetworkAmount } from '@suite-common/wallet-utils';
 import { Card, Column, Divider, InfoItem, Row, Text } from '@trezor/components';
+import { FeeRate } from '@trezor/product-components';
 import { spacings } from '@trezor/theme';
 import { HELP_CENTER_CANCEL_TRANSACTION } from '@trezor/urls';
 import { BigNumber } from '@trezor/utils';
@@ -66,8 +67,7 @@ export const CancelTransaction = ({ tx, selectedAccount }: CancelTransactionProp
                         <Row gap={spacings.md}>
                             <Translation id="TR_CANCEL_TX_FEE" />
                             <Text variant="tertiary">
-                                {feePerByte.toFormat(2)}&nbsp;
-                                {getFeeUnits(networkType)}
+                                <FeeRate feeRate={feePerByte} networkType={networkType} />
                             </Text>
                         </Row>
                     }

diff --git a/...components/suite/modals/ReduxModal/UserContextModal/TxDetailModal/ChangeFee/ChangeFee.tsx b/...components/suite/modals/ReduxModal/UserContextModal/TxDetailModal/ChangeFee/ChangeFee.tsx
@@ -1,8 +1,9 @@
 import { ReactNode } from 'react';
 
 import { WalletAccountTransaction } from '@suite-common/wallet-types';
-import { formatNetworkAmount, getFeeUnits } from '@suite-common/wallet-utils';
+import { formatNetworkAmount } from '@suite-common/wallet-utils';
 import { Card, Column, Divider, InfoItem, Row, Text } from '@trezor/components';
+import { FeeRate } from '@trezor/product-components';
 import { spacings } from '@trezor/theme';
 
 import { FiatValue, FormattedCryptoAmount, Translation } from 'src/components/suite';
@@ -28,7 +29,10 @@ const ChangeFeeLoaded = (props: ChangeFeeProps) => {
     } = useRbfContext();
 
     const feeRate =
-        networkType === 'bitcoin' ? `${tx.rbfParams?.feeRate} ${getFeeUnits(networkType)}` : null;
+        networkType === 'bitcoin' && tx.rbfParams?.feeRate !== undefined ? (
+            <FeeRate feeRate={tx.rbfParams.feeRate} networkType={networkType} />
+        ) : null;
+
     const fee = formatNetworkAmount(tx.fee, tx.symbol);
 
     return (
@@ -44,7 +48,7 @@ const ChangeFeeLoaded = (props: ChangeFeeProps) => {
                         label={
                             <>
                                 <Translation id="TR_CURRENT_FEE" />
-                                {feeRate && ` (${feeRate})`}
+                                {feeRate && <> ({feeRate})</>}
                             </>
                         }
                         typographyStyle="body"

diff --git a/packages/suite/src/components/wallet/Fees/FeeDetails.tsx b/packages/suite/src/components/wallet/Fees/FeeDetails.tsx
@@ -10,6 +10,7 @@ import {
 import { getFeeUnits } from '@suite-common/wallet-utils';
 import { Row, Text } from '@trezor/components';
 import { FeeLevel } from '@trezor/connect';
+import { FeeRate } from '@trezor/product-components';
 import { spacings } from '@trezor/theme';
 
 import { Translation } from 'src/components/suite/Translation';
@@ -55,8 +56,10 @@ const BitcoinDetails = ({
                 </Item>
 
                 <Item label={<Translation id="TR_FEE_RATE" />}>
-                    {hasInfo ? transactionInfo.feePerByte : selectedLevel.feePerUnit}{' '}
-                    {getFeeUnits(networkType)}
+                    <FeeRate
+                        feeRate={hasInfo ? transactionInfo.feePerByte : selectedLevel.feePerUnit}
+                        networkType={networkType}
+                    />
                     {hasInfo ? ` (${transactionInfo.bytes} B)` : ''}
                 </Item>
             </>
@@ -96,7 +99,7 @@ const EthereumDetails = ({
                 <Item label={<Translation id="TR_GAS_LIMIT" />}>{gasLimit}</Item>
 
                 <Item label={<Translation id="TR_GAS_PRICE" />}>
-                    {gasPrice} {getFeeUnits(networkType)}
+                    <FeeRate feeRate={gasPrice} networkType={networkType} />
                 </Item>
             </>
         )

diff --git a/suite-common/wallet-utils/src/sendFormUtils.ts b/suite-common/wallet-utils/src/sendFormUtils.ts
@@ -218,15 +218,16 @@ export const getNonComposeErrorMessage = (error: FieldError | undefined) =>
 export const isLowAnonymityWarning = (error?: Merge<FieldError, FieldErrorsImpl<Output>>) =>
     error?.amount?.type === COMPOSE_ERROR_TYPES.ANONYMITY;
 
-export const getFeeUnits = (networkType: NetworkType) => {
-    if (networkType === 'ethereum') return 'GWEI';
-    if (networkType === 'ripple') return 'Drops';
-    if (networkType === 'cardano') return 'Lovelaces/B';
-    if (networkType === 'solana') return 'Lamports';
-
-    return 'sat/vB';
+const mapNetworkTypeToFeeUnits: Record<NetworkType, string> = {
+    bitcoin: 'sat/vB',
+    cardano: 'Lovelaces/B',
+    ethereum: 'GWEI',
+    ripple: 'Drops',
+    solana: 'Lamports',
 };
 
+export const getFeeUnits = (networkType: NetworkType) => mapNetworkTypeToFeeUnits[networkType];
+
 export const getFee = (networkType: NetworkType, tx: GeneralPrecomposedTransactionFinal) => {
     if (networkType === 'solana') return tx.fee;