Uniswap · danpaquin · Jul 19, 2021
diff --git a/src/components/pools/PoolTable.tsx b/src/components/pools/PoolTable.tsx
@@ -26,7 +26,7 @@ const ResponsiveGrid = styled.div`
   grid-gap: 1em;
   align-items: center;
 
-  grid-template-columns: 20px 3.5fr repeat(3, 1fr);
+  grid-template-columns: 20px 3.5fr repeat(4, 1fr);
 
   @media screen and (max-width: 900px) {
     grid-template-columns: 20px 1.5fr repeat(2, 1fr);
@@ -63,6 +63,8 @@ const SORT_FIELD = {
   volumeUSD: 'volumeUSD',
   tvlUSD: 'tvlUSD',
   volumeUSDWeek: 'volumeUSDWeek',
+  feesUSD: 'feesUSD',
+  feesUSDChange: 'feesUSDChange',
 }
 
 const DataRow = ({ poolData, index }: { poolData: PoolData; index: number }) => {
@@ -92,6 +94,9 @@ const DataRow = ({ poolData, index }: { poolData: PoolData; index: number }) =>
         <Label end={1} fontWeight={400}>
           {formatDollarAmount(poolData.volumeUSDWeek)}
         </Label>
+        <Label end={1} fontWeight={400}>
+          {formatDollarAmount(poolData.feesUSD)}
+        </Label>
       </ResponsiveGrid>
     </LinkWrapper>
   )
@@ -172,6 +177,9 @@ export default function PoolTable({ poolDatas, maxItems = MAX_ITEMS }: { poolDat
             <ClickableText color={theme.text2} end={1} onClick={() => handleSort(SORT_FIELD.volumeUSDWeek)}>
               Volume 7D {arrow(SORT_FIELD.volumeUSDWeek)}
             </ClickableText>
+            <ClickableText color={theme.text2} end={1} onClick={() => handleSort(SORT_FIELD.feesUSD)}>
+              24H Fees {arrow(SORT_FIELD.feesUSD)}
+            </ClickableText>
           </ResponsiveGrid>
           <Break />
           {sortedPools.map((poolData, i) => {

diff --git a/src/data/pools/chartData.ts b/src/data/pools/chartData.ts
@@ -22,6 +22,7 @@ const POOL_CHART = gql`
       date
       volumeUSD
       tvlUSD
+      feesUSD
     }
   }
 `
@@ -31,6 +32,7 @@ interface ChartResults {
     date: number
     volumeUSD: string
     tvlUSD: string
+    feesUSD: string
   }[]
 }
 
@@ -39,6 +41,7 @@ export async function fetchPoolChartData(address: string, client: ApolloClient<N
     date: number
     volumeUSD: string
     tvlUSD: string
+    feesUSD: string
   }[] = []
   const startTimestamp = 1619170975
   const endTimestamp = dayjs.utc().unix()
@@ -79,6 +82,7 @@ export async function fetchPoolChartData(address: string, client: ApolloClient<N
         date: dayData.date,
         volumeUSD: parseFloat(dayData.volumeUSD),
         totalValueLockedUSD: parseFloat(dayData.tvlUSD),
+        feesUSD: parseFloat(dayData.feesUSD),
       }
       return accum
     }, {})
@@ -96,6 +100,7 @@ export async function fetchPoolChartData(address: string, client: ApolloClient<N
           date: nextDay,
           volumeUSD: 0,
           totalValueLockedUSD: latestTvl,
+          feesUSD: 0,
         }
       } else {
         latestTvl = formattedExisting[currentDayIndex].totalValueLockedUSD

diff --git a/src/data/pools/poolData.ts b/src/data/pools/poolData.ts
@@ -45,6 +45,7 @@ export const POOLS_BULK = (block: number | undefined, pools: string[]) => {
         totalValueLockedToken0
         totalValueLockedToken1
         totalValueLockedUSD
+        feesUSD
       }
     }
     `
