refactor: external LP hooks

derivexyz · Apr 5, 2023 · f96208b · f96208b
1 parent c5fa5e3
commit f96208b
Show file tree

Hide file tree

Showing 15 changed files with 188 additions and 127 deletions.
diff --git a/app/src/constants/fetch.ts b/app/src/constants/fetch.ts
@@ -42,10 +42,11 @@ export enum FetchId {
   LatestRewardEpoch = 'LatestRewardEpoch',
   ArrakisOptimismAccount = 'ArrakisOptimismAccount',
   ArrakisStaking = 'ArrakisStaking',
+  CamelotStaking = 'CamelotStaking',
   ClaimableStakingRewards = 'ClaimableStakingRewards',
   TokenSupply = 'TokenSupply',
   NetworkTradingVolume = 'NetworkTradingVolume',
-  CamelotStaking = 'CamelotStaking',
+  VelodromeStaking = 'VelodromeStaking',
 
   // shared
   PositionHistory = 'PositionHistory',

diff --git a/app/src/containers/rewards/RewardsArrakisClaimModal/RewardsArrakisClaimButton.tsx b/app/src/containers/rewards/RewardsArrakisClaimModal/RewardsArrakisClaimButton.tsx
@@ -4,7 +4,7 @@ import { AppNetwork } from '@/app/constants/networks'
 import { TransactionType } from '@/app/constants/screen'
 import useTransaction from '@/app/hooks/account/useTransaction'
 import useWalletAccount from '@/app/hooks/account/useWalletAccount'
-import { useMutateArrakisStaking } from '@/app/hooks/rewards/useMutateArrakisStaking'
+import { useMutateArrakisStaking } from '@/app/hooks/rewards/useArrakisStaking'
 import { claimArrakisRewards } from '@/app/utils/rewards/claimArrakisRewards'
 import { ArrakisStaking } from '@/app/utils/rewards/fetchArrakisStaking'
 

diff --git a/app/src/containers/rewards/RewardsArrakisStakeModal/RewardsArrakisStakeModalContent.tsx b/app/src/containers/rewards/RewardsArrakisStakeModal/RewardsArrakisStakeModalContent.tsx
@@ -13,7 +13,7 @@ import { AppNetwork } from '@/app/constants/networks'
 import { TransactionType } from '@/app/constants/screen'
 import useTransaction from '@/app/hooks/account/useTransaction'
 import useWalletAccount from '@/app/hooks/account/useWalletAccount'
-import { useMutateArrakisStaking } from '@/app/hooks/rewards/useMutateArrakisStaking'
+import { useMutateArrakisStaking } from '@/app/hooks/rewards/useArrakisStaking'
 import getContract from '@/app/utils/common/getContract'
 import approveArrakisLPTokenStaking from '@/app/utils/rewards/approveArrakisLPTokenStaking'
 import { ArrakisStaking } from '@/app/utils/rewards/fetchArrakisStaking'

diff --git a/app/src/containers/rewards/RewardsArrakisUnstakeModal/RewardsArrakisUnstakeModalContent.tsx b/app/src/containers/rewards/RewardsArrakisUnstakeModal/RewardsArrakisUnstakeModalContent.tsx
@@ -12,7 +12,7 @@ import { AppNetwork } from '@/app/constants/networks'
 import { TransactionType } from '@/app/constants/screen'
 import useTransaction from '@/app/hooks/account/useTransaction'
 import useWalletAccount from '@/app/hooks/account/useWalletAccount'
-import { useMutateArrakisStaking } from '@/app/hooks/rewards/useMutateArrakisStaking'
+import { useMutateArrakisStaking } from '@/app/hooks/rewards/useArrakisStaking'
 import { ArrakisStaking } from '@/app/utils/rewards/fetchArrakisStaking'
 import { unstakeArrakisLPToken } from '@/app/utils/rewards/unstakeArrakisLPToken'
 

diff --git a/app/src/containers/rewards_index/RewardsWethLyraLPSection/RewardsArrakisCard.tsx b/app/src/containers/rewards_index/RewardsWethLyraLPSection/RewardsArrakisCard.tsx
@@ -4,6 +4,7 @@ import CardBody from '@lyra/ui/components/Card/CardBody'
 import Flex from '@lyra/ui/components/Flex'
 import Grid from '@lyra/ui/components/Grid'
 import { IconType } from '@lyra/ui/components/Icon'
+import TextShimmer from '@lyra/ui/components/Shimmer/TextShimmer'
 import Text from '@lyra/ui/components/Text'
 import useIsMobile from '@lyra/ui/hooks/useIsMobile'
 import { MarginProps } from '@lyra/ui/types'
@@ -17,20 +18,51 @@ import { ZERO_BN } from '@/app/constants/bn'
 import { REWARDS_CARD_GRID_COLUMN_TEMPLATE } from '@/app/constants/layout'
 import { AppNetwork } from '@/app/constants/networks'
 import { PageId } from '@/app/constants/pages'
+import withSuspense from '@/app/hooks/data/withSuspense'
+import useArrakisStaking from '@/app/hooks/rewards/useArrakisStaking'
 import fromBigNumber from '@/app/utils/fromBigNumber'
 import getPagePath from '@/app/utils/getPagePath'
-import { ArrakisStaking } from '@/app/utils/rewards/fetchArrakisStaking'
 
-type Props = {
-  arrakisStaking: ArrakisStaking | null
-} & MarginProps
+type Props = MarginProps
 
-export default function RewardsArrakisCard({ arrakisStaking, ...styleProps }: Props) {
+const RewardsArrakisStakingTVLText = withSuspense(
+  () => {
+    const arrakisStaking = useArrakisStaking()
+    return <Text variant="bodyLarge">{formatTruncatedUSD(arrakisStaking?.stakedTVL ?? ZERO_BN)}</Text>
+  },
+  () => <TextShimmer variant="bodyLarge" width={40} />
+)
+
+const RewardsArrakisStakingLiquidityText = withSuspense(
+  () => {
+    const arrakisStaking = useArrakisStaking()
+    const liquidityValue = arrakisStaking
+      ? fromBigNumber(arrakisStaking?.stakedLPTokenBalance) * arrakisStaking.lpTokenValue
+      : 0
+    return <Text variant="bodyLarge">{formatTruncatedUSD(liquidityValue)}</Text>
+  },
+  () => <TextShimmer variant="bodyLarge" width={80} />
+)
+
+const RewardsArrakisStakingAPYText = withSuspense(
+  () => {
+    const arrakisStaking = useArrakisStaking()
+    return (
+      <Text
+        variant="bodyLarge"
+        color={arrakisStaking && arrakisStaking.stakedLPTokenBalance.gt(0) ? 'primaryText' : 'text'}
+      >
+        {formatPercentage(arrakisStaking?.apy ?? 0, true)}
+      </Text>
+    )
+  },
+  () => <TextShimmer variant="bodyLarge" width={40} />
+)
+
+export default function RewardsArrakisCard({ ...styleProps }: Props) {
   const navigate = useNavigate()
   const isMobile = useIsMobile()
-  const liquidityValue = arrakisStaking
-    ? fromBigNumber(arrakisStaking?.stakedLPTokenBalance) * arrakisStaking.lpTokenValue
-    : 0
+
   return (
     <Card onClick={() => navigate(getPagePath({ page: PageId.RewardsArrakis }))} {...styleProps}>
       <CardBody>
@@ -49,23 +81,23 @@ export default function RewardsArrakisCard({ arrakisStaking, ...styleProps }: Pr
           </Flex>
           {!isMobile ? (
             <>
-              <Flex alignItems="center">
+              <Flex>
                 <Text mr={2} color="secondaryText" variant="bodyLarge">
                   TVL
                 </Text>
-                <Text variant="bodyLarge">{formatTruncatedUSD(arrakisStaking?.stakedTVL ?? ZERO_BN)}</Text>
+                <RewardsArrakisStakingTVLText />
               </Flex>
-              <Flex alignItems="center">
+              <Flex>
                 <Text mr={2} color="secondaryText" variant="bodyLarge">
                   Your Liquidity
                 </Text>
-                <Text variant="bodyLarge">{formatTruncatedUSD(liquidityValue)}</Text>
+                <RewardsArrakisStakingLiquidityText />
               </Flex>
-              <Flex alignItems="center" ml="auto">
+              <Flex ml="auto">
                 <Text mr={2} color="secondaryText" variant="bodyLarge">
                   APY
                 </Text>
-                <Text variant="bodyLarge">{formatPercentage(arrakisStaking?.apy ?? 0, true)}</Text>
+                <RewardsArrakisStakingAPYText />
               </Flex>
             </>
           ) : null}

diff --git a/app/src/containers/rewards_index/RewardsWethLyraLPSection/RewardsCamelotCard.tsx b/app/src/containers/rewards_index/RewardsWethLyraLPSection/RewardsCamelotCard.tsx
@@ -4,6 +4,7 @@ import CardBody from '@lyra/ui/components/Card/CardBody'
 import Flex from '@lyra/ui/components/Flex'
 import Grid from '@lyra/ui/components/Grid'
 import { IconType } from '@lyra/ui/components/Icon'
+import TextShimmer from '@lyra/ui/components/Shimmer/TextShimmer'
 import Text from '@lyra/ui/components/Text'
 import useIsMobile from '@lyra/ui/hooks/useIsMobile'
 import { MarginProps } from '@lyra/ui/types'
@@ -17,18 +18,46 @@ import { ZERO_BN } from '@/app/constants/bn'
 import { REWARDS_CARD_GRID_COLUMN_TEMPLATE } from '@/app/constants/layout'
 import { CAMELOT_ADD_LIQUIDITY_URL } from '@/app/constants/links'
 import { AppNetwork } from '@/app/constants/networks'
-import { CamelotStaking } from '@/app/utils/fetchCamelotStaking'
+import withSuspense from '@/app/hooks/data/withSuspense'
+import useCamelotStaking from '@/app/hooks/rewards/useCamelotStaking'
 
-type Props = {
-  camelotStaking: CamelotStaking | null
-} & MarginProps
+type Props = MarginProps
 
-export default function RewardsCamelotCard({ camelotStaking, ...styleProps }: Props) {
+const RewardsCamelotStakingTVLText = withSuspense(
+  () => {
+    const camelotStaking = useCamelotStaking()
+    return <Text variant="bodyLarge">{formatTruncatedUSD(camelotStaking?.tvl ?? ZERO_BN)}</Text>
+  },
+  () => <TextShimmer variant="bodyLarge" width={40} />
+)
+
+const RewardsCamelotStakingLiquidityText = withSuspense(
+  () => {
+    const camelotStaking = useCamelotStaking()
+    const balance = useMemo(
+      () => (camelotStaking ? camelotStaking.lpTokenBalance * camelotStaking.valuePerLPToken : 0),
+      [camelotStaking]
+    )
+    return (
+      <Text variant="bodyLarge" color={camelotStaking && camelotStaking.lpTokenBalance > 0 ? 'primaryText' : 'text'}>
+        {formatTruncatedUSD(balance)}
+      </Text>
+    )
+  },
+  () => <TextShimmer variant="bodyLarge" width={80} />
+)
+
+const RewardsCamelotStakingAPYText = withSuspense(
+  () => {
+    const camelotStaking = useCamelotStaking()
+    return <Text variant="bodyLarge">{formatPercentage(camelotStaking?.apy ?? 0, true)}</Text>
+  },
+  () => <TextShimmer variant="bodyLarge" width={40} />
+)
+
+export default function RewardsCamelotCard({ ...styleProps }: Props) {
   const isMobile = useIsMobile()
-  const balance = useMemo(
-    () => (camelotStaking ? camelotStaking.lpTokenBalance * camelotStaking.valuePerLPToken : 0),
-    [camelotStaking]
-  )
+
   return (
     <Card href={CAMELOT_ADD_LIQUIDITY_URL} target="_blank" {...styleProps}>
       <CardBody>
@@ -47,28 +76,23 @@ export default function RewardsCamelotCard({ camelotStaking, ...styleProps }: Pr
           </Flex>
           {!isMobile ? (
             <>
-              <Flex alignItems="center">
+              <Flex>
                 <Text mr={2} color="secondaryText" variant="bodyLarge">
                   TVL
                 </Text>
-                <Text variant="bodyLarge">{formatTruncatedUSD(camelotStaking?.tvl ?? ZERO_BN)}</Text>
+                <RewardsCamelotStakingTVLText />
               </Flex>
               <Flex>
                 <Text mr={2} color="secondaryText" variant="bodyLarge">
                   Your Liquidity
                 </Text>
-                <Text variant="bodyLarge">{formatTruncatedUSD(balance)}</Text>
+                <RewardsCamelotStakingLiquidityText />
               </Flex>
               <Flex ml="auto">
                 <Text mr={2} color="secondaryText" variant="bodyLarge">
                   APY
                 </Text>
-                <Text
-                  variant="bodyLarge"
-                  color={camelotStaking && camelotStaking.lpTokenBalance > 0 ? 'primaryText' : 'text'}
-                >
-                  {formatPercentage(camelotStaking?.apy ?? 0, true)}
-                </Text>
+                <RewardsCamelotStakingAPYText />
               </Flex>
             </>
           ) : null}

diff --git a/app/src/containers/rewards_index/RewardsWethLyraLPSection/RewardsVelodromeCard.tsx b/app/src/containers/rewards_index/RewardsWethLyraLPSection/RewardsVelodromeCard.tsx
@@ -4,6 +4,7 @@ import CardBody from '@lyra/ui/components/Card/CardBody'
 import Flex from '@lyra/ui/components/Flex'
 import Grid from '@lyra/ui/components/Grid'
 import { IconType } from '@lyra/ui/components/Icon'
+import TextShimmer from '@lyra/ui/components/Shimmer/TextShimmer'
 import Text from '@lyra/ui/components/Text'
 import useIsMobile from '@lyra/ui/hooks/useIsMobile'
 import { MarginProps } from '@lyra/ui/types'
@@ -17,18 +18,49 @@ import { ZERO_BN } from '@/app/constants/bn'
 import { REWARDS_CARD_GRID_COLUMN_TEMPLATE } from '@/app/constants/layout'
 import { VELODROME_ADD_LIQUIDITY_URL } from '@/app/constants/links'
 import { AppNetwork } from '@/app/constants/networks'
-import { VelodromeStaking } from '@/app/utils/fetchVelodromeStaking'
+import withSuspense from '@/app/hooks/data/withSuspense'
+import useVelodromeStaking from '@/app/hooks/rewards/useVelodromeStaking'
 
-type Props = {
-  velodromeStaking: VelodromeStaking | null
-} & MarginProps
+type Props = MarginProps
 
-export default function RewardsVelodromeCard({ velodromeStaking, ...styleProps }: Props) {
+const RewardsVelodromeStakingTVLText = withSuspense(
+  () => {
+    const velodromeStaking = useVelodromeStaking()
+    return <Text variant="bodyLarge">{formatTruncatedUSD(velodromeStaking?.tvl ?? ZERO_BN)}</Text>
+  },
+  () => <TextShimmer variant="bodyLarge" width={40} />
+)
+
+const RewardsVelodromeStakingLiquidityText = withSuspense(
+  () => {
+    const velodromeStaking = useVelodromeStaking()
+    const balance = useMemo(
+      () => (velodromeStaking ? velodromeStaking.lpTokenBalance * velodromeStaking.valuePerLPToken : 0),
+      [velodromeStaking]
+    )
+    return (
+      <Text
+        variant="bodyLarge"
+        color={velodromeStaking && velodromeStaking.lpTokenBalance > 0 ? 'primaryText' : 'text'}
+      >
+        {formatTruncatedUSD(balance)}
+      </Text>
+    )
+  },
+  () => <TextShimmer variant="bodyLarge" width={80} />
+)
+
+const RewardsVelodromeStakingAPYText = withSuspense(
+  () => {
+    const velodromeStaking = useVelodromeStaking()
+    return <Text variant="bodyLarge">{formatPercentage(velodromeStaking?.apy ?? 0, true)}</Text>
+  },
+  () => <TextShimmer variant="bodyLarge" width={40} />
+)
+
+export default function RewardsVelodromeCard({ ...styleProps }: Props) {
   const isMobile = useIsMobile()
-  const balance = useMemo(
-    () => (velodromeStaking ? velodromeStaking.lpTokenBalance * velodromeStaking.valuePerLPToken : 0),
-    [velodromeStaking]
-  )
+
   return (
     <Card href={VELODROME_ADD_LIQUIDITY_URL} target="_blank" {...styleProps}>
       <CardBody>
@@ -47,28 +79,23 @@ export default function RewardsVelodromeCard({ velodromeStaking, ...styleProps }
           </Flex>
           {!isMobile ? (
             <>
-              <Flex alignItems="center">
+              <Flex>
                 <Text mr={2} color="secondaryText" variant="bodyLarge">
                   TVL
                 </Text>
-                <Text variant="bodyLarge">{formatTruncatedUSD(velodromeStaking?.tvl ?? ZERO_BN)}</Text>
+                <RewardsVelodromeStakingTVLText />
               </Flex>
               <Flex>
                 <Text mr={2} color="secondaryText" variant="bodyLarge">
                   Your Liquidity
                 </Text>
-                <Text variant="bodyLarge">{formatTruncatedUSD(balance)}</Text>
+                <RewardsVelodromeStakingLiquidityText />
               </Flex>
               <Flex ml="auto">
                 <Text mr={2} color="secondaryText" variant="bodyLarge">
                   APY
                 </Text>
-                <Text
-                  variant="bodyLarge"
-                  color={velodromeStaking && velodromeStaking.lpTokenBalance > 0 ? 'primaryText' : 'text'}
-                >
-                  {formatPercentage(velodromeStaking?.apy ?? 0, true)}
-                </Text>
+                <RewardsVelodromeStakingAPYText />
               </Flex>
             </>
           ) : null}

diff --git a/app/src/containers/rewards_index/RewardsWethLyraLPSection/index.tsx b/app/src/containers/rewards_index/RewardsWethLyraLPSection/index.tsx
@@ -5,26 +5,13 @@ import Text from '@lyra/ui/components/Text'
 import { MarginProps } from '@lyra/ui/types'
 import React from 'react'
 
-import { CamelotStaking } from '@/app/utils/fetchCamelotStaking'
-import { VelodromeStaking } from '@/app/utils/fetchVelodromeStaking'
-import { ArrakisStaking } from '@/app/utils/rewards/fetchArrakisStaking'
-
 import RewardsArrakisCard from './RewardsArrakisCard'
 import RewardsCamelotCard from './RewardsCamelotCard'
 import RewardsVelodromeCard from './RewardsVelodromeCard'
 
-type Props = {
-  arrakisStaking: ArrakisStaking | null
-  camelotStaking: CamelotStaking | null
-  velodromeStaking: VelodromeStaking | null
-} & MarginProps
+type Props = MarginProps
 
-const RewardsWethLyraLPSection = ({
-  arrakisStaking,
-  camelotStaking,
-  velodromeStaking,
-  ...marginProps
-}: Props): CardElement => {
+const RewardsWethLyraLPSection = ({ ...marginProps }: Props): CardElement => {
   return (
     <Flex flexDirection="column" mt={[6, 0]}>
       <Box px={[6, 0]} mb={5}>
@@ -34,9 +21,9 @@ const RewardsWethLyraLPSection = ({
         <Text color="secondaryText">Earn rewards on the Uniswap v3 pool via Arrakis Finance and Camelot DEX.</Text>
       </Box>
       <Flex flexDirection="column" {...marginProps}>
-        <RewardsArrakisCard arrakisStaking={arrakisStaking} />
-        <RewardsCamelotCard camelotStaking={camelotStaking} mt={4} />
-        <RewardsVelodromeCard velodromeStaking={velodromeStaking} mt={4} />
+        <RewardsArrakisCard />
+        <RewardsCamelotCard mt={4} />
+        <RewardsVelodromeCard mt={4} />
       </Flex>
     </Flex>
   )

diff --git a/.../hooks/rewards/useMutateArrakisStaking.ts → app/src/hooks/rewards/useArrakisStaking.ts b/.../hooks/rewards/useMutateArrakisStaking.ts → app/src/hooks/rewards/useArrakisStaking.ts
@@ -4,7 +4,13 @@ import { FetchId } from '@/app/constants/fetch'
 import fetchArrakisStaking, { ArrakisStaking } from '@/app/utils/rewards/fetchArrakisStaking'
 
 import useWalletAccount from '../account/useWalletAccount'
-import { useMutate } from '../data/useFetch'
+import useFetch, { useMutate } from '../data/useFetch'
+
+export default function useArrakisStaking() {
+  const account = useWalletAccount()
+  const [data] = useFetch(FetchId.ArrakisStaking, [account], fetchArrakisStaking)
+  return data
+}
 
 export const useMutateArrakisStaking = (): (() => Promise<ArrakisStaking | null>) => {
   const mutate = useMutate(FetchId.ArrakisStaking, fetchArrakisStaking)