[WIP] add reliquary to beets

apps/beets-frontend-v3/app/(app)/mabeets/add-liquidity/layout.tsx

@@ -0,0 +1,19 @@
+'use client'
+
+import { useReliquary } from '@/lib/modules/reliquary/ReliquaryProvider'
+import { AddLiquidityLayout } from '@repo/lib/shared/layouts/AddLiquidityLayout'
+import { PropsWithChildren } from 'react'
+
+type Props = PropsWithChildren<{
+  params: { txHash?: string[] }
+}>
+
+export default function AddLiquidityLayoutWrapper({ params: { txHash }, children }: Props) {
+  const { selectedRelic } = useReliquary()
+
+  return (
+    <AddLiquidityLayout relicId={selectedRelic?.relicId} txHash={txHash}>
+      {children}
+    </AddLiquidityLayout>
+  )
+}

apps/beets-frontend-v3/app/(app)/mabeets/add-liquidity/page.tsx

@@ -0,0 +1,7 @@
+'use client'
+
+import { AddLiquidityPage } from '@repo/lib/shared/pages/AddLiquidityPage'
+
+export default function AddLiquidityWrapper() {
+  return <AddLiquidityPage />
+}

apps/beets-frontend-v3/app/(app)/mabeets/layout.tsx

@@ -0,0 +1,25 @@
+import { Metadata } from 'next'
+import { PropsWithChildren } from 'react'
+import { DefaultPageContainer } from '@repo/lib/shared/components/containers/DefaultPageContainer'
+import ReliquaryProvidersLayout from '@/lib/modules/reliquary/ReliquaryProvidersLayout'
+import { PoolLayout } from '@repo/lib/shared/layouts/PoolLayout'
+import { ChainSlug } from '@repo/lib/modules/pool/pool.utils'
+import { PROJECT_CONFIG } from '@repo/lib/config/getProjectConfig'
+import { BaseVariant } from '@repo/lib/modules/pool/pool.types'
+
+export const metadata: Metadata = {
+  title: 'maBEETS',
+  description: `
+   Text
+  `,
+}
+
+export default async function Pools({ children }: PropsWithChildren) {
+  return (
+    <PoolLayout chain={ChainSlug.Sonic} id={PROJECT_CONFIG.corePoolId} variant={BaseVariant.v2}>
+      <ReliquaryProvidersLayout>
+        <DefaultPageContainer minH="100vh">{children}</DefaultPageContainer>
+      </ReliquaryProvidersLayout>
+    </PoolLayout>
+  )
+}

apps/beets-frontend-v3/app/(app)/mabeets/page.tsx

@@ -0,0 +1,5 @@
+import { Reliquary } from '@/lib/modules/reliquary/Reliquary'
+
+export default async function PoolsPageWrapper() {
+  return <Reliquary />
+}

apps/beets-frontend-v3/lib/modules/reliquary/Reliquary.tsx

@@ -0,0 +1,26 @@
+'use client'
+
+import { VStack } from '@chakra-ui/react'
+import { useGetRelicPositionsOfOwner } from './hooks/useGetRelicPositionsOfOwner'
+import { Relic } from './components/Relic'
+import { useReliquary } from './ReliquaryProvider'
+import { useEffect, useRef } from 'react'
+
+export function Reliquary() {
+  const { chain, setSelectedRelic } = useReliquary()
+  const { relics } = useGetRelicPositionsOfOwner(chain)
+  const hasSetInitialRelic = useRef(false)
+
+  useEffect(() => {
+    if (relics && relics.length > 0 && !hasSetInitialRelic.current) {
+      setSelectedRelic(relics[0])
+      hasSetInitialRelic.current = true
+    }
+  }, [relics, setSelectedRelic])
+
+  return (
+    <VStack align="start" h="full" w="full">
+      {relics?.map(relic => <Relic chain={chain} key={relic.relicId} relic={relic} />)}
+    </VStack>
+  )
+}

apps/beets-frontend-v3/lib/modules/reliquary/ReliquaryProvider.tsx

