Skip to content

Commit

Permalink
chore: Update APRs style and fix display (#4325)
Browse files Browse the repository at this point in the history 
* chore: Update APRs style and fix display

* fix: Tooltip specs

* fix: tests

---------

Co-authored-by: Alberto Gualis <[email protected]>
  • Loading branch information
@garethfuller @agualis
garethfuller and agualis authored Oct 16, 2023
1 parent c2f144c commit 0b1fcae
Show file tree
Hide file tree
Showing 17 changed files with 208 additions and 294 deletions.
4 changes: 3 additions & 1 deletion src/components/contextual/pages/pool/PoolStatCards.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import { Pool } from '@/services/pool/types';
import { AprBreakdown } from '@balancer-labs/sdk';
import { useCrossChainSync } from '@/providers/cross-chain-sync.provider';
import useNetwork from '@/composables/useNetwork';
import useWeb3 from '@/services/web3/useWeb3';
/**
* TYPES
Expand Down Expand Up @@ -41,6 +42,7 @@ const { fNum } = useNumbers();
const { t } = useI18n();
const { l2VeBalBalances } = useCrossChainSync();
const { networkId } = useNetwork();
const { isWalletReady } = useWeb3();
/**
* COMPUTED
Expand All @@ -49,7 +51,7 @@ const aprLabel = computed((): string => {
const poolAPRs = props.poolApr;
if (!poolAPRs) return '0';
return totalAprLabel(poolAPRs, props.pool?.boost);
return totalAprLabel(poolAPRs, props.pool?.boost, isWalletReady.value);
});
const syncVeBalTooltip = computed(() => {
Expand Down
4 changes: 3 additions & 1 deletion src/components/tables/PoolsTable/PoolsTable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ import { poolMetadata } from '@/lib/config/metadata';
import PoolsTableExtraInfo from './PoolsTableExtraInfo.vue';
import PoolsTableActionSelector from './PoolsTableActionSelector.vue';
import { PoolAction } from '@/components/contextual/pages/pools/types';
import useWeb3 from '@/services/web3/useWeb3';
/**
* TYPES
Expand Down Expand Up @@ -102,6 +103,7 @@ const { trackGoal, Goals } = useFathom();
const { darkMode } = useDarkMode();
const { upToLargeBreakpoint, upToSmallBreakpoint } = useBreakpoints();
const { networkSlug } = useNetwork();
const { isWalletReady } = useWeb3();
const wideCompositionWidth = computed(() => {
if (upToSmallBreakpoint.value) return 250;
Expand Down Expand Up @@ -271,7 +273,7 @@ function aprLabelFor(pool: Pool): string {
const poolAPRs = pool?.apr;
if (!poolAPRs) return '0';
return totalAprLabel(poolAPRs, boostFor(pool));
return totalAprLabel(poolAPRs, boostFor(pool), isWalletReady.value);
}
function lockedUntil(lockEndDate?: number) {
Expand Down
236 changes: 79 additions & 157 deletions src/components/tooltips/APRTooltip/APRTooltip.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ describe('APRTooltip', () => {
expect(getByTestId('total-apr').textContent).toBe('Total APR15.22%');
expect(getByTestId('swap-fee-apr')).toBeTruthy();
expect(getByTestId('swap-fee-apr').textContent).toBe(
'15.22% Swap fees APR'
'Swap fees APR 15.22%'
);
});
});
Expand Down Expand Up @@ -75,7 +75,7 @@ describe('APRTooltip', () => {
'Total APR0.78% - 1.95%'
);
expect(getByTestId('vebal-apr').textContent).toContain(
'1.17% Max locking/veBAL APR'
'Max locking/veBAL APR1.17%'
);
});
});
Expand All @@ -101,19 +101,17 @@ describe('APRTooltip', () => {
'Total APR0.44% - 5.67%'
);
expect(getByTestId('swap-fee-apr').textContent).toBe(
'0.00% Swap fees APR'
'Swap fees APR 0.00%'
);
expect(getByTestId('staking-apr').textContent).toContain(
'Staking APR 0.44% - 5.67%'
);
expect(getByTestId('staking-apr').textContent).toContain(
'Min BAL APR 0.44%'
);
expect(getByTestId('staking-apr').textContent).toContain(
'Max BAL APR 5.67%'
);
expect(
getByTestId('staking-apr').children[0].children[0].textContent
).toBe('0.44% Min staking APR');
expect(
getByTestId('staking-apr').children[0].children[1].children[0]
.textContent
).toBe('0.44% Min BAL APR');
expect(
getByTestId('staking-apr').children[0].children[1].children[1]
.textContent
).toBe('5.67% Max BAL APR');
});

it('Should show swap fees and staking rewards', () => {
Expand All @@ -137,19 +135,17 @@ describe('APRTooltip', () => {
'Total APR2.71% - 7.78%'
);
expect(getByTestId('swap-fee-apr').textContent).toBe(
'2.23% Swap fees APR'
'Swap fees APR 2.23%'
);
expect(getByTestId('staking-apr').textContent).toContain(
'Staking APR 0.48% - 5.55%'
);
expect(getByTestId('staking-apr').textContent).toContain(
'Min BAL APR 0.48%'
);
expect(getByTestId('staking-apr').textContent).toContain(
'Max BAL APR 5.55%'
);
expect(
getByTestId('staking-apr').children[0].children[0].textContent
).toBe('0.48% Min staking APR');
expect(
getByTestId('staking-apr').children[0].children[1].children[0]
.textContent
).toBe('0.48% Min BAL APR');
expect(
getByTestId('staking-apr').children[0].children[1].children[1]
.textContent
).toBe('5.55% Max BAL APR');
});

it('Should show staking rewards as a single line item if min and max are the same', () => {
Expand All @@ -169,88 +165,35 @@ describe('APRTooltip', () => {
poolApr: aprBreakdown,
},
});
expect(getByTestId('staking-apr').textContent).toBe('7.63% Staking APR');
expect(getByTestId('staking-apr').textContent).toBe('Staking APR 7.63%');
});
});

describe('Token Aprs', () => {
it('Should show stETH token APRs', () => {
it('Should show WETH token APRs', () => {
const aprBreakdown: AprBreakdown = {
...EmptyAprBreakdownMock,
tokenAprs: {
total: 166,
breakdown: {
[configService.network.tokens.Addresses.wstETH || '']: 166,
[configService.network.tokens.Addresses.WETH || '']: 166,
},
},
min: 166,
max: 166,
};
const poolMock: Pool = {
...EmptyPoolMock,
tokensList: [configService.network.tokens.Addresses.wstETH || ''],
tokensList: [configService.network.tokens.Addresses.WETH || ''],
};
const { getByTestId } = renderComponent(APRTooltip, {
props: {
pool: poolMock,
poolApr: aprBreakdown,
},
});
expect(getByTestId('total-apr').textContent).toBe('Total APR1.66%');
expect(getByTestId('yield-apr').textContent).toBe('1.66% Token APR');
});

it('Should show stMATIC token APRs', () => {
const aprBreakdown: AprBreakdown = {
...EmptyAprBreakdownMock,
tokenAprs: {
total: 153,
breakdown: {
'0x3a58a54c066fdc0f2d55fc9c89f0415c92ebf3c4': 153,
},
},
min: 153,
max: 153,
};
const poolMock: Pool = {
...EmptyPoolMock,
tokensList: [configService.network.tokens.Addresses.stMATIC || ''],
};
const { getByTestId } = renderComponent(APRTooltip, {
props: {
pool: poolMock,
poolApr: aprBreakdown,
},
});
expect(getByTestId('total-apr').textContent).toBe('Total APR1.53%');
expect(getByTestId('yield-apr').textContent).toBe('1.53% stMATIC APR');
});

it('Should show rETH token APRs', () => {
const aprBreakdown: AprBreakdown = {
...EmptyAprBreakdownMock,
swapFees: 29,
tokenAprs: {
total: 73,
breakdown: {
[configService.network.tokens.Addresses.rETH || '']: 73,
},
},
min: 102,
max: 102,
};
const poolMock: Pool = {
...EmptyPoolMock,
tokensList: [configService.network.tokens.Addresses.rETH || ''],
};
const { getByTestId } = renderComponent(APRTooltip, {
props: {
pool: poolMock,
poolApr: aprBreakdown,
},
});
expect(getByTestId('total-apr').textContent).toBe('Total APR1.02%');
expect(getByTestId('yield-apr').textContent).toBe('0.73% Token APR');
expect(getByTestId('total-apr').textContent).toContain('Total APR1.66%');
expect(getByTestId('yield-apr').textContent).toContain('WETH APR 1.66%');
});

it('Should show multiple token APRs with a generic header', () => {
Expand Down Expand Up @@ -279,17 +222,11 @@ describe('APRTooltip', () => {
},
});
expect(getByTestId('total-apr').textContent).toBe('Total APR1.02%');
const yieldAprBreakdown = getByTestId('yield-apr').children[0];
expect(yieldAprBreakdown.children[0].textContent).toBe('2.54% Token APR');
expect(yieldAprBreakdown.children[1].children[0].textContent).toBe(
'1.18% wstETH APR'
);
expect(yieldAprBreakdown.children[1].children[1].textContent).toBe(
'1.04% sfrxETH APR'
);
expect(yieldAprBreakdown.children[1].children[2].textContent).toBe(
'0.32% rETH APR'
);
const yieldAprBreakdown = getByTestId('yield-apr');
expect(yieldAprBreakdown.textContent).toContain('Boosted APR 2.54%');
expect(yieldAprBreakdown.textContent).toContain('wstETH APR 1.18%');
expect(yieldAprBreakdown.textContent).toContain('sfrxETH APR 1.04%');
expect(yieldAprBreakdown.textContent).toContain('rETH APR 0.32%');
});

it('Should show a breakdown of a boosted pools linear pool APRs and staking rewards', () => {
Expand Down Expand Up @@ -329,30 +266,20 @@ describe('APRTooltip', () => {
expect(getByTestId('total-apr').textContent).toBe(
'Total APR1.75% - 2.20%'
);
const yieldAprBreakdown = getByTestId('yield-apr').children[0];
expect(yieldAprBreakdown.children[0].textContent).toBe(
'1.31% Boosted APR'
);
expect(yieldAprBreakdown.children[1].children[0].textContent).toBe(
'1.15% bb-a-USDT APR'
const yieldAprBreakdown = getByTestId('yield-apr');
expect(yieldAprBreakdown.textContent).toContain('Boosted APR 1.31%');
expect(yieldAprBreakdown.textContent).toContain('bb-a-USDT APR 1.15%');
expect(yieldAprBreakdown.textContent).toContain('bb-a-USDC APR 0.04%');
expect(yieldAprBreakdown.textContent).toContain('bb-a-DAI APR 0.12%');
expect(getByTestId('staking-apr').textContent).toContain(
'Staking APR 0.30% - 0.75%'
);
expect(yieldAprBreakdown.children[1].children[1].textContent).toBe(
'0.04% bb-a-USDC APR'
expect(getByTestId('staking-apr').textContent).toContain(
'Min BAL APR 0.30%'
);
expect(yieldAprBreakdown.children[1].children[2].textContent).toBe(
'0.12% bb-a-DAI APR'
expect(getByTestId('staking-apr').textContent).toContain(
'Max BAL APR 0.75%'
);
expect(
getByTestId('staking-apr').children[0].children[0].textContent
).toBe('0.30% Min staking APR');
expect(
getByTestId('staking-apr').children[0].children[1].children[0]
.textContent
).toBe('0.30% Min BAL APR');
expect(
getByTestId('staking-apr').children[0].children[1].children[1]
.textContent
).toBe('0.75% Max BAL APR');
});

it('Should show boosted staking rewards as a line item for pools that contain a boosted pool', () => {
Expand Down Expand Up @@ -380,18 +307,18 @@ describe('APRTooltip', () => {
expect(getByTestId('total-apr').textContent).toBe(
'Total APR5.95% - 14.46%'
);
expect(getByTestId('yield-apr').textContent).toBe('0.28% Boosted APR');
expect(
getByTestId('staking-apr').children[0].children[0].textContent
).toBe('5.67% Min staking APR');
expect(
getByTestId('staking-apr').children[0].children[1].children[0]
.textContent
).toBe('5.67% Min BAL APR');
expect(
getByTestId('staking-apr').children[0].children[1].children[1]
.textContent
).toBe('14.18% Max BAL APR');
expect(getByTestId('yield-apr').textContent).toContain(
'Boosted APR 0.28%'
);
expect(getByTestId('staking-apr').textContent).toContain(
'Staking APR 5.67% - 14.18%'
);
expect(getByTestId('staking-apr').textContent).toContain(
'Min BAL APR 5.67%'
);
expect(getByTestId('staking-apr').textContent).toContain(
'Max BAL APR 14.18%'
);
});

it('Should show veBAL staking rewards as a line item for pools that contain the 80/20 veBAL pool', () => {
Expand All @@ -414,7 +341,9 @@ describe('APRTooltip', () => {
},
});
expect(getByTestId('total-apr').textContent).toBe('Total APR0.17%');
expect(getByTestId('yield-apr').textContent).toBe('0.17% veBAL APR');
expect(getByTestId('yield-apr').textContent).toContain(
'Boosted APR 0.17%'
);
});
});

Expand Down Expand Up @@ -445,23 +374,20 @@ describe('APRTooltip', () => {
'Total APR1.67% - 6.45%'
);
expect(getByTestId('swap-fee-apr').textContent).toBe(
'0.00% Swap fees APR'
'Swap fees APR 0.00%'
);
expect(getByTestId('staking-apr').textContent).toContain(
'Staking APR 1.67% - 6.45%'
);
expect(getByTestId('staking-apr').textContent).toContain(
'Min BAL APR 0.44%'
);
expect(getByTestId('staking-apr').textContent).toContain(
'Max BAL APR 5.22%'
);
expect(getByTestId('staking-apr').textContent).toContain(
'Rewards APR 1.23%'
);
expect(
getByTestId('staking-apr').children[0].children[0].textContent
).toBe('1.67% Min staking APR');
expect(
getByTestId('staking-apr').children[0].children[1].children[0]
.textContent
).toBe('0.44% Min BAL APR');
expect(
getByTestId('staking-apr').children[0].children[1].children[1]
.textContent
).toBe('5.22% Max BAL APR');
expect(
getByTestId('staking-apr').children[0].children[1].children[2]
.textContent
).toBe('1.23% Rewards APR');
});

it('Should show BAL + staking rewards as line items if staking APR is the same but there are rewards', () => {
Expand All @@ -486,17 +412,13 @@ describe('APRTooltip', () => {
poolApr: aprBreakdown,
},
});
expect(
getByTestId('staking-apr').children[0].children[0].textContent
).toBe('10.51% Staking APR');
expect(
getByTestId('staking-apr').children[0].children[1].children[0]
.textContent
).toBe('7.63% BAL APR');
expect(
getByTestId('staking-apr').children[0].children[1].children[1]
.textContent
).toBe('2.88% Rewards APR');
expect(getByTestId('staking-apr').textContent).toContain(
'Staking APR 10.51%'
);
expect(getByTestId('staking-apr').textContent).toContain('BAL APR 7.63%');
expect(getByTestId('staking-apr').textContent).toContain(
'Rewards APR 2.88%'
);
});
});
});
Loading

1 comment on commit 0b1fcae

@vercel
Copy link

@vercel vercel bot commented on 0b1fcae Oct 16, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

beta-app-v2 – ./

beta-app-v2-balancer.vercel.app
beta-app-v2.vercel.app
beta-app-v2-git-develop-balancer.vercel.app
beta.balancer.fi

Please sign in to comment.