From 20233db706ac0169c0355e1a411533c6d2c6009f Mon Sep 17 00:00:00 2001 From: Matthew Russell Date: Wed, 1 Nov 2023 13:32:51 -0700 Subject: [PATCH] fix(deal-ticket): fees breakdown rendering issues (#5173) --- ...proposal-referral-program-details.spec.tsx | 4 +-- .../deal-ticket/deal-ticket-fee-details.tsx | 10 +++--- .../fees-breakdown/fees-breakdown.spec.tsx | 36 +++++++++++++++++++ .../fees-breakdown/fees-breakdown.tsx | 2 +- libs/markets/src/lib/market-utils.spec.tsx | 8 ++--- libs/utils/src/lib/format/number.spec.ts | 4 +-- libs/utils/src/lib/format/number.ts | 2 +- 7 files changed, 51 insertions(+), 15 deletions(-) create mode 100644 libs/deal-ticket/src/components/fees-breakdown/fees-breakdown.spec.tsx diff --git a/apps/governance/src/routes/proposals/components/proposal-referral-program-details/proposal-referral-program-details.spec.tsx b/apps/governance/src/routes/proposals/components/proposal-referral-program-details/proposal-referral-program-details.spec.tsx index e8a998372..1069c8c35 100644 --- a/apps/governance/src/routes/proposals/components/proposal-referral-program-details/proposal-referral-program-details.spec.tsx +++ b/apps/governance/src/routes/proposals/components/proposal-referral-program-details/proposal-referral-program-details.spec.tsx @@ -36,13 +36,13 @@ describe('ProposalReferralProgramDetails helper functions', () => { it('should format referral discount factor correctly', () => { const input = '0.05'; const formatted = formatReferralDiscountFactor(input); - expect(formatted).toBe('5.00%'); + expect(formatted).toBe('5%'); }); it('should format referral reward factor correctly', () => { const input = '0.1'; const formatted = formatReferralRewardFactor(input); - expect(formatted).toBe('10.00%'); + expect(formatted).toBe('10%'); }); it('should format minimum staked tokens correctly', () => { diff --git a/libs/deal-ticket/src/components/deal-ticket/deal-ticket-fee-details.tsx b/libs/deal-ticket/src/components/deal-ticket/deal-ticket-fee-details.tsx index e84646605..dd1d6fa83 100644 --- a/libs/deal-ticket/src/components/deal-ticket/deal-ticket-fee-details.tsx +++ b/libs/deal-ticket/src/components/deal-ticket/deal-ticket-fee-details.tsx @@ -79,7 +79,7 @@ export const DealTicketFeeDetails = ({ } formattedValue={ <> - {totalDiscountFactor && ( + {totalDiscountFactor ? ( - {formatNumberPercentage( @@ -87,14 +87,14 @@ export const DealTicketFeeDetails = ({ 2 )} - )} + ) : null} {totalDiscountedFeeAmount && `~${formatValue(totalDiscountedFeeAmount, assetDecimals, quantum)}`} } labelDescription={ - <> -

+

+

{t( `An estimate of the most you would be expected to pay in fees, in the market's settlement asset ${assetSymbol}. Fees estimated are "taker" fees and will only be payable if the order trades aggressively. Rebate equal to the maker portion will be paid to the trader if the order trades passively.` )} @@ -108,7 +108,7 @@ export const DealTicketFeeDetails = ({ symbol={assetSymbol} decimals={assetDecimals} /> - +

} symbol={assetSymbol} /> diff --git a/libs/deal-ticket/src/components/fees-breakdown/fees-breakdown.spec.tsx b/libs/deal-ticket/src/components/fees-breakdown/fees-breakdown.spec.tsx new file mode 100644 index 000000000..9d99789c5 --- /dev/null +++ b/libs/deal-ticket/src/components/fees-breakdown/fees-breakdown.spec.tsx @@ -0,0 +1,36 @@ +import { render, screen } from '@testing-library/react'; +import { FeesBreakdown } from './fees-breakdown'; + +describe('FeesBreakdown', () => { + it('formats fee factors correctly', () => { + const feeFactors = { + makerFee: '0.00005', + infrastructureFee: '0.001', + liquidityFee: '0.5', + }; + const fees = { + makerFee: '100', + infrastructureFee: '100', + liquidityFee: '100', + }; + const props = { + totalFeeAmount: '100', + fees, + feeFactors, + symbol: 'USD', + decimals: 2, + referralDiscountFactor: '0.01', + volumeDiscountFactor: '0.01', + }; + render(); + expect(screen.getByText('Maker fee').nextElementSibling).toHaveTextContent( + '0.005%' + ); + expect( + screen.getByText('Infrastructure fee').nextElementSibling + ).toHaveTextContent('0.1%'); + expect( + screen.getByText('Liquidity fee').nextElementSibling + ).toHaveTextContent('50%'); + }); +}); diff --git a/libs/deal-ticket/src/components/fees-breakdown/fees-breakdown.tsx b/libs/deal-ticket/src/components/fees-breakdown/fees-breakdown.tsx index 362447481..c001ffb00 100644 --- a/libs/deal-ticket/src/components/fees-breakdown/fees-breakdown.tsx +++ b/libs/deal-ticket/src/components/fees-breakdown/fees-breakdown.tsx @@ -33,7 +33,7 @@ const FeesBreakdownItem = ({
{label}
{factor && (
- {formatNumberPercentage(new BigNumber(factor).times(100), 2)} + {formatNumberPercentage(new BigNumber(factor).times(100))}
)}
diff --git a/libs/markets/src/lib/market-utils.spec.tsx b/libs/markets/src/lib/market-utils.spec.tsx index 58020185e..2bb759f81 100644 --- a/libs/markets/src/lib/market-utils.spec.tsx +++ b/libs/markets/src/lib/market-utils.spec.tsx @@ -72,10 +72,10 @@ describe('totalFeesFactorsPercentage', () => { makerFee: f[2].toString(), }); it.each([ - { i: createFee(0, 0, 1), o: '100.00%' }, - { i: createFee(0, 1, 0), o: '100.00%' }, - { i: createFee(1, 0, 0), o: '100.00%' }, - { i: createFee(0.01, 0.02, 0.003), o: '3.30%' }, + { i: createFee(0, 0, 1), o: '100%' }, + { i: createFee(0, 1, 0), o: '100%' }, + { i: createFee(1, 0, 0), o: '100%' }, + { i: createFee(0.01, 0.02, 0.003), o: '3.3%' }, { i: createFee(0.01, 0.056782, 0.003), o: '6.9782%' }, { i: createFee(0.01, 0.056782, 0), o: '6.6782%' }, ])('adds fees correctly', ({ i, o }) => { diff --git a/libs/utils/src/lib/format/number.spec.ts b/libs/utils/src/lib/format/number.spec.ts index d30e14ab7..ca2530460 100644 --- a/libs/utils/src/lib/format/number.spec.ts +++ b/libs/utils/src/lib/format/number.spec.ts @@ -77,8 +77,8 @@ describe('number utils', () => { { v: new BigNumber(123.123), d: 3, o: '123.123%' }, { v: new BigNumber(123.123), d: 6, o: '123.123%' }, { v: new BigNumber(123.123), d: 0, o: '123%' }, - { v: new BigNumber(123), d: undefined, o: '123.00%' }, // it default to 2 decimal places - { v: new BigNumber(30000), d: undefined, o: '30,000.00%' }, + { v: new BigNumber(123), d: undefined, o: '123%' }, // it default to 2 decimal places + { v: new BigNumber(30000), d: undefined, o: '30,000%' }, { v: new BigNumber(3.000001), d: undefined, o: '3.000001%' }, ])('formats given number correctly', ({ v, d, o }) => { expect(formatNumberPercentage(v, d)).toStrictEqual(o); diff --git a/libs/utils/src/lib/format/number.ts b/libs/utils/src/lib/format/number.ts index 783dfaf5c..6f721ccbd 100644 --- a/libs/utils/src/lib/format/number.ts +++ b/libs/utils/src/lib/format/number.ts @@ -158,7 +158,7 @@ export const addDecimalsFixedFormatNumber = ( export const formatNumberPercentage = (value: BigNumber, decimals?: number) => { const decimalPlaces = - typeof decimals === 'undefined' ? Math.max(value.dp() || 0, 2) : decimals; + typeof decimals === 'undefined' ? value.dp() || 0 : decimals; return `${formatNumber(value, decimalPlaces)}%`; };