From 9cfc97e056df9a349e1bca4f12d101d9a3917da5 Mon Sep 17 00:00:00 2001
From: asalef10 <asalef10@gmail.com>
Date: Tue, 10 Jun 2025 12:09:34 +0300
Subject: [PATCH 1/7] Refactor RewardsCard component by removing total staked
 display section

---
 .../stakingPage/components/RewardsCard.tsx    | 26 +------------------
 1 file changed, 1 insertion(+), 25 deletions(-)

diff --git a/src/pages/stakingPage/components/RewardsCard.tsx b/src/pages/stakingPage/components/RewardsCard.tsx
index 65ba5c7..e97c7a1 100644
--- a/src/pages/stakingPage/components/RewardsCard.tsx
+++ b/src/pages/stakingPage/components/RewardsCard.tsx
@@ -147,31 +147,7 @@ export const RewardsCard = ({ data, refetchData }: RewardsCardProps): JSX.Elemen
           </Text>
         </HStack>
 
-        <HStack justify="space-between" pt={2} borderTop="1px solid" borderColor="gray.800">
-          <HStack spacing={2}>
-            <GrixLogo boxSize="14px" />
-            <Text color="white" fontWeight="600" fontSize="sm" letterSpacing="-0.01em">
-              Total Staked
-            </Text>
-          </HStack>
-          <Text color="gray.400" fontSize="sm" fontWeight="500" flexShrink={0} textAlign="right">
-            {Number(totalStaked).toLocaleString(undefined, {
-              minimumFractionDigits: 1,
-              maximumFractionDigits: 1,
-            })}{' '}
-            GRIX
-            {grixPrice && Number(totalStaked) > 0 && (
-              <Text as="span" color="green.300" fontWeight="600" fontSize="sm" letterSpacing="-0.01em">
-                &nbsp;($
-                {(Number(totalStaked) * grixPrice).toLocaleString(undefined, {
-                  minimumFractionDigits: 2,
-                  maximumFractionDigits: 2,
-                })}
-                )
-              </Text>
-            )}
-          </Text>
-        </HStack>
+  
         <Button
           onClick={() => void handleClaim()}
           isLoading={isClaiming}

From 42f318bfd98f8152e8679d09d6a1324e685cdde9 Mon Sep 17 00:00:00 2001
From: asalef10 <asalef10@gmail.com>
Date: Tue, 10 Jun 2025 12:26:09 +0300
Subject: [PATCH 2/7] update font

---
 .../components/StakingCardContent.tsx         | 49 ++++++++++---------
 1 file changed, 25 insertions(+), 24 deletions(-)

