Tasks: APT-1637 APT-1638 APT-1639 APT-1640 APT-1641 APT-1642 APT-1643

src/components/stakingPoolCard.tsx

@@ -79,24 +79,24 @@ const StakingPoolCard: React.FC<StakingPoolCardProps> = ({
                 {
                   stakingPoolData.data ? (
                     <div
-                      className={`base max-xs:ml-2 xs:max-lg:ml-6 ${
+                      className={`base-medium max-xs:ml-2 xs:max-lg:ml-6 ${
                         stakingPoolData.data.votingPower * 100 >= 50
                           ? 'text-red1'
                           : stakingPoolData.data.votingPower * 100 >= 30
                           ? 'text-orange1'
-                          : 'text-gray4'
+                          : ''
                       }`}
                     >
                       VP {(stakingPoolData.data.votingPower * 100).toPrecision(3)}%
                     </div>
                   ) : (
                     <>
-                      <span className='base max-xs:ml-2 xs:max-lg:ml-6'>VP</span>
+                      <span className='base-medium max-xs:ml-2 xs:max-lg:ml-6'>VP</span>
                       <span className="w-[3em] ml-1 animated-gradient" />
                     </>
                   )
                 }
-                <div className="flex base ml-2 xs:ml-6 text-gray4">
+                <div className="flex base-medium ml-2 xs:ml-6">
                   Commission{' '}
                   {
                     stakingPoolData.data ? (
@@ -111,7 +111,7 @@ const StakingPoolCard: React.FC<StakingPoolCardProps> = ({
               </div>
 
 
-              <div className="flex base text-gray2 max-md:order-1 ">  
+              <div className="flex base-medium max-md:order-1 ">  
               <Tooltip placement='top' arrow={true} color='#686A6C' className=' mr-1' title="Annual Percentage Rate">
                 <span>APR </span>
               </Tooltip>

src/components/stakingPoolDetailsView.tsx

@@ -17,6 +17,8 @@ import { DateTime } from 'luxon';
 import { useState } from 'react';
 import { useWatchAsset } from 'wagmi';
 import { useWalletClient } from 'wagmi';
+import Plus from '../assets/svgs/plus.svg'
+import Image from 'next/image';
 
 interface StakingPoolDetailsViewProps {
   stakingPoolData: StakingPool;
@@ -120,9 +122,16 @@ const StakingPoolDetailsView: React.FC<
         <div>
           <Button
             onClick={handleClickAaddToken}
-            className="btn-primary-gradient-aqua-lg lg:btn-primary-gradient-aqua"
+            className="btn-primary-gradient-aqua-lg lg:btn-primary-gradient-aqua group"
           >
-            +
+            <Image
+              className="h-[24px] w-[24px] transform transition-transform ease-out duration-500 group-hover:rotate-180"
+              src={Plus}
+              alt={`arrow icon`}
+              width={24}
+              height={24}
+            /> 
+              <span className='!hidden sm:!block lg:!hidden xl:!block '>Add Token</span> 
           </Button>
         </div>
       </div>

src/components/stakingPoolsList.tsx

@@ -73,7 +73,7 @@ const StakingPoolsList: React.FC = () => {
       </div>
 
       <div className="grid grid-cols-1 gap-2.5 lg:gap-4 overflow-y-auto max-h-[calc(90vh-25vh)]
-       scrollbar-thin scrollbar-thumb-gray1 scrollbar-track-gray3 hover:scrollbar-thumb-gray2 pb-20">
+       scrollbar-thin scrollbar-thumb-gray1 scrollbar-track-gray3 hover:scrollbar-thumb-gray2 pb-20 md:px-7 lg:px-2 xl:px-8">
         {sortedStakingPoolsData.map(({ stakingPool, userData }) => (
           <StakingPoolCard
             key={stakingPool.definition.id}

src/pages/_app.tsx

@@ -19,59 +19,95 @@ export default function App({ Component, pageProps }: AppProps) {
   const queryClient = new QueryClient();
   const [appConfig, setAppConfig] = useState<AppConfig | null>(null);
   const [loadingPercentage, setLoadingPercentage] = useState(0);
-
-  useEffect(() => {
-    fetch("/api/config")
-      .then((res) => res.json())
-      .then(setAppConfig)
-      .catch(console.error);
-  }, []);
+  const [displayedPercentage, setDisplayedPercentage] = useState(0);
+  const [fadeOut, setFadeOut] = useState(false); 
 
   useEffect(() => {
     const fetchConfig = async () => {
+      const startTime = Date.now();  
+      let progress = 0;
+
+       const interval = setInterval(() => {
+        progress += 10;
+        setLoadingPercentage(progress);
+        if (progress >= 100) {
+          clearInterval(interval);
+        }
+      }, 50); 
+
       try {
         const res = await fetch("/api/config");
-        const reader = res.body?.getReader();
-        const contentLength = res.headers.get("Content-Length");
-
-        if (reader && contentLength) {
-          const totalLength = parseInt(contentLength, 10);
-          let loaded = 0;
-            while (true) {
-            const { done, value } = await reader.read();
-            if (done) break;
-
-            loaded += value?.length || 0;
-            const progress = Math.round((loaded / totalLength) * 100);
-            setLoadingPercentage(progress);
-          }
-        }
-
         const data = await res.json();
-        setAppConfig(data);
+        const elapsedTime = Date.now() - startTime;
+
+        const remainingTime = Math.max(1000 - elapsedTime, 0);  
+        setTimeout(() => {
+          clearInterval(interval);
+          setLoadingPercentage(100);  
+          setTimeout(() => {
+          setAppConfig(data);  
+        }, 500);
+          setFadeOut(true);
+        }, remainingTime);
       } catch (error) {
-        console.error(error);
+        console.error("Error loading config:", error);
       }
     };
-  
+
     fetchConfig();
   }, []);
 
+  useEffect(() => {
+    const duration = 500; 
+    const frameRate = 16; 
+    const totalFrames = duration / frameRate;
+    const increment = (loadingPercentage - displayedPercentage) / totalFrames;
 
- if (!appConfig) {
-    return( 
-    <div className="h-screen bg-black text-white1 ">
-      <div className="h-full flex flex-col justify-between">
-    <div className="w-full h-10 overflow-hidden">
+    if (increment !== 0) {
+      let currentFrame = 0;
+      const easingInterval = setInterval(() => {
+        setDisplayedPercentage((prev) => {
+          currentFrame += 1;
+          const next = prev + increment;
+          if (
+            currentFrame >= totalFrames ||
+            (increment > 0 && next >= loadingPercentage) ||
+            (increment < 0 && next <= loadingPercentage)
+          ) {
+            clearInterval(easingInterval);
+            return loadingPercentage;
+          }
+          return next;
+        });
+      }, frameRate);
+
+      return () => clearInterval(easingInterval);
+    }
+  }, [loadingPercentage]);
+
+  if (!appConfig) {
+    return (
       <div
-        className="h-full bg-colorful-gradient"
-        style={{ width: `${loadingPercentage}%` }}
-      ></div>
-    </div>
-    <div className="self-end text-80 lg:text-114 font-int-extrabold mr-7">{loadingPercentage}%</div>
-  </div></div>
-  ) 
-}
+      className={`h-screen bg-black text-white transition-opacity duration-500 ${
+        fadeOut ? "opacity-0" : "opacity-100"
+      }`}
+     >
+         <div className="h-full flex flex-col justify-between">
+          <div className="w-full h-10 overflow-hidden">
+            <div
+              className="h-full bg-colorful-gradient"
+              style={{
+                width: `${displayedPercentage}%`, 
+              }}
+            ></div>
+          </div>
+          <div className="self-end text-80 lg:text-114 font-int-extrabold mr-7">
+            {Math.round(displayedPercentage)}%
+          </div>
+        </div>
+      </div>
+    );
+  }
 
   return (
     <AppConfigStorage.Provider initialState={{ appConfig }}>

src/pages/index.tsx

@@ -12,12 +12,19 @@ import { WalletOutlined } from '@ant-design/icons';
 import { ConnectButton } from '@rainbow-me/rainbowkit';
 import { Button, Modal } from 'antd';
 import Image from 'next/image';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import ArrowBack from '../assets/svgs/arrow-back-white.svg'
 import ArrowNext from '../assets/svgs/arrow-next-black.svg'
 
 
 const HomePage = () => {
+
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+       setIsVisible(true);
+   }, []);
+
   const {
     appConfig
   } = AppConfigStorage.useContainer();
@@ -48,7 +55,7 @@ const HomePage = () => {
   const [mobileShowClaims, setMobileShowClaims] = useState<boolean>(false);
 
   const mobileOverlayWrapper = (children: React.ReactNode) => (
-    <div className='absolute lg:hidden top-0 left-0 z-25 h-full w-full bg-black p-4 lg:pt-[10vh]'>
+    <div className='absolute lg:hidden top-0 left-0 z-25 h-full w-full bg-black p-4'>
       {children}
     </div>
   )
@@ -209,11 +216,13 @@ const HomePage = () => {
   )
 
   return (
-    <div className="h-screen w-screen relative">
+    <div  className={`h-screen w-screen relative transition-opacity duration-1000 ${
+      isVisible ? "opacity-100" : "opacity-0"
+      }`}>
 
       {/* Header */}
       <div className="h-[10vh] w-full flex items-center justify-center text-white border-b-2 border-white">
-        <div className="flex max-w-screen-2xl w-full justify-between px-4">
+        <div className="flex max-w-screen-2xl w-full justify-between px-4 lg:px-8 xl:px-12 ">
 
           <div className="flex items-center">
             <Image
@@ -233,20 +242,20 @@ const HomePage = () => {
                 <>
                   {
                     connectedWalletType === ConnectedWalletType.MockWallet ? (
-                      <div>
-                        <div
-                          className='group w-32 relative btn-primary-cyan rounded-lg h-[2.5em]'
+
+                        <Button type="primary"
+                          className='group relative btn-primary-gradient-aqua-lg min-w-[214px] lg:min-w-[160px]'
                           onClick={disconnectDummyWallet}
                         >
-                          <div className='absolute inset-0 group-hover:opacity-0 transition-opacity flex items-center justify-center'>
+                          <div className=' group-hover:hidden transition-opacity flex items-center justify-center'>
                             <WalletOutlined className="mr-2 !text-black-100"/>
                             {formatAddress(walletAddress || '')}
                           </div>
-                          <span className='absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center'>
+                            <span className=' !hidden group-hover:!block transition-opacity  items-center justify-center'>
                             Disconnect
-                          </span>
-                        </div>
-                      </div>
+                          </span>  
+                        </Button>
+
                     ) : (
                       <ConnectButton />
                     )
@@ -260,7 +269,7 @@ const HomePage = () => {
 
       <div className={` ${(mobileShowClaims || stakingPoolForView || availableForUnstaking.length + pendingUnstaking.length != 0) ? 'lg:h-[90vh] h-[80vh] ' : ' h-[90vh] ' } relative max-w-screen-2xl mx-auto 
       overflow-y-hidden `}>
-        <div className='grid grid-cols-1 lg:grid-cols-2 gap-5 px-4 pt-3 lg:pt-[10vh]'>
+        <div className='grid grid-cols-1 lg:grid-cols-2 gap-5 px-4 lg:px-8 xl:px-12 pt-3 lg:pt-[4vh]'>
         {/* Left column */}
         <div className="bg-black p-2 xs:p-6 rounded-2.5xl">
           <StakingPoolsList />

src/styles/globals.css

@@ -152,6 +152,10 @@ body {
     @apply font-int-semibold  text-12 xs:text-14 lg:text-16 leading-5 lg:leading-6  text-gray2;
   }
 
+  .base-medium {
+    @apply font-int-medium  text-12 xs:text-14 lg:text-16 leading-5 lg:leading-6  text-gray2 ;
+  }
+
   .regular-base {
     @apply font-int-regular text-12 xs:text-14 lg:text-16 leading-5 lg:leading-6  text-gray2;
   }