feat: stake and claim

cspell.json

@@ -1,41 +1,52 @@
 {
-  "version": "0.1",
-  "language": "en",
-  "words": ["immer", "masknet", "Merkle", "sepolia", "unstake", "urlcat", "webp", "zustand", "splinetool"],
-  "ignoreWords": [
-    "Lingui",
-    "lingui",
-    "rainbowkit",
-    "viem",
-    "Wagmi",
-    "wagmi",
-    "rabby",
-    "multicall",
-    "Chakra",
-    "chakra",
-    "svgr",
-    "Segoe",
-    "fontsource",
-    "tablist",
-    "Roboto",
-    "Jaydon"
-  ],
-  "flagWords": [],
-  "ignorePaths": [
-    "pnpm-lock.yaml",
-    "package.json",
-    "cspell.json",
-    "tsconfig.tsbuildinfo",
-    "node_modules/**",
-    "dist/**",
-    "build/**",
-    ".next/**",
-    "public/**",
-    "src/assets/**",
-    "src/locales/**",
-    "tests/**",
-    "src/routeTree.gen.ts",
-    "src/abis/**"
-  ],
-  "overrides": []
-}
+    "version": "0.1",
+    "language": "en",
+    "words": [
+        "immer",
+        "masknet",
+        "Merkle",
+        "sepolia",
+        "splinecode",
+        "splinetool",
+        "unstake",
+        "urlcat",
+        "webp",
+        "zustand"
+    ],
+    "ignoreWords": [
+        "Lingui",
+        "lingui",
+        "rainbowkit",
+        "viem",
+        "Wagmi",
+        "wagmi",
+        "rabby",
+        "multicall",
+        "Chakra",
+        "chakra",
+        "svgr",
+        "Segoe",
+        "fontsource",
+        "tablist",
+        "Roboto",
+        "Jaydon"
+    ],
+    "flagWords": [],
+    "ignorePaths": [
+        "pnpm-lock.yaml",
+        "package.json",
+        "cspell.json",
+        "tsconfig.tsbuildinfo",
+        "node_modules/**",
+        "dist/**",
+        "build/**",
+        ".next/**",
+        "public/**",
+        "src/assets/**",
+        "src/locales/**",
+        "tests/**",
+        "src/routeTree.gen.ts",
+        "src/abis/**"
+    ],
+    "overrides": []
+}

src/components/Footer/MaskNetworkSplice.tsx

@@ -1,5 +1,5 @@
 import { type FC, lazy, Suspense } from 'react'
-import { Center } from '@chakra-ui/react'
+import { Center, Spinner } from '@chakra-ui/react'
 
 const Spline = lazy(() => import('@splinetool/react-spline'))
 
@@ -26,7 +26,7 @@ export const MaskNetworkSplice: FC = () => {
       }}
       onWheelCapture={(e) => e.stopPropagation()}
     >
-      <Suspense fallback={null}>
+      <Suspense fallback={<Spinner />}>
         <Spline scene="/mask_network.splinecode" renderOnDemand />
       </Suspense>
     </Center>

src/components/StakeMaskStatusCard/index.tsx

@@ -13,7 +13,9 @@ import {
   VStack,
 } from '@chakra-ui/react'
 import { Trans, t } from '@lingui/macro'
+import { useConnectModal } from '@rainbow-me/rainbowkit'
 import { FC } from 'react'
+import { useAccount } from 'wagmi'
 import MaskLogoSVG from '../../assets/mask-logo.svg?react'
 import No1SVG from '../../assets/no-1.svg?react'
 import PlusSVG from '../../assets/plus.svg?react'
@@ -25,16 +27,18 @@ import { formatNumber } from '../../helpers/formatNumber.ts'
 import { formatSeconds } from '../../helpers/formatSeconds.ts'
 import { usePoolInfo } from '../../hooks/usePoolInfo.ts'
 import { stakeModal } from '../../modals/index.tsx'
-import { ActivityStatusTag } from './ActivityStatusTag.tsx'
 import { Tooltip } from '../Tooltip.tsx'