diff --git a/src/pages/stakingPage/components/StakingCardContent.tsx b/src/pages/stakingPage/components/StakingCardContent.tsx
index bd61414..91916c1 100644
--- a/src/pages/stakingPage/components/StakingCardContent.tsx
+++ b/src/pages/stakingPage/components/StakingCardContent.tsx
@@ -71,49 +71,49 @@ export const StakingCardContent: React.FC<StakingCardContentProps> = ({
     <Box
       bg="gray.950"
       borderRadius="lg"
-      p={6}
+      p={5}
       height="fit-content"
       border="1px solid"
       borderColor="gray.900"
       _hover={{ borderColor: 'gray.800' }}
     >
-      <Flex align="center" mb={5}>
-        <GrixLogo boxSize={8} mr={3} />
+      <Flex align="center" mb={4}>
+        <GrixLogo boxSize={7} mr={3} />
         <div>
-          <Heading size="md" color="white" mb={1} fontWeight="600">
+          <Heading size="sm" color="white" mb={1} fontWeight="600">
             <BoldGrix text={title} />
           </Heading>
-          <Text color="gray.400" fontSize="sm">
+          <Text color="gray.400" fontSize="xs">
             <BoldGrix text={description} />
           </Text>
         </div>
       </Flex>
 
-      <SimpleGrid columns={2} spacing={5} mb={5}>
+      <SimpleGrid columns={2} spacing={4} mb={5}>
         <VStack align="stretch">
-          <Text fontSize="sm" color="gray.500" mb={1}>
+          <Text fontSize="xs" color="gray.500" mb={1}>
             Staked
           </Text>
-          <Text fontSize="xl" fontWeight="700" color="white">
+          <Text fontSize="lg" fontWeight="600" color="white">
             {formatBalance(stakedAmount)}
           </Text>
         </VStack>
 
         <VStack align="stretch">
-          <Text fontSize="sm" color="gray.500" mb={1}>
+          <Text fontSize="xs" color="gray.500" mb={1}>
             Available to stake
           </Text>
-          <Text fontSize="xl" fontWeight="700" color="white">
+          <Text fontSize="lg" fontWeight="600" color="white">
             {formatBalance(availableBalance)}
           </Text>
         </VStack>
 
         <VStack align="stretch">
-          <Text fontSize="sm" color="gray.500" mb={1}>
+          <Text fontSize="xs" color="gray.500" mb={1}>
             APR
           </Text>
-          <Text fontSize="xl" fontWeight="700" color="green.200" display="flex" alignItems="center" gap={2}>
-            <Text as="span" color="green.300">
+          <Text fontSize="lg" fontWeight="600" color="green.200" display="flex" alignItems="center" gap={1}>
+            <Text as="span" color="green.300" fontSize="sm">
               ↗
             </Text>
             {apr.toFixed(2)}%
@@ -121,18 +121,18 @@ export const StakingCardContent: React.FC<StakingCardContentProps> = ({
         </VStack>
 
         <VStack align="stretch">
-          <Text fontSize="sm" color="gray.500" mb={1}>
+          <Text fontSize="xs" color="gray.500" mb={1}>
             Total Staked
           </Text>
-          <VStack align="flex-start" spacing={1}>
-            <Text fontSize="xl" fontWeight="700" color="white">
+          <VStack align="flex-start" spacing={0}>
+            <Text fontSize="lg" fontWeight="600" color="white">
               {Number(totalStakedInProtocol).toLocaleString(undefined, {
-                minimumFractionDigits: 1,
-                maximumFractionDigits: 1,
+                minimumFractionDigits: 2,
+                maximumFractionDigits: 2,
               })}
             </Text>
             {grixPrice && Number(totalStakedInProtocol) > 0 && (
-              <Text fontSize="sm" color="green.300" fontWeight="600">
+              <Text fontSize="xs" color="green.300" fontWeight="500">
                 ($
                 {(Number(totalStakedInProtocol) * grixPrice).toLocaleString(undefined, {
                   minimumFractionDigits: 2,
@@ -145,17 +145,18 @@ export const StakingCardContent: React.FC<StakingCardContentProps> = ({
         </VStack>
       </SimpleGrid>
 
-      <HStack spacing={4}>
-        <Button onClick={onStakeModalOpen} variant="primary" size="lg" height="48px">
+      <HStack spacing={3}>
+        <Button onClick={onStakeModalOpen} variant="primary" size="md" height="40px" fontSize="sm">
           Stake
         </Button>
         <Button
           onClick={onUnstakeModalOpen}
           variant="secondary"
-          size="lg"
-          height="48px"
+          size="md"
+          height="40px"
+          fontSize="sm"
           color="white"
-          fontWeight="bold"
+          fontWeight="600"
           borderColor="gray.600"
           _hover={{
             bg: 'gray.800',

From 52fed56fb524c0c807a954de02bd45ab85b61ec4 Mon Sep 17 00:00:00 2001
From: asalef10 <asalef10@gmail.com>
Date: Tue, 10 Jun 2025 12:39:48 +0300
Subject: [PATCH 3/7] refactor

---
 .../stakingPage/components/RewardsCard.tsx    | 70 +++++++++++--------
 .../components/StakingCardContent.tsx         | 44 ++++++------
 .../stakingPage/components/VestingCard.tsx    |  6 +-
 .../VestingComponents/VestingHeader.tsx       | 14 ++--
 .../VestingComponents/VestingStats.tsx        | 40 +++++------
 src/pages/stakingPage/index.tsx               | 24 +++----
 6 files changed, 99 insertions(+), 99 deletions(-)

diff --git a/src/pages/stakingPage/components/RewardsCard.tsx b/src/pages/stakingPage/components/RewardsCard.tsx
index e97c7a1..51a7887 100644
--- a/src/pages/stakingPage/components/RewardsCard.tsx
+++ b/src/pages/stakingPage/components/RewardsCard.tsx
@@ -113,41 +113,49 @@ export const RewardsCard = ({ data, refetchData }: RewardsCardProps): JSX.Elemen
       _hover={{ borderColor: 'gray.800' }}
     >
       <VStack spacing={3} align="stretch">
-        <HStack justify="space-between">
-          <HStack spacing={2}>
-            <EthLogo boxSize="14px" />
-            <Text color="white" fontWeight="600" fontSize="sm" letterSpacing="-0.01em">
-              WETH
-            </Text>
+        <VStack align="stretch" spacing={1}>
+          <HStack justify="space-between" align="flex-start">
+            <HStack spacing={1} align="center">
+              <EthLogo boxSize="12px" />
+              <Text color="gray.500" fontSize="xs">
+                WETH Rewards
+              </Text>
+            </HStack>
+            <VStack align="flex-end" spacing={0}>
+              <Text color="white" fontSize="sm" fontWeight="600">
+                ≤{(0.0001).toFixed(4)} WETH
+              </Text>
+              <Text color="gray.400" fontSize="xs">
+                ≤${(0.01).toFixed(2)}
+              </Text>
+            </VStack>
           </HStack>
-          <Text color="gray.400" fontSize="sm" fontWeight="500" flexShrink={0}>
-            ≤{(0.0001).toFixed(4)} WETH (≤${(0.01).toFixed(2)})
-          </Text>
-        </HStack>
+        </VStack>
 
-        <HStack justify="space-between">
-          <HStack spacing={2}>
-            <GrixLogo boxSize="14px" />
-            <Text color="white" fontWeight="600" fontSize="sm" letterSpacing="-0.01em">
-              Claimable Rewards
-            </Text>
-          </HStack>
-          <Text color="gray.400" fontSize="sm" fontWeight="500" flexShrink={0} textAlign="right">
-            {data?.claimable ? Number(data.claimable).toFixed(4) : '0.0000'} esGRIX
-            {grixPrice && data?.claimable && (
-              <Text as="span" color="green.300" fontWeight="600" fontSize="sm" letterSpacing="-0.01em">
-                &nbsp;($
-                {(Number(data.claimable) * grixPrice).toLocaleString(undefined, {
-                  minimumFractionDigits: 2,
-                  maximumFractionDigits: 2,
-                })}
-                )
+        <VStack align="stretch" spacing={1}>
+          <HStack justify="space-between" align="flex-start">
+            <HStack spacing={1} align="center">
+              <GrixLogo boxSize="12px" />
+              <Text color="gray.500" fontSize="xs">
+                Claimable Rewards
+              </Text>
+            </HStack>
+            <VStack align="flex-end" spacing={0}>
+              <Text color="white" fontSize="sm" fontWeight="600">
+                {data?.claimable ? Number(data.claimable).toFixed(4) : '0.00'} esGRIX
               </Text>
-            )}
-          </Text>
-        </HStack>
+              {grixPrice && data?.claimable && Number(data.claimable) > 0 && (
+                <Text color="green.300" fontSize="xs" fontWeight="500">
+                  ${(Number(data.claimable) * grixPrice).toLocaleString(undefined, {
+                    minimumFractionDigits: 2,
+                    maximumFractionDigits: 2,
+                  })}
+                </Text>
+              )}
+            </VStack>
+          </HStack>
+        </VStack>
 
-  
         <Button
           onClick={() => void handleClaim()}
           isLoading={isClaiming}
diff --git a/src/pages/stakingPage/components/StakingCardContent.tsx b/src/pages/stakingPage/components/StakingCardContent.tsx
index 91916c1..4baf5e1 100644
--- a/src/pages/stakingPage/components/StakingCardContent.tsx
+++ b/src/pages/stakingPage/components/StakingCardContent.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, Flex, Heading, HStack, SimpleGrid, Text, useDisclosure, VStack } from '@chakra-ui/react';
+import { Box, Button, Flex, HStack, SimpleGrid, Text, useDisclosure, VStack } from '@chakra-ui/react';
 import React from 'react';
 
 import { GrixLogo } from '@/components/commons/Logo';
@@ -70,62 +70,62 @@ export const StakingCardContent: React.FC<StakingCardContentProps> = ({
   return (
     <Box
       bg="gray.950"
-      borderRadius="lg"
-      p={5}
+      borderRadius="md"
+      p={4}
       height="fit-content"
       border="1px solid"
       borderColor="gray.900"
       _hover={{ borderColor: 'gray.800' }}
     >
-      <Flex align="center" mb={4}>
-        <GrixLogo boxSize={7} mr={3} />
+      <Flex align="center" mb={3}>
+        <GrixLogo boxSize={6} mr={2} />
         <div>
-          <Heading size="sm" color="white" mb={1} fontWeight="600">
-            <BoldGrix text={title} />
-          </Heading>
+          <Text color="white" fontSize="sm" fontWeight="600" letterSpacing="-0.01em">
+            {title}
+          </Text>
           <Text color="gray.400" fontSize="xs">
             <BoldGrix text={description} />
           </Text>
         </div>
       </Flex>
 
-      <SimpleGrid columns={2} spacing={4} mb={5}>
-        <VStack align="stretch">
-          <Text fontSize="xs" color="gray.500" mb={1}>
+      <SimpleGrid columns={2} spacing={3} mb={4}>
+        <VStack align="stretch" spacing={1}>
+          <Text fontSize="xs" color="gray.500">
             Staked
           </Text>
-          <Text fontSize="lg" fontWeight="600" color="white">
+          <Text fontSize="sm" fontWeight="600" color="white">
             {formatBalance(stakedAmount)}
           </Text>
         </VStack>
 
-        <VStack align="stretch">
-          <Text fontSize="xs" color="gray.500" mb={1}>
+        <VStack align="stretch" spacing={1}>
+          <Text fontSize="xs" color="gray.500">
             Available to stake
           </Text>
-          <Text fontSize="lg" fontWeight="600" color="white">
+          <Text fontSize="sm" fontWeight="600" color="white">
             {formatBalance(availableBalance)}
           </Text>
         </VStack>
 
-        <VStack align="stretch">
-          <Text fontSize="xs" color="gray.500" mb={1}>
+        <VStack align="stretch" spacing={1}>
+          <Text fontSize="xs" color="gray.500">
             APR
           </Text>
-          <Text fontSize="lg" fontWeight="600" color="green.200" display="flex" alignItems="center" gap={1}>
-            <Text as="span" color="green.300" fontSize="sm">
+          <Text fontSize="sm" fontWeight="600" color="green.200" display="flex" alignItems="center" gap={1}>
+            <Text as="span" color="green.300" fontSize="xs">
               ↗
             </Text>
             {apr.toFixed(2)}%
           </Text>
         </VStack>
 
-        <VStack align="stretch">
-          <Text fontSize="xs" color="gray.500" mb={1}>
+        <VStack align="stretch" spacing={1}>
+          <Text fontSize="xs" color="gray.500">
             Total Staked
           </Text>
           <VStack align="flex-start" spacing={0}>
-            <Text fontSize="lg" fontWeight="600" color="white">
+            <Text fontSize="sm" fontWeight="600" color="white">
               {Number(totalStakedInProtocol).toLocaleString(undefined, {
                 minimumFractionDigits: 2,
                 maximumFractionDigits: 2,
diff --git a/src/pages/stakingPage/components/VestingCard.tsx b/src/pages/stakingPage/components/VestingCard.tsx
index 754f43c..30df19c 100644
--- a/src/pages/stakingPage/components/VestingCard.tsx
+++ b/src/pages/stakingPage/components/VestingCard.tsx
@@ -229,15 +229,15 @@ export const VestingCard: React.FC<VestingCardProps> = ({ onActionComplete, user
   return (
     <Box
       bg="gray.950"
-      borderRadius="lg"
-      p={6}
+      borderRadius="md"
+      p={4}
       border="1px solid"
       borderColor="gray.900"
       _hover={{ borderColor: 'gray.800' }}
     >
       <VestingHeader />
 
-      <VStack spacing={6} align="stretch">
+      <VStack spacing={4} align="stretch">
         <VestingStats
           vestingData={
             vestingData && {
diff --git a/src/pages/stakingPage/components/VestingComponents/VestingHeader.tsx b/src/pages/stakingPage/components/VestingComponents/VestingHeader.tsx
index 66d5861..7754d0a 100644
--- a/src/pages/stakingPage/components/VestingComponents/VestingHeader.tsx
+++ b/src/pages/stakingPage/components/VestingComponents/VestingHeader.tsx
@@ -1,15 +1,13 @@
-import { Heading, Text, VStack } from '@chakra-ui/react';
+import { Text, VStack } from '@chakra-ui/react';
 import React from 'react';
 
-import { BoldGrix } from '../BoldGrix';
-
 export const VestingHeader: React.FC = () => (
-  <VStack align="stretch" mb={4}>
-    <Heading size="sm" color="white" fontWeight="700" letterSpacing="-0.01em">
+  <VStack align="stretch" mb={3} spacing={1}>
+    <Text color="white" fontSize="sm" fontWeight="600" letterSpacing="-0.01em">
       Vesting
-    </Heading>
-    <Text color="gray.400" fontSize="sm" fontWeight="500">
-      <BoldGrix text="Convert esGRIX tokens to GRIX Token" />
+    </Text>
+    <Text color="gray.400" fontSize="xs">
+      Convert esGRIX tokens to GRIX Token
     </Text>
   </VStack>
 );
diff --git a/src/pages/stakingPage/components/VestingComponents/VestingStats.tsx b/src/pages/stakingPage/components/VestingComponents/VestingStats.tsx
index 011877f..64212be 100644
--- a/src/pages/stakingPage/components/VestingComponents/VestingStats.tsx
+++ b/src/pages/stakingPage/components/VestingComponents/VestingStats.tsx
@@ -2,7 +2,6 @@ import { Button, Grid, GridItem, HStack, Progress, Text, VStack } from '@chakra-
 import React from 'react';
 
 import { formatBalance } from '../../utils/formatters';
-import { BoldGrix } from '../BoldGrix';
 
 type VestingProgress = {
   remainingDays: number;
@@ -32,33 +31,33 @@ export const VestingStats: React.FC<VestingStatsProps> = ({
   onWithdraw,
   isWithdrawing,
 }) => (
-  <VStack spacing={4} align="stretch">
-    <Grid templateColumns="repeat(2, 1fr)" gap={4}>
+  <VStack spacing={3} align="stretch">
+    <Grid templateColumns="repeat(2, 1fr)" gap={3}>
       <GridItem>
-        <VStack align="stretch" spacing={0.5}>
-          <Text color="gray.400" fontSize="xs" fontWeight="600" letterSpacing="-0.01em">
-            <BoldGrix text="Claimable GRIX" />
+        <VStack align="stretch" spacing={1}>
+          <Text color="gray.500" fontSize="xs">
+            Claimable GRIX
           </Text>
-          <Text color="white" fontSize="lg" fontWeight="700" letterSpacing="-0.01em">
-            {vestingData ? formatBalance(vestingData.claimable) : '0'}
+          <Text color="white" fontSize="sm" fontWeight="600">
+            {vestingData ? formatBalance(vestingData.claimable) : '0.00'}
           </Text>
         </VStack>
       </GridItem>
 
       <GridItem>
-        <VStack align="stretch" spacing={0.5}>
-          <Text color="gray.400" fontSize="xs" fontWeight="600" letterSpacing="-0.01em">
-            <BoldGrix text="Total Vested esGRIX" />
+        <VStack align="stretch" spacing={1}>
+          <Text color="gray.500" fontSize="xs">
+            Total Vested esGRIX
           </Text>
-          <Text color="white" fontSize="lg" fontWeight="700" letterSpacing="-0.01em">
-            {vestingData ? formatBalance(vestingData.totalVested) : '0'}
+          <Text color="white" fontSize="sm" fontWeight="600">
+            {vestingData ? formatBalance(vestingData.totalVested) : '0.00'}
           </Text>
         </VStack>
       </GridItem>
 
       <GridItem colSpan={2}>
-        <VStack align="stretch" spacing={0.5}>
-          <Text color="gray.400" fontSize="xs" fontWeight="600" letterSpacing="-0.01em">
+        <VStack align="stretch" spacing={1}>
+          <Text color="gray.500" fontSize="xs">
             Vesting Progress
           </Text>
           {vestingData?.vestingProgress?.isVesting ? (
@@ -69,13 +68,14 @@ export const VestingStats: React.FC<VestingStatsProps> = ({
                 colorScheme="primary"
                 borderRadius="full"
                 bg="gray.700"
+                height="6px"
               />
-              <Text color="white" fontSize="sm" fontWeight="500">
+              <Text color="gray.400" fontSize="xs" fontWeight="500">
                 {vestingData.vestingProgress.remainingDays} days remaining
               </Text>
             </>
           ) : (
-            <Text color="white" fontSize="sm" fontWeight="500">
+            <Text color="gray.400" fontSize="xs" fontWeight="500">
               No active vesting
             </Text>
           )}
@@ -83,14 +83,14 @@ export const VestingStats: React.FC<VestingStatsProps> = ({
       </GridItem>
     </Grid>
 
-    <HStack spacing={4}>
+    <HStack spacing={3}>
       <Button
         onClick={onVestClick}
         isLoading={isVesting}
         loadingText="Vesting"
         bg="teal.400"
         color="white"
-        size="lg"
+        size="md"
         width="full"
         height="40px"
         fontSize="sm"
@@ -105,7 +105,7 @@ export const VestingStats: React.FC<VestingStatsProps> = ({
         isLoading={isWithdrawing}
         loadingText="Withdrawing"
         variant="outline"
-        size="lg"
+        size="md"
         width="full"
         height="40px"
         fontSize="sm"
diff --git a/src/pages/stakingPage/index.tsx b/src/pages/stakingPage/index.tsx
index 6858e2f..e32ae3f 100644
--- a/src/pages/stakingPage/index.tsx
+++ b/src/pages/stakingPage/index.tsx
@@ -4,7 +4,6 @@ import { useAccount } from 'wagmi';
 
 import { getUserRewardTrackerData } from '@/web3Config/staking/hooks';
 
-import { BoldGrix } from './components/BoldGrix';
 import { RewardsCard } from './components/RewardsCard';
 import { StakingCard } from './components/StakingCard';
 import { VestingCard } from './components/VestingCard';
@@ -61,12 +60,12 @@ export const StakingPage: React.FC = () => {
     <Container maxW="1200px" px={{ base: 3, md: 4 }} py={6}>
       <Grid templateColumns={{ base: '1fr', lg: 'repeat(3, 1fr)' }} gap={4} mb={6}>
         <GridItem colSpan={{ base: 1, lg: 3 }}>
-          <VStack align="flex-start" spacing={3} bg="gray.950" p={4} borderRadius="xl">
-            <Heading size="lg" color="white" fontWeight="700" letterSpacing="-0.02em">
+          <VStack align="flex-start" spacing={2} bg="gray.950" p={4} borderRadius="md">
+            <Heading size="md" color="white" fontWeight="600" letterSpacing="-0.01em">
               Staking
             </Heading>
-            <Text color="gray.400" fontSize="md" fontWeight="500">
-              <BoldGrix text="Stake GRIX and esGRIX to start earning rewards" />
+            <Text color="gray.400" fontSize="sm">
+              Stake GRIX and esGRIX to start earning rewards
             </Text>
           </VStack>
         </GridItem>
@@ -112,10 +111,10 @@ export const StakingPage: React.FC = () => {
               transition="all 0.2s"
               _active={{ transform: 'scale(0.98)' }}
             >
-              <Heading size="sm" color="white" fontWeight="700" letterSpacing="-0.01em">
+              <Text color="white" fontSize="sm" fontWeight="600" letterSpacing="-0.01em">
                 Learn about Staking
-              </Heading>
-              <Text color="gray.400" fontSize="sm" fontWeight="500">
+              </Text>
+              <Text color="gray.400" fontSize="xs">
                 Check out our staking walkthrough and guides
               </Text>
             </VStack>
@@ -124,13 +123,8 @@ export const StakingPage: React.FC = () => {
       </Grid>
 
       <Grid templateColumns={{ base: '1fr', lg: 'repeat(3, 1fr)' }} gap={4} mb={6}>
-        <GridItem colSpan={{ base: 1, lg: 3 }} bg="gray.950" p={4} borderRadius="xl">
-          <VStack align="stretch" spacing={3}>
-            <Heading size="md" color="white" fontWeight="700" letterSpacing="-0.02em" mb={1}>
-              Vesting
-            </Heading>
-            <VestingCard onActionComplete={triggerRefresh} userRewardData={userRewardData} />
-          </VStack>
+        <GridItem colSpan={{ base: 1, lg: 3 }}>
+          <VestingCard onActionComplete={triggerRefresh} userRewardData={userRewardData} />
         </GridItem>
       </Grid>
     </Container>

From 1311e71865393941afa960f39c246ad4c8848181 Mon Sep 17 00:00:00 2001
From: asalef10 <asalef10@gmail.com>
Date: Tue, 10 Jun 2025 12:58:07 +0300
Subject: [PATCH 4/7] refactor StakeUnstakeModal

---
 .../stakingPage/components/StakeUnstakeModal.tsx   | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/pages/stakingPage/components/StakeUnstakeModal.tsx b/src/pages/stakingPage/components/StakeUnstakeModal.tsx
index 918cda0..d60851e 100644
--- a/src/pages/stakingPage/components/StakeUnstakeModal.tsx
+++ b/src/pages/stakingPage/components/StakeUnstakeModal.tsx
@@ -99,14 +99,14 @@ export const StakeUnstakeModal: React.FC<StakeUnstakeModalProps> = ({
       <ModalContent bg="#0D0F12" maxW="400px">
         <Box px={6} py={4}>
           <Flex justify="space-between" align="center" mb={4}>
-            <Text color="white" fontSize="xl" fontWeight="600">
+            <Text color="white" fontSize="sm" fontWeight="600">
               {title}
             </Text>
             <ModalCloseButton position="static" color="gray.400" />
           </Flex>
 
           <VStack spacing={4} align="stretch">
-            <Text color="gray.500" fontSize="md" mb={1}>
+            <Text color="gray.500" fontSize="xs" mb={1}>
               {isStakeMode ? 'Stake Amount' : 'Unstake Amount'}
             </Text>
 
@@ -116,7 +116,7 @@ export const StakeUnstakeModal: React.FC<StakeUnstakeModalProps> = ({
                   <Box bg="#1E2328" p={2} borderRadius="lg">
                     <GrixLogo boxSize="24px" />
                   </Box>
-                  <Text color="white" fontSize="lg" fontWeight="600">
+                  <Text color="white" fontSize="sm" fontWeight="600">
                     {isEsGrix ? 'esGRIX' : 'GRIX'}
                   </Text>
                 </HStack>
@@ -127,17 +127,17 @@ export const StakeUnstakeModal: React.FC<StakeUnstakeModalProps> = ({
                   variant="unstyled"
                   textAlign="right"
                   color="white"
-                  fontSize="lg"
+                  fontSize="sm"
                   width="auto"
                 />
               </Flex>
             </Box>
 
             <Flex justify="space-between" align="center">
-              <Text color="gray.500" fontSize="md">
+              <Text color="gray.500" fontSize="xs">
                 {isStakeMode ? 'Available balance' : 'Staked balance'}
               </Text>
-              <Text color="white" fontSize="md">
+              <Text color="white" fontSize="sm">
                 {formatBalance(availableAmount)} {isEsGrix ? 'esGRIX' : 'GRIX'}
               </Text>
             </Flex>
@@ -167,7 +167,7 @@ export const StakeUnstakeModal: React.FC<StakeUnstakeModalProps> = ({
                   <Box as="span" color="#3B82F6" fontSize="lg">
                     ⓘ
                   </Box>
-                  <Text color="#3B82F6" fontSize="sm">
+                  <Text color="#3B82F6" fontSize="xs">
                     You might not be able to unstake your desired {isEsGrix ? 'esGRIX' : 'GRIX'} if there is an active
                     vesting position.
                   </Text>

From 2711cb00cb423fc55fd41972027af575c961768d Mon Sep 17 00:00:00 2001
From: asalef10 <asalef10@gmail.com>
Date: Tue, 10 Jun 2025 13:04:14 +0300
Subject: [PATCH 5/7] refactor design

---
 .../stakingPage/components/RewardsCard.tsx    |  1 -
 .../components/StakeUnstakeModal.tsx          | 97 ++++++++++++++++---
 2 files changed, 81 insertions(+), 17 deletions(-)

diff --git a/src/pages/stakingPage/components/RewardsCard.tsx b/src/pages/stakingPage/components/RewardsCard.tsx
index 51a7887..6ab10f2 100644
--- a/src/pages/stakingPage/components/RewardsCard.tsx
+++ b/src/pages/stakingPage/components/RewardsCard.tsx
@@ -24,7 +24,6 @@ export const RewardsCard = ({ data, refetchData }: RewardsCardProps): JSX.Elemen
   const [isClaiming, setIsClaiming] = useState(false);
   const [isCompounding, setIsCompounding] = useState(false);
   const [grixPrice, setGrixPrice] = useState<number | null>(null);
-  const { totalStaked } = useVesting();
   const toast = useToast();
 
   // Fetch GRIX price from CoinGecko
diff --git a/src/pages/stakingPage/components/StakeUnstakeModal.tsx b/src/pages/stakingPage/components/StakeUnstakeModal.tsx
index d60851e..2ebab91 100644
--- a/src/pages/stakingPage/components/StakeUnstakeModal.tsx
+++ b/src/pages/stakingPage/components/StakeUnstakeModal.tsx
@@ -147,14 +147,39 @@ export const StakeUnstakeModal: React.FC<StakeUnstakeModalProps> = ({
                 <Button
                   key={percentage}
                   onClick={() => handlePercentageClick(percentage)}
-                  bg="#1E2328"
-                  color="white"
-                  size="md"
+                  variant="outline"
+                  bg="gray.800"
+                  color="gray.300"
+                  borderColor="gray.600"
+                  size="sm"
                   flex={1}
+                  height="32px"
+                  fontSize="xs"
+                  fontWeight="500"
                   isDisabled={!hasBalance}
-                  opacity={hasBalance ? 1 : 0.5}
-                  _hover={{ bg: hasBalance ? '#2A3038' : '#1E2328' }}
-                  _active={{ bg: hasBalance ? '#2A3038' : '#1E2328' }}
+                  _hover={{
+                    bg: hasBalance ? 'gray.700' : 'gray.800',
+                    borderColor: hasBalance ? 'gray.500' : 'gray.600',
+                    color: hasBalance ? 'white' : 'gray.300',
+                    transform: hasBalance ? 'translateY(-1px)' : 'none',
+                    boxShadow: hasBalance ? 'sm' : 'none'
+                  }}
+                  _active={{
+                    bg: hasBalance ? 'gray.600' : 'gray.800',
+                    transform: hasBalance ? 'translateY(0)' : 'none'
+                  }}
+                  _disabled={{
+                    opacity: 0.5,
+                    cursor: 'not-allowed',
+                    _hover: {
+                      bg: 'gray.800',
+                      borderColor: 'gray.600',
+                      color: 'gray.300',
+                      transform: 'none',
+                      boxShadow: 'none'
+                    }
+                  }}
+                  transition="all 0.2s"
                 >
                   {percentage}%
                 </Button>
@@ -181,15 +206,35 @@ export const StakeUnstakeModal: React.FC<StakeUnstakeModalProps> = ({
                   isLoading={isApproving}
                   loadingText="Approving"
                   onClick={handleApprove}
-                  bg="#2F6C60"
+                  variant="solid"
+                  bg="teal.500"
                   color="white"
-                  size="lg"
+                  size="md"
                   width="full"
-                  height="48px"
+                  height="40px"
                   fontSize="sm"
+                  fontWeight="500"
                   isDisabled={!isAmountValid()}
-                  _hover={{ bg: '#2A5F54' }}
-                  _active={{ bg: '#264F46' }}
+                  _hover={{ 
+                    bg: 'teal.600',
+                    transform: 'translateY(-1px)',
+                    boxShadow: 'md'
+                  }}
+                  _active={{ 
+                    bg: 'teal.700',
+                    transform: 'translateY(0)'
+                  }}
+                  _disabled={{
+                    bg: 'gray.700',
+                    color: 'gray.500',
+                    cursor: 'not-allowed',
+                    _hover: {
+                      bg: 'gray.700',
+                      transform: 'none',
+                      boxShadow: 'none'
+                    }
+                  }}
+                  transition="all 0.2s"
                 >
                   Approve
                 </Button>
@@ -198,15 +243,35 @@ export const StakeUnstakeModal: React.FC<StakeUnstakeModalProps> = ({
                   isLoading={isLoading}
                   loadingText={isStakeMode ? 'Staking' : 'Unstaking'}
                   onClick={onSubmit}
-                  bg="#2F6C60"
+                  variant="solid"
+                  bg="teal.500"
                   color="white"
-                  size="lg"
+                  size="md"
                   width="full"
-                  height="48px"
+                  height="40px"
                   fontSize="sm"
+                  fontWeight="500"
                   isDisabled={!isAmountValid() || !amount}
-                  _hover={{ bg: '#2A5F54' }}
-                  _active={{ bg: '#264F46' }}
+                  _hover={{ 
+                    bg: 'teal.600',
+                    transform: 'translateY(-1px)',
+                    boxShadow: 'md'
+                  }}
+                  _active={{ 
+                    bg: 'teal.700',
+                    transform: 'translateY(0)'
+                  }}
+                  _disabled={{
+                    bg: 'gray.700',
+                    color: 'gray.500',
+                    cursor: 'not-allowed',
+                    _hover: {
+                      bg: 'gray.700',
+                      transform: 'none',
+                      boxShadow: 'none'
+                    }
+                  }}
+                  transition="all 0.2s"
                 >
                   {isStakeMode ? 'Stake' : 'Unstake'}
                 </Button>

From 01a23479d06fdb0c950c5bfa7765f40385f7cce8 Mon Sep 17 00:00:00 2001
From: asalef10 <asalef10@gmail.com>
Date: Tue, 10 Jun 2025 13:06:03 +0300
Subject: [PATCH 6/7] lint

---
 src/pages/stakingPage/components/RewardsCard.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/stakingPage/components/RewardsCard.tsx b/src/pages/stakingPage/components/RewardsCard.tsx
index 6ab10f2..82cc12a 100644
--- a/src/pages/stakingPage/components/RewardsCard.tsx
+++ b/src/pages/stakingPage/components/RewardsCard.tsx
@@ -7,7 +7,6 @@ import { EthLogo } from '@/components/commons/Logo/EthLogo';
 import { AssetPriceResponse } from '@/types/api';
 import { claim, compound } from '@/web3Config/staking/hooks';
 
-import { useVesting } from '../hooks/useVesting';
 
 type RewardsCardProps = {
   data: {

From d35f8455f9392fa11625cb49e77706cdfa65708c Mon Sep 17 00:00:00 2001
From: asalef10 <asalef10@gmail.com>
Date: Tue, 10 Jun 2025 13:13:32 +0300
Subject: [PATCH 7/7] lint

---
 .../stakingPage/components/RewardsCard.tsx    |  4 +--
 .../components/StakeUnstakeModal.tsx          | 32 +++++++++----------
 2 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/pages/stakingPage/components/RewardsCard.tsx b/src/pages/stakingPage/components/RewardsCard.tsx
index 82cc12a..7a8df88 100644
--- a/src/pages/stakingPage/components/RewardsCard.tsx
+++ b/src/pages/stakingPage/components/RewardsCard.tsx
@@ -7,7 +7,6 @@ import { EthLogo } from '@/components/commons/Logo/EthLogo';
 import { AssetPriceResponse } from '@/types/api';
 import { claim, compound } from '@/web3Config/staking/hooks';
 
-
 type RewardsCardProps = {
   data: {
     claimable: string;
@@ -144,7 +143,8 @@ export const RewardsCard = ({ data, refetchData }: RewardsCardProps): JSX.Elemen
               </Text>
               {grixPrice && data?.claimable && Number(data.claimable) > 0 && (
                 <Text color="green.300" fontSize="xs" fontWeight="500">
-                  ${(Number(data.claimable) * grixPrice).toLocaleString(undefined, {
+                  $
+                  {(Number(data.claimable) * grixPrice).toLocaleString(undefined, {
                     minimumFractionDigits: 2,
                     maximumFractionDigits: 2,
                   })}
diff --git a/src/pages/stakingPage/components/StakeUnstakeModal.tsx b/src/pages/stakingPage/components/StakeUnstakeModal.tsx
index 2ebab91..9ea2171 100644
--- a/src/pages/stakingPage/components/StakeUnstakeModal.tsx
+++ b/src/pages/stakingPage/components/StakeUnstakeModal.tsx
@@ -162,11 +162,11 @@ export const StakeUnstakeModal: React.FC<StakeUnstakeModalProps> = ({
                     borderColor: hasBalance ? 'gray.500' : 'gray.600',
                     color: hasBalance ? 'white' : 'gray.300',
                     transform: hasBalance ? 'translateY(-1px)' : 'none',
-                    boxShadow: hasBalance ? 'sm' : 'none'
+                    boxShadow: hasBalance ? 'sm' : 'none',
                   }}
                   _active={{
                     bg: hasBalance ? 'gray.600' : 'gray.800',
-                    transform: hasBalance ? 'translateY(0)' : 'none'
+                    transform: hasBalance ? 'translateY(0)' : 'none',
                   }}
                   _disabled={{
                     opacity: 0.5,
@@ -176,8 +176,8 @@ export const StakeUnstakeModal: React.FC<StakeUnstakeModalProps> = ({
                       borderColor: 'gray.600',
                       color: 'gray.300',
                       transform: 'none',
-                      boxShadow: 'none'
-                    }
+                      boxShadow: 'none',
+                    },
                   }}
                   transition="all 0.2s"
                 >
@@ -215,14 +215,14 @@ export const StakeUnstakeModal: React.FC<StakeUnstakeModalProps> = ({
                   fontSize="sm"
                   fontWeight="500"
                   isDisabled={!isAmountValid()}
-                  _hover={{ 
+                  _hover={{
                     bg: 'teal.600',
                     transform: 'translateY(-1px)',
-                    boxShadow: 'md'
+                    boxShadow: 'md',
                   }}
-                  _active={{ 
+                  _active={{
                     bg: 'teal.700',
-                    transform: 'translateY(0)'
+                    transform: 'translateY(0)',
                   }}
                   _disabled={{
                     bg: 'gray.700',
@@ -231,8 +231,8 @@ export const StakeUnstakeModal: React.FC<StakeUnstakeModalProps> = ({
                     _hover: {
                       bg: 'gray.700',
                       transform: 'none',
-                      boxShadow: 'none'
-                    }
+                      boxShadow: 'none',
+                    },
                   }}
                   transition="all 0.2s"
                 >
@@ -252,14 +252,14 @@ export const StakeUnstakeModal: React.FC<StakeUnstakeModalProps> = ({
                   fontSize="sm"
                   fontWeight="500"
                   isDisabled={!isAmountValid() || !amount}
-                  _hover={{ 
+                  _hover={{
                     bg: 'teal.600',
                     transform: 'translateY(-1px)',
-                    boxShadow: 'md'
+                    boxShadow: 'md',
                   }}
-                  _active={{ 
+                  _active={{
                     bg: 'teal.700',
-                    transform: 'translateY(0)'
+                    transform: 'translateY(0)',
                   }}
                   _disabled={{
                     bg: 'gray.700',
@@ -268,8 +268,8 @@ export const StakeUnstakeModal: React.FC<StakeUnstakeModalProps> = ({
                     _hover: {
                       bg: 'gray.700',
                       transform: 'none',
-                      boxShadow: 'none'
-                    }
+                      boxShadow: 'none',
+                    },
                   }}
                   transition="all 0.2s"
                 >