From 68dfeed6ab0ff99ca50ab2c24e9c557a5773bc68 Mon Sep 17 00:00:00 2001
From: Usame Algan <usame@safe.global>
Date: Fri, 9 Feb 2024 15:39:38 +0100
Subject: [PATCH] fix: Only show add funds cta if user has no funds

---
 src/components/balances/AssetsTable/index.tsx | 14 +++++---------
 src/components/common/AddFunds/index.tsx      |  6 ++++++
 src/components/dashboard/index.tsx            |  4 ++--
 src/components/dashboard/styles.module.css    |  3 +++
 4 files changed, 16 insertions(+), 11 deletions(-)
 create mode 100644 src/components/dashboard/styles.module.css

diff --git a/src/components/balances/AssetsTable/index.tsx b/src/components/balances/AssetsTable/index.tsx
index 4c59412b93..7e157604ec 100644
--- a/src/components/balances/AssetsTable/index.tsx
+++ b/src/components/balances/AssetsTable/index.tsx
@@ -138,8 +138,6 @@ const AssetsTable = ({
     [hiddenAssets, balances.items, showHiddenAssets],
   )
 
-  const hasNoAssets = balances.items.length === 1 && balances.items[0].balance === '0'
-
   const selectedAssetCount = visibleAssets?.filter((item) => isAssetSelected(item.tokenInfo.address)).length || 0
 
   const onSendClick = (tokenAddress: string) => {
@@ -250,13 +248,11 @@ const AssetsTable = ({
         showHiddenAssets={showHiddenAssets}
       />
 
-      {hasNoAssets ? (
-        <AddFundsCTA />
-      ) : (
-        <div className={css.container}>
-          <EnhancedTable rows={rows} headCells={headCells} />
-        </div>
-      )}
+      <div className={css.container}>
+        <EnhancedTable rows={rows} headCells={headCells} />
+      </div>
+
+      <AddFundsCTA />
     </>
   )
 }
diff --git a/src/components/common/AddFunds/index.tsx b/src/components/common/AddFunds/index.tsx
index 70e4432a06..59bab8a7bd 100644
--- a/src/components/common/AddFunds/index.tsx
+++ b/src/components/common/AddFunds/index.tsx
@@ -1,3 +1,4 @@
+import useBalances from '@/hooks/useBalances'
 import { Box, FormControlLabel, Grid, Paper, Switch, Typography } from '@mui/material'
 import EthHashInfo from '@/components/common/EthHashInfo'
 import QRCode from '@/components/common/QRCode'
@@ -8,6 +9,7 @@ import { selectSettings, setQrShortName } from '@/store/settingsSlice'
 import BuyCryptoButton from '@/components/common/BuyCryptoButton'
 
 const AddFundsCTA = () => {
+  const { balances } = useBalances()
   const safeAddress = useSafeAddress()
   const chain = useCurrentChain()
   const dispatch = useAppDispatch()
@@ -15,6 +17,10 @@ const AddFundsCTA = () => {
   const qrPrefix = settings.shortName.qr ? `${chain?.shortName}:` : ''
   const qrCode = `${qrPrefix}${safeAddress}`
 
+  const hasNoAssets = balances.items.length === 1 && balances.items[0].balance === '0'
+
+  if (!hasNoAssets) return null
+
   return (
     <Paper>
       <Grid container gap={3} alignItems="center" justifyContent="center" p={4}>
diff --git a/src/components/dashboard/index.tsx b/src/components/dashboard/index.tsx
index 47d3a261b7..c393c48a67 100644
--- a/src/components/dashboard/index.tsx
+++ b/src/components/dashboard/index.tsx
@@ -11,7 +11,7 @@ import GovernanceSection from '@/components/dashboard/GovernanceSection/Governan
 import CreationDialog from '@/components/dashboard/CreationDialog'
 import { useRouter } from 'next/router'
 import { CREATION_MODAL_QUERY_PARM } from '../new-safe/create/logic'
-
+import css from './styles.module.css'
 import useRecovery from '@/features/recovery/hooks/useRecovery'
 import { useIsRecoverySupported } from '@/features/recovery/hooks/useIsRecoverySupported'
 const RecoveryHeader = dynamic(() => import('@/features/recovery/components/RecoveryHeader'))
@@ -27,7 +27,7 @@ const Dashboard = (): ReactElement => {
 
   return (
     <>
-      <Grid container spacing={3}>
+      <Grid container spacing={3} className={css.container}>
         {supportsRecovery && <RecoveryHeader />}
 
         <Grid item xs={12}>
diff --git a/src/components/dashboard/styles.module.css b/src/components/dashboard/styles.module.css
new file mode 100644
index 0000000000..7b40d00497
--- /dev/null
+++ b/src/components/dashboard/styles.module.css
@@ -0,0 +1,3 @@
+.container > div:empty {
+  display: none;
+}