minor visual fixes

Zilliqa · Dec 24, 2024 · f300ab6 · f300ab6
1 parent bebc348
commit f300ab6
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 28 deletions.
diff --git a/src/components/withdrawUnstakedZilPanel.tsx b/src/components/withdrawUnstakedZilPanel.tsx
@@ -74,17 +74,15 @@ const WithdrawZilPanel: React.FC<WithdrawZilPanelProps> = ({
               ) : (
                 <div className="w-[4em] h-[1em] animated-gradient" />
               )}
-
-<div className='lg:w-1/3 lg:max-w-[218px]'>
-              <Button
-                className="btn-primary-gradient-aqua"
-                onClick={() => claim(item.address)}
-                loading={isClaimingInProgress}
-                >
-                Claim 
-              </Button>
-</div>
-
+              <div className='lg:w-1/3 lg:max-w-[218px]'>
+                <Button
+                  className="btn-primary-gradient-aqua"
+                  onClick={() => claim(item.address)}
+                  loading={isClaimingInProgress}
+                  >
+                  Claim 
+                </Button>
+              </div>  
             </div>
           </div>
         ))
@@ -126,15 +124,11 @@ const WithdrawZilPanel: React.FC<WithdrawZilPanelProps> = ({
               {stakingPoolData.data ? (
                 <div className='flex gap-2.5'>
                  <div className='body1 text-gray4'>
-                 200.00 avZIL 
-               </div>
-
-                <div className='regular-base text-gray4 mt-1'>
-                  ={' '}{parseFloat(
+                 {parseFloat(
                     formatUnits(claim.zilAmount, 18)
                   ).toFixed(3)}{' '}
                   ZIL
-                </div>
+               </div>
                 </div>
               ) : (
                 <div className="w-[4em] h-[1em] animated-gradient" />

diff --git a/src/misc/formatting.ts b/src/misc/formatting.ts
@@ -14,21 +14,27 @@ export function getHumanFormDuration(availableAt: DateTime) {
   const units = availableAt.diff(DateTime.now()).shiftTo('days', 'hours', 'minutes').toHuman({
     unitDisplay: 'long',
     listStyle: 'narrow',
+    maximumFractionDigits: 0,
   })
 
-  const mostSignificantUnit = units.split(',').reduce((acc, unit) => {
-    if (acc !== '') {
-      return acc
-    }
+  const mostSignificantUnit = units
+    .split(',')
+    .map(units => units.trim())
+    .reduce((acc, unit) => {
+      if (acc !== '') {
+        return acc
+      }
 
-    if (unit[0] !== '0') {
-      return unit.trim()
-    }
+      // check if unit starts with smh different that 0
+      // e.g., 0 days 2 hours 5 minutes should return "2 hours"
+      if (unit[0] !== '0') {
+        return unit
+      }
 
-    return acc
-  }, '')
+      return acc
+    }, '')
 
-  return `~${mostSignificantUnit}`
+  return `~${mostSignificantUnit || '< 1 minute'}`
 }
 
 export function convertTokenToZil(tokenAmount: bigint, zilToTokenRate: number): bigint {

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -36,7 +36,7 @@ export default function App({ Component, pageProps }: AppProps) {
       <ConfigProvider>
         <WagmiProvider config={getWagmiConfig(appConfig.chainId, appConfig.walletConnectPrivateKey)}>
           <QueryClientProvider client={queryClient}>
-            <RainbowKitProvider>
+            <RainbowKitProvider showRecentTransactions={true}>
               <WalletConnector.Provider>
                 <StakingPoolsStorage.Provider>
                   <StakingOperations.Provider>