Merge branch 'feat/home-page' of github.com:DimensionDev/stake.mask.i…

…o into feat/home-page
DimensionDev · May 6, 2024 · a9c2a50 · a9c2a50
2 parents eb51749 + 55de2ca
commit a9c2a50
Show file tree

Hide file tree

Showing 8 changed files with 141 additions and 144 deletions.
diff --git a/src/app/stake/page.tsx b/src/app/stake/page.tsx
@@ -33,13 +33,14 @@ export default function Stake() {
             </div>
             <div className="h-[520px]" />
             <ProjectDetailCard setIsOpen={setIsOpen} />
-            {address ?
-                <div className="flex w-full flex-col gap-[24px] mt-[32px] lg:grid lg:grid-cols-4 ">
+            {address ? (
+                <div className="mt-[32px] flex w-full flex-col gap-[24px] lg:grid lg:grid-cols-4 ">
                     <ProfileCard />
                     <StakeCard setIsOpen={setIsOpen} />
-                    <EstimatedRewards rewardToken='rss3' />
-                    <EstimatedRewards rewardToken='ton' />
-                </div> : null}
+                    <EstimatedRewards rewardToken="rss3" />
+                    <EstimatedRewards rewardToken="ton" />
+                </div>
+            ) : null}
             <div className="mt-[51px] flex w-full flex-col gap-[24px] lg:flex-row">
                 <StakeRanking />
             </div>

diff --git a/src/components/EstimatedRewards/index.tsx b/src/components/EstimatedRewards/index.tsx
@@ -1,63 +1,63 @@
 'use client';
 
-import { useQuery } from '@tanstack/react-query'
-import { useAccount } from 'wagmi'
-import { writeContract } from 'wagmi/actions'
+import { useQuery } from '@tanstack/react-query';
+import { useAccount } from 'wagmi';
+import { writeContract } from 'wagmi/actions';
 
-import RSS3 from '@/assets/logos/rss3.svg'
-import TON from '@/assets/logos/ton.svg'
-import { MainButton } from '@/components/MainButton.js'
-import { REWARD_CONTRACT } from '@/constants/index.js'
-import { Image } from '@/esm/Image.js'
-import { stakeAPI } from '@/providers/StakeAPI.js'
+import RSS3 from '@/assets/logos/rss3.svg';
+import TON from '@/assets/logos/ton.svg';
+import { MainButton } from '@/components/MainButton.js';
+import { REWARD_CONTRACT } from '@/constants/index.js';
+import { Image } from '@/esm/Image.js';
+import { stakeAPI } from '@/providers/StakeAPI.js';
 
 interface EstimatedRewardsProps {
-  rewardToken: string;
+    rewardToken: string;
 }
 
 export function EstimatedRewards({ rewardToken }: EstimatedRewardsProps) {
-  const { address } = useAccount();
-  const { data, isLoading, isError } = useQuery({
-    queryKey: ['profile', address],
-    queryFn: async () => {
-      const { data } = await stakeAPI.getUserInfo(address as string, '1');
-      return data;
-    },
-  });
+    const { address } = useAccount();
+    const { data, isLoading, isError } = useQuery({
+        queryKey: ['profile', address],
+        queryFn: async () => {
+            const { data } = await stakeAPI.getUserInfo(address as string, '1');
+            return data;
+        },
+    });
 
-  const rewardPool = data?.reward_pool?.find((pool: any) => pool.name === rewardToken);
+    const rewardPool = data?.reward_pool?.find((pool: any) => pool.name === rewardToken);
 
-  return (
-    <div className="relative flex h-[196px] flex-col rounded-[16px] border-[1px] border-neutrals6 p-[16px]">
-      <Image
-        src="/glow.png"
-        width={360}
-        height={230}
-        alt="right"
-        className="absolute left-[-35px] top-[-30px] z-50"
-      />
-      <div className="text-[20px] font-bold text-white">Estimated Rewards</div>
-      <div className="mb-[13px] mt-[12px] flex w-full items-center justify-center gap-[12px]">
-        {rewardToken === 'rss3' ? <RSS3 width={48} height={48} /> : <TON width={48} height={48} />}
-        <div className="flex flex-col">
-          <div className="w-full text-[24px] text-neutrals1">
-            {Number(rewardPool?.amount).toFixed(2) || 0}
-          </div>
-          <div className="w-full text-[16px] text-neutrals1">{rewardToken === 'rss3' ? 'RSS3' : 'TON'}</div>
+    return (
+        <div className="relative flex h-[196px] flex-col rounded-[16px] border-[1px] border-neutrals6 p-[16px]">
+            <Image
+                src="/glow.png"
+                width={360}
+                height={230}
+                alt="right"
+                className="absolute left-[-35px] top-[-30px] z-50"
+            />
+            <div className="text-[20px] font-bold text-white">Estimated Rewards</div>
+            <div className="mb-[13px] mt-[12px] flex w-full items-center justify-center gap-[12px]">
+                {rewardToken === 'rss3' ? <RSS3 width={48} height={48} /> : <TON width={48} height={48} />}
+                <div className="flex flex-col">
+                    <div className="w-full text-[24px] text-neutrals1">
+                        {Number(rewardPool?.amount).toFixed(2) || 0}
+                    </div>
+                    <div className="w-full text-[16px] text-neutrals1">{rewardToken === 'rss3' ? 'RSS3' : 'TON'}</div>
+                </div>
+            </div>
+            <MainButton
+                onClick={() => {
+                    if (!rewardPool) return;
+                    writeContract({
+                        ...REWARD_CONTRACT,
+                        functionName: 'claim',
+                        args: [rewardPool.reward_pool_id, BigInt(rewardPool.big_amount), [rewardPool.proof]],
+                    });
+                }}
+            >
+                Claim
+            </MainButton>
         </div>
-      </div>
-      <MainButton
-        onClick={() => {
-          if (!rewardPool) return;
-          writeContract({
-            ...REWARD_CONTRACT,
-            functionName: 'claim',
-            args: [rewardPool.reward_pool_id, BigInt(rewardPool.big_amount), [rewardPool.proof]],
-          });
-        }}
-      >
-        Claim
-      </MainButton>
-    </div>
-  );
+    );
 }
diff --git a/src/components/ProjectDetailCard/index.tsx b/src/components/ProjectDetailCard/index.tsx
@@ -15,7 +15,6 @@ import { IS_TESTNET, POOL_ID, STAKE_MANAGER_CONTRACT } from '@/constants/index.j
 import { Image } from '@/esm/Image.js';
 import { stakeAPI } from '@/providers/StakeAPI.js';
 
-
 interface ProjectCardProps {
     setIsOpen: (isOpen: boolean) => void;
 }
@@ -48,7 +47,6 @@ export function ProjectDetailCard({ setIsOpen }: ProjectCardProps) {
         },
     });
 
