Add connect button to owned safe list when no wallet is connected (#3274

) * add wallet connect button for when no wallet is connected * fix borders in sidebar * remove unused styles * use shorthand styles * pass no safes message as a prop * use existing connect wallet component
safe-global · Feb 19, 2024 · 6c1d3f8 · 6c1d3f8
1 parent b330624
commit 6c1d3f8
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 7 deletions.
diff --git a/src/components/common/ConnectWallet/ConnectWalletButton.tsx b/src/components/common/ConnectWallet/ConnectWalletButton.tsx
@@ -1,7 +1,15 @@
 import { Button } from '@mui/material'
 import useConnectWallet from '@/components/common/ConnectWallet/useConnectWallet'
 
-const ConnectWalletButton = ({ onConnect }: { onConnect?: () => void }): React.ReactElement => {
+const ConnectWalletButton = ({
+  onConnect,
+  contained = true,
+  text,
+}: {
+  onConnect?: () => void
+  contained?: boolean
+  text?: string
+}): React.ReactElement => {
   const connectWallet = useConnectWallet()
 
   const handleConnect = () => {
@@ -12,13 +20,13 @@ const ConnectWalletButton = ({ onConnect }: { onConnect?: () => void }): React.R
   return (
     <Button
       onClick={handleConnect}
-      variant="contained"
+      variant={contained ? 'contained' : 'text'}
       size="small"
       disableElevation
       fullWidth
       sx={{ fontSize: ['12px', '13px'] }}
     >
-      Connect
+      {text || 'Connect'}
     </Button>
   )
 }

diff --git a/src/components/welcome/MyAccounts/PaginatedSafeList.tsx b/src/components/welcome/MyAccounts/PaginatedSafeList.tsx
@@ -10,6 +10,7 @@ import css from './styles.module.css'
 type PaginatedSafeListProps = {
   safes: SafeItems
   title: ReactNode
+  noSafesMessage?: ReactNode
   action?: ReactElement
   onLinkClick?: () => void
 }
@@ -18,7 +19,7 @@ const DEFAULT_SHOWN = 5
 const MAX_DEFAULT_SHOWN = 7
 const PAGE_SIZE = 5
 
-const PaginatedSafeList = ({ safes, title, action, onLinkClick }: PaginatedSafeListProps) => {
+const PaginatedSafeList = ({ safes, title, action, noSafesMessage, onLinkClick }: PaginatedSafeListProps) => {
   const [maxShownSafes, setMaxShownSafes] = useState<number>(DEFAULT_SHOWN)
 
   const shownSafes = useMemo(() => {
@@ -47,8 +48,8 @@ const PaginatedSafeList = ({ safes, title, action, onLinkClick }: PaginatedSafeL
       {shownSafes.length ? (
         shownSafes.map((item) => <AccountItem onLinkClick={onLinkClick} {...item} key={item.chainId + item.address} />)
       ) : (
-        <Typography variant="body2" color="primary.light" textAlign="center" my={3}>
-          You don&apos;t have any Safe Accounts yet
+        <Typography variant="body2" color="text.secondary" textAlign="center" my={3} mx="auto" width={250}>
+          {noSafesMessage}
         </Typography>
       )}
       {safes.length > shownSafes.length && (

diff --git a/src/components/welcome/MyAccounts/index.tsx b/src/components/welcome/MyAccounts/index.tsx
@@ -11,6 +11,7 @@ import PaginatedSafeList from './PaginatedSafeList'
 import { VisibilityOutlined } from '@mui/icons-material'
 import AddIcon from '@/public/images/common/add.svg'
 import { AppRoutes } from '@/config/routes'
+import ConnectWalletButton from '@/components/common/ConnectWallet/ConnectWalletButton'
 
 type AccountsListProps = {
   safes: SafeItems
@@ -30,7 +31,17 @@ const AccountsList = ({ safes, onLinkClick }: AccountsListProps) => {
           <CreateButton />
         </Box>
 
-        <PaginatedSafeList title="My accounts" safes={ownedSafes} onLinkClick={onLinkClick} />
+        <PaginatedSafeList
+          title="My accounts"
+          safes={ownedSafes}
+          onLinkClick={onLinkClick}
+          noSafesMessage={
+            <>
+              <Box mb={2}>Connect a wallet to view your Safe Accounts or to create a new one</Box>
+              <ConnectWalletButton text="Connect a wallet" contained={false} />
+            </>
+          }
+        />
 
         <PaginatedSafeList
           title={
@@ -54,6 +65,7 @@ const AccountsList = ({ safes, onLinkClick }: AccountsListProps) => {
               </Link>
             </Track>
           }
+          noSafesMessage="You don't have any Safe Accounts yet"
           onLinkClick={onLinkClick}
         />