fix: Only show add funds cta if user has no funds

safe-global · Feb 9, 2024 · 68dfeed · 68dfeed
1 parent 8f1f5e2
commit 68dfeed
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 11 deletions.
diff --git 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
@@ -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,13 +9,18 @@ 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()
   const settings = useAppSelector(selectSettings)
   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
@@ -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
@@ -0,0 +1,3 @@
+.container > div:empty {
+  display: none;
+}