fixup! fix: fixed chain id

DimensionDev · May 23, 2024 · 3d04f6d · 3d04f6d
1 parent 2ec7456
commit 3d04f6d
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 48 deletions.
diff --git a/src/components/ConnectButton.tsx b/src/components/ConnectButton.tsx
@@ -1,13 +1,14 @@
-import { ConnectButton as RawConnectButton } from '@rainbow-me/rainbowkit'
-import { type FC, memo } from 'react'
-import { GradientButton } from './GradientButton.tsx'
+import { Box, Button, Flex, Icon, Image, type BoxProps } from '@chakra-ui/react'
 import { t } from '@lingui/macro'
-import { Box, type BoxProps, Button, Flex, Icon, Image } from '@chakra-ui/react'
-import WalletSVG from '../assets/wallet.svg?react'
-import { useAccount, useConnectors } from 'wagmi'
-import type { Connector } from 'wagmi'
+import { ConnectButton as RawConnectButton } from '@rainbow-me/rainbowkit'
 import { useQuery } from '@tanstack/react-query'
+import { memo, type FC } from 'react'
+import type { Connector } from 'wagmi'
+import { useAccount, useConnectors } from 'wagmi'
+import WalletSVG from '../assets/wallet.svg?react'
 import { formatEthereumAddress } from '../helpers/formatEthereumAddress.ts'
