Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Display '< 0.01' instead of '0.00' for the fiat value of networ… #28543

Merged
merged 2 commits into from
Nov 22, 2024
Merged

feat: Display '< 0.01' instead of '0.00' for the fiat value of networ… #28543

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6923756
Display '< -zsh.01' instead of '-zsh.00' for the fiat value of networ…
pedronfigueiredo Nov 19, 2024
0d56e3b
wip
pedronfigueiredo Nov 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 14 additions & 2 deletions ui/pages/confirmations/components/confirm/info/hooks/useFeeCalculations.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,17 @@ describe('useFeeCalculations', () => {

expect(result.current).toMatchInlineSnapshot(`
{
"estimatedFeeFiat": "$0.00",
"estimatedFeeFiat": "< $0.01",
"estimatedFeeFiatWith18SignificantDigits": "0",
"estimatedFeeNative": "0 ETH",
"l1FeeFiat": "",
"l1FeeFiatWith18SignificantDigits": "",
"l1FeeNative": "",
"l2FeeFiat": "",
"l2FeeFiatWith18SignificantDigits": "",
"l2FeeNative": "",
"maxFeeFiat": "$0.00",
"maxFeeFiat": "< $0.01",
"maxFeeFiatWith18SignificantDigits": "0",
"maxFeeNative": "0 ETH",
}
`);
Expand All @@ -46,12 +50,16 @@ describe('useFeeCalculations', () => {
expect(result.current).toMatchInlineSnapshot(`
{
"estimatedFeeFiat": "$0.04",
"estimatedFeeFiatWith18SignificantDigits": null,
"estimatedFeeNative": "0.0001 ETH",
"l1FeeFiat": "",
"l1FeeFiatWith18SignificantDigits": "",
"l1FeeNative": "",
"l2FeeFiat": "",
"l2FeeFiatWith18SignificantDigits": "",
"l2FeeNative": "",
"maxFeeFiat": "$0.07",
"maxFeeFiatWith18SignificantDigits": null,
"maxFeeNative": "0.0001 ETH",
}
`);
Expand All @@ -72,12 +80,16 @@ describe('useFeeCalculations', () => {
expect(result.current).toMatchInlineSnapshot(`
{
"estimatedFeeFiat": "$2.54",
"estimatedFeeFiatWith18SignificantDigits": null,
"estimatedFeeNative": "0.0046 ETH",
"l1FeeFiat": "$2.50",
"l1FeeFiatWith18SignificantDigits": null,
"l1FeeNative": "0.0045 ETH",
"l2FeeFiat": "$0.04",
"l2FeeFiatWith18SignificantDigits": null,
"l2FeeNative": "0.0001 ETH",
"maxFeeFiat": "$0.07",
"maxFeeFiatWith18SignificantDigits": null,
"maxFeeNative": "0.0001 ETH",
}
`);
Expand Down
55 changes: 42 additions & 13 deletions ui/pages/confirmations/components/confirm/info/hooks/useFeeCalculations.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import { useTransactionGasFeeEstimate } from './useTransactionGasFeeEstimate';
const EMPTY_FEE = '';
const EMPTY_FEES = {
currentCurrencyFee: EMPTY_FEE,
currentCurrencyFeeWith18SignificantDigits: EMPTY_FEE,
nativeCurrencyFee: EMPTY_FEE,
};

Expand All @@ -52,19 +53,36 @@ export function useFeeCalculations(transactionMeta: TransactionMeta) {
}) || 0
} ${ticker}`;

const currentCurrencyFee = fiatFormatter(
Number(
getValueFromWeiHex({
value: hexFee,
conversionRate,
fromCurrency: EtherDenomination.GWEI,
toCurrency: currentCurrency,
numberOfDecimals: 2,
}),
),
const decimalCurrentCurrencyFee = Number(
getValueFromWeiHex({
value: hexFee,
conversionRate,
fromCurrency: EtherDenomination.GWEI,
toCurrency: currentCurrency,
numberOfDecimals: 2,
}),
);

return { currentCurrencyFee, nativeCurrencyFee };
let currentCurrencyFee, currentCurrencyFeeWith18SignificantDigits;
if (decimalCurrentCurrencyFee === 0) {
matthewwalsh0 marked this conversation as resolved.
Show resolved Hide resolved
currentCurrencyFee = `< ${fiatFormatter(0.01)}`;
currentCurrencyFeeWith18SignificantDigits = getValueFromWeiHex({
value: hexFee,
conversionRate,
fromCurrency: EtherDenomination.GWEI,
toCurrency: currentCurrency,
numberOfDecimals: 18,
});
} else {
currentCurrencyFee = fiatFormatter(decimalCurrentCurrencyFee);
currentCurrencyFeeWith18SignificantDigits = null;
}

return {
currentCurrencyFee,
currentCurrencyFeeWith18SignificantDigits,
nativeCurrencyFee,
};
},
[conversionRate, currentCurrency, fiatFormatter],
);
Expand Down Expand Up @@ -109,8 +127,12 @@ export function useFeeCalculations(transactionMeta: TransactionMeta) {
);
}, [supportsEIP1559, maxFeePerGas, gasLimit, gasPrice]);

const { currentCurrencyFee: maxFeeFiat, nativeCurrencyFee: maxFeeNative } =
getFeesFromHex(maxFee);
const {
currentCurrencyFee: maxFeeFiat,
currentCurrencyFeeWith18SignificantDigits:
maxFeeFiatWith18SignificantDigits,
nativeCurrencyFee: maxFeeNative,
} = getFeesFromHex(maxFee);

// Estimated fee
const estimatedFees = useMemo(() => {
Expand Down Expand Up @@ -153,12 +175,19 @@ export function useFeeCalculations(transactionMeta: TransactionMeta) {

return {
estimatedFeeFiat: estimatedFees.currentCurrencyFee,
estimatedFeeFiatWith18SignificantDigits:
estimatedFees.currentCurrencyFeeWith18SignificantDigits,
estimatedFeeNative: estimatedFees.nativeCurrencyFee,
l1FeeFiat: feesL1.currentCurrencyFee,
l1FeeFiatWith18SignificantDigits:
feesL1.currentCurrencyFeeWith18SignificantDigits,
l1FeeNative: feesL1.nativeCurrencyFee,
l2FeeFiat: feesL2.currentCurrencyFee,
l2FeeFiatWith18SignificantDigits:
feesL2.currentCurrencyFeeWith18SignificantDigits,
l2FeeNative: feesL2.nativeCurrencyFee,
maxFeeFiat,
maxFeeFiatWith18SignificantDigits,
maxFeeNative,
};
}
23 changes: 17 additions & 6 deletions ...nents/confirm/info/shared/edit-gas-fees-row/__snapshots__/edit-gas-fees-row.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,12 +45,23 @@ exports[`<EditGasFeesRow /> renders component 1`] = `
>
0.001 ETH
</p>
<p
class="mm-box mm-text mm-text--body-md mm-box--margin-right-2 mm-box--color-text-alternative"
data-testid="native-currency"
>
$1
</p>
<div>
<div
aria-describedby="tippy-tooltip-2"
class=""
data-original-title="0.001234"
data-tooltipped=""
style="display: inline;"
tabindex="0"
>
<p
class="mm-box mm-text mm-text--body-md mm-box--margin-right-2 mm-box--color-text-alternative"
data-testid="native-currency"
>
$1
</p>
</div>
</div>
<button
class="mm-box mm-text mm-button-base mm-button-base--size-sm mm-button-link mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
data-testid="edit-gas-fee-icon"
Expand Down
1 change: 1 addition & 0 deletions ...firmations/components/confirm/info/shared/edit-gas-fees-row/edit-gas-fees-row.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ export const DefaultStory = () => (
<EditGasFeesRow
fiatFee="$1"
nativeFee="0.001 ETH"
fiatFeeWith18SignificantDigits="0.001234"
supportsEIP1559={true}
setShowCustomizeGasPopover={() => {}}
/>
Expand Down
1 change: 1 addition & 0 deletions ...confirmations/components/confirm/info/shared/edit-gas-fees-row/edit-gas-fees-row.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ describe('<EditGasFeesRow />', () => {
<EditGasFeesRow
fiatFee="$1"
nativeFee="0.001 ETH"
fiatFeeWith18SignificantDigits="0.001234"
supportsEIP1559={true}
setShowCustomizeGasPopover={() => console.log('open popover')}
/>,
Expand Down
16 changes: 15 additions & 1 deletion ...ages/confirmations/components/confirm/info/shared/edit-gas-fees-row/edit-gas-fees-row.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { TEST_CHAINS } from '../../../../../../../../shared/constants/network';
import { ConfirmInfoAlertRow } from '../../../../../../../components/app/confirm/info/row/alert-row/alert-row';
import { RowAlertKey } from '../../../../../../../components/app/confirm/info/row/constants';
import { Box, Text } from '../../../../../../../components/component-library';
import Tooltip from '../../../../../../../components/ui/tooltip';
import {
AlignItems,
Display,
Expand All @@ -20,11 +21,13 @@ import { EditGasIconButton } from '../edit-gas-icon/edit-gas-icon-button';

export const EditGasFeesRow = ({
fiatFee,
fiatFeeWith18SignificantDigits,
nativeFee,
supportsEIP1559,
setShowCustomizeGasPopover,
}: {
fiatFee: string;
fiatFeeWith18SignificantDigits: string | null;
nativeFee: string;
supportsEIP1559: boolean;
setShowCustomizeGasPopover: Dispatch<SetStateAction<boolean>>;
Expand Down Expand Up @@ -62,7 +65,18 @@ export const EditGasFeesRow = ({
>
{nativeFee}
</Text>
{(!isTestnet || showFiatInTestnets) && (
{(!isTestnet || showFiatInTestnets) &&
fiatFeeWith18SignificantDigits ? (
<Tooltip title={fiatFeeWith18SignificantDigits}>
<Text
marginRight={2}
color={TextColor.textAlternative}
data-testid="native-currency"
>
{fiatFee}
</Text>
</Tooltip>
) : (
<Text
marginRight={2}
color={TextColor.textAlternative}
Expand Down
8 changes: 8 additions & 0 deletions ui/pages/confirmations/components/confirm/info/shared/gas-fees-details/gas-fees-details.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,12 +36,16 @@ export const GasFeesDetails = ({

const {
estimatedFeeFiat,
estimatedFeeFiatWith18SignificantDigits,
estimatedFeeNative,
l1FeeFiat,
l1FeeFiatWith18SignificantDigits,
l1FeeNative,
l2FeeFiat,
l2FeeFiatWith18SignificantDigits,
l2FeeNative,
maxFeeFiat,
maxFeeFiatWith18SignificantDigits,
maxFeeNative,
} = useFeeCalculations(transactionMeta);

Expand All @@ -57,6 +61,7 @@ export const GasFeesDetails = ({
<>
<EditGasFeesRow
fiatFee={estimatedFeeFiat}
fiatFeeWith18SignificantDigits={estimatedFeeFiatWith18SignificantDigits}
matthewwalsh0 marked this conversation as resolved.
Show resolved Hide resolved
nativeFee={estimatedFeeNative}
supportsEIP1559={supportsEIP1559}
setShowCustomizeGasPopover={setShowCustomizeGasPopover}
Expand All @@ -68,13 +73,15 @@ export const GasFeesDetails = ({
label={t('l1Fee')}
tooltipText={t('l1FeeTooltip')}
fiatFee={l1FeeFiat}
fiatFeeWith18SignificantDigits={l1FeeFiatWith18SignificantDigits}
nativeFee={l1FeeNative}
/>
<GasFeesRow
data-testid="gas-fee-details-l2"
label={t('l2Fee')}
tooltipText={t('l2FeeTooltip')}
fiatFee={l2FeeFiat}
fiatFeeWith18SignificantDigits={l2FeeFiatWith18SignificantDigits}
nativeFee={l2FeeNative}
/>
</>
Expand All @@ -100,6 +107,7 @@ export const GasFeesDetails = ({
label={t('maxFee')}
tooltipText={t('maxFeeTooltip')}
fiatFee={maxFeeFiat}
fiatFeeWith18SignificantDigits={maxFeeFiatWith18SignificantDigits}
nativeFee={maxFeeNative}
/>
)}
Expand Down
21 changes: 16 additions & 5 deletions ...ions/components/confirm/info/shared/gas-fees-row/__snapshots__/gas-fees-row.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,11 +42,22 @@ exports[`<GasFeesRow /> renders component 1`] = `
>
0.0001 ETH
</p>
<p
class="mm-box mm-text mm-text--body-md mm-box--color-text-alternative"
>
$1
</p>
<div>
<div
aria-describedby="tippy-tooltip-2"
class=""
data-original-title="0.001234"
data-tooltipped=""
style="display: inline;"
tabindex="0"
>
<p
class="mm-box mm-text mm-text--body-md mm-box--color-text-alternative"
>
$1
</p>
</div>
</div>
</div>
</div>
</div>
Expand Down
1 change: 1 addition & 0 deletions ui/pages/confirmations/components/confirm/info/shared/gas-fees-row/gas-fees-row.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ export const DefaultStory = () => (
label="Some kind of fee"
tooltipText="Tooltip text"
fiatFee="$1"
fiatFeeWith18SignificantDigits="0.001234"
nativeFee="0.0001 ETH"
/>
</ConfirmContextProvider>
Expand Down
1 change: 1 addition & 0 deletions ui/pages/confirmations/components/confirm/info/shared/gas-fees-row/gas-fees-row.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ describe('<GasFeesRow />', () => {
label="Some kind of fee"
tooltipText="Tooltip text"
fiatFee="$1"
fiatFeeWith18SignificantDigits="0.001234"
nativeFee="0.0001 ETH"
/>,
mockStore,
Expand Down
10 changes: 9 additions & 1 deletion ui/pages/confirmations/components/confirm/info/shared/gas-fees-row/gas-fees-row.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
ConfirmInfoRowVariant,
} from '../../../../../../../components/app/confirm/info/row';
import { Box, Text } from '../../../../../../../components/component-library';
import Tooltip from '../../../../../../../components/ui/tooltip';
import {
AlignItems,
Display,
Expand All @@ -22,12 +23,14 @@ export const GasFeesRow = ({
label,
tooltipText,
fiatFee,
fiatFeeWith18SignificantDigits,
nativeFee,
'data-testid': dataTestId,
}: {
label: string;
tooltipText: string;
fiatFee: string;
fiatFeeWith18SignificantDigits: string | null;
nativeFee: string;
'data-testid'?: string;
}) => {
Expand Down Expand Up @@ -58,7 +61,12 @@ export const GasFeesRow = ({
<Text marginRight={1} color={TextColor.textDefault}>
{nativeFee}
</Text>
{(!isTestnet || showFiatInTestnets) && (
{(!isTestnet || showFiatInTestnets) &&
fiatFeeWith18SignificantDigits ? (
<Tooltip title={fiatFeeWith18SignificantDigits}>
<Text color={TextColor.textAlternative}>{fiatFee}</Text>
</Tooltip>
) : (
<Text color={TextColor.textAlternative}>{fiatFee}</Text>
)}
</Box>
Expand Down
Loading