From 5b84c58985b6e44ceee68fde71f2557b8ff6d77b Mon Sep 17 00:00:00 2001
From: Pierre Dommerc <dommerc.pierre@gmail.com>
Date: Wed, 10 Aug 2022 10:29:01 +0200
Subject: [PATCH] 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
---
 .../balance/components/vesting-timeline.tsx   |  2 +-
 nym-wallet/src/pages/balance/index.tsx        | 20 +++++++++++++++++--
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/nym-wallet/src/pages/balance/components/vesting-timeline.tsx b/nym-wallet/src/pages/balance/components/vesting-timeline.tsx
index dd8d4e7d8c..f8feeea7ef 100644
--- a/nym-wallet/src/pages/balance/components/vesting-timeline.tsx
+++ b/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;
 
diff --git a/nym-wallet/src/pages/balance/index.tsx b/nym-wallet/src/pages/balance/index.tsx
index a51931fc84..4bb42f6b28 100644
--- a/nym-wallet/src/pages/balance/index.tsx
+++ b/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>