Merge branch 'beets/merged' into beets/orig-main

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

@@ -1,7 +1,7 @@
 'use client'
 
-import { Lst } from '@repo/lib/modules/beets/lst/Lst'
-import LstProvidersLayout from '@repo/lib/modules/beets/lst/LstProvidersLayout'
+import { Lst } from '@/lib/modules/lst/Lst'
+import LstProvidersLayout from '@/lib/modules/lst/LstProvidersLayout'
 
 export default function LstPage() {
   return (

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

@@ -4,8 +4,23 @@ import Link from 'next/link'
 import { Container, Divider, Box } from '@chakra-ui/react'
 import { Prose } from '@nikolovlazar/chakra-ui-prose'
 import FadeInOnView from '@repo/lib/shared/components/containers/FadeInOnView'
+import { useEffect } from 'react'
 
 export default function Privacy() {
+  useEffect(() => {
+    const handleHashChange = () => {
+      const { hash } = window.location
+      if (hash) {
+        const id = hash.substring(1)
+        const element = document.getElementById(id)
+        element?.scrollIntoView({ behavior: 'smooth' })
+      }
+    }
+
+    // Run on initial load
+    handleHashChange()
+  }, [])
+
   return (
     <Container p="0">
       <Prose>

apps/beets-frontend-v3/app/layout.tsx

@@ -12,7 +12,8 @@ import { FooterContainer } from '@/lib/components/footer/FooterContainer'
 import { DEFAULT_THEME_COLOR_MODE } from '@repo/lib/shared/services/chakra/themes/base/foundations'
 import { ThemeProvider as ColorThemeProvider } from 'next-themes'
 import { ThemeProvider } from '@/lib/services/chakra/ThemeProvider'
-import { VebalLockDataProvider } from '@repo/lib/modules/vebal/lock/VebalLockDataProvider'
+import { LzBeetsMigrateModal } from '@/lib/components/modals/LzBeetsMigrateModal'
+import { PoolsNetworkWatcher } from '@/lib/components/navs/PoolsNetworkWatcher'
 
 export const metadata: Metadata = {
   title: 'Beets',
@@ -39,13 +40,13 @@ export default function RootLayout({ children }: PropsWithChildren) {
           <ColorThemeProvider defaultTheme={DEFAULT_THEME_COLOR_MODE}>
             <ThemeProvider>
               <Providers>
-                <VebalLockDataProvider>
-                  <GlobalAlerts />
-                  <NavBarContainer />
-                  {children}
-                  <FooterContainer />
-                  <SpeedInsights />
-                </VebalLockDataProvider>
+                <GlobalAlerts />
+                <NavBarContainer />
+                {children}
+                <LzBeetsMigrateModal />
+                <FooterContainer />
+                <SpeedInsights />
+                <PoolsNetworkWatcher />
               </Providers>
             </ThemeProvider>
           </ColorThemeProvider>

apps/beets-frontend-v3/lib/components/footer/useFooterData.tsx

@@ -38,7 +38,7 @@ export function useFooterData() {
     },
   ]
 
-  const legalLinks = [{ label: 'Terms of use', href: '/terms-of-service' }]
+  const legalLinks = [{ label: 'Terms of service', href: '/terms-of-service' }]
 
   return { linkSections, legalLinks }
 }

packages/lib/shared/components/btns/LzBeetsMigrator.tsx → apps/beets-frontend-v3/lib/components/modals/LzBeetsMigrateModal.tsx

@@ -1,34 +1,37 @@
 'use client'
 
-import { TokenIcon } from '@repo/lib/modules/tokens/TokenIcon'
 import {
+  Box,
   Button,
-  HStack,
-  Popover,
-  PopoverBody,
-  PopoverCloseButton,
-  PopoverContent,
-  PopoverHeader,
-  PopoverTrigger,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
   Text,
+  useDisclosure,
 } from '@chakra-ui/react'
-import { useEffect, useState } from 'react'
-import { type BaseError, useBalance, useWaitForTransactionReceipt, useWriteContract } from 'wagmi'
-import { ErrorAlert } from '@repo/lib/shared/components/errors/ErrorAlert'
-import { getBlockExplorerTxUrl } from '@repo/lib/shared/hooks/useBlockExplorer'
-import Link from 'next/link'
-import { GqlChain } from '@repo/lib/shared/services/api/generated/graphql'
-import { useUserAccount } from '@repo/lib/modules/web3/UserAccountProvider'
-import { ConnectWallet } from '@repo/lib/modules/web3/ConnectWallet'
-import { bn, fNum } from '@repo/lib/shared/utils/numbers'
-import { Address, formatUnits } from 'viem'
-import { useTokenAllowances } from '@repo/lib/modules/web3/useTokenAllowances'
 import {
   TokenBalancesProvider,
   useTokenBalances,
 } from '@repo/lib/modules/tokens/TokenBalancesProvider'
-import { QueryObserverResult } from '@tanstack/react-query'
+import TokenRow from '@repo/lib/modules/tokens/TokenRow/TokenRow'
 import { useTokens } from '@repo/lib/modules/tokens/TokensProvider'
+import { ConnectWallet } from '@repo/lib/modules/web3/ConnectWallet'
+import { NetworkSwitchButton, useChainSwitch } from '@repo/lib/modules/web3/useChainSwitch'
+import { useUserAccount } from '@repo/lib/modules/web3/UserAccountProvider'
+import { useTokenAllowances } from '@repo/lib/modules/web3/useTokenAllowances'
+import { ErrorAlert } from '@repo/lib/shared/components/errors/ErrorAlert'
+import { getBlockExplorerTxUrl } from '@repo/lib/shared/hooks/useBlockExplorer'
+import { GqlChain } from '@repo/lib/shared/services/api/generated/graphql'
+import { bn } from '@repo/lib/shared/utils/numbers'
+import { QueryObserverResult } from '@tanstack/react-query'
+import Link from 'next/link'
+import { useEffect, useState } from 'react'
+import { Address, formatUnits } from 'viem'
+import { type BaseError, useBalance, useWaitForTransactionReceipt, useWriteContract } from 'wagmi'
 
 const sonicChainId = 146
 const lzBeetsAddress = '0x1E5fe95fB90ac0530F581C617272cd0864626795'
@@ -112,20 +115,20 @@ function MigrationButton({
             ? 'Confirming...'
             : isConfirmed
               ? 'Confirmed!'
-              : 'Migrate'}
+              : 'Claim'}
       </Button>
     </>
   )
 }
 
 function ApproveButton({
   balance,
-  isBalancesRefetching,
-  refetchBalances,
+  refetchAllowances,
+  isAllowancesLoading,
 }: {
   balance: bigint
-  isBalancesRefetching: boolean
-  refetchBalances: () => Promise<QueryObserverResult<unknown, Error>[]>
+  refetchAllowances: () => void
+  isAllowancesLoading: boolean
 }) {
   const { data: hash, writeContract, isPending, error } = useWriteContract()
   const { isLoading: isConfirming, isSuccess: isConfirmed } = useWaitForTransactionReceipt({
@@ -153,7 +156,7 @@ function ApproveButton({
 
   useEffect(() => {
     if (isConfirmed) {
-      refetchBalances()
+      refetchAllowances()
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isConfirmed])
@@ -167,22 +170,12 @@ function ApproveButton({
           </Text>
         </ErrorAlert>
       )}
-      {isConfirmed && !!hash && (
-        <Button
-          as={Link}
-          href={getBlockExplorerTxUrl(hash, GqlChain.Sonic)}
-          variant="flat"
-          w="full"
-        >
-          View on explorer
-        </Button>
-      )}
       <Button
         disabled={
-          isPending || isConfirming || isBalancesRefetching || isConfirmed || !hasLzBeetsBalance
+          isPending || isConfirming || isAllowancesLoading || isConfirmed || !hasLzBeetsBalance
         }
         isDisabled={
-          isPending || isConfirming || isBalancesRefetching || isConfirmed || !hasLzBeetsBalance
+          isPending || isConfirming || isAllowancesLoading || isConfirmed || !hasLzBeetsBalance
         }
         isLoading={isPending || isConfirming}
         mt="md"
@@ -202,72 +195,81 @@ function ApproveButton({
   )
 }
 
-export function LzBeetsMigrator() {
+export function LzBeetsMigrateModal() {
   const { getTokensByChain } = useTokens()
 
   return (
     <TokenBalancesProvider initTokens={getTokensByChain(GqlChain.Sonic)}>
-      <LzBeetsMigratorContent />
+      <LzBeetsMigrateModalContent />
     </TokenBalancesProvider>
   )
 }
 
-function LzBeetsMigratorContent() {
+export function LzBeetsMigrateModalContent() {
+  const { shouldChangeNetwork } = useChainSwitch(sonicChainId)
+  const [shouldShow, setShouldShow] = useState(true)
+  const { isOpen, onOpen, onClose } = useDisclosure()
   const { isConnected, userAddress } = useUserAccount()
-  const [shouldShow, setShouldShow] = useState(false)
   const { refetchBalances, isBalancesRefetching } = useTokenBalances()
   const { data: balanceData } = useBalance({
     chainId: sonicChainId,
     address: userAddress,
     token: lzBeetsAddress,
   })
 
-  const { allowances } = useTokenAllowances({
-    chainId: sonicChainId,
-    userAddress: userAddress as Address,
-    spenderAddress: migratorAddress,
-    tokenAddresses: [lzBeetsAddress],
-  })
+  const { allowances, refetchAllowances, isAllowancesRefetching, isAllowancesLoading } =
+    useTokenAllowances({
+      chainId: sonicChainId,
+      userAddress: userAddress as Address,
+      spenderAddress: migratorAddress,
+      tokenAddresses: [lzBeetsAddress],
+    })
 
   const balance = formatUnits(balanceData?.value || 0n, balanceData?.decimals || 18)
   const hasBalance = bn(balanceData?.value || 0n).gt(0)
-  const hasAllowance = bn(allowances[lzBeetsAddress] || 0n).gt(bn(balanceData?.value || 0n))
+  const hasAllowance = bn(allowances[lzBeetsAddress] || 0n).gte(bn(balanceData?.value || 0n))
 
   useEffect(() => {
-    if (hasBalance && !shouldShow) {
-      setShouldShow(true)
+    if (hasBalance && !isOpen && shouldShow) {
+      onOpen()
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [hasBalance])
+  }, [hasBalance, isOpen, shouldShow])
 
-  /* if (!shouldShow) {
-    return null
-  } */
+  function handleClose() {
+    onClose()
+    setShouldShow(false)
+  }
 
   return (
-    <Popover>
-      <PopoverTrigger>
-        <Button>
-          <HStack>
-            <TokenIcon
-              address="0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48"
-              alt="lzBEETS"
-              chain={1}
+    <Modal isCentered isOpen={isOpen} onClose={handleClose} preserveScrollBarGap>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>Claim your Sonic BEETS</ModalHeader>
+        <ModalCloseButton onClick={handleClose} />
+        <ModalBody color="grayText">
+          <Box mb="lg">
+            <TokenRow
+              abbreviated={false}
+              address={lzBeetsAddress as Address}
+              chain={GqlChain.Sonic}
+              isLoading={false}
               logoURI="https://beethoven-assets.s3.eu-central-1.amazonaws.com/token-stargate-transitonBEETS.svg"
-              size={24}
+              showZeroAmountAsDash
+              value={balance}
             />
-            <span>{fNum('token', balance)} lzBEETS</span>
-          </HStack>
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent>
-        <PopoverCloseButton />
-        <PopoverHeader fontWeight="bold">Migrate your BEETS</PopoverHeader>
-        <PopoverBody>
-          When migrating BEETS from Fantom, you&apos;ll receive lzBEETS as a receipt token. Exchange
-          your lzBEETS for BEETS on Sonic here.
+          </Box>
+          <Text color="font.secondary">
+            You have {balance} lzBEETS in your wallet. lzBEETS serve as a receipt token when
+            bridging to Sonic. Claim your BEETS on Sonic now.
+          </Text>
+        </ModalBody>
+
+        <ModalFooter alignItems="flex-start" flexDirection="column">
           {isConnected ? (
-            hasAllowance ? (
+            shouldChangeNetwork ? (
+              <NetworkSwitchButton chainId={sonicChainId} />
+            ) : hasAllowance ? (
               <MigrationButton
                 balance={balanceData?.value || 0n}
                 isBalancesRefetching={isBalancesRefetching}
@@ -276,15 +278,15 @@ function LzBeetsMigratorContent() {
             ) : (
               <ApproveButton
                 balance={balanceData?.value || 0n}
-                isBalancesRefetching={isBalancesRefetching}
-                refetchBalances={refetchBalances}
+                isAllowancesLoading={isAllowancesLoading || isAllowancesRefetching}
+                refetchAllowances={refetchAllowances}
               />
             )
           ) : (
             <ConnectWallet mt="md" variant="primary" w="full" />
           )}
-        </PopoverBody>
-      </PopoverContent>
-    </Popover>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
   )
 }

apps/beets-frontend-v3/lib/components/navs/MaBeetsNavLink.tsx

@@ -50,19 +50,18 @@ export function MaBeetsRedirectModal({
         <ModalCloseButton />
         <ModalBody color="grayText">
           <Text color="font.secondary">
-            An integrated maBEETS experience is in the works. In the meantime, you can manage your
-            Sonic maBEETS relics at{' '}
-            <Link href="https://ma.beets.fi" target="_blank">
+            BEETS are live on Sonic! Visit the Fantom App to migrate your BEETS and maBEETS relics
+            to sonic.
+            {/*  <Link href="https://ma.beets.fi" target="_blank">
               https://ma.beets.fi
             </Link>
-            .
+            . */}
           </Text>
 
           <Text color="font.secondary" mt="md">
-            It&apos;s recommended that you migrate Fantom maBEETS relics to Sonic. For more
-            information, refer to the migration guide at{' '}
-            <Link href="https://docs.beets.fi/sonic" target="_blank">
-              https://docs.beets.fi/sonic
+            For more information, refer to the migration guide at{' '}
+            <Link href="https://docs.beets.fi/sonic#mabeets-and-beets" target="_blank">
+              https://docs.beets.fi/sonic#mabeets-and-beets
             </Link>
             .
           </Text>