feat(wallet-balance): hide vesting ui when vesting balance is empty (#1505)

* feat(wallet-balance): hide vesting ui when vesting balance is empty

* refactor(wallet-balance): feedback review

nym-wallet/src/pages/balance/components/vesting-timeline.tsx

@@ -3,7 +3,7 @@ import React, { useContext } from 'react';
 import { useTheme } from '@mui/material/styles';
 import { Box, Tooltip, Typography } from '@mui/material';
 import { format } from 'date-fns';
-import { AppContext } from '../../../context/main';
+import { AppContext } from '../../../context';
 
 const calculateMarkerPosition = (arrLength: number, index: number) => (1 / arrLength) * 100 * index;
 

nym-wallet/src/pages/balance/index.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { Box } from '@mui/material';
 import { AppContext } from '../../context/main';
 
@@ -9,9 +9,25 @@ import { TransferModal } from './components/TransferModal';
 
 export const Balance = () => {
   const [showTransferModal, setShowTransferModal] = useState(false);
+  const [showVestingCard, setShowVestingCard] = useState(false);
 
   const { userBalance } = useContext(AppContext);
 
+  useEffect(() => {
+    const { originalVesting, currentVestingPeriod, tokenAllocation } = userBalance;
+    if (
+      originalVesting &&
+      currentVestingPeriod === 'After' &&
+      tokenAllocation?.locked === '0' &&
+      tokenAllocation?.vesting === '0' &&
+      tokenAllocation?.spendable === '0'
+    ) {
+      setShowVestingCard(false);
+    } else if (originalVesting) {
+      setShowVestingCard(true);
+    }
+  }, [userBalance]);
+
   const handleShowTransferModal = async () => {
     await userBalance.refreshBalances();
     setShowTransferModal(true);
@@ -21,7 +37,7 @@ export const Balance = () => {
     <PageLayout>
       <Box display="flex" flexDirection="column" gap={2}>
         <BalanceCard />
-        <VestingCard onTransfer={handleShowTransferModal} />
+        {showVestingCard && <VestingCard onTransfer={handleShowTransferModal} />}
         {showTransferModal && <TransferModal onClose={() => setShowTransferModal(false)} />}
       </Box>
     </PageLayout>