APT-1658 APT-1660 APT-1665 APT-1667 APT-1668 APT-1666 APT-1662 (#25)

* fixes * APT-1658 * APT-1660 * APT-1661 * APT-1667 * APT-1665 * APT-1666 * APT-1662
Zilliqa · Jan 23, 2025 · 24b71b5 · 24b71b5
1 parent e63036d
commit 24b71b5
Show file tree

Hide file tree

Showing 14 changed files with 120 additions and 72 deletions.
diff --git a/src/assets/svgs/arrow-back-white.svg b/src/assets/svgs/arrow-back-white.svg
diff --git a/src/assets/svgs/logo.svg b/src/assets/svgs/logo.svg
diff --git a/src/components/loginView.tsx b/src/components/loginView.tsx
@@ -19,19 +19,19 @@ const CustomConnectButton = () => {
         // Not connected
         if (!account || !chain) {
           return (
-            <button
+            <Button
               onClick={openConnectModal}
               className="btn-primary-gradient-aqua !w-fit px-14 group flex items-center"
             >
-              Sign In / Connect Wallet
+                Connect Wallet
               <Image
                 className="ml-3 h-[24px] w-[24px] transform transition-transform ease-out duration-500 group-hover:translate-x-2"
                 src={ArrowRight}
                 alt={`arrow icon`}
                 width={24}
                 height={24}
               />
-            </button>
+            </Button>
           );
         }
 
@@ -85,7 +85,7 @@ const LoginView: React.FC = () => {
         loading={isDummyWalletConnecting}
         className="btn-primary-gradient-aqua-lg !w-fit px-14 group"
       >
-        Sign In / Connect Wallet
+          Connect Wallet
         <Image
                 className="ml-3 h-[24px] w-[24px] transform transition-transform ease-out duration-500 group-hover:translate-x-2"
                 src={ArrowRight}

diff --git a/src/components/sortBtn.tsx b/src/components/sortBtn.tsx
@@ -19,7 +19,7 @@ const SortBtn: React.FC<SortBtnProps> = ({ variable, isClicked, onClick }) => {
         viewBox="0 0 24 24"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
-        className={`duration-700 stroke-gray-600 group-hover:stroke-white ease-in-out ${isClicked ? 'scale-y-[-1]' : ''}`}
+        className={`duration-700 stroke-gray1 group-hover:stroke-white ease-in-out ${isClicked ? 'scale-y-[-1]' : ''}`}
       >
         <path
           d="M16 3V21"

diff --git a/src/components/stakingCalculator.tsx b/src/components/stakingCalculator.tsx
@@ -87,9 +87,11 @@ const StakingCalculator: React.FC = () => {
           <div className="flex justify-between gap-10 my-2.5 lg:my-7.5 p-3 lg:p-5 xl:p-7 bg-darkbg rounded-3xl items-center">
             <div className="h-fit self-center">
               <Input
-                className={`h3 flex items-baseline !bg-transparent !border-transparent ${
-                  zilToStakeOk ? '!text-gray4' : '!text-red1'
-                }`}
+                className='h3 flex items-baseline !bg-transparent !border-transparent !text-white1'
+                //   ${
+                //   zilToStakeOk ? '!text-white1' : '!text-red1'
+                // }
+
                 value={zilToStake}
                 onChange={handleChange}
                 onFocus={handleFocus}
@@ -171,7 +173,7 @@ const StakingCalculator: React.FC = () => {
                   )}
               </div>
               <div className=" regular-base text-aqua1 flex flex-row xl:gap-5">
-              <Tooltip placement='top' arrow={true} color='#686A6C' className=' mr-1' title="Annual Percentage Rate">
+              <Tooltip placement='top' arrow={true} color='#555555' className=' mr-1' title="Annual Percentage Rate">
                 <span>APR </span>
               </Tooltip>
                 {stakingPoolForView!.stakingPool.data ? (

diff --git a/src/components/stakingPoolCard.tsx b/src/components/stakingPoolCard.tsx
@@ -22,7 +22,7 @@ const StakingPoolCard: React.FC<StakingPoolCardProps> = ({
       className={`${
         isStakingPoolSelected
           ? 'gradient-bottom-border '
-          : 'border-b-[1.5px] border-black2 rounded-10 gradient-bottom-border-hover bg-black3'
+          : 'border-b-[1.5px] border-black2 rounded-10 gradient-bottom-border-hover bg-black1'
       } ${isStakingPoolSelected && 'bg-black'} hover:cursor-pointer`}
       onClick={onClick}
     >
@@ -43,7 +43,7 @@ const StakingPoolCard: React.FC<StakingPoolCardProps> = ({
         <div className="grid w-full">
           <div className="flex justify-between items-center lg:mb-2">
             <div className="flex ">
-              <h3 className="h4 text-white2">
+              <h3 className="h4 text-white1">
                 {stakingPoolData.definition.name}
               </h3>
               <div className="base2 ml-2.5">
@@ -112,7 +112,7 @@ const StakingPoolCard: React.FC<StakingPoolCardProps> = ({
 
 
               <div className="flex base-medium max-md:order-1 ">  
-              <Tooltip placement='top' arrow={true} color='#686A6C' className=' mr-1' title="Annual Percentage Rate">
+              <Tooltip placement='top' arrow={true} color='#555555' className=' mr-1' title="Annual Percentage Rate">
                 <span>APR </span>
               </Tooltip>
 
@@ -137,7 +137,7 @@ const StakingPoolCard: React.FC<StakingPoolCardProps> = ({
                   )}`}
               </>
             ) : (
-              <span className="text-gray2">- {stakingPoolData.definition.tokenSymbol}</span>
+              <span className="text-gray1">- {stakingPoolData.definition.tokenSymbol}</span>
             )}
           </div>
           </div>

diff --git a/src/components/stakingPoolDetailsView.tsx b/src/components/stakingPoolDetailsView.tsx
@@ -57,7 +57,7 @@ const StakingPoolDetailsView: React.FC<
       ) : (
         <div className="animated-gradient h-[1.5em] w-[4em]"></div>
       )}
-      <div className="text-gray2 info-label xl:whitespace-nowrap">
+      <div className="text-gray1 info-label xl:whitespace-nowrap">
         {title}
       </div>
     </div>
@@ -108,11 +108,12 @@ const StakingPoolDetailsView: React.FC<
   return (
     <div
       className="relative overflow-y-auto max-h-[calc(90vh-10vh)] sm:max-h-[calc(90vh-15vh)]
-      scrollbar-thin scrollbar-thumb-gray1 scrollbar-track-gray3 hover:scrollbar-thumb-gray2 pb-2"
+      scrollbar-thin scrollbar-thumb-gray1 scrollbar-track-gray1 hover:scrollbar-thumb-gray1 pb-2
+      pr-4"
     >
       <div className="items-center flex justify-between py-1 lg:py-7.5">
         <div className="max-lg:ms-1 items-center flex">
-          <span className="hero lg:h2 text-white2">
+          <span className="hero lg:h2 text-white1">
             {stakingPoolData.definition.name}
           </span>
           <span className="body1 lg:h4 text-black2 ml-2.5">
@@ -208,8 +209,8 @@ const StakingPoolDetailsView: React.FC<
             key={pane}
             className={`body1 lg:base text-center py-7 cursor-pointer border-solid border-b ${
               selectedPane === pane
-                ? 'text-white2 border-gradient-1'
-                : 'text-gray2 border-black2'
+                ? 'text-white1 border-gradient-1'
+                : 'text-gray1 border-black2'
             } `}
             onClick={() => setSelectedPane(pane)}
           >

diff --git a/src/components/stakingPoolsList.tsx b/src/components/stakingPoolsList.tsx
@@ -50,7 +50,7 @@ const StakingPoolsList: React.FC = () => {
 
   return (
     <>
-      <div className="h3 text-white2 sm:max-lg:w-1/4 mb-4 max-h-[10vh]">
+      <div className="h3 text-white1 sm:max-lg:w-1/4 mb-4 max-h-[10vh]">
         Liquid Validators
       </div>
 
@@ -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 md:px-7 lg:px-2 xl:px-8">
+       scrollbar-thin scrollbar-thumb-gray1 scrollbar-track-gray1 hover:scrollbar-thumb-gray1 pb-20 pr-4">
         {sortedStakingPoolsData.map(({ stakingPool, userData }) => (
           <StakingPoolCard
             key={stakingPool.definition.id}

diff --git a/src/components/unstakingCalculator.tsx b/src/components/unstakingCalculator.tsx
@@ -85,9 +85,10 @@ const UnstakingCalculator: React.FC = () => {
           <div className="flex justify-between gap-10 my-2.5 lg:my-7.5 p-3 lg:p-5 xl:p-7 bg-darkbg rounded-3xl items-center">
             <div className="h-fit self-center">
               <Input
-                className={`h3 flex items-baseline !bg-transparent !border-transparent ${
-                  zilToUnstakeOk ? '!text-gray4' : '!text-red1'
-                }`}
+                className='h3 flex items-baseline !bg-transparent !border-transparent !text-white1'
+                //    ${
+                //   zilToUnstakeOk ? '!text-white1' : '!text-red1'
+                // }
                 value={zilToUnstake}
                 onChange={handleChange}
                 onBlur={handleBlur}
@@ -187,7 +188,7 @@ const UnstakingCalculator: React.FC = () => {
                 </div>
               </div>
               <div className=" regular-base flex flex-row xl:gap-5">
-              <Tooltip placement='top' arrow={true} color='#686A6C' className=' mr-1' title="Annual Percentage Rate">
+              <Tooltip placement='top' arrow={true} color='#555555' className=' mr-1' title="Annual Percentage Rate">
                 <span>APR </span>
               </Tooltip>
                 {stakingPoolForView!.stakingPool.data ? (

diff --git a/src/components/withdrawUnstakedZilPanel.tsx b/src/components/withdrawUnstakedZilPanel.tsx
@@ -63,7 +63,7 @@ const WithdrawZilPanel: React.FC<WithdrawZilPanelProps> = ({
           <div className="flex flex-col min-h-[114px] lg:min-h-[157px] xl:min-h-[173px] justify-evenly gap-2 my-2.5 lg:my-7.5 py-2 lg:py-6 xl:py-8 px-3 lg:px-7.5 xl:px-10 bg-gradientbg rounded-3xl w-full"
             key={claimIdx}
           >
-            <div className="items-center h4 w-full flex justify-between text-gray4">
+            <div className="items-center h4 w-full flex justify-between text-white1">
               {stakingPoolData.data ? (
                  <div className='flex'>
                  <div>
@@ -92,9 +92,9 @@ const WithdrawZilPanel: React.FC<WithdrawZilPanelProps> = ({
         ))
       ) : !!pendingUnstake?.length ? (
         <div className="flex flex-col min-h-[114px] lg:min-h-[157px] xl:min-h-[173px] justify-evenly gap-2 my-2.5 lg:my-7.5 py-2 lg:py-6 xl:py-8 px-3 lg:px-7.5 xl:px-10 bg-gradientbg rounded-3xl w-full">
-             <div className="body2 text-gray2">
+             <div className="body2 text-gray1">
             Next available reward             </div>
-            <div className=" h4 mt-2 w-full flex justify-between text-gray4">
+            <div className=" h4 mt-2 w-full flex justify-between text-white1">
 
               {stakingPoolData.data ? (
                 <div>
@@ -112,7 +112,7 @@ const WithdrawZilPanel: React.FC<WithdrawZilPanelProps> = ({
             </div>
          </div>
       ) : (
-        <div className="flex justify-center items-center my-32 body2 text-gray2 ">
+        <div className="flex justify-center items-center my-32 body2 text-gray1 ">
           No available Claims
         </div>
       )}
@@ -127,7 +127,7 @@ const WithdrawZilPanel: React.FC<WithdrawZilPanelProps> = ({
             <div className="flex justify-between mb-3 items-center" key={claimIdx}>
               {stakingPoolData.data ? (
                 <div className='flex gap-2.5'>
-                 <div className='body1 text-gray4'>
+                 <div className='body1 text-white1'>
                  {parseFloat(
                     formatUnits(claim.zilAmount, 18)
                   ).toFixed(3)}{' '}
@@ -137,7 +137,7 @@ const WithdrawZilPanel: React.FC<WithdrawZilPanelProps> = ({
               ) : (
                 <div className="w-[4em] h-[1em] animated-gradient" />
               )}
-              <div className='regular-base text-gray4'>{getHumanFormDuration(claim.availableAt)}</div>
+              <div className='regular-base text-white1'>{getHumanFormDuration(claim.availableAt)}</div>
             </div>
           ))}
         </div>

diff --git a/src/components/withdrawZilView.tsx b/src/components/withdrawZilView.tsx
@@ -23,7 +23,7 @@ const WithdrawZilView: React.FC = () => {
 
   return (
     <div className="relative overflow-y-auto max-h-[calc(90vh-15vh)]   
-    scrollbar-thin scrollbar-thumb-gray1 scrollbar-track-gray3 hover:scrollbar-thumb-gray2
+    scrollbar-thin scrollbar-thumb-gray1 scrollbar-track-gray1 hover:scrollbar-thumb-gray1
      flex flex-col gap-2" >
       <div className=" text-center lg:text-end max-h-[20vh]">
         <h1 className="hero text-white mt-4">
@@ -39,7 +39,9 @@ const WithdrawZilView: React.FC = () => {
         unstakingItems.length > 0 ? (
 
           <div className="grid grid-cols-1 gap-4 lg:gap-5 overflow-y-auto  max-h-[calc(90vh-30vh)]
-          scrollbar-thin scrollbar-thumb-gray1 scrollbar-track-gray3 hover:scrollbar-thumb-gray2 lg:pb-10">
+          scrollbar-thin scrollbar-thumb-gray1 scrollbar-track-gray1 hover:scrollbar-thumb-gray1 lg:pb-10
+          pr-4
+          ">
             {
               unstakingItems.map((item, claimIdx) => (
                 <div
@@ -93,7 +95,7 @@ const WithdrawZilView: React.FC = () => {
                     </div>
                     <div className="max-lg:w-1/2 lg:mt-2.5">
                       <Button
-                        className="btn-primary-white2"
+                        className="btn-primary-white1"
                         onClick={() => selectStakingPoolForView(item.stakingPool.definition.id)}
                       >
                         View