Personalized strategy ordering enhancement (#1636)

src/components/Nav.tsx

@@ -20,15 +20,13 @@ import ConnectButton from "components/_buttons/ConnectButton"
 import { Link } from "components/Link"
 import { useRouter } from "next/router"
 import { NAV_LINKS } from "utils/navLinks"
-import { useIsMounted } from "hooks/utils/useIsMounted"
 import { LogoTextIcon } from "./_icons"
 import useBetterMediaQuery from "hooks/utils/useBetterMediaQuery"
 import { useScrollDirection } from "hooks/utils/useScrollDirection"
 import { HamburgerIcon } from "./_icons/HamburgerIcon"
 import { Badge, BadgeStatus } from "./Strategy/Carousel/Badge"
 
 export const Nav: VFC<FlexProps> = (props) => {
-  const isMounted = useIsMounted()
   const [scrolled, setScrolled] = useState<boolean>(false)
   const scrollDirection = useScrollDirection()
   const { isOpen, onOpen, onClose } = useDisclosure()
@@ -46,7 +44,8 @@ export const Nav: VFC<FlexProps> = (props) => {
       }
     })
     return () => {
-      window.removeEventListener("scroll", () => {})
+      window.removeEventListener("scroll", () => {});
+      setScrolled(false);
     }
   }, [])
 

src/components/_buttons/DepositAndWithdrawButton.tsx

@@ -10,9 +10,8 @@ import {
 } from "@chakra-ui/react"
 import { cellarDataMap } from "data/cellarDataMap"
 import { DepositModalType } from "data/hooks/useDepositModalStore"
-import { useUserBalances } from "data/hooks/useUserBalances"
+import { useUserBalance } from "data/hooks/useUserBalance"
 import { isBefore } from "date-fns"
-import { analytics } from "utils/analytics"
 import { toEther } from "utils/formatCurrency"
 import { useAccount, useNetwork } from "wagmi"
 import { BaseButton } from "./BaseButton"