@@ -0,0 +1,66 @@
+/* eslint-disable max-len */
+'use client'
+
+import { useState, PropsWithChildren, createContext } from 'react'
+import { useMandatoryContext } from '@repo/lib/shared/utils/contexts'
+import { GqlChain, GqlPoolSnapshotDataRange } from '@repo/lib/shared/services/api/generated/graphql'
+import { useUserAccount } from '@repo/lib/modules/web3/UserAccountProvider'
+import { LABELS } from '@repo/lib/shared/labels'
+import { isDisabledWithReason } from '@repo/lib/shared/utils/functions/isDisabledWithReason'
+import { useTokenInputsValidation } from '@repo/lib/modules/tokens/TokenInputsValidationProvider'
+import { useTransactionSteps } from '@repo/lib/modules/transactions/transaction-steps/useTransactionSteps'
+import { useLevelUpStep } from './hooks/useLevelUpStep'
+import { ReliquaryPosition } from './reliquary.types'
+import { useClaimRewardsSteps } from './hooks/useClaimRewardsSteps'
+
+const CHAIN = GqlChain.Sonic
+
+export function _useReliquary() {
+  const { isConnected } = useUserAccount()
+  const { hasValidationError, getValidationError } = useTokenInputsValidation()
+  const [range, setRange] = useState<GqlPoolSnapshotDataRange>(GqlPoolSnapshotDataRange.ThirtyDays)
+  const [selectedRelic, setSelectedRelic] = useState<ReliquaryPosition | undefined>(undefined)
+
+  const disabledConditions: [boolean, string][] = [[!isConnected, LABELS.walletNotConnected]]
+  const { isDisabled, disabledReason } = isDisabledWithReason(...disabledConditions)
+
+  const { step: levelUpStep } = useLevelUpStep(CHAIN, selectedRelic?.relicId)
+  const levelUpTransactionSteps = useTransactionSteps([levelUpStep], false)
+  const levelUpTxHash = levelUpTransactionSteps.lastTransaction?.result?.data?.transactionHash
+  const levelUpTxConfirmed = levelUpTransactionSteps.lastTransactionConfirmed
+
+  const { steps: claimRewardsSteps } = useClaimRewardsSteps(CHAIN, selectedRelic?.relicId)
+  const claimRewardsTransactionSteps = useTransactionSteps(claimRewardsSteps, false)
+  const claimRewardsTxHash =
+    claimRewardsTransactionSteps.lastTransaction?.result?.data?.transactionHash
+  const claimRewardsTxConfirmed = claimRewardsTransactionSteps.lastTransactionConfirmed
+
+  return {
+    chain: CHAIN,
+    isDisabled,
+    disabledReason,
+    hasValidationError,
+    getValidationError,
+    range,
+    setRange,
+    selectedRelic,
+    setSelectedRelic,
+    levelUpTransactionSteps,
+    levelUpTxHash,
+    levelUpTxConfirmed,
+    claimRewardsTransactionSteps,
+    claimRewardsTxHash,
+    claimRewardsTxConfirmed,
+  }
+}
+
+export type Result = ReturnType<typeof _useReliquary>
+export const ReliquaryContext = createContext<Result | null>(null)
+
+export function ReliquaryProvider({ children }: PropsWithChildren) {
+  const Reliquary = _useReliquary()
+
+  return <ReliquaryContext.Provider value={Reliquary}>{children}</ReliquaryContext.Provider>
+}
+
+export const useReliquary = (): Result => useMandatoryContext(ReliquaryContext, 'Reliquary')

apps/beets-frontend-v3/lib/modules/reliquary/ReliquaryProvidersLayout.tsx

@@ -0,0 +1,40 @@
+'use client'
+
+import { TokenBalancesProvider } from '@repo/lib/modules/tokens/TokenBalancesProvider'
+import { useTokens } from '@repo/lib/modules/tokens/TokensProvider'
+import { PropsWithChildren } from 'react'
+import sonicNetworkConfig from '@repo/lib/config/networks/sonic'
+import { TokenInputsValidationProvider } from '@repo/lib/modules/tokens/TokenInputsValidationProvider'
+import { PriceImpactProvider } from '@repo/lib/modules/price-impact/PriceImpactProvider'
+import { TransactionStateProvider } from '@repo/lib/modules/transactions/transaction-steps/TransactionStateProvider'
+import { ReliquaryProvider } from './ReliquaryProvider'
+import { RelayerSignatureProvider } from '@repo/lib/modules/relayer/RelayerSignatureProvider'
+import { Permit2SignatureProvider } from '@repo/lib/modules/tokens/approvals/permit2/Permit2SignatureProvider'
+
+export default function ReliquaryProvidersLayout({ children }: PropsWithChildren) {
+  const { tokens } = useTokens()
+
+  const poolTokens = tokens.filter(
+    t =>
+      t.address === '0x2d0e0814e62d80056181f5cd932274405966e4f0' || // BEETS
+      t.address === sonicNetworkConfig.tokens.stakedAsset?.address //stS
+  )
+
+  if (poolTokens.length === 0) throw new Error('Pool tokens not found')
+
+  return (
+    <TransactionStateProvider>
+      <RelayerSignatureProvider>
+        <Permit2SignatureProvider>
+          <TokenBalancesProvider initTokens={poolTokens}>
+            <TokenInputsValidationProvider>
+              <ReliquaryProvider>
+                <PriceImpactProvider>{children}</PriceImpactProvider>
+              </ReliquaryProvider>
+            </TokenInputsValidationProvider>
+          </TokenBalancesProvider>
+        </Permit2SignatureProvider>
+      </RelayerSignatureProvider>
+    </TransactionStateProvider>
+  )
+}

