Skip to content
This repository was archived by the owner on Oct 11, 2024. It is now read-only.

Commit 8650c04

Browse files
lyaunzbelyaunzbe
authored
Merge pull request #388 from 0xProject/feat/pools-list-apy
Staking home/pool index + APR sorting
2 parents dd29d6f + ae2c9d8 commit 8650c04

File tree

7 files changed

+231
-24
lines changed

7 files changed

+231
-24
lines changed

‎ts/components/staking/pools_list_sorting_selector.tsx‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,7 @@ const sortingParamMapping = {
101101
[PoolsListSortingParameter.Staked]: 'Saturation',
102102
[PoolsListSortingParameter.RewardsShared]: 'Average Rewards Shared',
103103
[PoolsListSortingParameter.ProtocolFees]: 'Fees Generated',
104+
[PoolsListSortingParameter.Apy]: 'APR',
104105
};
105106

106107
interface PoolsListSortingSelectorProps {
@@ -121,13 +122,13 @@ export const PoolsListSortingSelector: React.FC<PoolsListSortingSelectorProps> =
121122
</ToggleRow>
122123
{isExpanded && (
123124
<ExpandedMenu>
124-
<MenuItem onClick={() => setPoolSortingParam(PoolsListSortingParameter.Staked)}>
125-
<StyledText>{sortingParamMapping[PoolsListSortingParameter.Staked]}</StyledText>
125+
<MenuItem onClick={() => setPoolSortingParam(PoolsListSortingParameter.Apy)}>
126+
<StyledText>{sortingParamMapping[PoolsListSortingParameter.Apy]}</StyledText>
126127
<StyledDescription>
127-
An approximation of the pool saturation for the upcoming epoch.{' '}
128+
The 12 week average ROI from staking in this pool{' '}
128129
<StyledButton
129130
target="_blank"
130-
href={`${constants.STAKING_FAQ_DOCS}#what-is-saturation-previously-called-stake--or-stake-ratio`}
131+
href={`${constants.STAKING_FAQ_DOCS}#what-are-rewards-shared`}
131132
isInline={true}
132133
isTransparent={true}
133134
isNoBorder={true}
@@ -140,13 +141,13 @@ export const PoolsListSortingSelector: React.FC<PoolsListSortingSelectorProps> =
140141
</StyledButton>
141142
</StyledDescription>
142143
</MenuItem>
143-
<MenuItem onClick={() => setPoolSortingParam(PoolsListSortingParameter.RewardsShared)}>
144-
<StyledText>{sortingParamMapping[PoolsListSortingParameter.RewardsShared]}</StyledText>
144+
<MenuItem onClick={() => setPoolSortingParam(PoolsListSortingParameter.Staked)}>
145+
<StyledText>{sortingParamMapping[PoolsListSortingParameter.Staked]}</StyledText>
145146
<StyledDescription>
146-
The average rewards the pool has shared with stakers, per epoch.{' '}
147+
An approximation of the pool saturation for the upcoming epoch.{' '}
147148
<StyledButton
148149
target="_blank"
149-
href={`${constants.STAKING_FAQ_DOCS}#what-are-rewards-shared`}
150+
href={`${constants.STAKING_FAQ_DOCS}#what-is-saturation-previously-called-stake--or-stake-ratio`}
150151
isInline={true}
151152
isTransparent={true}
152153
isNoBorder={true}

‎ts/components/staking/staking_pool_detail_row.tsx‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { utils } from 'ts/utils/utils';
88

99
import { CircleCheckMark } from 'ts/components/ui/circle_check_mark';
1010
import { generateUniqueId, Jazzicon } from 'ts/components/ui/jazzicon';
11-
import { formatEther } from 'ts/utils/format_number';
11+
import { formatPercent } from 'ts/utils/format_number';
1212

1313
const StyledStatLabel = styled.div`
1414
position: relative;
@@ -30,6 +30,7 @@ const PoolWebsiteLink = ({ websiteUrl }: { websiteUrl: string }) => (
3030
);
3131

3232
interface IStakingPoolDetailRowProps {
33+
apy: number;
3334
name: string;
3435
address: string;
3536
totalFeesGeneratedInEth: number;
@@ -44,6 +45,7 @@ interface IStakingPoolDetailRowProps {
4445
}
4546

4647
export const StakingPoolDetailRow: React.FC<IStakingPoolDetailRowProps> = ({
48+
apy,
4749
name,
4850
poolId,
4951
thumbnailUrl,
@@ -86,15 +88,15 @@ export const StakingPoolDetailRow: React.FC<IStakingPoolDetailRowProps> = ({
8688
</DesktopOnlyWrapper>
8789
</PoolOverviewSection>
8890
<PoolPerformanceSection>
89-
<PoolPerformanceItem>
90-
<span>Fees generated</span>
91-
<span>{formatEther(totalFeesGeneratedInEth || 0).formatted} ETH</span>
92-
</PoolPerformanceItem>
93-
<PoolPerformanceItem cutOffRem={ScreenWidths.Sm}>
94-
<span>Avg. rewards shared</span>
95-
<span>{formatEther(averageRewardsSharedInEth || 0).formatted} ETH</span>
91+
<PoolPerformanceItem style={{ width: '8rem' }}>
92+
<span>APR (12 week avg.)</span>
93+
<div>
94+
<StyledStatLabel>
95+
{Number(formatPercent(apy * 100 || 0, { decimals: 2 }).minimized).toFixed(2)}%
96+
</StyledStatLabel>
97+
</div>
9698
</PoolPerformanceItem>
97-
<PoolPerformanceItem>
99+
<PoolPerformanceItem style={{ flex: 'none' }}>
98100
<span>Saturation</span>
99101
<div>
100102
<StyledStatLabel>
@@ -193,8 +195,8 @@ const DetailsText = styled.span`
193195
const PoolPerformanceSection = styled.div`
194196
display: flex;
195197
margin-left: auto;
196-
width: 480px;
197-
justify-content: space-around;
198+
width: auto;
199+
justify-content: flex-end;
198200
199201
@media (max-width: ${ScreenWidths.Lg}rem) {
200202
width: 100%;
@@ -207,7 +209,6 @@ const PoolPerformanceItem = styled.div<{ cutOffRem?: number }>`
207209
position: relative;
208210
flex-direction: column;
209211
justify-content: center;
210-
flex: 1;
211212
212213
span:nth-of-type(1) {
213214
font-size: 14px;

‎ts/pages/staking/home.tsx‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ const sortFnMapping: { [key: string]: (a: PoolWithStats, b: PoolWithStats) => nu
3131
[PoolsListSortingParameter.Staked]: stakingUtils.sortByStakedDesc,
3232
[PoolsListSortingParameter.ProtocolFees]: stakingUtils.sortByProtocolFeesDesc,
3333
[PoolsListSortingParameter.RewardsShared]: stakingUtils.sortByRewardsSharedDesc,
34+
[PoolsListSortingParameter.Apy]: stakingUtils.sortByApyDesc,
3435
};
3536

3637
const HeadingRow = styled.div`
@@ -54,7 +55,7 @@ export const StakingIndex: React.FC<StakingIndexProps> = () => {
5455
const [nextEpochStats, setNextEpochStats] = React.useState<Epoch | undefined>(undefined);
5556

5657
const [poolSortingParam, setPoolSortingParam] = React.useState<PoolsListSortingParameter>(
57-
PoolsListSortingParameter.ProtocolFees,
58+
PoolsListSortingParameter.Apy,
5859
);
5960

6061
React.useEffect(() => {
@@ -71,7 +72,21 @@ export const StakingIndex: React.FC<StakingIndexProps> = () => {
7172
if (!stakingPools) {
7273
return undefined;
7374
}
74-
return [...stakingPools].sort(sortFnMapping[poolSortingParam]);
75+
76+
const stakngPoolsWithAPY = stakingPools.map((pool) => {
77+
const rewards = pool.allTimeStakedAmounts;
78+
const average = (arr: number[]) => arr.reduce((sum, el) => sum + el, 0) / arr.length;
79+
80+
const epochRewardAPYs = rewards.map((reward) => {
81+
return reward.apy;
82+
});
83+
84+
const rewardsToAverageLongTerm =
85+
epochRewardAPYs.length > 12 ? epochRewardAPYs.slice(Math.max(rewards.length - 12, 0)) : epochRewardAPYs;
86+
87+
return { ...pool, apy: average(rewardsToAverageLongTerm) };
88+
});
89+
return [...stakngPoolsWithAPY].sort(sortFnMapping[poolSortingParam]);
7590
}, [poolSortingParam, stakingPools]);
7691

7792
// TODO(kimpers): centralize data fetching so we only fetch once
@@ -152,6 +167,7 @@ export const StakingIndex: React.FC<StakingIndexProps> = () => {
152167
sortedStakingPools.map((pool) => {
153168
return (
154169
<StakingPoolDetailRow
170+
apy={pool.apy}
155171
to={_.replace(WebsitePaths.StakingPool, ':poolId', pool.poolId)}
156172
key={pool.poolId}
157173
poolId={pool.poolId}

‎ts/pages/staking/staking_pool.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -163,7 +163,7 @@ export const StakingPool: React.FC<StakingPoolProps & RouteChildrenProps> = (pro
163163
// number: '1.23M USD',
164164
// },
165165
{
166-
title: 'APY (last 3 epochs)',
166+
title: 'APR (last 3 epochs)',
167167
number: `${formatPercent(stakingPoolAPY3Epochs * 100 || 0).minimized}%`,
168168
},
169169
{
@@ -224,7 +224,7 @@ export const StakingPool: React.FC<StakingPoolProps & RouteChildrenProps> = (pro
224224
title: 'All Time',
225225
metrics: [
226226
{
227-
title: 'APY (last 12 epochs)',
227+
title: 'APR (last 12 epochs)',
228228
number: `${formatPercent(stakingPoolAPY12Epochs * 100 || 0).minimized}%`,
229229
},
230230
{

0 commit comments

Comments
 (0)