feat: extend referrals for Optimism

derivexyz · May 23, 2023 · 5684879 · 5684879
1 parent 0959e93
commit 5684879
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 69 deletions.
diff --git a/app/src/containers/earn_index/RewardsReferralsSection/RewardsReferralsCard.tsx b/app/src/containers/earn_index/RewardsReferralsSection/RewardsReferralsCard.tsx
@@ -7,26 +7,28 @@ import { IconType } from '@lyra/ui/components/Icon'
 import Text from '@lyra/ui/components/Text'
 import useIsMobile from '@lyra/ui/hooks/useIsMobile'
 import formatUSD from '@lyra/ui/utils/formatUSD'
-import { Network, RewardEpochTokenAmount } from '@lyrafinance/lyra-js'
-import { NewTradingRewardsReferredTraders } from '@lyrafinance/lyra-js/src/utils/fetchAccountRewardEpochData'
+import { RewardEpochTokenAmount } from '@lyrafinance/lyra-js'
 import React, { useMemo } from 'react'
 
 import NetworkImage from '@/app/components/common/NetworkImage'
 import RewardTokenAmounts from '@/app/components/rewards/RewardTokenAmounts'
 import { EARN_REFERRALS_CARD_GRID_COLUMN_TEMPLATE } from '@/app/constants/layout'
 import { PageId } from '@/app/constants/pages'
+import { LatestRewardEpoch } from '@/app/hooks/rewards/useEarnPageData'
 import getNetworkDisplayName from '@/app/utils/getNetworkDisplayName'
 import getPagePath from '@/app/utils/getPagePath'
 import getTokenInfo from '@/app/utils/getTokenInfo'
 
 type Props = {
-  referredTraders: NewTradingRewardsReferredTraders
+  rewardEpoch: LatestRewardEpoch
 }
 
-const RewardsReferralsCard = ({ referredTraders }: Props) => {
+const RewardsReferralsCard = ({ rewardEpoch }: Props) => {
   const isMobile = useIsMobile()
-  const lyraToken = getTokenInfo('lyra', Network.Arbitrum)
+  const network = rewardEpoch.global.lyra.network
+  const lyraToken = getTokenInfo('lyra', network)
   const { numTraders, volume, token } = useMemo(() => {
+    const referredTraders = rewardEpoch.account?.accountEpoch.tradingRewards.newRewards.referredTraders
     const numTraders = referredTraders ? Object.keys(referredTraders).length : 0
     const volume = referredTraders
       ? Object.values(referredTraders).reduce((total, trader) => total + trader.volume, 0)
@@ -47,12 +49,17 @@ const RewardsReferralsCard = ({ referredTraders }: Props) => {
       volume,
       token,
     }
-  }, [lyraToken?.address, lyraToken?.decimals, lyraToken?.symbol, referredTraders])
+  }, [
+    lyraToken?.address,
+    lyraToken?.decimals,
+    lyraToken?.symbol,
+    rewardEpoch.account?.accountEpoch.tradingRewards.newRewards.referredTraders,
+  ])
   return (
     <Card
       href={getPagePath({
         page: PageId.EarnReferrals,
-        network: Network.Arbitrum,
+        network: network,
       })}
     >
       <CardBody>
@@ -66,8 +73,8 @@ const RewardsReferralsCard = ({ referredTraders }: Props) => {
           }}
         >
           <Flex alignItems="center">