apps/beets-frontend-v3/lib/modules/reliquary/components/ClaimModal.tsx

@@ -0,0 +1,105 @@
+import {
+  Card,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalProps,
+  Text,
+} from '@chakra-ui/react'
+import { formatUnits } from 'viem'
+import { useBreakpoints } from '@repo/lib/shared/hooks/useBreakpoints'
+import { MobileStepTracker } from '@repo/lib/modules/transactions/transaction-steps/step-tracker/MobileStepTracker'
+import { getStylesForModalContentWithStepTracker } from '@repo/lib/modules/transactions/transaction-steps/step-tracker/step-tracker.utils'
+import { DesktopStepTracker } from '@repo/lib/modules/transactions/transaction-steps/step-tracker/DesktopStepTracker'
+import { TransactionModalHeader } from '@repo/lib/shared/components/modals/TransactionModalHeader'
+import { ActionModalFooter } from '@repo/lib/shared/components/modals/ActionModalFooter'
+import { SuccessOverlay } from '@repo/lib/shared/components/modals/SuccessOverlay'
+import { GqlChain } from '@repo/lib/shared/services/api/generated/graphql'
+import { AnimateHeightChange } from '@repo/lib/shared/components/animations/AnimateHeightChange'
+import { useResetStepIndexOnOpen } from '@repo/lib/modules/pool/actions/useResetStepIndexOnOpen'
+import { useReliquary } from '../ReliquaryProvider'
+import { useGetPendingReward } from '../hooks/useGetPendingReward'
+import TokenRow from '@repo/lib/modules/tokens/TokenRow/TokenRow'
+import { getChainId, getNetworkConfig } from '@repo/lib/config/app.config'
+
+type Props = {
+  isOpen: boolean
+  onClose(): void
+  chain: GqlChain
+}
+
+export function ClaimModal({
+  isOpen,
+  onClose,
+  chain,
+  ...rest
+}: Props & Omit<ModalProps, 'children' | 'onClose'>) {
+  const { isDesktop, isMobile } = useBreakpoints()
+
+  const {
+    claimRewardsTransactionSteps: transactionSteps,
+    claimRewardsTxHash,
+    selectedRelic,
+  } = useReliquary()
+
+  const { amount, refetch } = useGetPendingReward(chain, selectedRelic?.relicId)
+
+  const chainId = getChainId(chain)
+  const config = getNetworkConfig(chainId)
+
+  useResetStepIndexOnOpen(isOpen, transactionSteps)
+
+  const isSuccess = !!claimRewardsTxHash
+
+  function handleOnClose() {
+    refetch()
+    transactionSteps.resetTransactionSteps()
+    onClose()
+  }
+
+  return (
+    <Modal
+      isCentered
+      isOpen={isOpen}
+      onClose={onClose}
+      preserveScrollBarGap
+      trapFocus={!isSuccess}
+      {...rest}
+    >
+      <SuccessOverlay startAnimation={!!claimRewardsTxHash} />
+      <ModalContent {...getStylesForModalContentWithStepTracker(isDesktop)}>
+        {isDesktop && <DesktopStepTracker chain={chain} transactionSteps={transactionSteps} />}
+        <TransactionModalHeader
+          chain={chain}
+          label="Claim incentives"
+          txHash={claimRewardsTxHash}
+        />
+        <ModalCloseButton />
+        <ModalBody>
+          <AnimateHeightChange spacing="sm">
+            {isMobile && <MobileStepTracker chain={chain} transactionSteps={transactionSteps} />}
+            {!amount ? (
+              <Text>Nothing to claim</Text>
+            ) : (
+              <Card variant="modalSubSection">
+                <TokenRow
+                  address={config.tokens.addresses.beets || '0x'}
+                  chain={chain}
+                  label={claimRewardsTxHash ? 'You got' : "You'll get"}
+                  value={formatUnits(amount || 0n, 18)}
+                />
+              </Card>
+            )}
+          </AnimateHeightChange>
+        </ModalBody>
+        <ActionModalFooter
+          currentStep={transactionSteps.currentStep}
+          isSuccess={isSuccess}
+          returnAction={handleOnClose}
+          returnLabel="Return to maBEETS"
+        />
+      </ModalContent>
+    </Modal>
+  )
+}