+import { ActivityStatusTag } from './ActivityStatusTag.tsx'
 
 export interface StakeMaskStatusCardProps extends BoxProps {}
 
 export const StakeMaskStatusCard: FC<StakeMaskStatusCardProps> = ({ ...props }) => {
+  const account = useAccount()
   const { data: pool, isLoading } = usePoolInfo()
   const rewardTokens = pool ? Object.values(pool.reward_pool) : []
   const rss3 = rewardTokens.find((x) => x.name === 'rss3')
   const ton = rewardTokens.find((x) => x.name === 'ton')
+  const { openConnectModal } = useConnectModal()
   return (
     <Box
       maxW="maxW"
@@ -235,10 +239,14 @@ export const StakeMaskStatusCard: FC<StakeMaskStatusCardProps> = ({ ...props })
             leftIcon={<Icon as={MaskLogoSVG} width={6} height={6} />}
             rightIcon={<Icon as={RightArrow} width={6} height={6} />}
             onClick={() => {
+              if (!account.isConnected) {
+                openConnectModal?.()
+                return
+              }
               stakeModal.show()
             }}
           >
-            {t`Stake Mask Now`}
+            {account.isConnected ? t`Stake Mask Now` : t`Connect to stake`}
           </Button>
         </Box>
       </VStack>

src/components/Tooltip.tsx

@@ -3,11 +3,11 @@ import { Icon, Tooltip as RawTooltip } from '@chakra-ui/react'
 import { TooltipProps } from '@chakra-ui/react'
 import TooltipArrow from '../assets/tooltip-arrow.svg?react'
 
-export const Tooltip: FC<TooltipProps> = ({ children, label, hasArrow, ...props }) => {
+export const Tooltip: FC<TooltipProps> = ({ children, label, hasArrow = true, placement = 'top', ...props }) => {
   return (
     <RawTooltip
       label={
-        hasArrow && props.placement === 'top' ? (
+        hasArrow && placement === 'top' ? (
           <>
             {label}
             <Icon
@@ -25,8 +25,7 @@ export const Tooltip: FC<TooltipProps> = ({ children, label, hasArrow, ...props
           label
         )
       }
-      hasArrow
-      placement="top"
+      placement={placement}
       {...props}
     >
       {children}

src/components/UserStatus/RewardCard.tsx

@@ -8,14 +8,17 @@ import { UserInfo } from '../../types/api'
 import { ProgressiveText } from '../ProgressiveText'
 import { TokenIcon } from '../TokenIcon'
 import { ActionCard, ActionCardProps } from './ActionCard'
+import { usePoolStore } from '../../store/poolStore'
 
 interface Props extends ActionCardProps {
   tokenIcon?: string
   reward?: UserInfo['reward_pool'][number]
+  unlocked?: boolean
 }
 
-export function RewardCard({ reward, tokenIcon, ...props }: Props) {
+export function RewardCard({ reward, tokenIcon, unlocked, ...props }: Props) {
   const { writeContractAsync, isPending } = useWriteContract()
+  const { rewardAddress } = usePoolStore()
   const { data: userInfo, isLoading: loadingUserInfo } = useUserInfo()
   const toast = useToast()
   return (
@@ -50,14 +53,15 @@ export function RewardCard({ reward, tokenIcon, ...props }: Props) {
         </HStack>
         <Button
           rounded={24}
+          isDisabled={!unlocked}
           alignSelf="stretch"
           color="neutrals.9"
           bg="gradient.purple"
           _hover={{ bg: 'gradient.purple', transform: 'scale(1.01)' }}
           _active={{ transform: 'scale(0.9)' }}
           disabled={loadingUserInfo}
           onClick={async () => {
-            if (!reward || !userInfo) return
+            if (!reward || !userInfo || !rewardAddress) return
             const rewardPool = userInfo.reward_pool.find((x) => x.reward_pool_id === reward.reward_pool_id)
             if (!rewardPool) {
               toast({
@@ -66,16 +70,17 @@ export function RewardCard({ reward, tokenIcon, ...props }: Props) {
               })
               return
             }
+            // TODO check if is unlocked
             const res = await writeContractAsync({
               abi: rewardABI,
-              address: import.meta.env.REWARD_CONTRACT_ADDRESS,
+              address: rewardAddress,
               functionName: 'claim',
               args: [reward.reward_pool_id, BigInt(reward.big_amount), rewardPool.proof],
             })
             console.log('claim result', res)
           }}
         >
-          {isPending ? <Spinner size="sm" /> : t`Claim`}
+          {unlocked ? isPending ? <Spinner size="sm" /> : t`Claim` : t`Not unlocked yet`}
         </Button>
       </Stack>
     </ActionCard>

src/components/UserStatus/StakedMask.tsx

@@ -2,25 +2,35 @@ import { Box, BoxProps, Button, HStack, Icon, Stack } from '@chakra-ui/react'
 import { t } from '@lingui/macro'
 import { ActionCard } from './ActionCard'
 
+import { useMemo } from 'react'
+import { formatUnits } from 'viem'
 import { useAccount, useReadContract } from 'wagmi'
 import { StakeManagerABI } from '../../abis/stakeManager.ts'
 import MaskLogo from '../../assets/mask-logo.svg?react'
 import Question from '../../assets/question.svg?react'
-import { formatNumber } from '../../helpers/formatNumber.ts'
 import { useUserInfo } from '../../hooks/useUserInfo.ts'
+import { stakeModal } from '../../modals/index.tsx'
+import { usePoolStore } from '../../store/poolStore.ts'
 import { ProgressiveText } from '../ProgressiveText.tsx'
 import { Tooltip } from '../Tooltip.tsx'
-import { stakeModal } from '../../modals/index.tsx'
 
 export function StakedMask(props: BoxProps) {
   const account = useAccount()
+  const { stakeManagerAddress } = usePoolStore()
   const { data: userInfo, isLoading: loadingUserInfo } = useUserInfo()
   const { isLoading, data: chainData } = useReadContract({
     abi: StakeManagerABI,
     functionName: 'userInfos',
-    address: import.meta.env.STAKE_MANAGER_CONTRACT_ADDRESS,
+    address: stakeManagerAddress,
     args: account.address ? [account.address] : undefined,
   })
+
+  const staked = useMemo(() => {
+    if (chainData) {
+      return formatUnits(chainData[0], 18)
+    }
+    return userInfo?.amount
+  }, [chainData, userInfo?.amount])
   return (
     <ActionCard title={t`Stake Mask`} {...props}>
       <Stack alignItems="center">
@@ -32,7 +42,7 @@ export function StakedMask(props: BoxProps) {
           skeletonWidth="100px"
           skeletonHeight="56px"
         >
-          {chainData ? chainData[0].toLocaleString() : formatNumber(userInfo?.amount)}
+          {staked}
         </ProgressiveText>
         <HStack alignItems="center" my="auto">
           <ProgressiveText as="div" loading={loadingUserInfo} skeletonWidth="50px">

src/components/UserStatus/index.tsx

@@ -4,14 +4,26 @@ import { useUserInfo } from '../../hooks/useUserInfo'
 import { RewardCard } from './RewardCard'
 import { StakedMask } from './StakedMask'
 import { UserTotalPoints } from './UserTotalPoint'
+import { usePoolStore } from '../../store/poolStore'
+import { useReadContract } from 'wagmi'
+import { StakeManagerABI } from '../../abis/stakeManager'
 
 export interface UserStatusProps extends GridProps {}
 
 export function UserStatus(props: UserStatusProps) {
   const { data: userInfo } = useUserInfo()
+  const { poolId, stakeManagerAddress } = usePoolStore()
   const rss3 = userInfo?.reward_pool.find((x) => x.name === 'rss3')
   const ton = userInfo?.reward_pool.find((x) => x.name === 'ton')
 
+  const res = useReadContract({
+    abi: StakeManagerABI,
+    address: stakeManagerAddress,
+    functionName: 'pools',
+    args: poolId ? [BigInt(poolId)] : undefined,
+  })
+  const unlocked = res.data?.[2]
+
   if (!userInfo)
     return (
       <Grid
@@ -50,11 +62,13 @@ export function UserStatus(props: UserStatusProps) {
         title={t`Estimated Rewards`}
         reward={rss3}
         tokenIcon={new URL('../../assets/rss3.svg', import.meta.url).href}
+        unlocked={unlocked}
       />
       <RewardCard
         title={t`Estimated Rewards`}
         reward={ton}
         tokenIcon={new URL('../../assets/ton.svg', import.meta.url).href}
+        unlocked={unlocked}
       />
     </Grid>
   )

src/helpers/readStakeManager.ts

@@ -5,7 +5,7 @@ import { config } from '../configs/wagmiClient'
 
 const stakeManagerContract = {
   chainId: sepolia.id,
-  address: import.meta.env.STAKE_MANAGER_CONTRACT_ADDRESS || '0xece3ef2bf6f6fa7f13beab519c60a72e92bbd47c',
+  address: import.meta.env.VITE_STAKE_MANAGER_CONTRACT_ADDRESS || '0xece3ef2bf6f6fa7f13beab519c60a72e92bbd47c',
   abi: StakeManagerABI,
 } as const
 

src/hooks/useMaskAllowance.ts

@@ -0,0 +1,15 @@
+import { useAccount, useReadContract } from 'wagmi'
+import { usePoolStore } from '../store/poolStore'
+import { erc20Abi } from 'viem'
+
+export function useMaskAllowance() {
+  const { maskTokenAddress, stakeManagerAddress } = usePoolStore()
+  const account = useAccount()
+
+  return useReadContract({
+    abi: erc20Abi,
+    address: maskTokenAddress,
+    functionName: 'allowance',
+    args: account.address && stakeManagerAddress ? [account.address, stakeManagerAddress] : undefined,
+  })
+}

src/locales/en.po

@@ -46,6 +46,10 @@ msgstr ""
 msgid "Balance: {0}"
 msgstr ""
 
+#: src/modals/StakeModal.tsx
+msgid "Can not get determination MASK token"
+msgstr ""
+
 #: src/modals/ProfileModal.tsx
 msgid "Cancel"
 msgstr ""
@@ -58,6 +62,10 @@ msgstr ""
 msgid "Confirm"
 msgstr ""
 
+#: src/components/StakeMaskStatusCard/index.tsx
+msgid "Connect to stake"
+msgstr ""
+
 #: src/modals/StakeModal.tsx
 #: src/modals/StakeModal.tsx
 msgid "Connect Wallet"
@@ -165,6 +173,10 @@ msgstr ""
 msgid "Not started"
 msgstr ""
 
+#: src/components/UserStatus/RewardCard.tsx
+msgid "Not unlocked yet"
+msgstr ""
+
 #: src/components/StakeMaskStatusCard/ActivityStatusTag.tsx
 msgid "On going"
 msgstr ""