@@ -86,7 +85,7 @@ export function DepositAndWithdrawButton({
 }: DepositAndWithdrawButtonProps) {
   const id = row.original.slug
   const cellarConfig = cellarDataMap[id].config
-  const { lpToken } = useUserBalances(cellarConfig)
+  const { lpToken } = useUserBalance(cellarConfig)
   const { data: lpTokenData } = lpToken
 
   const lpTokenDisabled = checkLPtokenDisabled(lpTokenData)

src/components/_buttons/WithdrawButton.tsx

@@ -20,7 +20,7 @@ export const WithdrawButton: VFC<
   ButtonProps & {
     isDeprecated?: boolean
   }
-> = (props) => {
+> = ({ isDeprecated, ...buttonProps }) => {
   const { isOpen, onOpen, onClose } = useDisclosure()
 
   function closeModal() {
@@ -59,9 +59,9 @@ export const WithdrawButton: VFC<
 
               onOpen()
             }}
-            {...props}
+            {...buttonProps}
           >
-            {props.isDeprecated
+            {isDeprecated
               ? "Withdraw Only"
               : "Withdraw"}
           </SecondaryButton>

src/components/_cards/ApyPerfomanceCard.tsx

@@ -115,9 +115,7 @@ export const ApyPerfomanceCard: VFC<BoxProps> = (props) => {
               <HStack spacing={8}>
                 <VStack spacing={0} align="flex-start">
                   <CardHeading>
-                    <Text>
                       {timeline} {apyChartLabel(cellarConfig)}
-                    </Text>
                   </CardHeading>
                   <HStack>
                     <Text fontSize="2.5rem" fontWeight="bold">

src/components/_cards/PortfolioCard/index.tsx

@@ -26,7 +26,7 @@ import { LighterSkeleton } from "components/_skeleton"
 import { cellarDataMap } from "data/cellarDataMap"
 import { useGetPreviewRedeem } from "data/hooks/useGetPreviewRedeem"
 import { useStrategyData } from "data/hooks/useStrategyData"
-import { useUserBalances } from "data/hooks/useUserBalances"
+import { useUserBalance } from "data/hooks/useUserBalance"
 import { useUserStrategyData } from "data/hooks/useUserStrategyData"
 import { getTokenConfig, Token } from "data/tokenConfig"
 import {
@@ -54,14 +54,13 @@ import { Rewards } from "./Rewards"
 import { useNetwork } from "wagmi"
 import WithdrawQueueCard from "../WithdrawQueueCard"
 import withdrawQueueV0821 from "src/abi/withdraw-queue-v0.8.21.json"
-import { add } from "lodash"
 import { CellarNameKey } from "data/types"
 import { PointsDisplay } from "./PointsDisplay"
 
 export const PortfolioCard: VFC<BoxProps> = (props) => {
   const theme = useTheme()
   const isMounted = useIsMounted()
-  const { address, isConnected } = useAccount()
+  const { address, isConnected: connected } = useAccount()
   const id = useRouter().query.id as string
   const cellarConfig = cellarDataMap[id].config
   const slug = cellarDataMap[id].slug
@@ -73,7 +72,13 @@ export const PortfolioCard: VFC<BoxProps> = (props) => {
     cellarConfig.chain.id
   ) as Token[]
 
-  const { lpToken } = useUserBalances(cellarConfig)
+  // using local state to avoid Next.js errors
+  const [isConnected, setConnected] = useState(false);
+  useEffect(() => {
+    setConnected(connected)
+  }, [connected])
+
+  const { lpToken } = useUserBalance(cellarConfig)
   let { data: lpTokenData } = lpToken
   const lpTokenDisabled =
     !lpTokenData || Number(lpTokenData?.value ?? "0") <= 0

src/components/_forms/BondForm/index.tsx

@@ -29,7 +29,7 @@ import { analytics } from "utils/analytics"
 import { cellarDataMap } from "data/cellarDataMap"
 import { useRouter } from "next/router"
 import { useCreateContracts } from "data/hooks/useCreateContracts"
-import { useUserBalances } from "data/hooks/useUserBalances"
+import { useUserBalance } from "data/hooks/useUserBalance"
 import { bondingPeriodOptions } from "data/uiConfig"
 import { estimateGasLimitWithRetry } from "utils/estimateGasLimit"
 import { useGeo } from "context/geoContext"
@@ -55,7 +55,7 @@ export const BondForm: VFC<BondFormProps> = ({ onClose }) => {
   )
   const { stakerSigner } = useCreateContracts(cellarConfig)
 
-  const { lpToken, lpTokenInfo } = useUserBalances(cellarConfig)
+  const { lpToken, lpTokenInfo } = useUserBalance(cellarConfig)
   const { data: lpTokenData } = lpToken
 
   const methods = useForm<FormValues>({

src/components/_forms/UnstakeForm.tsx

@@ -22,7 +22,7 @@ import { analytics } from "utils/analytics"
 import { useRouter } from "next/router"
 import { cellarDataMap } from "data/cellarDataMap"
 import { useCreateContracts } from "data/hooks/useCreateContracts"
-import { useUserBalances } from "data/hooks/useUserBalances"
+import { useUserBalance } from "data/hooks/useUserBalance"
 import { useGeo } from "context/geoContext"
 import { useUserStrategyData } from "data/hooks/useUserStrategyData"
 interface FormValues {
@@ -51,7 +51,7 @@ export const UnstakeForm: VFC<UnstakeFormProps> = ({ onClose }) => {
   const { cellarSigner } = useCreateContracts(cellarConfig)
 
   const { refetch } = useUserStrategyData(cellarConfig.cellar.address, cellarConfig.chain.id)
-  const { lpToken } = useUserBalances(cellarConfig)
+  const { lpToken } = useUserBalance(cellarConfig)
   const { data: lpTokenData } = lpToken
 
   const { doHandleTransaction } = useHandleTransaction()

src/components/_forms/WithdrawForm.tsx

@@ -32,7 +32,7 @@ import { analytics } from "utils/analytics"
 import { useRouter } from "next/router"
 import { cellarDataMap } from "data/cellarDataMap"
 import { useCreateContracts } from "data/hooks/useCreateContracts"
-import { useUserBalances } from "data/hooks/useUserBalances"
+import { useUserBalance } from "data/hooks/useUserBalance"
 import { estimateGasLimitWithRetry } from "utils/estimateGasLimit"
 import { useGeo } from "context/geoContext"
 import { waitTime } from "data/uiConfig"
@@ -87,7 +87,7 @@ export const WithdrawForm: VFC<WithdrawFormProps> = ({ onClose }) => {
 
   const { cellarSigner } = useCreateContracts(cellarConfig)
 
-  const { lpToken } = useUserBalances(cellarConfig)
+  const { lpToken } = useUserBalance(cellarConfig)
   const { data: lpTokenData, isLoading: isBalanceLoading } = lpToken
 
   const { doHandleTransaction } = useHandleTransaction()

src/components/_forms/WithdrawQueueForm.tsx

@@ -28,7 +28,7 @@ import { ethers } from "ethers"
 import { useHandleTransaction } from "hooks/web3"
 import { useRouter } from "next/router"
 import { cellarDataMap } from "data/cellarDataMap"
-import { useUserBalances } from "data/hooks/useUserBalances"
+import { useUserBalance } from "data/hooks/useUserBalance"
 import { estimateGasLimitWithRetry } from "utils/estimateGasLimit"
 import { useGeo } from "context/geoContext"
 import { useUserStrategyData } from "data/hooks/useUserStrategyData"
@@ -140,7 +140,7 @@ export const WithdrawQueueForm: VFC<WithdrawQueueFormProps> = ({
     skip: true,
   })
 
-  const { lpToken } = useUserBalances(cellarConfig)
+  const { lpToken } = useUserBalance(cellarConfig)
   const { data: lpTokenData, isLoading: isBalanceLoading } = lpToken
   let strategyBaseAsset: Token = cellarConfig.baseAsset
 

src/components/_layout/LayoutWithSidebar.tsx

@@ -2,20 +2,24 @@ import { Box, Container, Flex } from "@chakra-ui/react"
 import Footer from "components/Footer"
 import { Nav } from "components/Nav"
 import { Sidebar } from "components/_sidebar"
-import { useAllStrategiesData } from "data/hooks/useAllStrategiesData"
-import { FC, useRef } from "react"
+import { FC, useEffect, useRef, useState } from "react"
 import { useAccount } from "wagmi"
 import { useInView } from "react-intersection-observer"
 
 export const LayoutWithSidebar: FC = ({ children }) => {
-  const { isConnected } = useAccount()
-
-  const { isLoading } = useAllStrategiesData()
+  const { isConnected: connected } = useAccount()
 
   const containerRef = useRef<HTMLDivElement>(null)
   const { ref, inView } = useInView({
     threshold: 0,
   })
+
+  // using local state to avoid Next.js errors
+  const [isConnected, setConnected] = useState(false);
+  useEffect(() => {
+    setConnected(connected)
+  }, [connected])
+
   return (
     <Box display="block">
       <Flex bg="#1A1A23" flexDir="column" position="relative">

src/components/_modals/UnstakeModal.tsx

@@ -6,7 +6,7 @@ import { toEther } from "utils/formatCurrency"
 import { UnstakeForm } from "components/_forms/UnstakeForm"
 import { useRouter } from "next/router"
 import { cellarDataMap } from "data/cellarDataMap"
-import { useUserBalances } from "data/hooks/useUserBalances"
+import { useUserBalance } from "data/hooks/useUserBalance"
 
 type UnstakeModalProps = Pick<ModalProps, "isOpen" | "onClose"> & {
   onCloseProp: () => void
@@ -19,7 +19,7 @@ export const UnstakeModal: VFC<UnstakeModalProps> = ({
 }) => {
   const id = useRouter().query.id as string
   const cellarConfig = cellarDataMap[id].config
-  const { lpToken } = useUserBalances(cellarConfig)
+  const { lpToken } = useUserBalance(cellarConfig)
   const { data: lpTokenData } = lpToken
 
   return (