apps/beets-frontend-v3/lib/modules/reliquary/components/LevelUpModal.tsx

@@ -0,0 +1,80 @@
+import {
+  Card,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalProps,
+} from '@chakra-ui/react'
+import { useBreakpoints } from '@repo/lib/shared/hooks/useBreakpoints'
+import { MobileStepTracker } from '@repo/lib/modules/transactions/transaction-steps/step-tracker/MobileStepTracker'
+import { getStylesForModalContentWithStepTracker } from '@repo/lib/modules/transactions/transaction-steps/step-tracker/step-tracker.utils'
+import { DesktopStepTracker } from '@repo/lib/modules/transactions/transaction-steps/step-tracker/DesktopStepTracker'
+import { TransactionModalHeader } from '@repo/lib/shared/components/modals/TransactionModalHeader'
+import { ActionModalFooter } from '@repo/lib/shared/components/modals/ActionModalFooter'
+import { SuccessOverlay } from '@repo/lib/shared/components/modals/SuccessOverlay'
+import { GqlChain } from '@repo/lib/shared/services/api/generated/graphql'
+import { AnimateHeightChange } from '@repo/lib/shared/components/animations/AnimateHeightChange'
+import { useResetStepIndexOnOpen } from '@repo/lib/modules/pool/actions/useResetStepIndexOnOpen'
+import { useReliquary } from '../ReliquaryProvider'
+
+type Props = {
+  isOpen: boolean
+  onClose(): void
+  chain: GqlChain
+  nextLevel: number
+}
+
+export function LevelUpModal({
+  isOpen,
+  onClose,
+  chain,
+  nextLevel,
+  ...rest
+}: Props & Omit<ModalProps, 'children' | 'onClose'>) {
+  const { isDesktop, isMobile } = useBreakpoints()
+  const { levelUpTransactionSteps, levelUpTxHash } = useReliquary()
+
+  useResetStepIndexOnOpen(isOpen, levelUpTransactionSteps)
+
+  function handleOnClose() {
+    levelUpTransactionSteps.resetTransactionSteps()
+    onClose()
+  }
+
+  const isSuccess = !!levelUpTxHash
+
+  return (
+    <Modal
+      isCentered
+      isOpen={isOpen}
+      onClose={onClose}
+      preserveScrollBarGap
+      trapFocus={!isSuccess}
+      {...rest}
+    >
+      <SuccessOverlay startAnimation={!!levelUpTxHash} />
+      <ModalContent {...getStylesForModalContentWithStepTracker(isDesktop)}>
+        {isDesktop && (
+          <DesktopStepTracker chain={chain} transactionSteps={levelUpTransactionSteps} />
+        )}
+        <TransactionModalHeader chain={chain} label="Level Up" txHash={levelUpTxHash} />
+        <ModalCloseButton />
+        <ModalBody>
+          <AnimateHeightChange spacing="sm">
+            {isMobile && (
+              <MobileStepTracker chain={chain} transactionSteps={levelUpTransactionSteps} />
+            )}
+            <Card variant="modalSubSection">The next level is {nextLevel}!</Card>
+          </AnimateHeightChange>
+        </ModalBody>
+        <ActionModalFooter
+          currentStep={levelUpTransactionSteps.currentStep}
+          isSuccess={isSuccess}
+          returnAction={handleOnClose}
+          returnLabel="Return to maBEETS"
+        />
+      </ModalContent>
+    </Modal>
+  )
+}