LaconicNetwork/vega-frontend-monorepo
3
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

feat(trading): fee discounts tweaks (#5205)

Browse Source
This commit is contained in:
Bartłomiej Głownia 2023-11-07 16:15:54 +01:00 committed by GitHub
parent 9233778e85
commit 1fdf519780
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 61 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/trading/client-pages/transfer/transfer.spec.tsx
View File

@ -8,7 +8,7 @@ jest.mock('@vegaprotocol/accounts', () => ({
),
}));
jest.mock('../../components/welcome-dialog/get-started.ts', () => ({
jest.mock('../../components/welcome-dialog/get-started', () => ({
GetStarted: () => <div>GetStarted</div>,
}));

2
apps/trading/client-pages/withdraw/withdraw.spec.tsx
View File

@ -8,7 +8,7 @@ jest.mock('../../components/withdraw-container', () => ({
),
}));
jest.mock('../../components/welcome-dialog/get-started.ts', () => ({
jest.mock('../../components/welcome-dialog/get-started', () => ({
GetStarted: () => <div>GetStarted</div>,
}));

20
libs/deal-ticket/src/components/deal-ticket/deal-ticket-fee-details.tsx
View File

@ -72,15 +72,11 @@ export const DealTicketFeeDetails = ({
return (
<KeyValue
label={t('Fees')}
value={
totalDiscountedFeeAmount &&
`~${formatValue(totalDiscountedFeeAmount, assetDecimals)}`
}
formattedValue={
label={
<>
{t('Fees')}
{totalDiscountFactor ? (
<Pill size="xxs" intent={Intent.Warning} className="mr-1">
<Pill size="xxs" intent={Intent.Info} className="ml-1">
-
{formatNumberPercentage(
new BigNumber(totalDiscountFactor).multipliedBy(100),
@ -88,10 +84,16 @@ export const DealTicketFeeDetails = ({
)}
</Pill>
) : null}
{totalDiscountedFeeAmount &&
`~${formatValue(totalDiscountedFeeAmount, assetDecimals, quantum)}`}
</>
}
value={
totalDiscountedFeeAmount &&
`~${formatValue(totalDiscountedFeeAmount, assetDecimals)}`
}
formattedValue={
totalDiscountedFeeAmount &&
`~${formatValue(totalDiscountedFeeAmount, assetDecimals, quantum)}`
}
labelDescription={
<div className="flex flex-col gap-2">
<p>

8
libs/deal-ticket/src/components/fees-breakdown/fees-breakdown.tsx
View File

@ -79,7 +79,11 @@ export const FeesBreakdown = ({
volumeDiscountFactor
);
const { volumeDiscount, referralDiscount } = getDiscountedFee(
const {
discountedFee: discountedTotalFeeAmount,
volumeDiscount,
referralDiscount,
} = getDiscountedFee(
totalFeeAmount,
referralDiscountFactor,
volumeDiscountFactor
@ -131,7 +135,7 @@ export const FeesBreakdown = ({
<FeesBreakdownItem
label={t('Total fees')}
factor={feeFactors ? sumFeesFactors(feeFactors)?.toString() : undefined}
value={totalFeeAmount}
value={discountedTotalFeeAmount}
symbol={symbol}
decimals={decimals}
/>

31
libs/fills/src/lib/fills-table.spec.tsx
View File

@ -289,17 +289,30 @@ describe('FeesDiscountBreakdownTooltip', () => {
const { container } = render(<FeesDiscountBreakdownTooltip {...props} />);
const dt = container.querySelectorAll('dt');
const dd = container.querySelectorAll('dd');
const expected = [
{ label: 'Infrastructure Fee Referral Discount', value: '0.05 BTC' },
{ label: 'Infrastructure Fee Volume Discount', value: '0.06 BTC' },
{ label: 'Liquidity Fee Referral Discount', value: '0.01 BTC' },
{ label: 'Liquidity Fee Volume Discount', value: '0.02 BTC' },
{ label: 'Maker Fee Referral Discount', value: '0.03 BTC' },
{ label: 'Maker Fee Volume Discount', value: '0.04 BTC' },
const expectedDt = [
'Infrastructure Fee',
'Referral Discount',
'Volume Discount',
'Liquidity Fee',
'Referral Discount',
'Volume Discount',
'Maker Fee',
'Referral Discount',
'Volume Discount',
];
expected.forEach(({ label, value }, i) => {
const expectedDD = [
'0.05 BTC',
'0.06 BTC',
'0.01 BTC',
'0.02 BTC',
'0.03 BTC',
'0.04 BTC',
];
expectedDt.forEach((label, i) => {
expect(dt[i]).toHaveTextContent(label);
expect(dd[i]).toHaveTextContent(value);
});
expectedDD.forEach((label, i) => {
expect(dd[i]).toHaveTextContent(label);
});
});
});

27
libs/fills/src/lib/fills-table.tsx
View File

@ -391,7 +391,7 @@ const FeesDiscountBreakdownTooltipItem = ({
label: string;
asset: ReturnType<typeof getAsset>;
}) =>
value ? (
value && value !== '0' ? (
<>
<dt className="col-span-1">{label}</dt>
<dd className="text-right col-span-1">
@ -418,34 +418,47 @@ export const FeesDiscountBreakdownTooltip = ({
className="max-w-sm bg-vega-light-100 dark:bg-vega-dark-100 border border-vega-light-200 dark:border-vega-dark-200 px-4 py-2 z-20 rounded text-sm break-word text-black dark:text-white"
>
<dl className="grid grid-cols-2 gap-x-1">
{(fees.infrastructureFeeReferralDiscount || '0') !== '0' ||
(fees.infrastructureFeeVolumeDiscount || '0') !== '0' ? (
<dt className="col-span-2">{t('Infrastructure Fee')}</dt>
) : null}
<FeesDiscountBreakdownTooltipItem
value={fees.infrastructureFeeReferralDiscount}
label={t('Infrastructure Fee Referral Discount')}
label={t('Referral Discount')}
asset={asset}
/>
<FeesDiscountBreakdownTooltipItem
value={fees.infrastructureFeeVolumeDiscount}
label={t('Infrastructure Fee Volume Discount')}
label={t('Volume Discount')}
asset={asset}
/>
{(fees.liquidityFeeReferralDiscount || '0') !== '0' ||
(fees.liquidityFeeVolumeDiscount || '0') !== '0' ? (
<dt className="col-span-2">{t('Liquidity Fee')}</dt>
) : null}
<FeesDiscountBreakdownTooltipItem
value={fees.liquidityFeeReferralDiscount}
label={t('Liquidity Fee Referral Discount')}
label={t('Referral Discount')}
asset={asset}
/>
<FeesDiscountBreakdownTooltipItem
value={fees.liquidityFeeVolumeDiscount}
label={t('Liquidity Fee Volume Discount')}
label={t('Volume Discount')}
asset={asset}
/>
{(fees.makerFeeReferralDiscount || '0') !== '0' ||
(fees.makerFeeVolumeDiscount || '0') !== '0' ? (
<dt className="col-span-2">{t('Maker Fee')}</dt>
) : null}
<FeesDiscountBreakdownTooltipItem
value={fees.makerFeeReferralDiscount}
label={t('Maker Fee Referral Discount')}
label={t('Referral Discount')}
asset={asset}
/>
<FeesDiscountBreakdownTooltipItem
value={fees.makerFeeVolumeDiscount}
label={t('Maker Fee Volume Discount')}
label={t('Volume Discount')}
asset={asset}
/>
</dl>