-
     const statusText = useMemo(() => {
         if (!poolInfo) return 'Not started';
         const now = Date.now();

diff --git a/src/components/StakeCard/index.tsx b/src/components/StakeCard/index.tsx
@@ -11,44 +11,46 @@ import { STAKE_MANAGER_CONTRACT } from '@/constants/index.js';
 import { Image } from '@/esm/Image.js';
 
 interface StakeCardProps {
-  setIsOpen: (isOpen: boolean) => void;
+    setIsOpen: (isOpen: boolean) => void;
 }
 
 export function StakeCard({ setIsOpen }: StakeCardProps) {
-  const { address } = useAccount()
-  const { data, isLoading, isError } = useQuery({
-    queryKey: ['stake'],
-    queryFn: async () => {
-      if (!address) return {}
-      const [stakeAmount, poolId] = await readContract({
-        ...STAKE_MANAGER_CONTRACT, functionName: 'userInfos', args: [address]
-      });
-      return { stakeAmount, poolId }
-    }
-  })
+    const { address } = useAccount();
+    const { data, isLoading, isError } = useQuery({
+        queryKey: ['stake'],
+        queryFn: async () => {
+            if (!address) return {};
+            const [stakeAmount, poolId] = await readContract({
+                ...STAKE_MANAGER_CONTRACT,
+                functionName: 'userInfos',
+                args: [address],
+            });
+            return { stakeAmount, poolId };
+        },
+    });
 
-  return (
-    <div className="relative flex h-[196px] flex-col rounded-[16px] border-[1px] border-neutrals6 p-[16px]">
-      <Image
-        src="/glow.png"
-        width={360}
-        height={230}
-        alt="right"
-        className="absolute left-[-35px] top-[-30px] z-50"
-      />
-      <div className="text-[20px] font-bold text-white">Staked MASK</div>
-      <div className="w-full text-center text-[48px] leading-[48px] text-white ">
-        {data?.stakeAmount ? formatEther(data.stakeAmount) : 0}
-      </div>
-      <div className="mb-[12px] w-full text-center text-[16px] text-white">+3 Points/h</div>
-      <MainButton
-        onClick={() => {
-          setIsOpen(true);
-        }}
-      >
-        <MASK width={16} height={16} />
-        Stake MASK
-      </MainButton>
-    </div>
-  );
+    return (
+        <div className="relative flex h-[196px] flex-col rounded-[16px] border-[1px] border-neutrals6 p-[16px]">
+            <Image
+                src="/glow.png"
+                width={360}
+                height={230}
+                alt="right"
+                className="absolute left-[-35px] top-[-30px] z-50"
+            />
+            <div className="text-[20px] font-bold text-white">Staked MASK</div>
+            <div className="w-full text-center text-[48px] leading-[48px] text-white ">
+                {data?.stakeAmount ? formatEther(data.stakeAmount) : 0}
+            </div>
+            <div className="mb-[12px] w-full text-center text-[16px] text-white">+3 Points/h</div>
+            <MainButton
+                onClick={() => {
+                    setIsOpen(true);
+                }}
+            >
+                <MASK width={16} height={16} />
+                Stake MASK
+            </MainButton>
+        </div>
+    );
 }
diff --git a/src/components/StakeModal/StakeTokenInput/Stake.tsx b/src/components/StakeModal/StakeTokenInput/Stake.tsx
@@ -5,7 +5,7 @@ import dayjs from 'dayjs';
 import { useState } from 'react';
 import { formatEther, parseEther } from 'viem';
 import { useAccount } from 'wagmi';
-import { readContract, waitForTransaction,writeContract  } from 'wagmi/actions';
+import { readContract, waitForTransaction, writeContract } from 'wagmi/actions';
 
 import { InputPanel } from '@/components/StakeModal/StakeTokenInput/InputPanel.js';
 import { publicClient } from '@/configs/wagmiClient.js';

diff --git a/src/components/StakeModal/StakeTokenInput/index.tsx b/src/components/StakeModal/StakeTokenInput/index.tsx
@@ -55,9 +55,7 @@ export function StakeTokenInput({ onClose }: StakeTokenInputProps) {
                     )}
                     <div className="text-sm font-bold text-neutrals1">Link X</div>
                 </div>
-                {
-                    status !== 'authenticated' ? <ConnectXButton /> : null
-                }
+                {status !== 'authenticated' ? <ConnectXButton /> : null}
             </div>
             <Stake />
         </div>

diff --git a/src/components/StakeModal/index.tsx b/src/components/StakeModal/index.tsx
@@ -5,51 +5,50 @@ import { Fragment } from 'react';
 
 import { StakeTokenInput } from '@/components/StakeModal/StakeTokenInput/index.js';
 
-
 interface StakeModalProps {
-  isOpen: boolean
-  setIsOpen: (isOpen: boolean) => void
+    isOpen: boolean;
+    setIsOpen: (isOpen: boolean) => void;
 }
 export function StakeModal({ isOpen, setIsOpen }: StakeModalProps) {
-  return (
-    <Transition appear show={isOpen} as={Fragment}>
-      <Dialog
-        as="div"
-        className="relative z-50"
-        onClose={() => {
-          setIsOpen(false);
-        }}
-      >
-        <Transition.Child
-          as={Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-black/25" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 overflow-y-auto">
-          <div className="flex min-h-full items-center justify-center p-4 text-center">
-            <Transition.Child
-              as={Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 scale-95"
-              enterTo="opacity-100 scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 scale-100"
-              leaveTo="opacity-0 scale-95"
+    return (
+        <Transition appear show={isOpen} as={Fragment}>
+            <Dialog
+                as="div"
+                className="relative z-50"
+                onClose={() => {
+                    setIsOpen(false);
+                }}
             >
-              <Dialog.Panel className="z-[999] w-full max-w-[630px] transform overflow-hidden rounded-2xl bg-neutrals8 p-[24px] text-left align-middle shadow-xl transition-all">
-                <StakeTokenInput onClose={() => setIsOpen(false)} />
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition>
-  );
+                <Transition.Child
+                    as={Fragment}
+                    enter="ease-out duration-300"
+                    enterFrom="opacity-0"
+                    enterTo="opacity-100"
+                    leave="ease-in duration-200"
+                    leaveFrom="opacity-100"
+                    leaveTo="opacity-0"
+                >
+                    <div className="fixed inset-0 bg-black/25" />
+                </Transition.Child>
+
+                <div className="fixed inset-0 overflow-y-auto">
+                    <div className="flex min-h-full items-center justify-center p-4 text-center">
+                        <Transition.Child
+                            as={Fragment}
+                            enter="ease-out duration-300"
+                            enterFrom="opacity-0 scale-95"
+                            enterTo="opacity-100 scale-100"
+                            leave="ease-in duration-200"
+                            leaveFrom="opacity-100 scale-100"
+                            leaveTo="opacity-0 scale-95"
+                        >
+                            <Dialog.Panel className="z-[999] w-full max-w-[630px] transform overflow-hidden rounded-2xl bg-neutrals8 p-[24px] text-left align-middle shadow-xl transition-all">
+                                <StakeTokenInput onClose={() => setIsOpen(false)} />
+                            </Dialog.Panel>
+                        </Transition.Child>
+                    </div>
+                </div>
+            </Dialog>
+        </Transition>
+    );
 }
diff --git a/src/constants/index.ts b/src/constants/index.ts
@@ -1,8 +1,7 @@
 /* cspell:disable */
 
-
-import {erc20ABI as TOKEN_ABI} from '@/abis/erc20.js';
-import {rewardABI as REWARD_ABI} from '@/abis/reward.js';
+import { erc20ABI as TOKEN_ABI } from '@/abis/erc20.js';
+import { rewardABI as REWARD_ABI } from '@/abis/reward.js';
 import { StakeManagerABI } from '@/abis/stakeManager.js';
 
 export const SITE_NAME = 'Stake Your $MASK';