@@ -78,6 +79,7 @@ interface PoolFields {
   totalValueLockedToken0: string
   totalValueLockedToken1: string
   totalValueLockedUSD: string
+  feesUSD: string
 }
 
 interface PoolDataResponse {
@@ -181,6 +183,13 @@ export function usePoolDatas(
         ? parseFloat(current.volumeUSD)
         : 0
 
+    const [feesUSD, feesUSDChange] =
+      current && oneDay && twoDay
+        ? get2DayChange(current.feesUSD, oneDay.feesUSD, twoDay.feesUSD)
+        : current
+        ? [parseFloat(current.feesUSD), 0]
+        : [0, 0]
+
     const tvlUSD = current ? parseFloat(current.totalValueLockedUSD) : 0
 
     const tvlUSDChange =
@@ -225,6 +234,8 @@ export function usePoolDatas(
         tvlUSDChange,
         tvlToken0,
         tvlToken1,
+        feesUSD,
+        feesUSDChange,
       }
     }
 

diff --git a/src/pages/Pool/PoolPage.tsx b/src/pages/Pool/PoolPage.tsx
@@ -12,7 +12,7 @@ import { ExternalLink, Download } from 'react-feather'
 import { ExternalLink as StyledExternalLink } from '../../theme/components'
 import useTheme from 'hooks/useTheme'
 import CurrencyLogo from 'components/CurrencyLogo'
-import { formatDollarAmount, formatAmount } from 'utils/numbers'
+import { formatDollarAmount, formatAmount, formatPercentAmount } from 'utils/numbers'
 import Percent from 'components/Percent'
 import { ButtonPrimary, ButtonGray, SavedIcon } from 'components/Button'
 import { DarkGreyCard, GreyCard, GreyBadge } from 'components/Card'
@@ -65,6 +65,7 @@ enum ChartView {
   VOL,
   PRICE,
   DENSITY,
+  ROL,
 }
 
 export default function PoolPage({
@@ -117,6 +118,19 @@ export default function PoolPage({
     }
   }, [chartData])
 
+  const formattedReturnOnLiqData = useMemo(() => {
+    if (chartData) {
+      return chartData.map((day) => {
+        return {
+          time: unixToDate(day.date),
+          value: day.feesUSD / day.totalValueLockedUSD,
+        }
+      })
+    } else {
+      return []
+    }
+  }, [chartData])
+
   //watchlist
   const [savedPools, addSavedPool] = useSavedPools()
 
@@ -258,9 +272,13 @@ export default function PoolPage({
                   <TYPE.label fontSize="24px" height="30px">
                     <MonoSpace>
                       {latestValue
-                        ? formatDollarAmount(latestValue)
+                        ? view === ChartView.ROL
+                          ? formatPercentAmount(latestValue)
+                          : formatDollarAmount(latestValue)
                         : view === ChartView.VOL
                         ? formatDollarAmount(formattedVolumeData[formattedVolumeData.length - 1]?.value)
+                        : view === ChartView.ROL
+                        ? formatPercentAmount(formattedReturnOnLiqData[formattedReturnOnLiqData.length - 1]?.value)
                         : view === ChartView.DENSITY
                         ? ''
                         : formatDollarAmount(formattedTvlData[formattedTvlData.length - 1]?.value)}{' '}
@@ -270,7 +288,7 @@ export default function PoolPage({
                     {valueLabel ? <MonoSpace>{valueLabel} (UTC)</MonoSpace> : ''}
                   </TYPE.main>
                 </AutoColumn>
-                <ToggleWrapper width="200px">
+                <ToggleWrapper width="250px">
                   <ToggleElementFree
                     isActive={view === ChartView.VOL}
                     fontSize="12px"
@@ -281,10 +299,17 @@ export default function PoolPage({
                   <ToggleElementFree
                     isActive={view === ChartView.TVL}
                     fontSize="12px"
-                    onClick={() => (view === ChartView.TVL ? setView(ChartView.DENSITY) : setView(ChartView.TVL))}
+                    onClick={() => (view === ChartView.TVL ? setView(ChartView.ROL) : setView(ChartView.TVL))}
                   >
                     TVL
                   </ToggleElementFree>
+                  <ToggleElementFree
+                    isActive={view === ChartView.ROL}
+                    fontSize="12px"
+                    onClick={() => (view === ChartView.ROL ? setView(ChartView.DENSITY) : setView(ChartView.ROL))}
+                  >
+                    ROL
+                  </ToggleElementFree>
                   <ToggleElementFree
                     isActive={view === ChartView.DENSITY}
                     fontSize="12px"
@@ -314,6 +339,16 @@ export default function PoolPage({
                   value={latestValue}
                   label={valueLabel}
                 />
+              ) : view === ChartView.ROL ? (
+                <LineChart
+                  data={formattedReturnOnLiqData}
+                  color={backgroundColor}
+                  minHeight={340}
+                  setValue={setLatestValue}
+                  setLabel={setValueLabel}
+                  value={latestValue}
+                  label={valueLabel}
+                />
               ) : (
                 <DensityChart address={address} />
               )}

diff --git a/src/state/pools/reducer.ts b/src/state/pools/reducer.ts
@@ -54,12 +54,17 @@ export interface PoolData {
   // token amounts
   tvlToken0: number
   tvlToken1: number
+
+  // fees
+  feesUSD: number
+  feesUSDChange: number
 }
 
 export type PoolChartEntry = {
   date: number
   volumeUSD: number
   totalValueLockedUSD: number
+  feesUSD: number
 }
 
 export interface PoolsState {

diff --git a/src/utils/numbers.ts b/src/utils/numbers.ts
@@ -34,3 +34,21 @@ export const formatAmount = (num: number | undefined, digits = 2) => {
     },
   })
 }
+
+// using a currency library here in case we want to add more in future
+export const formatPercentAmount = (num: number | undefined, digits = 2) => {
+  if (num === 0) return '0.00%'
+  if (!num) return '-'
+  if (num < 0.0001) {
+    return '<0.01%'
+  }
+  return numbro(num).format({
+    average: true,
+    output: 'percent',
+    mantissa: num > 1 ? 0 : digits,
+    abbreviations: {
+      million: 'M',
+      billion: 'B',
+    },
+  })
+}