feat(dataroom): include native staking fees stack

src/components/DataRoom/FeesEarned/SlidingContent.tsx

@@ -6,17 +6,19 @@ const Stack = dynamic(() => import('./Stack'))
 
 export type FeeType = {
   label: 'SWAPS' | 'STAKING' | 'FUTURE FEES'
-  isLocked: boolean
+  isLocked?: boolean
 }
 
 const ANNUAL_SWAP_FEES_FALLBACK = 1822878.426773334
+const ANNUAL_STAKE_FEES_FALLBACK = 106221.187296
 const TOTAL_BARS = 10
 
 const SlidingContent = ({ fees }: { fees: FeeType[] }) => {
-  const { annualSwapFees } = useSafeDataRoomStats()
+  const { annualSwapFees, annualStakeFees } = useSafeDataRoomStats()
 
   const displaySwapFees = annualSwapFees ? annualSwapFees : ANNUAL_SWAP_FEES_FALLBACK
-  const feesMap = [displaySwapFees]
+  const displayStakeFees = annualStakeFees ? annualStakeFees : ANNUAL_STAKE_FEES_FALLBACK
+  const feesMap = [displaySwapFees, displayStakeFees]
 
   return (
     <div className={css.feeContainer}>

src/components/DataRoom/FeesEarned/Stack.tsx

@@ -10,9 +10,9 @@ export type StackProps = FeeType & {
 }
 
 // TODO: decide how to normalize the fee values to show growth potential
-const VALUE_PER_BAR = 1_000_000
+const VALUE_PER_BAR = 500_000
 
-const Stack = ({ totalBars, value, isLocked, label }: StackProps) => {
+const Stack = ({ totalBars, value, isLocked = false, label }: StackProps) => {
   const filledBars = value / VALUE_PER_BAR
 
   const containerVariants = {

src/content/dataroom.json

@@ -54,12 +54,10 @@
     "title": "Annualized community aligned</br><b>fees earned</b>:",
     "fees": [
       {
-        "label": "Native Swaps",
-        "isLocked": false
+        "label": "Native Swaps"
       },
       {
-        "label": "Native Staking",
-        "isLocked": true
+        "label": "Native Staking"
       },
       {
         "label": "Future Fees",

src/contexts/SafeDataRoomContext.ts

@@ -16,6 +16,7 @@ type SafeDataRoomStats = {
   tvlAAVE: number | null
   lastUpdated: number | null
   annualSwapFees: number | null
+  annualStakeFees: number | null
   annualisedOutgoingTVP: number | null
 }
 
@@ -35,6 +36,7 @@ const SafeDataRoomContext = createContext<SafeDataRoomStats>({
   tvlAAVE: null,
   lastUpdated: null,
   annualSwapFees: null,
+  annualStakeFees: null,
   annualisedOutgoingTVP: null,
 })
 

src/hooks/useSafeDataRoomStats.ts

@@ -23,6 +23,7 @@ type DuneDataRoomStats = {
   usdc_in_safes: number
   last_updated: number
   annual_swap_fees: number
+  annual_stake_fees: number
   annualised_outgoing_tvp: number
 }
 

src/pages/dataroom.tsx

@@ -27,6 +27,7 @@ export async function getStaticProps() {
     defi_tvl_uniswap,
     last_updated,
     annual_swap_fees,
+    annual_stake_fees,
     annualised_outgoing_tvp,
   } = dataRoomStats
 
@@ -49,6 +50,7 @@ export async function getStaticProps() {
         tvlUniswap: Number(defi_tvl_uniswap),
         lastUpdated: Number(last_updated),
         annualSwapFees: Number(annual_swap_fees),
+        annualStakeFees: Number(annual_stake_fees),
         annualisedOutgoingTVP: annualised_outgoing_tvp,
       },
     },