+import { usePoolStore } from '../store/poolStore.ts'
+import { GradientButton } from './GradientButton.tsx'
 
 interface ConnectorWithRkDetails extends Connector {
   rkDetails: {
@@ -44,6 +45,7 @@ export interface ConnectButtonProps {
 }
 
 export const ConnectButton: FC<ConnectButtonProps> = memo(({ connectText }) => {
+  const { chainId } = usePoolStore()
   return (
     <RawConnectButton.Custom>
       {({ account, chain, openAccountModal, openChainModal, openConnectModal, authenticationStatus, mounted }) => {
@@ -71,7 +73,7 @@ export const ConnectButton: FC<ConnectButtonProps> = memo(({ connectText }) => {
                 )
               }
 
-              if (chain.unsupported) {
+              if (chain.unsupported || chain.id !== chainId) {
                 return (
                   <Button px={6} colorScheme="red" rounded="full" onClick={openChainModal} type="button">
                     {t`Wrong network`}

diff --git a/src/components/UnstakeRequirementBoundary/TimeRangeBoundary.tsx b/src/components/UnstakeRequirementBoundary/TimeRangeBoundary.tsx
@@ -1,11 +1,9 @@
 import { ButtonProps } from '@chakra-ui/react'
 import { t } from '@lingui/macro'
-import { PropsWithChildren, memo, useEffect, useMemo, useState } from 'react'
-import { useBlockNumber, useReadContract } from 'wagmi'
-import { StakeManagerABI } from '../../abis/stakeManager'
+import { PropsWithChildren, memo } from 'react'
 import { usePoolInfo } from '../../hooks/usePoolInfo'
+import { usePoolState } from '../../hooks/usePoolState'
 import { stakeModal } from '../../modals/StakeModal'
-import { usePoolStore } from '../../store/poolStore'
 import { MaskStakingButton } from '../MaskStakingButton'
 
 interface BoundaryProps extends PropsWithChildren {
@@ -14,44 +12,17 @@ interface BoundaryProps extends PropsWithChildren {
 
 export const TimeRangeBoundary = memo<BoundaryProps>(function TimeRangeBoundary({ children }) {
   const { data: poolInfo, isLoading: loadingPoolInfo } = usePoolInfo()
-  const { chainId, poolId, stakeManagerAddress } = usePoolStore()
-  const { data, isLoading: loadingPools } = useReadContract({
-    chainId,
-    abi: StakeManagerABI,
-    address: stakeManagerAddress,
-    functionName: 'pools',
-    args: poolId ? [BigInt(poolId)] : undefined,
-  })
-  const [watch, setWatch] = useState<boolean | { pollingInterval: number }>({ pollingInterval: 60_000 })
-  const { data: blockNumber } = useBlockNumber({ watch })
+  const { isStarted, isEnded, isLoadingPools } = usePoolState(poolInfo)
 
-  const hasStarted = useMemo(() => {
-    if (!data || !poolInfo || !blockNumber) return false
-    if (poolInfo.start_time * 1000 > Date.now()) return false
-    const [startBlock] = data
-    return startBlock < blockNumber
-  }, [data, poolInfo, blockNumber])
-
-  const hasEnded = useMemo(() => {
-    if (!data || !poolInfo || !blockNumber) return false
-    if (poolInfo.end_time * 1000 < Date.now()) return true
-    const [, endBlock] = data
-    return endBlock < blockNumber
-  }, [data, poolInfo, blockNumber])
-
-  useEffect(() => {
-    setWatch(!hasEnded)
-  }, [hasEnded])
-
-  if (loadingPoolInfo || loadingPools) {
+  if (loadingPoolInfo || isLoadingPools) {
     return <MaskStakingButton rounded={50} isDisabled isLoading loadingText={t`Checking`} />
   }
 
-  if (!hasStarted) {
+  if (!isStarted) {
     return <MaskStakingButton isDisabled>{t`Stake Mask`}</MaskStakingButton>
   }
 
-  if (!hasEnded) {
+  if (!isEnded) {
     return <MaskStakingButton onClick={() => stakeModal.show()}>{t`Stake Mask`}</MaskStakingButton>
   }
 

diff --git a/src/components/UserStatus/StakedMask.tsx b/src/components/UserStatus/StakedMask.tsx
@@ -60,7 +60,7 @@ export function StakedMask(props: BoxProps) {
   const isZero = chainData?.[0] ? chainData[0] === ZERO : true
   const loading = isWithdrawing || waiting || isReadingUserInfos
   const disabled = isZero
-  const pendingStakingNumbers = (isReadingUserInfos && loadingUserInfo) || isLoadingPools || isEnded
+  const pendingStakingNumbers = isReadingUserInfos || loadingUserInfo || isLoadingPools
   return (
     <ActionCard title={t`Stake Mask`} display="flex" flexDir="column" {...props}>
       <Stack alignItems="center">
@@ -76,7 +76,7 @@ export function StakedMask(props: BoxProps) {
             my: '10px',
           }}
         >
-          {staked ? formatMarketCap(staked, 4) : '-'}
+          {staked ? formatMarketCap(staked, 4) : 0}
         </ProgressiveText>
         <HStack alignItems="center" my="auto">
           <Trans>
@@ -85,7 +85,7 @@ export function StakedMask(props: BoxProps) {
               loading={pendingStakingNumbers}
               skeletonProps={{ h: '20px', w: '30px', rounded: '4px' }}
             >
-              {`+${userInfo?.score_per_hour}`}
+              {`+${isEnded ? 0 : userInfo?.score_per_hour}`}
             </ProgressiveText>
             Points/h
           </Trans>

diff --git a/src/hooks/usePoolState.ts b/src/hooks/usePoolState.ts
@@ -9,7 +9,7 @@ export function usePoolState(poolInfo: PoolInfo | undefined) {
   const { chainId, poolId, stakeManagerAddress } = usePoolStore()
 
   const [watch, setWatch] = useState<boolean | { pollingInterval: number }>({ pollingInterval: 60_000 })
-  const { data: blockNumber } = useBlockNumber({ watch })
+  const { data: blockNumber } = useBlockNumber({ chainId, watch })
   const { data: pools, isLoading } = useReadContract({
     chainId,
     abi: StakeManagerABI,

diff --git a/src/modals/StakeModal.tsx b/src/modals/StakeModal.tsx
@@ -58,7 +58,7 @@ export function StakeModal(props: ModalProps) {
   const [rawAmount, setRawAmount] = useState('')
   const balance = useBalance({ chainId, address: account.address, token: maskTokenAddress })
   const allowance = useMaskAllowance()
-  const maskToken = useToken({ address: maskTokenAddress })
+  const maskToken = useToken({ chainId, address: maskTokenAddress })
   const [{ loading: linkingTwitter }, linkTwitter] = useLinkTwitter()
   const { data: userInfo, isLoading: isLoadingUserInfo } = useUserInfo()
   const linkedTwitter = !!userInfo?.twitter_id