fix(sigma): fix balance dropdown (#1253)

cybercongress · Aug 15, 2024 · 2b53ab7 · 2b53ab7
1 parent b5be120
commit 2b53ab7
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 73 deletions.
diff --git a/src/containers/sigma/components/CardPassport/index.tsx b/src/containers/sigma/components/CardPassport/index.tsx
@@ -1,9 +1,9 @@
 import { useMemo, useEffect, useContext } from 'react';
-import { Dots, ContainerGradientText } from '../../../../components';
+import { Citizenship } from 'src/types/citizenship';
+import { Dots } from '../../../../components';
 import { useGetBalanceBostrom } from '../../hooks';
 import { SigmaContext } from '../../SigmaContext';
 import { TitleCard, RowBalancesDetails } from '../cardUi';
-import { Citizenship } from 'src/types/citizenship';
 import styles from './CardPassport.module.scss';
 
 type Props = {
@@ -24,7 +24,9 @@ function CardPassport({
     useGetBalanceBostrom(address);
 
   useEffect(() => {
-    if (!address) return;
+    if (!address) {
+      return;
+    }
 
     updateDataCap({ [address]: { ...totalAmountInLiquid } });
   }, [address, totalAmountInLiquid]);

diff --git a/src/containers/sigma/components/cardUi/RowBalancesDetails/index.tsx b/src/containers/sigma/components/cardUi/RowBalancesDetails/index.tsx
@@ -30,8 +30,6 @@ function RowBalancesDetails({ balance }) {
     return false;
   }, [balance]);
 
-  // console.log('balance', balance)
-
   const useAmountTotal = useMemo(() => {
     if (balance.total) {
       const { amount, denom } = balance.total;
@@ -118,14 +116,11 @@ function RowBalancesDetails({ balance }) {
           {(state) => {
             return (
               <div
-                className={cx(styles.containerDetailsBalance, {
-                  [styles[`containerDetailsBalance${state}`]]:
-                    Object.keys(balance).length === 5,
-                  [styles[`containerDetailsBalanceMain${state}`]]:
-                    Object.keys(balance).length === 7,
-                  [styles[`containerDetailsBalanceMainComm${state}`]]:
-                    Object.keys(balance).length === 8,
-                })}
+                className={cx(
+                  styles.containerDetailsBalance,
+                  styles[`containerDetailsBalance${state}`],
+                  styles[`length-${Object.keys(balance).length}`]
+                )}
               >
                 <DetailsBalance data={balance} />
               </div>

diff --git a/src/containers/sigma/components/cardUi/RowBalancesDetails/styles.module.scss b/src/containers/sigma/components/cardUi/RowBalancesDetails/styles.module.scss
@@ -1,4 +1,4 @@
-@import 'src/style/mixins.scss';
+@import 'src/style/mixins';
 
 .container {
   display: grid;
@@ -10,85 +10,46 @@
 
 .containerDetailsBalance {
   position: relative;
-  min-height: 0px;
-  height: 0px;
+  min-height: 0;
+  height: 0;
   padding-left: 23px;
   transition: 0.5s ease-in-out;
   opacity: 0;
 
   &entering {
-    opacity: 0;
     transition: 1ms ease-in-out;
   }
 
   &entered {
     opacity: 1;
-    min-height: 110px;
-    height: 1px;
-    margin-top: 30px;
-  }
-
-  &exiting {
-    opacity: 0;
-    transition: 0.3s ease-in-out;
-  }
-
-  &exited {
-    opacity: 0;
-    height: 0px;
-    min-height: 0px;
-    visibility: hidden;
-  }
-}
-
-.containerDetailsBalanceMain {
-  &entering {
-    opacity: 0;
-    transition: 1ms ease-in-out;
-  }
 
-  &entered {
-    opacity: 1;
-    min-height: 200px;
-    height: 1px;
-    margin-top: 20px;
-  }
+    &.length- {
+      &5 {
+        min-height: 110px;
+      }
 
-  &exiting {
-    opacity: 0;
-    transition: 0.5s ease-in-out;
-  }
+      &6 {
+        min-height: 170px;
+      }
 
-  &exited {
-    opacity: 0;
-    height: 0px;
-    min-height: 0px;
-    visibility: hidden;
-  }
-}
+      &7 {
+        min-height: 200px;
+      }
 
-.containerDetailsBalanceMainComm {
-  &entering {
-    opacity: 0;
-    transition: 1ms ease-in-out;
-  }
+      &8 {
+        min-height: 260px;
+      }
+    }
 
-  &entered {
-    opacity: 1;
-    min-height: 260px;
     height: 1px;
     margin-top: 30px;
   }
 
   &exiting {
-    opacity: 0;
-    transition: 0.5s ease-in-out;
+    transition: 0.3s ease-in-out;
   }
 
   &exited {
-    opacity: 0;
-    height: 0px;
-    min-height: 0px;
     visibility: hidden;
   }
 }
diff --git a/src/containers/sigma/hooks/utils.js b/src/containers/sigma/hooks/utils.js
@@ -22,9 +22,12 @@ export const initValueMainToken = {
   melting: { ...initValue },
   growth: { ...initValue },
   total: { ...initValue },
-  cyberver: { ...initValue },
 };
 
+if (isPussyChain) {
+  initValueMainToken.cyberver = { ...initValue };
+}
+
 const initValueResponseFunc = (denom = '', amount = 0) => {
   return { denom, amount };
 };
@@ -95,9 +98,13 @@ function useCyberverBalance({ address }) {
   const total1 = s1.data?.reduce((acc, { stake }) => acc + stake, 0) || 0;
   const total2 = s2.data?.reduce((acc, { stake }) => acc + stake, 0) || 0;
 
-  const totalCyberver = (total1 + total2).toString();
+  const total = total1 + total2;
+
+  if (total === 0) {
+    return null;
+  }
 
-  return totalCyberver;
+  return total.toString();
 }
 
 export const useGetBalance = (addressBech32) => {