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

@@ -29,6 +29,7 @@ export const WcConnectionForm = ({
     setShowHints((prev) => !prev)
   }, [setShowHints])
 
+  // Show the hints only once
   useEffect(() => {
     return () => setShowHints(false)
   }, [setShowHints])
@@ -64,7 +65,7 @@ export const WcConnectionForm = ({
         ) : null}
       </Grid>
 
-      <Divider flexItem className={css.divider} />
+      <Divider flexItem />
 
       <Grid item>
         <WcSessionList sessions={sessions} onDisconnect={onDisconnect} />

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,46 @@
+import ExternalLink from '@/components/common/ExternalLink'
+import useLocalStorage from '@/services/local-storage/useLocalStorage'
+import { Typography } from '@mui/material'
+import { 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 WcNoSessions = () => {
+  const [showDapps = true, setShowDapps] = useLocalStorage<boolean>(LS_KEY)
+
+  // Only show the sample dApps list once
+  useEffect(() => {
+    return () => {
+      setShowDapps(false)
+    }
+  }, [setShowDapps])
+
+  return (
+    <>
+      <Typography variant="body2" textAlign="center" color="text.secondary">
+        No dApps are connected yet.{showDapps ? ' Try one of these:' : ''}
+      </Typography>
+
+      {showDapps && (
+        <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>
+      )}
+    </>
+  )
+}
+
+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 (