From 4f0bbf8f3eb9103adb94209150b277db3f0c95c6 Mon Sep 17 00:00:00 2001
From: asalef10 <asalef10@gmail.com>
Date: Sun, 20 Apr 2025 12:33:23 +0300
Subject: [PATCH 01/13] update api

---
 src/pages/stakingPage/components/RewardsCard.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/pages/stakingPage/components/RewardsCard.tsx b/src/pages/stakingPage/components/RewardsCard.tsx
index a34f636..466b333 100644
--- a/src/pages/stakingPage/components/RewardsCard.tsx
+++ b/src/pages/stakingPage/components/RewardsCard.tsx
@@ -16,7 +16,9 @@ type RewardsCardProps = {
 };
 
 type DexScreenerResponse = {
-  pairs?: { priceUsd?: string }[];
+  grix: {
+    usd: number;
+  };
 };
 
 export const RewardsCard = ({ data, refetchData }: RewardsCardProps): JSX.Element => {
@@ -26,15 +28,13 @@ export const RewardsCard = ({ data, refetchData }: RewardsCardProps): JSX.Elemen
   const [grixPrice, setGrixPrice] = useState<number | null>(null);
   const toast = useToast();
 
-  // Fetch GRIX price from dexscreener
+  // Fetch GRIX price from CoinGecko
   useEffect(() => {
     const fetchPrice = async () => {
       try {
-        const res = await fetch(
-          'https://api.dexscreener.com/latest/dex/pairs/arbitrum/0x25d3ce097e413eeab09bbda72cd87d8972e673d4'
-        );
+        const res = await fetch('https://api.coingecko.com/api/v3/simple/price?ids=grix&vs_currencies=usd');
         const json = (await res.json()) as DexScreenerResponse;
-        const price = json?.pairs?.[0]?.priceUsd ? parseFloat(json.pairs[0].priceUsd) : null;
+        const price = json.grix.usd;
         setGrixPrice(price);
       } catch {
         setGrixPrice(null);

From a9680fea83ff47323b1ccbe606c16fb8f7275bb7 Mon Sep 17 00:00:00 2001
From: asalef10 <asalef10@gmail.com>
Date: Sun, 20 Apr 2025 12:51:49 +0300
Subject: [PATCH 02/13] update : staking -> stake

---
 src/components/navigation/config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/navigation/config.ts b/src/components/navigation/config.ts
index 51f5370..18e9b7b 100644
--- a/src/components/navigation/config.ts
+++ b/src/components/navigation/config.ts
@@ -93,7 +93,7 @@ export const useNavigationConfig = (): NavigationConfig => {
       ],
     },
     {
-      label: 'Staking',
+      label: 'Stake',
       path: '/staking',
     },
     {

From 6ac65ec34f1faa3acde287b98deb68e887d2da60 Mon Sep 17 00:00:00 2001
From: asalef10 <asalef10@gmail.com>
Date: Sun, 20 Apr 2025 12:59:10 +0300
Subject: [PATCH 03/13] Bold "grix" and "esGrix" text

---
 src/pages/stakingPage/components/BoldGrix.tsx | 24 ++++++
 .../components/StakingCardContent.tsx         |  5 +-
 .../VestingComponents/VestingHeader.tsx       | 24 +++---
 .../VestingComponents/VestingInfo.tsx         | 20 ++---
 .../VestingComponents/VestingStats.tsx        | 73 ++++++++++---------
 src/pages/stakingPage/index.tsx               |  3 +-
 6 files changed, 87 insertions(+), 62 deletions(-)
 create mode 100644 src/pages/stakingPage/components/BoldGrix.tsx

diff --git a/src/pages/stakingPage/components/BoldGrix.tsx b/src/pages/stakingPage/components/BoldGrix.tsx
new file mode 100644
index 0000000..a3e792d
--- /dev/null
+++ b/src/pages/stakingPage/components/BoldGrix.tsx
@@ -0,0 +1,24 @@
+import { Text } from '@chakra-ui/react';
+import React from 'react';
+
+type BoldGrixProps = {
+  text: string;
+};
+
+export const BoldGrix: React.FC<BoldGrixProps> = ({ text }) => {
+  const parts = text.split(/(GRIX|esGRIX)/g);
+  return (
+    <>
+      {parts.map((part, index) => {
+        if (part === 'GRIX' || part === 'esGRIX') {
+          return (
+            <Text as="b" key={index}>
+              {part}
+            </Text>
+          );
+        }
+        return part;
+      })}
+    </>
+  );
+};
diff --git a/src/pages/stakingPage/components/StakingCardContent.tsx b/src/pages/stakingPage/components/StakingCardContent.tsx
index a2c7db9..cea9913 100644
--- a/src/pages/stakingPage/components/StakingCardContent.tsx
+++ b/src/pages/stakingPage/components/StakingCardContent.tsx
@@ -16,6 +16,7 @@ import React from 'react';
 import { GrixLogo } from '@/components/commons/Logo';
 
 import { formatBalance } from '../utils/formatters';
+import { BoldGrix } from './BoldGrix';
 
 type StakingCardContentProps = {
   title: string;
@@ -69,10 +70,10 @@ export const StakingCardContent: React.FC<StakingCardContentProps> = ({
       <GrixLogo boxSize={8} mr={3} />
       <div>
         <Heading size="md" color="white" mb={1} fontWeight="600">
-          {title}
+          <BoldGrix text={title} />
         </Heading>
         <Text color="gray.400" fontSize="sm">
-          {description}
+          <BoldGrix text={description} />
         </Text>
       </div>
     </Flex>
diff --git a/src/pages/stakingPage/components/VestingComponents/VestingHeader.tsx b/src/pages/stakingPage/components/VestingComponents/VestingHeader.tsx
index f0946a0..c1d121b 100644
--- a/src/pages/stakingPage/components/VestingComponents/VestingHeader.tsx
+++ b/src/pages/stakingPage/components/VestingComponents/VestingHeader.tsx
@@ -1,17 +1,15 @@
-import { Flex, Heading, Text } from '@chakra-ui/react';
+import { Heading, Text, VStack } from '@chakra-ui/react';
+import React from 'react';
 
-import { GrixLogo } from '@/components/commons/Logo';
+import { BoldGrix } from '../BoldGrix';
 
 export const VestingHeader: React.FC = () => (
-  <Flex align="center" mb={5}>
-    <GrixLogo boxSize={8} mr={3} />
-    <div>
-      <Heading size="md" color="white" mb={1} fontWeight="600">
-        Vesting
-      </Heading>
-      <Text color="gray.400" fontSize="sm">
-        Convert esGRIX tokens to GRIX Token
-      </Text>
-    </div>
-  </Flex>
+  <VStack align="stretch" mb={6}>
+    <Heading size="md" color="white" fontWeight="600">
+      Vesting
+    </Heading>
+    <Text color="gray.400" fontSize="sm">
+      <BoldGrix text="Convert esGRIX tokens to GRIX Token" />
+    </Text>
+  </VStack>
 );
diff --git a/src/pages/stakingPage/components/VestingComponents/VestingInfo.tsx b/src/pages/stakingPage/components/VestingComponents/VestingInfo.tsx
index e60bad8..f628390 100644
--- a/src/pages/stakingPage/components/VestingComponents/VestingInfo.tsx
+++ b/src/pages/stakingPage/components/VestingComponents/VestingInfo.tsx
@@ -1,21 +1,15 @@
 import { Text, VStack } from '@chakra-ui/react';
+import React from 'react';
 
-type VestingInfoProps = {
-  _vestingData?: {
-    claimable: string;
-    totalVested: string;
-    maxVestableAmount: string;
-  } | null;
-};
+import { BoldGrix } from '../BoldGrix';
 
-export const VestingInfo: React.FC<VestingInfoProps> = ({ _vestingData }) => (
-  <VStack align="stretch" spacing={1}>
-    <Text fontSize="sm" color="gray.500" mb={1}>
+export const VestingInfo: React.FC = () => (
+  <VStack align="stretch" spacing={2}>
+    <Text color="gray.500" fontSize="sm">
       About Vesting
     </Text>
-    <Text fontSize="sm" color="gray.400">
-      Convert your esGRIX tokens to GRIX Token through the vesting process. Vested tokens are claimable on an ongoing
-      basis.
+    <Text color="gray.400" fontSize="sm">
+      <BoldGrix text="Convert your esGRIX tokens to GRIX Token through the vesting process. Vested tokens are claimable on an ongoing basis." />
     </Text>
   </VStack>
 );
diff --git a/src/pages/stakingPage/components/VestingComponents/VestingStats.tsx b/src/pages/stakingPage/components/VestingComponents/VestingStats.tsx
index 49191b3..d7989d9 100644
--- a/src/pages/stakingPage/components/VestingComponents/VestingStats.tsx
+++ b/src/pages/stakingPage/components/VestingComponents/VestingStats.tsx
@@ -1,6 +1,9 @@
 import { Grid, GridItem, Progress, Text, VStack } from '@chakra-ui/react';
 import React from 'react';
 
+import { BoldGrix } from '../BoldGrix';
+import { formatBalance } from '../../utils/formatters';
+
 type VestingProgress = {
   remainingDays: number;
   progress: number;
@@ -19,47 +22,51 @@ type VestingStatsProps = {
 };
 
 export const VestingStats: React.FC<VestingStatsProps> = ({ vestingData }) => (
-  <Grid templateColumns="repeat(2, 1fr)" gap={4}>
+  <Grid templateColumns="repeat(2, 1fr)" gap={6}>
     <GridItem>
-      <Text color="gray.500" fontSize="sm">
-        Claimable
-      </Text>
-      <Text color="white" fontSize="lg">
-        {vestingData?.claimable || '0'} Grix
-      </Text>
+      <VStack align="stretch" spacing={1}>
+        <Text color="gray.500" fontSize="sm">
+          <BoldGrix text="Claimable GRIX" />
+        </Text>
+        <Text color="white" fontSize="xl" fontWeight="700">
+          {vestingData ? formatBalance(vestingData.claimable) : '0.0000'}
+        </Text>
+      </VStack>
     </GridItem>
+
     <GridItem>
-      <Text color="gray.500" fontSize="sm">
-        Total Vested
-      </Text>
-      <Text color="white" fontSize="lg">
-        {vestingData?.totalVested || '0'} esGrix
-      </Text>
+      <VStack align="stretch" spacing={1}>
+        <Text color="gray.500" fontSize="sm">
+          <BoldGrix text="Total Vested GRIX" />
+        </Text>
+        <Text color="white" fontSize="xl" fontWeight="700">
+          {vestingData ? formatBalance(vestingData.totalVested) : '0.0000'}
+        </Text>
+      </VStack>
     </GridItem>
+
     <GridItem>
-      <Text color="gray.500" fontSize="sm">
-        Available to vest{' '}
-      </Text>
-      <Text color="white" fontSize="lg">
-        {vestingData?.esGrixBalance || '0'} esGrix
-      </Text>
+      <VStack align="stretch" spacing={1}>
+        <Text color="gray.500" fontSize="sm">
+          <BoldGrix text="Available esGRIX" />
+        </Text>
+        <Text color="white" fontSize="xl" fontWeight="700">
+          {vestingData?.esGrixBalance ? formatBalance(vestingData.esGrixBalance) : '0.0000'}
+        </Text>
+      </VStack>
     </GridItem>
+
     <GridItem>
-      <Text color="gray.500" fontSize="sm">
-        Last Vesting Time
-      </Text>
-      <Text color="white" fontSize="sm">
-        {vestingData?.lastVestingTime
-          ? new Date(Number(vestingData.lastVestingTime) * 1000).toLocaleString('en-GB', {
-              year: 'numeric',
-              month: 'long',
-              day: 'numeric',
-              hour: '2-digit',
-              minute: '2-digit',
-            })
-          : '----------'}
-      </Text>
+      <VStack align="stretch" spacing={1}>
+        <Text color="gray.500" fontSize="sm">
+          <BoldGrix text="Max Vestable esGRIX" />
+        </Text>
+        <Text color="white" fontSize="xl" fontWeight="700">
+          {vestingData ? formatBalance(vestingData.maxVestableAmount) : '0.0000'}
+        </Text>
+      </VStack>
     </GridItem>
+
     <GridItem colSpan={2}>
       <VStack align="stretch" spacing={1}>
         <Text color="gray.500" fontSize="sm">
diff --git a/src/pages/stakingPage/index.tsx b/src/pages/stakingPage/index.tsx
index 83fa1df..4ae055b 100644
--- a/src/pages/stakingPage/index.tsx
+++ b/src/pages/stakingPage/index.tsx
@@ -4,6 +4,7 @@ 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';
@@ -64,7 +65,7 @@ export const StakingPage: React.FC = () => {
             Staking
           </Heading>
           <Text color="gray.400" fontSize="md">
-            Stake GRIX and esGRIX to start earning rewards
+            <BoldGrix text="Stake GRIX and esGRIX to start earning rewards" />
           </Text>
         </VStack>
 

From 72bc0992857d2e5203e3a1d52982e6f62f5448e6 Mon Sep 17 00:00:00 2001
From: asalef10 <asalef10@gmail.com>
Date: Sun, 20 Apr 2025 13:00:47 +0300
Subject: [PATCH 04/13] lint

---
 .../stakingPage/components/VestingComponents/VestingStats.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/stakingPage/components/VestingComponents/VestingStats.tsx b/src/pages/stakingPage/components/VestingComponents/VestingStats.tsx
index d7989d9..0ec8ddc 100644
--- a/src/pages/stakingPage/components/VestingComponents/VestingStats.tsx
+++ b/src/pages/stakingPage/components/VestingComponents/VestingStats.tsx
@@ -1,8 +1,8 @@
 import { Grid, GridItem, Progress, Text, VStack } from '@chakra-ui/react';
 import React from 'react';
 
-import { BoldGrix } from '../BoldGrix';
 import { formatBalance } from '../../utils/formatters';
+import { BoldGrix } from '../BoldGrix';
 
 type VestingProgress = {
   remainingDays: number;

From 2d6acb44d8349d561a6fe8b48cc2bd3a686983d3 Mon Sep 17 00:00:00 2001
From: asalef10 <asalef10@gmail.com>
Date: Sun, 20 Apr 2025 13:07:44 +0300
Subject: [PATCH 05/13] Change to eth icon

---
 src/components/commons/Logo/EthLogo.tsx        | 18 ++++++++++++++++++
 .../stakingPage/components/RewardsCard.tsx     |  3 ++-
 2 files changed, 20 insertions(+), 1 deletion(-)
 create mode 100644 src/components/commons/Logo/EthLogo.tsx

diff --git a/src/components/commons/Logo/EthLogo.tsx b/src/components/commons/Logo/EthLogo.tsx
new file mode 100644
index 0000000..0ee2407
--- /dev/null
+++ b/src/components/commons/Logo/EthLogo.tsx
@@ -0,0 +1,18 @@
+import { Icon, IconProps } from '@chakra-ui/react';
+import React from 'react';
+
+export const EthLogo: React.FC<IconProps> = (props) => (
+  <Icon viewBox="0 0 32 32" {...props}>
+    <g fill="none" fillRule="evenodd">
+      <circle cx="16" cy="16" r="16" fill="#627EEA" />
+      <g fill="#FFF" fillRule="nonzero">
+        <path fillOpacity=".602" d="M16.498 4v8.87l7.497 3.35z" />
+        <path d="M16.498 4L9 16.22l7.498-3.35z" />
+        <path fillOpacity=".602" d="M16.498 21.968v6.027L24 17.616z" />
+        <path d="M16.498 27.995v-6.028L9 17.616z" />
+        <path fillOpacity=".2" d="M16.498 20.573l7.497-4.353-7.497-3.348z" />
+        <path fillOpacity=".602" d="M9 16.22l7.498 4.353v-7.701z" />
+      </g>
+    </g>
+  </Icon>
+);
diff --git a/src/pages/stakingPage/components/RewardsCard.tsx b/src/pages/stakingPage/components/RewardsCard.tsx
index 466b333..a160b18 100644
--- a/src/pages/stakingPage/components/RewardsCard.tsx
+++ b/src/pages/stakingPage/components/RewardsCard.tsx
@@ -2,6 +2,7 @@ import { Box, Button, HStack, Text, useToast, VStack } from '@chakra-ui/react';
 import { useCallback, useEffect, useState } from 'react';
 import { useAccount } from 'wagmi';
 
+import { EthLogo } from '@/components/commons/Logo/EthLogo';
 import { GrixLogo } from '@/components/commons/Logo';
 import { claim, compound } from '@/web3Config/staking/hooks';
 
@@ -110,7 +111,7 @@ export const RewardsCard = ({ data, refetchData }: RewardsCardProps): JSX.Elemen
       <VStack spacing={4} align="stretch">
         <HStack justify="space-between">
           <HStack spacing={2}>
-            <Text fontSize="lg">🔷</Text>
+            <EthLogo boxSize="20px" />
             <Text color="white" fontWeight="500">
               WETH
             </Text>

From 4d8d5466fb2a223b2b0e6b575684c7560ee213dc Mon Sep 17 00:00:00 2001
From: asalef10 <asalef10@gmail.com>
Date: Sun, 20 Apr 2025 13:09:25 +0300
Subject: [PATCH 06/13] lint

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

diff --git a/src/pages/stakingPage/components/RewardsCard.tsx b/src/pages/stakingPage/components/RewardsCard.tsx
index a160b18..c4aabb9 100644
--- a/src/pages/stakingPage/components/RewardsCard.tsx
+++ b/src/pages/stakingPage/components/RewardsCard.tsx
@@ -2,8 +2,8 @@ import { Box, Button, HStack, Text, useToast, VStack } from '@chakra-ui/react';
 import { useCallback, useEffect, useState } from 'react';
 import { useAccount } from 'wagmi';
 
-import { EthLogo } from '@/components/commons/Logo/EthLogo';
 import { GrixLogo } from '@/components/commons/Logo';
+import { EthLogo } from '@/components/commons/Logo/EthLogo';
 import { claim, compound } from '@/web3Config/staking/hooks';
 
 type RewardsCardProps = {

From 51f07df81f120d8b6aed826b8f699f43df748b96 Mon Sep 17 00:00:00 2001
From: asalef10 <asalef10@gmail.com>
Date: Sun, 20 Apr 2025 13:11:45 +0300
Subject: [PATCH 07/13] Add link

---
 src/pages/stakingPage/index.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/pages/stakingPage/index.tsx b/src/pages/stakingPage/index.tsx
index 4ae055b..c6af764 100644
--- a/src/pages/stakingPage/index.tsx
+++ b/src/pages/stakingPage/index.tsx
@@ -101,6 +101,13 @@ export const StakingPage: React.FC = () => {
                 border="1px solid"
                 borderColor="gray.900"
                 _hover={{ borderColor: 'gray.800' }}
+                as="a"
+                href="https://docs.grix.finance/gitbook/tokenomics/overview"
+                target="_blank"
+                rel="noopener noreferrer"
+                cursor="pointer"
+                transition="all 0.2s"
+                _active={{ transform: 'scale(0.98)' }}
               >
                 <VStack align="stretch" spacing={2}>
                   <Heading size="sm" color="white" fontWeight="600">

From aa7f028a874a79a45c1bc90baeebdcaf9523314d Mon Sep 17 00:00:00 2001
From: asalef10 <asalef10@gmail.com>
Date: Sun, 20 Apr 2025 13:45:25 +0300
Subject: [PATCH 08/13] update:text&font

---
 .../stakingPage/components/RewardsCard.tsx    | 36 ++++++-----
 .../components/StakingCardContent.tsx         | 62 ++++++++++---------
 .../VestingComponents/VestingHeader.tsx       |  6 +-
 .../VestingComponents/VestingInfo.tsx         |  6 +-
 .../VestingComponents/VestingStats.tsx        | 36 +++++------
 src/pages/stakingPage/index.tsx               | 26 ++++----
 6 files changed, 89 insertions(+), 83 deletions(-)

diff --git a/src/pages/stakingPage/components/RewardsCard.tsx b/src/pages/stakingPage/components/RewardsCard.tsx
index c4aabb9..3012995 100644
--- a/src/pages/stakingPage/components/RewardsCard.tsx
+++ b/src/pages/stakingPage/components/RewardsCard.tsx
@@ -101,49 +101,49 @@ export const RewardsCard = ({ data, refetchData }: RewardsCardProps): JSX.Elemen
   return (
     <Box
       bg="gray.950"
-      borderRadius="lg"
-      p={6}
+      borderRadius="md"
+      p={4}
       height="fit-content"
       border="1px solid"
       borderColor="gray.900"
       _hover={{ borderColor: 'gray.800' }}
     >
-      <VStack spacing={4} align="stretch">
+      <VStack spacing={3} align="stretch">
         <HStack justify="space-between">
           <HStack spacing={2}>
-            <EthLogo boxSize="20px" />
-            <Text color="white" fontWeight="500">
+            <EthLogo boxSize="16px" />
+            <Text color="white" fontWeight="600" fontSize="sm" letterSpacing="-0.01em">
               WETH
             </Text>
           </HStack>
-          <Text color="gray.400" fontSize="sm">
+          <Text color="gray.400" fontSize="sm" fontWeight="500">
             ≤{(0.0001).toFixed(4)} WETH (≤${(0.01).toFixed(2)})
           </Text>
         </HStack>
 
         <HStack justify="space-between">
           <HStack spacing={2}>
-            <GrixLogo boxSize="20px" />
-            <Text color="white" fontWeight="500">
+            <GrixLogo boxSize="16px" />
+            <Text color="white" fontWeight="600" fontSize="sm" letterSpacing="-0.01em">
               Staked Amount
             </Text>
           </HStack>
-          <Text color="gray.400" fontSize="sm">
+          <Text color="gray.400" fontSize="sm" fontWeight="500">
             {data?.stakedAmount ? Number(data.stakedAmount).toFixed(4) : '0.0000'} GRIX
           </Text>
         </HStack>
 
         <HStack justify="space-between">
           <HStack spacing={2}>
-            <GrixLogo boxSize="20px" />
-            <Text color="white" fontWeight="500">
+            <GrixLogo boxSize="16px" />
+            <Text color="white" fontWeight="600" fontSize="sm" letterSpacing="-0.01em">
               Claimable Rewards
             </Text>
           </HStack>
-          <Text color="gray.400" fontSize="sm">
+          <Text color="gray.400" fontSize="sm" fontWeight="500">
             {data?.claimable ? Number(data.claimable).toFixed(4) : '0.0000'} esGRIX
             {grixPrice && data?.claimable && (
-              <Text as="span" color="green.300" fontWeight="500" fontSize="sm">
+              <Text as="span" color="green.300" fontWeight="600" fontSize="sm" letterSpacing="-0.01em">
                 &nbsp;($
                 {(Number(data.claimable) * grixPrice).toLocaleString(undefined, {
                   minimumFractionDigits: 2,
@@ -160,9 +160,10 @@ export const RewardsCard = ({ data, refetchData }: RewardsCardProps): JSX.Elemen
           loadingText="Claiming"
           bg="teal.400"
           color="white"
-          size="lg"
+          size="md"
           width="full"
-          height="48px"
+          height="40px"
+          fontSize="sm"
           isDisabled={!data?.claimable || Number(data?.claimable) <= 0}
           _hover={{ bg: 'teal.500' }}
           _active={{ bg: 'teal.600' }}
@@ -176,9 +177,10 @@ export const RewardsCard = ({ data, refetchData }: RewardsCardProps): JSX.Elemen
           loadingText="Compounding"
           bg="teal.400"
           color="white"
-          size="lg"
+          size="md"
           width="full"
-          height="48px"
+          height="40px"
+          fontSize="sm"
           _hover={{ bg: 'teal.500' }}
           _active={{ bg: 'teal.600' }}
         >
diff --git a/src/pages/stakingPage/components/StakingCardContent.tsx b/src/pages/stakingPage/components/StakingCardContent.tsx
index cea9913..493a02a 100644
--- a/src/pages/stakingPage/components/StakingCardContent.tsx
+++ b/src/pages/stakingPage/components/StakingCardContent.tsx
@@ -59,56 +59,56 @@ export const StakingCardContent: React.FC<StakingCardContentProps> = ({
 }) => (
   <Box
     bg="gray.950"
-    borderRadius="lg"
-    p={6}
+    borderRadius="md"
+    p={4}
     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={3}>
+      <GrixLogo boxSize={6} mr={2} />
       <div>
-        <Heading size="md" color="white" mb={1} fontWeight="600">
+        <Heading size="sm" color="white" mb={1} fontWeight="700" letterSpacing="-0.01em">
           <BoldGrix text={title} />
         </Heading>
-        <Text color="gray.400" fontSize="sm">
+        <Text color="gray.400" fontSize="sm" fontWeight="500">
           <BoldGrix text={description} />
         </Text>
       </div>
     </Flex>
 
-    <SimpleGrid columns={2} spacing={5} mb={5}>
-      <VStack align="stretch">
-        <Text fontSize="sm" color="gray.500" mb={1}>
+    <SimpleGrid columns={2} spacing={4} mb={4}>
+      <VStack align="stretch" spacing={0.5}>
+        <Text fontSize="xs" color="gray.400" mb={0.5} fontWeight="500">
           Staked
         </Text>
-        <Text fontSize="xl" fontWeight="700" color="white">
+        <Text fontSize="lg" fontWeight="700" color="white" letterSpacing="-0.01em">
           {formatBalance(stakedAmount)}
         </Text>
       </VStack>
 
-      <VStack align="stretch">
-        <Text fontSize="sm" color="gray.500" mb={1}>
+      <VStack align="stretch" spacing={0.5}>
+        <Text fontSize="xs" color="gray.400" mb={0.5} fontWeight="500">
           Available to stake
         </Text>
-        <Text fontSize="xl" fontWeight="700" color="white">
+        <Text fontSize="lg" fontWeight="700" color="white" letterSpacing="-0.01em">
           {formatBalance(availableBalance)}
         </Text>
       </VStack>
 
-      <VStack align="stretch">
-        <Text fontSize="sm" color="gray.500" mb={1}>
+      <VStack align="stretch" spacing={0.5}>
+        <Text fontSize="xs" color="gray.400" mb={0.5} fontWeight="500">
           APR
         </Text>
-        <Text fontSize="xl" fontWeight="700" color="white">
+        <Text fontSize="lg" fontWeight="700" color="white" letterSpacing="-0.01em">
           {apr.toFixed(2)}%
         </Text>
       </VStack>
     </SimpleGrid>
 
-    <VStack spacing={4} align="stretch">
-      <InputGroup size="lg">
+    <VStack spacing={3} align="stretch">
+      <InputGroup size="md">
         <Input
           placeholder="Enter amount"
           value={amount}
@@ -120,12 +120,13 @@ export const StakingCardContent: React.FC<StakingCardContentProps> = ({
           bg="gray.900"
           _hover={{ borderColor: 'gray.600' }}
           _focus={{ borderColor: 'primary.500' }}
-          height="48px"
+          height="40px"
+          fontSize="sm"
         />
-        <InputRightElement width="4.5rem" h="48px">
+        <InputRightElement width="4rem" h="40px">
           <Button
-            h="1.75rem"
-            size="sm"
+            h="1.5rem"
+            size="xs"
             onClick={handleMaxClick}
             variant="secondary"
             color="primary.400"
@@ -137,15 +138,16 @@ export const StakingCardContent: React.FC<StakingCardContentProps> = ({
         </InputRightElement>
       </InputGroup>
 
-      <HStack spacing={4}>
+      <HStack spacing={3}>
         {amount && needsApproval ? (
           <Button
             isLoading={isApproving}
             loadingText="Approving"
             onClick={handleApprove}
             variant="primary"
-            size="lg"
-            height="48px"
+            size="md"
+            height="40px"
+            fontSize="sm"
             isDisabled={!isAmountValid()}
           >
             Approve
@@ -156,8 +158,9 @@ export const StakingCardContent: React.FC<StakingCardContentProps> = ({
             loadingText="Staking"
             onClick={handleStake}
             variant="primary"
-            size="lg"
-            height="48px"
+            size="md"
+            height="40px"
+            fontSize="sm"
             isDisabled={!isAmountValid() || !amount}
           >
             Stake
@@ -168,8 +171,9 @@ export const StakingCardContent: React.FC<StakingCardContentProps> = ({
           loadingText="Unstaking"
           onClick={handleUnstake}
           variant="secondary"
-          size="lg"
-          height="48px"
+          size="md"
+          height="40px"
+          fontSize="sm"
           isDisabled={!isUnstakeAmountValid() || !amount}
           color="white"
           fontWeight="bold"
diff --git a/src/pages/stakingPage/components/VestingComponents/VestingHeader.tsx b/src/pages/stakingPage/components/VestingComponents/VestingHeader.tsx
index c1d121b..66d5861 100644
--- a/src/pages/stakingPage/components/VestingComponents/VestingHeader.tsx
+++ b/src/pages/stakingPage/components/VestingComponents/VestingHeader.tsx
@@ -4,11 +4,11 @@ import React from 'react';
 import { BoldGrix } from '../BoldGrix';
 
 export const VestingHeader: React.FC = () => (
-  <VStack align="stretch" mb={6}>
-    <Heading size="md" color="white" fontWeight="600">
+  <VStack align="stretch" mb={4}>
+    <Heading size="sm" color="white" fontWeight="700" letterSpacing="-0.01em">
       Vesting
     </Heading>
-    <Text color="gray.400" fontSize="sm">
+    <Text color="gray.400" fontSize="sm" fontWeight="500">
       <BoldGrix text="Convert esGRIX tokens to GRIX Token" />
     </Text>
   </VStack>
diff --git a/src/pages/stakingPage/components/VestingComponents/VestingInfo.tsx b/src/pages/stakingPage/components/VestingComponents/VestingInfo.tsx
index f628390..13d6479 100644
--- a/src/pages/stakingPage/components/VestingComponents/VestingInfo.tsx
+++ b/src/pages/stakingPage/components/VestingComponents/VestingInfo.tsx
@@ -4,11 +4,11 @@ import React from 'react';
 import { BoldGrix } from '../BoldGrix';
 
 export const VestingInfo: React.FC = () => (
-  <VStack align="stretch" spacing={2}>
-    <Text color="gray.500" fontSize="sm">
+  <VStack align="stretch" spacing={1}>
+    <Text color="gray.400" fontSize="sm" fontWeight="600" letterSpacing="-0.01em">
       About Vesting
     </Text>
-    <Text color="gray.400" fontSize="sm">
+    <Text color="gray.400" fontSize="sm" fontWeight="500">
       <BoldGrix text="Convert your esGRIX tokens to GRIX Token through the vesting process. Vested tokens are claimable on an ongoing basis." />
     </Text>
   </VStack>
diff --git a/src/pages/stakingPage/components/VestingComponents/VestingStats.tsx b/src/pages/stakingPage/components/VestingComponents/VestingStats.tsx
index 0ec8ddc..d598ab2 100644
--- a/src/pages/stakingPage/components/VestingComponents/VestingStats.tsx
+++ b/src/pages/stakingPage/components/VestingComponents/VestingStats.tsx
@@ -22,71 +22,71 @@ type VestingStatsProps = {
 };
 
 export const VestingStats: React.FC<VestingStatsProps> = ({ vestingData }) => (
-  <Grid templateColumns="repeat(2, 1fr)" gap={6}>
+  <Grid templateColumns="repeat(2, 1fr)" gap={4}>
     <GridItem>
-      <VStack align="stretch" spacing={1}>
-        <Text color="gray.500" fontSize="sm">
+      <VStack align="stretch" spacing={0.5}>
+        <Text color="gray.400" fontSize="xs" fontWeight="600" letterSpacing="-0.01em">
           <BoldGrix text="Claimable GRIX" />
         </Text>
-        <Text color="white" fontSize="xl" fontWeight="700">
+        <Text color="white" fontSize="lg" fontWeight="700" letterSpacing="-0.01em">
           {vestingData ? formatBalance(vestingData.claimable) : '0.0000'}
         </Text>
       </VStack>
     </GridItem>
 
     <GridItem>
-      <VStack align="stretch" spacing={1}>
-        <Text color="gray.500" fontSize="sm">
+      <VStack align="stretch" spacing={0.5}>
+        <Text color="gray.400" fontSize="xs" fontWeight="600" letterSpacing="-0.01em">
           <BoldGrix text="Total Vested GRIX" />
         </Text>
-        <Text color="white" fontSize="xl" fontWeight="700">
+        <Text color="white" fontSize="lg" fontWeight="700" letterSpacing="-0.01em">
           {vestingData ? formatBalance(vestingData.totalVested) : '0.0000'}
         </Text>
       </VStack>
     </GridItem>
 
     <GridItem>
-      <VStack align="stretch" spacing={1}>
-        <Text color="gray.500" fontSize="sm">
+      <VStack align="stretch" spacing={0.5}>
+        <Text color="gray.400" fontSize="xs" fontWeight="600" letterSpacing="-0.01em">
           <BoldGrix text="Available esGRIX" />
         </Text>
-        <Text color="white" fontSize="xl" fontWeight="700">
+        <Text color="white" fontSize="lg" fontWeight="700" letterSpacing="-0.01em">
           {vestingData?.esGrixBalance ? formatBalance(vestingData.esGrixBalance) : '0.0000'}
         </Text>
       </VStack>
     </GridItem>
 
     <GridItem>
-      <VStack align="stretch" spacing={1}>
-        <Text color="gray.500" fontSize="sm">
+      <VStack align="stretch" spacing={0.5}>
+        <Text color="gray.400" fontSize="xs" fontWeight="600" letterSpacing="-0.01em">
           <BoldGrix text="Max Vestable esGRIX" />
         </Text>
-        <Text color="white" fontSize="xl" fontWeight="700">
+        <Text color="white" fontSize="lg" fontWeight="700" letterSpacing="-0.01em">
           {vestingData ? formatBalance(vestingData.maxVestableAmount) : '0.0000'}
         </Text>
       </VStack>
     </GridItem>
 
     <GridItem colSpan={2}>
-      <VStack align="stretch" spacing={1}>
-        <Text color="gray.500" fontSize="sm">
+      <VStack align="stretch" spacing={0.5}>
+        <Text color="gray.400" fontSize="xs" fontWeight="600" letterSpacing="-0.01em">
           Vesting Progress
         </Text>
         {vestingData?.vestingProgress?.isVesting ? (
           <>
             <Progress
               value={vestingData.vestingProgress.progress}
-              size="sm"
+              size="xs"
               colorScheme="primary"
               borderRadius="full"
               bg="gray.700"
             />
-            <Text color="white" fontSize="sm">
+            <Text color="white" fontSize="sm" fontWeight="500">
               {vestingData.vestingProgress.remainingDays} days remaining
             </Text>
           </>
         ) : (
-          <Text color="white" fontSize="sm">
+          <Text color="white" fontSize="sm" fontWeight="500">
             No active vesting
           </Text>
         )}
diff --git a/src/pages/stakingPage/index.tsx b/src/pages/stakingPage/index.tsx
index c6af764..0def7a9 100644
--- a/src/pages/stakingPage/index.tsx
+++ b/src/pages/stakingPage/index.tsx
@@ -59,17 +59,17 @@ export const StakingPage: React.FC = () => {
 
   return (
     <Box bg="gray.950" minH="100vh">
-      <Container maxW="1400px" px={{ base: 4, md: 6 }} py={8}>
-        <VStack align="flex-start" spacing={2} mb={8}>
-          <Heading size="lg" color="white" fontWeight="600">
+      <Container maxW="1200px" px={{ base: 3, md: 4 }} py={6}>
+        <VStack align="flex-start" spacing={3} mb={6}>
+          <Heading size="lg" color="white" fontWeight="700" letterSpacing="-0.02em">
             Staking
           </Heading>
-          <Text color="gray.400" fontSize="md">
+          <Text color="gray.400" fontSize="md" fontWeight="500">
             <BoldGrix text="Stake GRIX and esGRIX to start earning rewards" />
           </Text>
         </VStack>
 
-        <Grid templateColumns={{ base: '1fr', lg: 'repeat(2, 1fr) 340px' }} gap={6} mb={8}>
+        <Grid templateColumns={{ base: '1fr', lg: 'repeat(2, 1fr) 300px' }} gap={4} mb={6}>
           <GridItem>
             <StakingCard
               title="GRIX Token"
@@ -91,13 +91,13 @@ export const StakingPage: React.FC = () => {
           </GridItem>
 
           <GridItem rowSpan={2}>
-            <VStack align="stretch" spacing={6}>
+            <VStack align="stretch" spacing={4}>
               <RewardsCard data={userRewardData} refetchData={handleDataRefresh} />
 
               <Box
                 bg="gray.950"
-                borderRadius="lg"
-                p={6}
+                borderRadius="md"
+                p={4}
                 border="1px solid"
                 borderColor="gray.900"
                 _hover={{ borderColor: 'gray.800' }}
@@ -109,11 +109,11 @@ export const StakingPage: React.FC = () => {
                 transition="all 0.2s"
                 _active={{ transform: 'scale(0.98)' }}
               >
-                <VStack align="stretch" spacing={2}>
-                  <Heading size="sm" color="white" fontWeight="600">
+                <VStack align="stretch" spacing={1}>
+                  <Heading size="sm" color="white" fontWeight="700" letterSpacing="-0.01em">
                     Learn about Staking
                   </Heading>
-                  <Text color="gray.400" fontSize="sm">
+                  <Text color="gray.400" fontSize="sm" fontWeight="500">
                     Check out our staking walkthrough and guides
                   </Text>
                 </VStack>
@@ -122,8 +122,8 @@ export const StakingPage: React.FC = () => {
           </GridItem>
         </Grid>
 
-        <VStack align="stretch" spacing={4} mb={8}>
-          <Heading size="md" color="white" fontWeight="600" mb={2}>
+        <VStack align="stretch" spacing={3} mb={6}>
+          <Heading size="md" color="white" fontWeight="700" letterSpacing="-0.02em" mb={1}>
             Vesting
           </Heading>
           <VestingCard onActionComplete={triggerRefresh} />

From 297c8959d974346df944e454e3a7664b05d2b66b Mon Sep 17 00:00:00 2001
From: asalef10 <asalef10@gmail.com>
Date: Sun, 20 Apr 2025 14:02:08 +0300
Subject: [PATCH 09/13] Add color to APR

---
 .../components/StakingCardContent.tsx         | 65 +++++++++----------
 1 file changed, 32 insertions(+), 33 deletions(-)

diff --git a/src/pages/stakingPage/components/StakingCardContent.tsx b/src/pages/stakingPage/components/StakingCardContent.tsx
index 493a02a..90ca4e0 100644
--- a/src/pages/stakingPage/components/StakingCardContent.tsx
+++ b/src/pages/stakingPage/components/StakingCardContent.tsx
@@ -59,56 +59,59 @@ export const StakingCardContent: React.FC<StakingCardContentProps> = ({
 }) => (
   <Box
     bg="gray.950"
-    borderRadius="md"
-    p={4}
+    borderRadius="lg"
+    p={6}
     height="fit-content"
     border="1px solid"
     borderColor="gray.900"
     _hover={{ borderColor: 'gray.800' }}
   >
-    <Flex align="center" mb={3}>
-      <GrixLogo boxSize={6} mr={2} />
+    <Flex align="center" mb={5}>
+      <GrixLogo boxSize={8} mr={3} />
       <div>
-        <Heading size="sm" color="white" mb={1} fontWeight="700" letterSpacing="-0.01em">
+        <Heading size="md" color="white" mb={1} fontWeight="600">
           <BoldGrix text={title} />
         </Heading>
-        <Text color="gray.400" fontSize="sm" fontWeight="500">
+        <Text color="gray.400" fontSize="sm">
           <BoldGrix text={description} />
         </Text>
       </div>
     </Flex>
 
-    <SimpleGrid columns={2} spacing={4} mb={4}>
-      <VStack align="stretch" spacing={0.5}>
-        <Text fontSize="xs" color="gray.400" mb={0.5} fontWeight="500">
+    <SimpleGrid columns={2} spacing={5} mb={5}>
+      <VStack align="stretch">
+        <Text fontSize="sm" color="gray.500" mb={1}>
           Staked
         </Text>
-        <Text fontSize="lg" fontWeight="700" color="white" letterSpacing="-0.01em">
+        <Text fontSize="xl" fontWeight="700" color="white">
           {formatBalance(stakedAmount)}
         </Text>
       </VStack>
 
-      <VStack align="stretch" spacing={0.5}>
-        <Text fontSize="xs" color="gray.400" mb={0.5} fontWeight="500">
+      <VStack align="stretch">
+        <Text fontSize="sm" color="gray.500" mb={1}>
           Available to stake
         </Text>
-        <Text fontSize="lg" fontWeight="700" color="white" letterSpacing="-0.01em">
+        <Text fontSize="xl" fontWeight="700" color="white">
           {formatBalance(availableBalance)}
         </Text>
       </VStack>
 
-      <VStack align="stretch" spacing={0.5}>
-        <Text fontSize="xs" color="gray.400" mb={0.5} fontWeight="500">
+      <VStack align="stretch">
+        <Text fontSize="sm" color="gray.500" mb={1}>
           APR
         </Text>
-        <Text fontSize="lg" fontWeight="700" color="white" letterSpacing="-0.01em">
+        <Text fontSize="xl" fontWeight="700" color="green.200" display="flex" alignItems="center" gap={2}>
+          <Text as="span" color="green.300">
+            ↗
+          </Text>
           {apr.toFixed(2)}%
         </Text>
       </VStack>
     </SimpleGrid>
 
-    <VStack spacing={3} align="stretch">
-      <InputGroup size="md">
+    <VStack spacing={4} align="stretch">
+      <InputGroup size="lg">
         <Input
           placeholder="Enter amount"
           value={amount}
@@ -120,13 +123,12 @@ export const StakingCardContent: React.FC<StakingCardContentProps> = ({
           bg="gray.900"
           _hover={{ borderColor: 'gray.600' }}
           _focus={{ borderColor: 'primary.500' }}
-          height="40px"
-          fontSize="sm"
+          height="48px"
         />
-        <InputRightElement width="4rem" h="40px">
+        <InputRightElement width="4.5rem" h="48px">
           <Button
-            h="1.5rem"
-            size="xs"
+            h="1.75rem"
+            size="sm"
             onClick={handleMaxClick}
             variant="secondary"
             color="primary.400"
@@ -138,16 +140,15 @@ export const StakingCardContent: React.FC<StakingCardContentProps> = ({
         </InputRightElement>
       </InputGroup>
 
-      <HStack spacing={3}>
+      <HStack spacing={4}>
         {amount && needsApproval ? (
           <Button
             isLoading={isApproving}
             loadingText="Approving"
             onClick={handleApprove}
             variant="primary"
-            size="md"
-            height="40px"
-            fontSize="sm"
+            size="lg"
+            height="48px"
             isDisabled={!isAmountValid()}
           >
             Approve
@@ -158,9 +159,8 @@ export const StakingCardContent: React.FC<StakingCardContentProps> = ({
             loadingText="Staking"
             onClick={handleStake}
             variant="primary"
-            size="md"
-            height="40px"
-            fontSize="sm"
+            size="lg"
+            height="48px"
             isDisabled={!isAmountValid() || !amount}
           >
             Stake
@@ -171,9 +171,8 @@ export const StakingCardContent: React.FC<StakingCardContentProps> = ({
           loadingText="Unstaking"
           onClick={handleUnstake}
           variant="secondary"
-          size="md"
-          height="40px"
-          fontSize="sm"
+          size="lg"
+          height="48px"
           isDisabled={!isUnstakeAmountValid() || !amount}
           color="white"
           fontWeight="bold"

From 229612c9080df8a9f0e8bed9d85b15d4648748fd Mon Sep 17 00:00:00 2001
From: asalef10 <asalef10@gmail.com>
Date: Sun, 20 Apr 2025 14:05:51 +0300
Subject: [PATCH 10/13] Update text

---
 src/pages/stakingPage/components/VestingCard.tsx | 2 +-
 src/pages/stakingPage/index.tsx                  | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/stakingPage/components/VestingCard.tsx b/src/pages/stakingPage/components/VestingCard.tsx
index 0c78739..23d7922 100644
--- a/src/pages/stakingPage/components/VestingCard.tsx
+++ b/src/pages/stakingPage/components/VestingCard.tsx
@@ -208,7 +208,7 @@ export const VestingCard: React.FC<VestingCardProps> = ({ onActionComplete }) =>
         <VStack spacing={4} align="stretch">
           <InputGroup size="lg">
             <Input
-              placeholder="Enter amount"
+              placeholder="Enter esGrix amount"
               value={amount}
               onChange={handleAmountChange}
               type="text"
diff --git a/src/pages/stakingPage/index.tsx b/src/pages/stakingPage/index.tsx
index 0def7a9..5fefbc6 100644
--- a/src/pages/stakingPage/index.tsx
+++ b/src/pages/stakingPage/index.tsx
@@ -73,7 +73,7 @@ export const StakingPage: React.FC = () => {
           <GridItem>
             <StakingCard
               title="GRIX Token"
-              description="Stake your GRIX tokens for ETH fees and esGRIX incentives."
+              description="Stake your GRIX tokens for WETH fees and esGRIX incentives."
               type="gs"
               refreshTrigger={refreshTrigger}
               onActionComplete={triggerRefresh}
@@ -83,7 +83,7 @@ export const StakingPage: React.FC = () => {
           <GridItem>
             <StakingCard
               title="Escrowed GRIX (esGRIX)"
-              description="Stake your earned esGRIX for ETH fees and esGRIX incentives."
+              description="Stake your earned esGRIX for WETH fees and esGRIX incentives."
               type="esgs"
               refreshTrigger={refreshTrigger}
               onActionComplete={triggerRefresh}

From bea2ed516537411dc7dd04b6efd263f5868902fb Mon Sep 17 00:00:00 2001
From: asalef10 <asalef10@gmail.com>
Date: Sun, 20 Apr 2025 14:18:47 +0300
Subject: [PATCH 11/13] Removed the large Box wrapper

---
 src/pages/stakingPage/index.tsx | 132 ++++++++++++++++----------------
 1 file changed, 65 insertions(+), 67 deletions(-)

diff --git a/src/pages/stakingPage/index.tsx b/src/pages/stakingPage/index.tsx
index 5fefbc6..6ed64ba 100644
--- a/src/pages/stakingPage/index.tsx
+++ b/src/pages/stakingPage/index.tsx
@@ -1,4 +1,4 @@
-import { Box, Container, Grid, GridItem, Heading, Text, VStack } from '@chakra-ui/react';
+import { Container, Grid, GridItem, Heading, Text, VStack } from '@chakra-ui/react';
 import React, { useCallback, useEffect, useState } from 'react';
 import { useAccount } from 'wagmi';
 
@@ -58,77 +58,75 @@ export const StakingPage: React.FC = () => {
   }, [fetchUserRewards, refreshTrigger]);
 
   return (
-    <Box bg="gray.950" minH="100vh">
-      <Container maxW="1200px" px={{ base: 3, md: 4 }} py={6}>
-        <VStack align="flex-start" spacing={3} mb={6}>
-          <Heading size="lg" color="white" fontWeight="700" letterSpacing="-0.02em">
-            Staking
-          </Heading>
-          <Text color="gray.400" fontSize="md" fontWeight="500">
-            <BoldGrix text="Stake GRIX and esGRIX to start earning rewards" />
-          </Text>
-        </VStack>
+    <Container maxW="1200px" px={{ base: 3, md: 4 }} py={6}>
+      <VStack align="flex-start" spacing={3} mb={6} bg="gray.950" p={4} borderRadius="xl">
+        <Heading size="lg" color="white" fontWeight="700" letterSpacing="-0.02em">
+          Staking
+        </Heading>
+        <Text color="gray.400" fontSize="md" fontWeight="500">
+          <BoldGrix text="Stake GRIX and esGRIX to start earning rewards" />
+        </Text>
+      </VStack>
 
-        <Grid templateColumns={{ base: '1fr', lg: 'repeat(2, 1fr) 300px' }} gap={4} mb={6}>
-          <GridItem>
-            <StakingCard
-              title="GRIX Token"
-              description="Stake your GRIX tokens for WETH fees and esGRIX incentives."
-              type="gs"
-              refreshTrigger={refreshTrigger}
-              onActionComplete={triggerRefresh}
-            />
-          </GridItem>
+      <Grid templateColumns={{ base: '1fr', lg: 'repeat(2, 1fr) 300px' }} gap={4} mb={6}>
+        <GridItem>
+          <StakingCard
+            title="GRIX Token"
+            description="Stake your GRIX tokens for WETH fees and esGRIX incentives."
+            type="gs"
+            refreshTrigger={refreshTrigger}
+            onActionComplete={triggerRefresh}
+          />
+        </GridItem>
 
-          <GridItem>
-            <StakingCard
-              title="Escrowed GRIX (esGRIX)"
-              description="Stake your earned esGRIX for WETH fees and esGRIX incentives."
-              type="esgs"
-              refreshTrigger={refreshTrigger}
-              onActionComplete={triggerRefresh}
-            />
-          </GridItem>
+        <GridItem>
+          <StakingCard
+            title="Escrowed GRIX (esGRIX)"
+            description="Stake your earned esGRIX for WETH fees and esGRIX incentives."
+            type="esgs"
+            refreshTrigger={refreshTrigger}
+            onActionComplete={triggerRefresh}
+          />
+        </GridItem>
 
-          <GridItem rowSpan={2}>
-            <VStack align="stretch" spacing={4}>
-              <RewardsCard data={userRewardData} refetchData={handleDataRefresh} />
+        <GridItem rowSpan={2}>
+          <VStack align="stretch" spacing={4}>
+            <RewardsCard data={userRewardData} refetchData={handleDataRefresh} />
 
-              <Box
-                bg="gray.950"
-                borderRadius="md"
-                p={4}
-                border="1px solid"
-                borderColor="gray.900"
-                _hover={{ borderColor: 'gray.800' }}
-                as="a"
-                href="https://docs.grix.finance/gitbook/tokenomics/overview"
-                target="_blank"
-                rel="noopener noreferrer"
-                cursor="pointer"
-                transition="all 0.2s"
-                _active={{ transform: 'scale(0.98)' }}
-              >
-                <VStack align="stretch" spacing={1}>
-                  <Heading size="sm" color="white" fontWeight="700" letterSpacing="-0.01em">
-                    Learn about Staking
-                  </Heading>
-                  <Text color="gray.400" fontSize="sm" fontWeight="500">
-                    Check out our staking walkthrough and guides
-                  </Text>
-                </VStack>
-              </Box>
+            <VStack
+              align="stretch"
+              spacing={1}
+              bg="gray.950"
+              borderRadius="md"
+              p={4}
+              border="1px solid"
+              borderColor="gray.900"
+              _hover={{ borderColor: 'gray.800' }}
+              as="a"
+              href="https://docs.grix.finance/gitbook/tokenomics/overview"
+              target="_blank"
+              rel="noopener noreferrer"
+              cursor="pointer"
+              transition="all 0.2s"
+              _active={{ transform: 'scale(0.98)' }}
+            >
+              <Heading size="sm" color="white" fontWeight="700" letterSpacing="-0.01em">
+                Learn about Staking
+              </Heading>
+              <Text color="gray.400" fontSize="sm" fontWeight="500">
+                Check out our staking walkthrough and guides
+              </Text>
             </VStack>
-          </GridItem>
-        </Grid>
+          </VStack>
+        </GridItem>
+      </Grid>
 
-        <VStack align="stretch" spacing={3} mb={6}>
-          <Heading size="md" color="white" fontWeight="700" letterSpacing="-0.02em" mb={1}>
-            Vesting
-          </Heading>
-          <VestingCard onActionComplete={triggerRefresh} />
-        </VStack>
-      </Container>
-    </Box>
+      <VStack align="stretch" spacing={3} mb={6} bg="gray.950" p={4} borderRadius="xl">
+        <Heading size="md" color="white" fontWeight="700" letterSpacing="-0.02em" mb={1}>
+          Vesting
+        </Heading>
+        <VestingCard onActionComplete={triggerRefresh} />
+      </VStack>
+    </Container>
   );
 };

From ed6a3f494cff94c10e59f94bd38861c16405f253 Mon Sep 17 00:00:00 2001
From: asalef10 <asalef10@gmail.com>
Date: Sun, 20 Apr 2025 14:22:50 +0300
Subject: [PATCH 12/13] update vesting width

---
 src/pages/stakingPage/index.tsx | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/pages/stakingPage/index.tsx b/src/pages/stakingPage/index.tsx
index 6ed64ba..ba6294c 100644
--- a/src/pages/stakingPage/index.tsx
+++ b/src/pages/stakingPage/index.tsx
@@ -121,12 +121,16 @@ export const StakingPage: React.FC = () => {
         </GridItem>
       </Grid>
 
-      <VStack align="stretch" spacing={3} mb={6} bg="gray.950" p={4} borderRadius="xl">
-        <Heading size="md" color="white" fontWeight="700" letterSpacing="-0.02em" mb={1}>
-          Vesting
-        </Heading>
-        <VestingCard onActionComplete={triggerRefresh} />
-      </VStack>
+      <Grid templateColumns={{ base: '1fr', lg: 'repeat(2, 1fr) 300px' }} gap={4} mb={6}>
+        <GridItem colSpan={{ base: 1, lg: 2 }} 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} />
+          </VStack>
+        </GridItem>
+      </Grid>
     </Container>
   );
 };

From 8cdfa93aa4977b5be2a08843503dae772c0ea1af Mon Sep 17 00:00:00 2001
From: asalef10 <asalef10@gmail.com>
Date: Sun, 20 Apr 2025 14:32:00 +0300
Subject: [PATCH 13/13] replace es -> ex | esgs -> esgx

---
 src/pages/stakingPage/components/StakingCard.tsx | 16 +++++++---------
 src/pages/stakingPage/index.tsx                  |  4 ++--
 2 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/pages/stakingPage/components/StakingCard.tsx b/src/pages/stakingPage/components/StakingCard.tsx
index be8b039..d075fa9 100644
--- a/src/pages/stakingPage/components/StakingCard.tsx
+++ b/src/pages/stakingPage/components/StakingCard.tsx
@@ -22,7 +22,7 @@ import { StakingCardContent } from './StakingCardContent.js';
 type StakingCardProps = {
   title: string;
   description: string;
-  type: 'gs' | 'esgs';
+  type: 'gx' | 'esgx';
   refreshTrigger: number;
   onActionComplete: () => void;
 };
@@ -45,7 +45,7 @@ export const StakingCard: React.FC<StakingCardProps> = ({
   const [apr, setApr] = useState(0);
   const [_showError, setShowError] = useState(false);
   const toast = useToast();
-  const tokenAddress = type === 'gs' ? stakingContracts.grixToken.address : stakingContracts.esGRIXToken.address;
+  const tokenAddress = type === 'gx' ? stakingContracts.grixToken.address : stakingContracts.esGRIXToken.address;
 
   const showToast = useCallback(
     (title: string, description: string, status: 'success' | 'error') => {
@@ -64,7 +64,7 @@ export const StakingCard: React.FC<StakingCardProps> = ({
     if (!address) return;
 
     try {
-      if (type === 'esgs') {
+      if (type === 'esgx') {
         const staked = await getEsGrixStakedAmount(address);
         setStakedAmount(staked);
       } else {
@@ -107,7 +107,7 @@ export const StakingCard: React.FC<StakingCardProps> = ({
   }, [fetchBalance, fetchStakedAmount, fetchAPR, refreshTrigger]);
 
   const handleMaxClick = () => {
-    if (type === 'esgs') {
+    if (type === 'esgx') {
       setAmount(stakedAmount);
     } else {
       setAmount(availableBalance);
@@ -169,9 +169,7 @@ export const StakingCard: React.FC<StakingCardProps> = ({
     [fetchBalance, fetchStakedAmount, fetchAPR, onActionComplete]
   );
 
-  // Add a useEffect to handle refreshTrigger changes without causing infinite loops
   useEffect(() => {
-    // Skip the initial render
     if (refreshTrigger > 0) {
       void refreshAllData(false);
     }
@@ -209,7 +207,7 @@ export const StakingCard: React.FC<StakingCardProps> = ({
       setIsStaking(true);
       const amountBigInt = parseEther(amount);
 
-      if (type === 'gs') {
+      if (type === 'gx') {
         await stakeGs(amountBigInt);
       } else {
         await stakeEsGs(amountBigInt);
@@ -231,7 +229,7 @@ export const StakingCard: React.FC<StakingCardProps> = ({
     if (!amount || !address) return;
 
     try {
-      const currentStaked = type === 'gs' ? await getStakedAmount(address) : await getEsGrixStakedAmount(address);
+      const currentStaked = type === 'gx' ? await getStakedAmount(address) : await getEsGrixStakedAmount(address);
 
       if (Number(amount) > Number(currentStaked)) {
         showToast('Invalid Amount', 'Amount exceeds staked balance', 'error');
@@ -242,7 +240,7 @@ export const StakingCard: React.FC<StakingCardProps> = ({
       setIsUnstaking(true);
       const amountBigInt = parseEther(amount);
 
-      if (type === 'gs') {
+      if (type === 'gx') {
         await unstakeGs(amountBigInt);
       } else {
         await unstakeEsGs(amountBigInt);
diff --git a/src/pages/stakingPage/index.tsx b/src/pages/stakingPage/index.tsx
index ba6294c..58ca768 100644
--- a/src/pages/stakingPage/index.tsx
+++ b/src/pages/stakingPage/index.tsx
@@ -73,7 +73,7 @@ export const StakingPage: React.FC = () => {
           <StakingCard
             title="GRIX Token"
             description="Stake your GRIX tokens for WETH fees and esGRIX incentives."
-            type="gs"
+            type="gx"
             refreshTrigger={refreshTrigger}
             onActionComplete={triggerRefresh}
           />
@@ -83,7 +83,7 @@ export const StakingPage: React.FC = () => {
           <StakingCard
             title="Escrowed GRIX (esGRIX)"
             description="Stake your earned esGRIX for WETH fees and esGRIX incentives."
-            type="esgs"
+            type="esgx"
             refreshTrigger={refreshTrigger}
             onActionComplete={triggerRefresh}
           />