Feat: show sample dapps to connect (only once)

src/components/common/Header/styles.module.css

@@ -25,7 +25,7 @@
   min-width: 18px;
 }
 
-[data-theme="dark"] .element :global(.MuiBadge-standard) {
+[data-theme='dark'] .element :global(.MuiBadge-standard) {
   background-color: var(--color-primary-main);
 }
 

src/components/walletconnect/WcConnectionForm/index.tsx

@@ -9,7 +9,7 @@ import WcSessionList from '../WcSessionList'
 import WcInput from '../WcInput'
 import WcLogoHeader from '../WcLogoHeader'
 import css from './styles.module.css'
-import useSafeAddress from '@/hooks/useSafeAddress'
+import useSafeInfo from '@/hooks/useSafeInfo'
 
 const WC_HINTS_KEY = 'wcHints'
 
@@ -23,12 +23,13 @@ export const WcConnectionForm = ({
   uri: string
 }): ReactElement => {
   const [showHints = true, setShowHints] = useLocalStorage<boolean>(WC_HINTS_KEY)
-  const safeAddress = useSafeAddress()
+  const { safeLoaded } = useSafeInfo()
 
   const onToggle = useCallback(() => {
     setShowHints((prev) => !prev)
   }, [setShowHints])
 
+  // Show the hints only once
   useEffect(() => {
     return () => setShowHints(false)
   }, [setShowHints])
@@ -52,27 +53,27 @@ export const WcConnectionForm = ({
         <WcLogoHeader />
 
         <Typography variant="body2" color="text.secondary">
-          {safeAddress
+          {safeLoaded
             ? `Paste the pairing code below to connect to your Safe{Wallet} via WalletConnect`
             : `Please open one of your Safe Accounts to connect to via WalletConnect`}
         </Typography>
 
-        {safeAddress ? (
+        {safeLoaded ? (
           <Box mt={3}>
             <WcInput uri={uri} />
           </Box>
         ) : null}
       </Grid>
 
-      <Divider flexItem className={css.divider} />
+      <Divider flexItem />
 
       <Grid item>
         <WcSessionList sessions={sessions} onDisconnect={onDisconnect} />
       </Grid>
 
       {showHints && (
         <>
-          <Divider flexItem className={css.divider} />
+          <Divider flexItem />
 
           <Grid item mt={1}>
             <WcHints />

src/components/walletconnect/WcConnectionForm/styles.module.css

@@ -15,7 +15,3 @@
   top: var(--space-3);
   right: var(--space-3);
 }
-
-.divider {
-  margin: 0 calc(-1 * var(--space-4));
-}

src/components/walletconnect/WcLogoHeader/styles.module.css

@@ -1,6 +1,6 @@
 .icon {
   color: #3a99fb;
-  width: 40px;
+  font-size: 50px;
 }
 
 .errorBadge {

src/components/walletconnect/WcSessionList/WcNoSessions.tsx

@@ -0,0 +1,56 @@
+import ExternalLink from '@/components/common/ExternalLink'
+import useSafeInfo from '@/hooks/useSafeInfo'
+import useLocalStorage from '@/services/local-storage/useLocalStorage'
+import { Typography } from '@mui/material'
+import { useCallback, useEffect } from 'react'
+
+const SAMPLE_DAPPS = [
+  { name: 'Zerion', icon: '/images/common/nft-zerion.svg', url: 'https://app.zerion.io/connect-wallet' },
+  { name: 'Zapper', icon: '/images/common/nft-zapper.svg', url: 'https://zapper.xyz/' },
+  { name: 'OpenSea', icon: '/images/common/nft-opensea.svg', url: 'https://opensea.io/' },
+]
+
+const LS_KEY = 'native_wc_dapps'
+
+const WcSampleDapps = ({ onUnload }: { onUnload: () => void }) => {
+  // Only show the sample dApps list once
+  useEffect(() => {
+    return onUnload
+  }, [onUnload])
+
+  return (
+    <Typography variant="body2" display="flex" justifyContent="space-between" alignItems="center" mt={3}>
+      {SAMPLE_DAPPS.map((item) => (
+        <ExternalLink href={item.url} key={item.url} noIcon px={1}>
+          <img src={item.icon} alt={item.name} width={32} height={32} />
+          <Typography variant="body2" ml={1}>
+            {item.name}
+          </Typography>
+        </ExternalLink>
+      ))}
+    </Typography>
+  )
+}
+
+const WcNoSessions = () => {
+  const { safeLoaded } = useSafeInfo()
+  const [showDapps = true, setShowDapps] = useLocalStorage<boolean>(LS_KEY)
+
+  const onUnload = useCallback(() => {
+    setShowDapps(false)
+  }, [setShowDapps])
+
+  const sampleDapps = showDapps && safeLoaded && <WcSampleDapps onUnload={onUnload} />
+
+  return (
+    <>
+      <Typography variant="body2" textAlign="center" color="text.secondary">
+        No dApps are connected yet.{sampleDapps ? ' Try one of these:' : ''}
+      </Typography>
+
+      {sampleDapps}
+    </>
+  )
+}
+
+export default WcNoSessions

src/components/walletconnect/WcSessionList/index.tsx

@@ -1,24 +1,17 @@
+import type { SessionTypes } from '@walletconnect/types'
+import { Button, List, ListItem, ListItemAvatar, ListItemIcon, ListItemText } from '@mui/material'
 import SafeAppIconCard from '@/components/safe-apps/SafeAppIconCard'
 import useSafeInfo from '@/hooks/useSafeInfo'
 import { getPeerName } from '@/services/walletconnect/utils'
-import { Button, List, ListItem, ListItemAvatar, ListItemIcon, ListItemText, Typography } from '@mui/material'
-import type { SessionTypes } from '@walletconnect/types'
-import type { ReactElement } from 'react'
-
+import WcNoSessions from './WcNoSessions'
 import css from './styles.module.css'
 
 type WcSesstionListProps = {
   sessions: SessionTypes.Struct[]
   onDisconnect: (session: SessionTypes.Struct) => void
 }
 
-const WcSessionListItem = ({
-  session,
-  onDisconnect,
-}: {
-  session: SessionTypes.Struct
-  onDisconnect: () => void
-}): ReactElement => {
+const WcSessionListItem = ({ session, onDisconnect }: { session: SessionTypes.Struct; onDisconnect: () => void }) => {
   const { safeLoaded } = useSafeInfo()
   const name = getPeerName(session.peer) || 'Unknown dApp'
 
@@ -29,7 +22,9 @@ const WcSessionListItem = ({
           <SafeAppIconCard src={session.peer.metadata.icons[0]} alt="icon" width={20} height={20} />
         </ListItemAvatar>
       )}
+
       <ListItemText primary={name} primaryTypographyProps={{ color: safeLoaded ? undefined : 'text.secondary' }} />
+
       <ListItemIcon className={css.sessionListSecondaryAction}>
         <Button variant="danger" onClick={onDisconnect} className={css.button}>
           Disconnect
@@ -39,13 +34,9 @@ const WcSessionListItem = ({
   )
 }
 
-const WcSessionList = ({ sessions, onDisconnect }: WcSesstionListProps): ReactElement => {
+const WcSessionList = ({ sessions, onDisconnect }: WcSesstionListProps) => {
   if (sessions.length === 0) {
-    return (
-      <Typography variant="body2" textAlign="center" color="text.secondary">
-        No dApps are connected yet
-      </Typography>
-    )
+    return <WcNoSessions />
   }
 
   return (