-            <NetworkImage network={Network.Arbitrum} />
-            <Text ml={2}>Referrals · {getNetworkDisplayName(Network.Arbitrum)}</Text>
+            <NetworkImage network={network} />
+            <Text ml={2}>Referrals · {getNetworkDisplayName(network)}</Text>
           </Flex>
           {!isMobile ? (
             <>
@@ -97,7 +104,7 @@ const RewardsReferralsCard = ({ referredTraders }: Props) => {
               icon={IconType.ArrowRight}
               href={getPagePath({
                 page: PageId.EarnReferrals,
-                network: Network.Arbitrum,
+                network: network,
               })}
             />
           </Flex>

diff --git a/app/src/containers/earn_index/RewardsReferralsSection/index.tsx b/app/src/containers/earn_index/RewardsReferralsSection/index.tsx
@@ -1,18 +1,21 @@
 import { CardElement } from '@lyra/ui/components/Card'
 import Grid from '@lyra/ui/components/Grid'
-import { NewTradingRewardsReferredTraders } from '@lyrafinance/lyra-js/src/utils/fetchAccountRewardEpochData'
 import React from 'react'
 
+import { LatestRewardEpoch } from '@/app/hooks/rewards/useEarnPageData'
+
 import RewardsReferralsCard from './RewardsReferralsCard'
 
 type Props = {
-  referredTraders: NewTradingRewardsReferredTraders
+  latestRewardEpochs: LatestRewardEpoch[]
 }
 
-const RewardsReferralsSection = ({ referredTraders }: Props): CardElement => {
+const RewardsReferralsSection = ({ latestRewardEpochs }: Props): CardElement => {
   return (
     <Grid sx={{ gridTemplateColumns: '1fr', gridRowGap: 4 }}>
-      <RewardsReferralsCard referredTraders={referredTraders} />
+      {latestRewardEpochs.map((rewardEpoch, idx) => {
+        return <RewardsReferralsCard key={idx} rewardEpoch={rewardEpoch} />
+      })}
     </Grid>
   )
 }

diff --git a/app/src/hooks/referrals/useReferralsPageData.ts b/app/src/hooks/referrals/useReferralsPageData.ts
@@ -4,6 +4,7 @@ import { useCallback } from 'react'
 import { useParams } from 'react-router-dom'
 
 import { FetchId } from '@/app/constants/fetch'
+import coerce from '@/app/utils/coerce'
 import getLyraSDK from '@/app/utils/getLyraSDK'
 import fetchReferrerCode from '@/app/utils/referrals/fetchReferrerCode'
 
@@ -113,7 +114,7 @@ export const fetchReferralsPageData = async (network: Network, walletAddress?: s
 export default function useReferralsPageData(): ReferralsPageData | null {
   const { account } = useWallet()
   const { network: networkStr } = useParams()
-  const network = networkStr === Network.Arbitrum ? Network.Arbitrum : null
+  const network = coerce(Network, networkStr) ?? null
   const [referralsPageData] = useFetch(
     FetchId.ReferralsPageData,
     network ? [network, account] : null,

diff --git a/app/src/hooks/rewards/useEarnPageData.ts b/app/src/hooks/rewards/useEarnPageData.ts
@@ -1,5 +1,4 @@
 import { AccountRewardEpoch, GlobalRewardEpoch, Network } from '@lyrafinance/lyra-js'
-import { NewTradingRewardsReferredTraders } from '@lyrafinance/lyra-js/src/utils/fetchAccountRewardEpochData'
 import { useCallback } from 'react'
 
 import { FetchId } from '@/app/constants/fetch'
@@ -30,12 +29,9 @@ export type RewardsPageData = {
   vaults: Vault[]
   lyraStaking: LyraStaking
   lyraBalances: LyraBalances
-  referredTraders: NewTradingRewardsReferredTraders
 }
 
 export const fetchEarnPageData = async (walletAddress: string | null): Promise<RewardsPageData> => {
-  const referredTraders: NewTradingRewardsReferredTraders = {}
-
   const [globalRewardEpochs, accountRewardEpochs, vaults, lyraStaking, lyraBalances] = await Promise.all([
     Promise.all(Object.values(Network).map(network => getLyraSDK(network).globalRewardEpochs())),
     walletAddress
@@ -65,42 +61,6 @@ export const fetchEarnPageData = async (walletAddress: string | null): Promise<R
       e => e.globalEpoch.startTimestamp === latestGlobalRewardEpoch.startTimestamp
     )
 
-    networkAccountRewardEpochs.map(epoch => {
-      const epochReferredTraders = epoch?.accountEpoch?.tradingRewards?.newRewards?.referredTraders
-      if (epochReferredTraders) {
-        for (const trader in epochReferredTraders) {
-          if (!referredTraders[trader]) {
-            referredTraders[trader] = {
-              trader: epochReferredTraders[trader].trader,
-              trades: epochReferredTraders[trader].trades,
-              fees: epochReferredTraders[trader].fees,
-              premium: epochReferredTraders[trader].premium,
-              volume: epochReferredTraders[trader].volume,
-              tokens: epochReferredTraders[trader].tokens,
-            }
-          } else {
-            referredTraders[trader].trades += epochReferredTraders[trader].trades
-            referredTraders[trader].fees += epochReferredTraders[trader].fees
-            referredTraders[trader].premium += epochReferredTraders[trader].premium
-            referredTraders[trader].volume += epochReferredTraders[trader].volume
-            epochReferredTraders[trader].tokens.forEach(newToken => {
-              const existingToken = referredTraders[trader].tokens.find(
-                token => token.address.toLowerCase() === newToken.address.toLowerCase()
-              )
-              if (!existingToken) {
-                referredTraders[trader].tokens.push(newToken)
-              } else {
-                const existingTokenIndex = referredTraders[trader].tokens.findIndex(
-                  token => token.address.toLowerCase() === newToken.address.toLowerCase()
-                )
-                referredTraders[trader].tokens[existingTokenIndex].amount += newToken.amount
-              }
-            })
-          }
-        }
-      }
-    })
-
     return {
       ...map,
       [network]: {
@@ -110,7 +70,6 @@ export const fetchEarnPageData = async (walletAddress: string | null): Promise<R
           global: latestGlobalRewardEpoch,
           account: latestAccountRewardEpoch,
         },
-        referredTraders: network === Network.Arbitrum ? referredTraders : undefined,
       },
     }
   }, {} as Record<Network, NetworkRewardsData>)
@@ -120,7 +79,6 @@ export const fetchEarnPageData = async (walletAddress: string | null): Promise<R
     vaults,
     lyraBalances,
     lyraStaking,
-    referredTraders,
   }
 }
 

diff --git a/app/src/page_helpers/EarnIndexPageHelper/index.tsx b/app/src/page_helpers/EarnIndexPageHelper/index.tsx
@@ -1,7 +1,6 @@
 import Box from '@lyra/ui/components/Box'
 import Text from '@lyra/ui/components/Text'
 import useIsMobile from '@lyra/ui/hooks/useIsMobile'
-import { NewTradingRewardsReferredTraders } from '@lyrafinance/lyra-js/src/utils/fetchAccountRewardEpochData'
 import React from 'react'
 
 import { Vault } from '@/app/constants/vault'
@@ -23,10 +22,9 @@ type Props = {
   vaults: Vault[]
   lyraBalances: LyraBalances
   lyraStaking: LyraStaking
-  referredTraders: NewTradingRewardsReferredTraders
 }
 
-const EarnIndexPageHelper = ({ latestRewardEpochs, vaults, lyraBalances, lyraStaking, referredTraders }: Props) => {
+const EarnIndexPageHelper = ({ latestRewardEpochs, vaults, lyraBalances, lyraStaking }: Props) => {
   const isMobile = useIsMobile()
   return (
     <Page
@@ -62,7 +60,7 @@ const EarnIndexPageHelper = ({ latestRewardEpochs, vaults, lyraBalances, lyraSta
           </Text>
           <Text color="secondaryText">Refer traders to earn a share of their trading fees.</Text>
         </Box>
-        <RewardsReferralsSection referredTraders={referredTraders} />
+        <RewardsReferralsSection latestRewardEpochs={latestRewardEpochs} />
         <Box mt={4}>
           <Text mb={2} variant="heading">
             ETH-LYRA LP

diff --git a/app/src/pages/EarnIndexPage.tsx b/app/src/pages/EarnIndexPage.tsx
@@ -16,14 +16,13 @@ const EarnIndexPage = withSuspense(
       return <PageError error="Failed to load page" />
     }
     const latestRewardEpochs = filterNulls(Object.values(data.epochs).map(epoch => epoch.latestRewardEpoch))
-    const { vaults, lyraBalances, lyraStaking, referredTraders } = data
+    const { vaults, lyraBalances, lyraStaking } = data
     return (
       <EarnIndexPageHelper
         latestRewardEpochs={latestRewardEpochs}
         vaults={vaults}
         lyraBalances={lyraBalances}
         lyraStaking={lyraStaking}
-        referredTraders={referredTraders}
       />
     )
   },

diff --git a/app/src/pages/ReferralsPage.tsx b/app/src/pages/ReferralsPage.tsx
@@ -1,6 +1,4 @@
-import { Network } from '@lyrafinance/lyra-js'
 import React from 'react'
-import { useParams } from 'react-router-dom'
 
 import withSuspense from '@/app/hooks/data/withSuspense'
 import PageLoading from '@/app/page_helpers/common/Page/PageLoading'
@@ -12,10 +10,6 @@ import ReferralsPageHelper from '../page_helpers/ReferralsPageHelper'
 const ReferralsPage = withSuspense(
   () => {
     const data = useReferralsPageData()
-    const { network: networkStr } = useParams()
-    if (networkStr !== Network.Arbitrum) {
-      return <PageError error="Referrals are currently only available through Arbitrum" />
-    }
     if (!data) {
       return <PageError error="No referral data" />
     }