Merge branch 'beets/merged' into beets/improve-unstake-validator-sele…

…ction

apps/beets-frontend-v3/lib/modules/landing-page/sections/LandingBeetsData.tsx

@@ -198,7 +198,7 @@ export function LandingBeetsData({
             </GridItem>
             <GridItem bg="rgba(0, 0, 0, 0.2)">
               <GlobalStatsCard
-                label="24 VOL"
+                label="24h VOL"
                 value={toCurrency(protocolMetricsAggregated.swapVolume24h)}
               />
             </GridItem>
@@ -213,46 +213,46 @@ export function LandingBeetsData({
         <Grid gap="none" templateColumns={{ base: '1fr', lg: 'repeat(3, 1fr)' }} w="full">
           <GridItem bg="rgba(255, 255, 255, 0.05)">
             <ChainDataCard
-              chain={GqlChain.Sonic}
-              networkColor="orange"
-              protocolData={chainData[getChainId(GqlChain.Sonic)]}
-              totalTvl={totalTvl}
               button={
-                <Button variant="primary" as={NextLink} href="/pools?networks=SONIC">
+                <Button as={NextLink} href="/pools?networks=SONIC" variant="primary">
                   Sonic Pools
                 </Button>
               }
+              chain={GqlChain.Sonic}
+              networkColor="orange"
+              protocolData={chainData[getChainId(GqlChain.Sonic)]}
+              totalTvl={totalTvl}
             />
           </GridItem>
           <GridItem bg="rgba(0, 0, 0, 0.05)">
             <ChainDataCard
-              chain={GqlChain.Optimism}
-              networkColor="red"
-              protocolData={chainData[getChainId(GqlChain.Optimism)]}
-              totalTvl={totalTvl}
               button={
-                <Button variant="primary" as={NextLink} href="/pools?networks=OPTIMISM">
+                <Button as={NextLink} href="/pools?networks=OPTIMISM" variant="primary">
                   Optimism Pools
                 </Button>
               }
+              chain={GqlChain.Optimism}
+              networkColor="red"
+              protocolData={chainData[getChainId(GqlChain.Optimism)]}
+              totalTvl={totalTvl}
             />
           </GridItem>
           <GridItem bg="rgba(0, 0, 0, 0.2)">
             <ChainDataCard
-              chain={GqlChain.Fantom}
-              networkColor="deepskyblue"
-              protocolData={chainData[getChainId(GqlChain.Fantom)]}
-              totalTvl={totalTvl}
               button={
                 <Button
-                  variant="primary"
                   as={NextLink}
                   href="https://ftm.beets.fi/pools"
                   target="_blank"
+                  variant="primary"
                 >
                   Fantom Pools
                 </Button>
               }
+              chain={GqlChain.Fantom}
+              networkColor="deepskyblue"
+              protocolData={chainData[getChainId(GqlChain.Fantom)]}
+              totalTvl={totalTvl}
             />
           </GridItem>
         </Grid>

packages/lib/modules/beets/lst/Lst.tsx

@@ -19,12 +19,16 @@ import {
   Tooltip,
   useDisclosure,
   VStack,
+  Text,
+  Skeleton,
+  Icon,
+  BoxProps,
 } from '@chakra-ui/react'
 import { ConnectWallet } from '@repo/lib/modules/web3/ConnectWallet'
 import { useUserAccount } from '@repo/lib/modules/web3/UserAccountProvider'
 import FadeInOnView from '@repo/lib/shared/components/containers/FadeInOnView'
 import { useIsMounted } from '@repo/lib/shared/hooks/useIsMounted'
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import ButtonGroup, {
   ButtonGroupOption,
 } from '@repo/lib/shared/components/btns/button-group/ButtonGroup'
@@ -38,6 +42,11 @@ import { LstUnstakeModal } from './modals/LstUnstakeModal'
 import { LstWithdraw } from './components/LstWithdraw'
 import { useGetUserWithdraws, UserWithdraw } from './hooks/useGetUserWithdraws'
 import { useGetUserNumWithdraws } from './hooks/useGetUserNumWithdraws'
+import { useGetStakedSonicData } from './hooks/useGetStakedSonicData'
+import { bn, fNum } from '@repo/lib/shared/utils/numbers'
+import { ZenGarden } from '@repo/lib/shared/components/zen/ZenGarden'
+import { NoisyCard } from '@repo/lib/shared/components/containers/NoisyCard'
+import { ArrowRight } from 'react-feather'
 
 const FAQ_ITEMS = [
   {
@@ -62,6 +71,21 @@ const FAQ_ITEMS = [
   },
 ]
 
+const COMMON_NOISY_CARD_PROPS: { contentProps: BoxProps; cardProps: BoxProps } = {
+  contentProps: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderBottomLeftRadius: 'none',
+    borderTopLeftRadius: 'none',
+    borderBottomRightRadius: 'none',
+  },
+  cardProps: {
+    position: 'relative',
+    height: 'full',
+  },
+}
+
 export function Lst() {
   const { isConnected } = useUserAccount()
   const isMounted = useIsMounted()
@@ -86,7 +110,11 @@ export function Lst() {
   const { isBalancesLoading } = useTokenBalances()
   const [disclosure, setDisclosure] = useState(stakeModalDisclosure)
   const { userNumWithdraws, isLoading: isUserNumWithdrawsLoading } = useGetUserNumWithdraws(chain)
-  const { data, isLoading: isWithdrawalsLoading } = useGetUserWithdraws(chain, userNumWithdraws)
+  const { data: UserWithdraws, isLoading: isWithdrawalsLoading } = useGetUserWithdraws(
+    chain,
+    userNumWithdraws
+  )
+  const { data: stakedSonicData, loading: isStakedSonicDataLoading } = useGetStakedSonicData()
 
   const isLoading =
     !isMounted || isBalancesLoading || isWithdrawalsLoading || isUserNumWithdrawsLoading
@@ -124,6 +152,20 @@ export function Lst() {
     }
   }, [activeTab])
 
+  const tokenIn = useMemo(() => (isStakeTab ? 'S' : 'stS'), [isStakeTab])
+
+  const tokenOut = useMemo(() => (isStakeTab ? 'stS' : 'S'), [isStakeTab])
+
+  const rate = useMemo(() => {
+    const rate = stakedSonicData?.stsGetGqlStakedSonicData.exchangeRate || '1'
+
+    if (isStakeTab) {
+      return bn(1).div(bn(rate))
+    }
+
+    return rate
+  }, [isStakeTab, stakedSonicData])
+
   function onModalClose() {
     // restart polling for token prices when modal is closed again
     startTokenPricePolling()
@@ -174,7 +216,7 @@ export function Lst() {
               {isWithdrawTab && !isWithdrawalsLoading && (
                 <LstWithdraw
                   isLoading={isWithdrawalsLoading || isUserNumWithdrawsLoading}
-                  withdrawalsData={data as UserWithdraw[]}
+                  withdrawalsData={UserWithdraws as UserWithdraw[]}
                 />
               )}
             </CardBody>
@@ -206,6 +248,54 @@ export function Lst() {
               )}
             </CardFooter>
           </Card>
+          {!isWithdrawTab && (
+            <Card position="relative">
+              <NoisyCard
+                cardProps={COMMON_NOISY_CARD_PROPS.cardProps}
+                contentProps={COMMON_NOISY_CARD_PROPS.contentProps}
+              >
+                <Box bottom={0} left={0} overflow="hidden" position="absolute" right={0} top={0}>
+                  <ZenGarden sizePx="280px" subdued variant="circle" />
+                </Box>
+                <VStack
+                  align="flex-start"
+                  h="full"
+                  justify="flex-start"
+                  m="auto"
+                  p={{ base: 'sm', md: 'md' }}
+                  role="group"
+                  spacing="xl"
+                  w="full"
+                  zIndex={1}
+                >
+                  <HStack justify="space-between" w="full">
+                    <Text>APR:</Text>
+                    {isStakedSonicDataLoading ? (
+                      <Skeleton h="full" w="12" />
+                    ) : (
+                      <Text>
+                        {fNum('apr', stakedSonicData?.stsGetGqlStakedSonicData.stakingApr || '0')}
+                      </Text>
+                    )}
+                  </HStack>
+                  <HStack justify="space-between" w="full">
+                    <Text>Rate:</Text>
+                    <HStack>
+                      {isStakedSonicDataLoading ? (
+                        <Skeleton h="full" w="12" />
+                      ) : (
+                        <>
+                          <Text>{`1 ${tokenIn}`}</Text>
+                          <Icon as={ArrowRight} />
+                          <Text>{`${fNum('token', rate)} ${tokenOut}`}</Text>
+                        </>
+                      )}
+                    </HStack>
+                  </HStack>
+                </VStack>
+              </NoisyCard>
+            </Card>
+          )}
           <Card rounded="xl" w="full">
             <CardHeader as={HStack} justify="space-between" w="full">
               <Heading as="h2" size="lg">

packages/lib/modules/beets/lst/hooks/useGetStakedSonicData.tsx

@@ -0,0 +1,7 @@
+import { GetStakedSonicDataDocument } from '@repo/lib/shared/services/api/generated/graphql'
+import { useQuery } from '@apollo/client'
+import minutesToMilliseconds from 'date-fns/minutesToMilliseconds'
+
+export function useGetStakedSonicData() {
+  return useQuery(GetStakedSonicDataDocument, { pollInterval: minutesToMilliseconds(5) })
+}

packages/lib/shared/services/api/staked-sonic.graphql

@@ -0,0 +1,13 @@
+query GetStakedSonicData {
+  stsGetGqlStakedSonicData {
+    delegatedValidators {
+      assetsDelegated
+      validatorId
+    }
+    exchangeRate
+    stakingApr
+    totalAssets
+    totalAssetsDelegated
+    totalAssetsPool
+  }
+}