stylefixes + apr sorting param

Author: lyaunzbe

ts/components/staking/pools_list_sorting_selector.tsx

@@ -101,6 +101,7 @@ const sortingParamMapping = {
     [PoolsListSortingParameter.Staked]: 'Saturation',
     [PoolsListSortingParameter.RewardsShared]: 'Average Rewards Shared',
     [PoolsListSortingParameter.ProtocolFees]: 'Fees Generated',
+    [PoolsListSortingParameter.Apy]: 'APR',
 };
 
 interface PoolsListSortingSelectorProps {
@@ -121,13 +122,13 @@ export const PoolsListSortingSelector: React.FC<PoolsListSortingSelectorProps> =
             </ToggleRow>
             {isExpanded && (
                 <ExpandedMenu>
-                    <MenuItem onClick={() => setPoolSortingParam(PoolsListSortingParameter.Staked)}>
-                        <StyledText>{sortingParamMapping[PoolsListSortingParameter.Staked]}</StyledText>
+                    <MenuItem onClick={() => setPoolSortingParam(PoolsListSortingParameter.Apy)}>
+                        <StyledText>{sortingParamMapping[PoolsListSortingParameter.Apy]}</StyledText>
                         <StyledDescription>
-                            An approximation of the pool saturation for the upcoming epoch.{' '}
+                            The 12 week average ROI from staking in this pool{' '}
                             <StyledButton
                                 target="_blank"
-                                href={`${constants.STAKING_FAQ_DOCS}#what-is-saturation-previously-called-stake--or-stake-ratio`}
+                                href={`${constants.STAKING_FAQ_DOCS}#what-are-rewards-shared`}
                                 isInline={true}
                                 isTransparent={true}
                                 isNoBorder={true}
@@ -140,13 +141,13 @@ export const PoolsListSortingSelector: React.FC<PoolsListSortingSelectorProps> =
                             </StyledButton>
                         </StyledDescription>
                     </MenuItem>
-                    <MenuItem onClick={() => setPoolSortingParam(PoolsListSortingParameter.RewardsShared)}>
-                        <StyledText>{sortingParamMapping[PoolsListSortingParameter.RewardsShared]}</StyledText>
+                    <MenuItem onClick={() => setPoolSortingParam(PoolsListSortingParameter.Staked)}>
+                        <StyledText>{sortingParamMapping[PoolsListSortingParameter.Staked]}</StyledText>
                         <StyledDescription>
-                            The average rewards the pool has shared with stakers, per epoch.{' '}
+                            An approximation of the pool saturation for the upcoming epoch.{' '}
                             <StyledButton
                                 target="_blank"
-                                href={`${constants.STAKING_FAQ_DOCS}#what-are-rewards-shared`}
+                                href={`${constants.STAKING_FAQ_DOCS}#what-is-saturation-previously-called-stake--or-stake-ratio`}
                                 isInline={true}
                                 isTransparent={true}
                                 isNoBorder={true}

ts/components/staking/staking_pool_detail_row.tsx

@@ -88,15 +88,15 @@ export const StakingPoolDetailRow: React.FC<IStakingPoolDetailRowProps> = ({
             </DesktopOnlyWrapper>
         </PoolOverviewSection>
         <PoolPerformanceSection>
-            <PoolPerformanceItem>
-                <span>APY (12 week avg.)</span>
+            <PoolPerformanceItem style={{ width: '8rem' }}>
+                <span>APR (12 week avg.)</span>
                 <div>
                     <StyledStatLabel>
                         {Number(formatPercent(apy * 100 || 0, { decimals: 2 }).minimized).toFixed(2)}%
                     </StyledStatLabel>
                 </div>
             </PoolPerformanceItem>
-            <PoolPerformanceItem>
+            <PoolPerformanceItem style={{ flex: 'none' }}>
                 <span>Saturation</span>
                 <div>
                     <StyledStatLabel>
@@ -195,8 +195,8 @@ const DetailsText = styled.span`
 const PoolPerformanceSection = styled.div`
     display: flex;
     margin-left: auto;
-    width: 380px;
-    justify-content: space-around;
+    width: auto;
+    justify-content: flex-end;
 
     @media (max-width: ${ScreenWidths.Lg}rem) {
         width: 100%;
@@ -209,7 +209,6 @@ const PoolPerformanceItem = styled.div<{ cutOffRem?: number }>`
     position: relative;
     flex-direction: column;
     justify-content: center;
-    flex: 1;
 
     span:nth-of-type(1) {
         font-size: 14px;

ts/pages/staking/home.tsx

@@ -31,6 +31,7 @@ const sortFnMapping: { [key: string]: (a: PoolWithStats, b: PoolWithStats) => nu
     [PoolsListSortingParameter.Staked]: stakingUtils.sortByStakedDesc,
     [PoolsListSortingParameter.ProtocolFees]: stakingUtils.sortByProtocolFeesDesc,
     [PoolsListSortingParameter.RewardsShared]: stakingUtils.sortByRewardsSharedDesc,
+    [PoolsListSortingParameter.Apy]: stakingUtils.sortByApyDesc,
 };
 
 const HeadingRow = styled.div`
@@ -54,7 +55,7 @@ export const StakingIndex: React.FC<StakingIndexProps> = () => {
     const [nextEpochStats, setNextEpochStats] = React.useState<Epoch | undefined>(undefined);
 
     const [poolSortingParam, setPoolSortingParam] = React.useState<PoolsListSortingParameter>(
-        PoolsListSortingParameter.ProtocolFees,
+        PoolsListSortingParameter.Apy,
     );
 
     React.useEffect(() => {
@@ -71,8 +72,8 @@ export const StakingIndex: React.FC<StakingIndexProps> = () => {
         if (!stakingPools) {
             return undefined;
         }
-        const sorted = [...stakingPools].sort(sortFnMapping[poolSortingParam]);
-        return sorted.map((pool) => {
+
+        const stakngPoolsWithAPY = stakingPools.map((pool) => {
             const rewards = pool.allTimeStakedAmounts;
             const average = (arr: number[]) => arr.reduce((sum, el) => sum + el, 0) / arr.length;
 
@@ -85,6 +86,7 @@ export const StakingIndex: React.FC<StakingIndexProps> = () => {
 
             return { ...pool, apy: average(rewardsToAverageLongTerm) };
         });
+        return [...stakngPoolsWithAPY].sort(sortFnMapping[poolSortingParam]);
     }, [poolSortingParam, stakingPools]);
 
     // TODO(kimpers): centralize data fetching so we only fetch once

ts/pages/staking/staking_pool.tsx

@@ -163,7 +163,7 @@ export const StakingPool: React.FC<StakingPoolProps & RouteChildrenProps> = (pro
                                 //     number: '1.23M USD',
                                 // },
                                 {
-                                    title: 'APY (last 3 epochs)',
+                                    title: 'APR (last 3 epochs)',
                                     number: `${formatPercent(stakingPoolAPY3Epochs * 100 || 0).minimized}%`,
                                 },
                                 {
@@ -224,7 +224,7 @@ export const StakingPool: React.FC<StakingPoolProps & RouteChildrenProps> = (pro
                             title: 'All Time',
                             metrics: [
                                 {
-                                    title: 'APY (last 12 epochs)',
+                                    title: 'APR (last 12 epochs)',
                                     number: `${formatPercent(stakingPoolAPY12Epochs * 100 || 0).minimized}%`,
                                 },
                                 {

ts/types.ts

@@ -8,6 +8,7 @@ export enum PoolsListSortingParameter {
     Staked = 'staked',
     ProtocolFees = 'protocolFees',
     RewardsShared = 'rewardsShared',
+    Apy = 'apy',
 }
 
 export interface MailchimpSubscriberInfo {

ts/utils/staking_utils.ts

@@ -211,7 +211,7 @@ export const stakingUtils = {
             b.currentEpochStats.totalProtocolFeesGeneratedInEth - a.currentEpochStats.totalProtocolFeesGeneratedInEth
         );
     },
-    sortByAPYDesc: (a: PoolWithStats, b: PoolWithStats): number => {
+    sortByApyDesc: (a: PoolWithStats, b: PoolWithStats): number => {
         return b.apy - a.apy;
     },