feat: optimize vault fetching

derivexyz · May 25, 2023 · b0f0551 · b0f0551
1 parent f85123b
commit b0f0551
Show file tree

Hide file tree

Showing 47 changed files with 741 additions and 1,087 deletions.
diff --git a/app/src/components/common/RowItem/index.tsx b/app/src/components/common/RowItem/index.tsx
@@ -7,15 +7,22 @@ type Props = {
   label: string | React.ReactNode
   value: string | React.ReactNode
   valueColor?: TextColor
+  variant?: 'small' | 'body'
 } & MarginProps &
   LayoutProps
 
-export default function RowItem({ label, value, valueColor = 'text', ...styleProps }: Props) {
+export default function RowItem({ label, value, variant, valueColor = 'text', ...styleProps }: Props) {
   return (
     <Flex justifyContent="space-between" alignItems="center" {...styleProps}>
-      {typeof label === 'string' ? <Text color="secondaryText">{label}</Text> : label}
+      {typeof label === 'string' ? (
+        <Text variant={variant} color="secondaryText">
+          {label}
+        </Text>
+      ) : (
+        label
+      )}
       {typeof value === 'string' ? (
-        <Text textAlign="right" color={valueColor}>
+        <Text variant={variant} textAlign="right" color={valueColor}>
           {value}
         </Text>
       ) : (

diff --git a/app/src/components/rewards/TradingFeeRebateTable/index.tsx b/app/src/components/rewards/TradingFeeRebateTable/index.tsx
diff --git a/app/src/constants/ignore.ts b/app/src/constants/ignore.ts
diff --git a/app/src/constants/layout.ts b/app/src/constants/layout.ts
@@ -5,7 +5,7 @@ export const MOBILE_HEADER_HEIGHT = 42
 export const PAGE_WIDTH = 1300
 export const PAGE_FULL_WIDTH = 1800
 
-export const HEADER_CARD_HEIGHT = 206
+export const HEADER_CARD_HEIGHT = 200
 
 export const VAULTS_CHART_HEIGHT = [120, 250]
 export const VAULTS_INDEX_CHART_HEIGHT = [120, 250]

diff --git a/app/src/containers/common/TotalSupplyHeaderCard/index.tsx b/app/src/containers/common/TotalSupplyHeaderCard/index.tsx
@@ -19,30 +19,31 @@ const TotalSupplyHeaderCard = withSuspense(() => {
   const circulatingSupplyPct = supply ? supply.totalCirculatingSupply / supply.totalSupply : 0
   return supply ? (
     <Card variant="outline" width="100%" height="100%">
-      <CardBody>
-        <Text variant="cardHeading" mb={10}>
-          Circulating Supply
-        </Text>
-        <Flex>
+      <CardBody height="100%">
+        <Text variant="cardHeading">Circulating Supply</Text>
+        <Flex mt="auto">
           <Tooltip
             showInfoIcon
             tooltip={
               <Box width={200}>
                 <RowItem
+                  variant="small"
                   label="Mainnet"
                   value={`${formatTruncatedNumber(supply.mainnetCirculatingSupply)} (${formatPercentage(
                     supply.mainnetCirculatingSupply / supply.totalSupply,
                     true
                   )})`}
                 />
                 <RowItem
+                  variant="small"
                   label="Optimism"
                   value={`${formatTruncatedNumber(supply.optimismCirculatingSupply)} (${formatPercentage(
                     supply.optimismCirculatingSupply / supply.totalSupply,
                     true
                   )})`}
                 />
                 <RowItem
+                  variant="small"
                   label="Arbitrum"
                   value={`${formatTruncatedNumber(supply.arbitrumCirculatingSupply)} (${formatPercentage(
                     supply.arbitrumCirculatingSupply / supply.totalSupply,
@@ -52,14 +53,14 @@ const TotalSupplyHeaderCard = withSuspense(() => {
               </Box>
             }
           >
-            <Text>{formatNumber(supply.totalCirculatingSupply)}</Text>
+            <Text variant="small">{formatNumber(supply.totalCirculatingSupply)}</Text>
           </Tooltip>
-          <Text color="secondaryText" ml="auto">
+          <Text variant="small" color="secondaryText" ml="auto">
             {formatNumber(supply.totalSupply)}
           </Text>
         </Flex>
         <LinearProgress my={2} color="primaryText" progress={supply.totalCirculatingSupply / supply.totalSupply} />
-        <Text>{formatPercentage(circulatingSupplyPct, true)}</Text>
+        <Text variant="small">{formatPercentage(circulatingSupplyPct, true)}</Text>
       </CardBody>
     </Card>
   ) : null

diff --git a/app/src/containers/earn/EarnVaultsHeaderCard/index.tsx b/app/src/containers/earn/EarnVaultsHeaderCard/index.tsx
@@ -28,13 +28,10 @@ const EarnVaultsHeaderCard = ({ latestAccountRewardEpoch, totalClaimableRewards,
 
   return (
     <Card variant="outline" width="100%" height="100%">
-      <CardBody height="100%">
-        <Text variant="cardHeading" mb={4}>
-          Vault Rewards
-        </Text>
-        <LabelItem mt="auto" label="Claimable" value={claimableAmounts.join(', ')} />
+      <CardBody height="100%" justifyContent="space-between">
+        <Text variant="cardHeading">Vault Rewards</Text>
+        <LabelItem valueColor="primaryText" label="Claimable" value={claimableAmounts.join(', ')} />
         <RewardsClaimModalButton
-          mt="auto"
           accountRewardEpoch={latestAccountRewardEpoch}
           isDisabled={!hasClaimableAmounts}
           onClick={onClickClaim}

diff --git a/app/src/containers/earn_index/RewardsVaultsSection/RewardsVaultsMarketCard.tsx b/app/src/containers/earn_index/RewardsVaultsSection/RewardsVaultsMarketCard.tsx
@@ -54,11 +54,7 @@ const RewardsVaultsMarketCard = ({ vault }: Props) => {
 
   const liquidityTokenBalanceValue = vault.liquidityTokenBalanceValue
 
-  if (!firstRewardToken || !vaultRewards) {
-    return null
-  }
-
-  const isBoosted = (accountRewardEpoch?.stakedLyraBalance ?? 0) > 0
+  const isBoosted = vault.apyMultiplier > 1.01
 
   return (
     <Card
@@ -85,11 +81,10 @@ const RewardsVaultsMarketCard = ({ vault }: Props) => {
                 {formatTokenName(market.baseToken)} Vault · {getNetworkDisplayName(market.lyra.network)}
               </Text>
               {vault.isDeprecated ? (
-                <Text variant="small" ml={2}>
-                  [Deprecated]
+                <Text variant="small" ml={2} color="secondaryText">
+                  Deprecated
                 </Text>
-              ) : null}
-              {vault.market.lyra.version === Version.Newport && vault.market.lyra.network === Network.Optimism ? (
+              ) : vault.market.lyra.version === Version.Newport && vault.market.lyra.network === Network.Optimism ? (
                 <Text ml={2} variant="small" color="primaryText">
                   New
                 </Text>
@@ -136,11 +131,15 @@ const RewardsVaultsMarketCard = ({ vault }: Props) => {
                 <Text mr={2} color="secondaryText">
                   Rewards
                 </Text>
-                <RewardTokenAmounts
-                  color={vaultRewards.amount > 0.001 ? 'primaryText' : 'text'}
-                  tokenAmounts={[vaultRewards]}
-                  hideTokenImages={true}
-                />
+                {vaultRewards ? (
+                  <RewardTokenAmounts
+                    color={vaultRewards.amount > 0.001 ? 'primaryText' : 'text'}
+                    tokenAmounts={[vaultRewards]}
+                    hideTokenImages={true}
+                  />
+                ) : (
+                  <Text color="secondaryText">-</Text>
+                )}
               </Flex>
             </>
           ) : null}

diff --git a/app/src/containers/trade/TradeForm/TradeFormButton.tsx b/app/src/containers/trade/TradeForm/TradeFormButton.tsx
@@ -181,7 +181,7 @@ const TradeFormButton = ({ onTrade, trade, ...styleProps }: Props) => {
           const maxCostNum = fromBigNumber(maxCost)
           const minCostNum = fromBigNumber(minCost)
           const totalCostNum = fromBigNumber(totalCost)
-          console.log({
+          console.debug({
             blockTimestamp: market.block.timestamp,
             timeSinceBlock: Date.now() / 1000 - market.block.timestamp,
             maxCostNum,

diff --git a/app/src/containers/vaults/VaultsHistoryCard/index.tsx b/app/src/containers/vaults/VaultsHistoryCard/index.tsx
@@ -2,7 +2,7 @@ import Box from '@lyra/ui/components/Box'
 import ToggleButton from '@lyra/ui/components/Button/ToggleButton'
 import ToggleButtonItem from '@lyra/ui/components/Button/ToggleButtonItem'
 import Card from '@lyra/ui/components/Card'
-import CardBody from '@lyra/ui/components/Card/CardBody'
+import CardSection from '@lyra/ui/components/Card/CardSection'
 import Flex from '@lyra/ui/components/Flex'
 import Text from '@lyra/ui/components/Text'
 import Countdown from '@lyra/ui/components/Text/CountdownText'
@@ -77,35 +77,32 @@ const VaultsHistoryCard = ({ vault, latestGlobalRewardEpoch, accountRewardEpochs
   const showDeposits = selectedItem === 'deposits'
   return (
     <Card>
-      <CardBody>
-        <Text mb={6} variant="cardHeading">
+      <CardSection noSpacing>
+        <Text variant="cardHeading" mb={6}>
           History
         </Text>
         <Flex>
-          <ToggleButton mt={4} mb={8}>
+          <ToggleButton>
             {VAULT_HISTORY_TABS.map(item => (
               <ToggleButtonItem
                 key={item.id}
                 id={item.id}
                 label={item.label}
                 isSelected={selectedItem === item.id}
                 onSelect={id => setSelectedItem(id)}
-                width="100%"
-                textVariant="body"
               />
             ))}
           </ToggleButton>
         </Flex>
+      </CardSection>
+      <CardSection>
         {showRewards ? (
           account && accountEpochsSorted.length > 0 && !latestGlobalRewardEpoch.isDepositPeriod ? (
             <Box overflowX="scroll">
               <Flex py={3}>
                 <Text minWidth={MIN_COL_WIDTH} color="secondaryText">
                   Ended
                 </Text>
-                <Text minWidth={MIN_COL_WIDTH} color="secondaryText">
-                  Your Liquidity
-                </Text>
                 <Text minWidth={MIN_COL_WIDTH} ml="auto" color="secondaryText" textAlign={isMobile ? 'left' : 'right'}>
                   Your Rewards
                 </Text>
@@ -123,21 +120,14 @@ const VaultsHistoryCard = ({ vault, latestGlobalRewardEpoch, accountRewardEpochs
                 return (
                   <Flex py={3} key={globalEpoch.id}>
                     <Text minWidth={MIN_COL_WIDTH}>{formatDate(globalEpoch.endTimestamp)}</Text>
-                    <Text minWidth={MIN_COL_WIDTH}>
-                      {formatBalance({
-                        balance: accountEpoch?.vaultTokenBalance(market.address) ?? 0,
-                        symbol: market.liquidityToken.symbol,
-                        decimals: market.liquidityToken.decimals,
-                      })}
-                    </Text>
                     <Box minWidth={MIN_COL_WIDTH} ml="auto" textAlign={isMobile ? 'left' : 'right'}>
                       <Text>{vaultRewards.map(t => formatBalance(t)).join(', ')}</Text>
                       {isLateDistribution ? (
                         <Text variant="body" color="secondaryText">
                           Claiming delayed
                         </Text>
                       ) : isPendingDistribution ? (
-                        <Text variant="body" color="secondaryText">
+                        <Text variant="small" color="secondaryText">
                           Claimable in&nbsp;
                           <Countdown as="span" timestamp={globalEpoch.distributionTimestamp} />
                         </Text>
@@ -148,7 +138,9 @@ const VaultsHistoryCard = ({ vault, latestGlobalRewardEpoch, accountRewardEpochs
               })}
             </Box>
           ) : (
-            <Text color="secondaryText">No Rewards History</Text>
+            <Text variant="small" color="secondaryText">
+              No rewards history.
+            </Text>
           )
         ) : null}
         {showDeposits ? (
@@ -178,10 +170,12 @@ const VaultsHistoryCard = ({ vault, latestGlobalRewardEpoch, accountRewardEpochs
               })}
             </Box>
           ) : (
-            <Text color="secondaryText">No Deposit History</Text>
+            <Text variant="small" color="secondaryText">
+              No deposit history.
+            </Text>
           )
         ) : null}
-      </CardBody>
+      </CardSection>
     </Card>
   )
 }

diff --git a/app/src/containers/vaults/VaultsMarketDropdown/index.tsx b/app/src/containers/vaults/VaultsMarketDropdown/index.tsx
@@ -1,7 +1,6 @@
 import DropdownButton from '@lyra/ui/components/Button/DropdownButton'
 import DropdownButtonListItem from '@lyra/ui/components/Button/DropdownButtonListItem'
 import { DropdownIconButtonElement } from '@lyra/ui/components/Button/DropdownIconButton'
-import Flex from '@lyra/ui/components/Flex'
 import Text from '@lyra/ui/components/Text'
 import React, { useCallback, useState } from 'react'
 
@@ -39,13 +38,15 @@ const VaultsMarketDropdown = ({ vaults, selectedVault, ...styleProps }: Props):
           <DropdownButtonListItem
             key={market.address}
             isSelected={market.address === selectedMarket.address}
-            label={`${formatTokenName(market.baseToken)} Vault ${isDeprecated ? '[Deprecated]' : ''}`}
+            label={
+              <Text color="text">
+                {formatTokenName(market.baseToken)} Vault{isDeprecated ? ' · Deprecated' : ''}
+              </Text>
+            }
             sublabel={
-              <Flex flexDirection="column">
-                <Text variant="small" as="span" color="secondaryText">
-                  {getNetworkDisplayName(market.lyra.network)}
-                </Text>
-              </Flex>
+              <Text variant="small" as="span" color="secondaryText">
+                {getNetworkDisplayName(market.lyra.network)}
+              </Text>
             }
             href={getPagePath({
               page: PageId.EarnVaults,