fix: populate help section

src/components/walletconnect/ConnectionForm/index.tsx

@@ -25,15 +25,19 @@ export const ConnectionForm = ({
   return (
     <Grid className={css.container}>
       <Grid item textAlign="center">
-        {hideHints && (
-          <Tooltip title="How does WalletConnect work?" placement="top">
-            <span>
-              <IconButton onClick={() => setHideHints(false)} className={css.infoIcon}>
-                <SvgIcon component={InfoIcon} inheritViewBox color="border" />
-              </IconButton>
-            </span>
-          </Tooltip>
-        )}
+        <Tooltip
+          title="How does WalletConnect work?"
+          hidden={!hideHints}
+          placement="top"
+          arrow
+          className={css.infoIcon}
+        >
+          <span>
+            <IconButton onClick={() => setHideHints(false)}>
+              <SvgIcon component={InfoIcon} inheritViewBox color="border" />
+            </IconButton>
+          </span>
+        </Tooltip>
 
         <WalletConnectHeader />
 

src/components/walletconnect/Hints/index.tsx

@@ -1,53 +1,75 @@
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
-import { Accordion, AccordionSummary, Typography, AccordionDetails, SvgIcon } from '@mui/material'
-import type { TypographyProps } from '@mui/material'
+import {
+  Accordion,
+  AccordionSummary,
+  Avatar,
+  Box,
+  Typography,
+  AccordionDetails,
+  SvgIcon,
+  List,
+  ListItem,
+  ListItemAvatar,
+  ListItemText,
+} from '@mui/material'
+import { useMemo } from 'react'
 import type { ReactElement } from 'react'
 
+import { useCurrentChain } from '@/hooks/useChains'
 import Question from '@/public/images/common/question.svg'
 
-const AccordionTitle = ({ children }: { children: TypographyProps['children'] }): ReactElement => {
+import css from './styles.module.css'
+
+const HintAccordion = ({ title, items }: { title: string; items: Array<string> }): ReactElement => {
   return (
-    <Typography sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-      <SvgIcon
-        component={Question}
-        inheritViewBox
-        sx={{ color: 'currentColor', verticalAlign: 'middle', mr: 1 }}
-        fontSize="inherit"
-      />
-      {children}
-    </Typography>
+    <Accordion>
+      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+        <Typography className={css.title}>
+          <SvgIcon component={Question} inheritViewBox className={css.questionIcon} />
+          {title}
+        </Typography>
+      </AccordionSummary>
+
+      <AccordionDetails sx={{ p: 0 }}>
+        <List className={css.list}>
+          {items.map((item, i) => (
+            <ListItem key={i} sx={{ p: 0 }}>
+              <ListItemAvatar className={css.listItemAvatar}>
+                <Avatar className={css.avatar}>{i + 1}</Avatar>
+              </ListItemAvatar>
+              <ListItemText primary={item} sx={{ m: 0 }} primaryTypographyProps={{ variant: 'body2' }} />
+            </ListItem>
+          ))}
+        </List>
+      </AccordionDetails>
+    </Accordion>
   )
 }
 
-// TODO: Add content to the hints
+const ConnectionSteps = [
+  'Open a WalletConnect supported dApp',
+  'Select WalletConnect as the connection method',
+  'Copy the pairing URI and paste it into the input field above',
+  'Approve the session',
+  'dApp is now connected to the Safe',
+]
+
 export const Hints = (): ReactElement => {
+  const chain = useCurrentChain()
+
+  const InteractionSteps = useMemo(() => {
+    return [
+      'Connect a dApp by following the above steps',
+      `Ensure the dApp is connected to ${chain?.chainName ?? 'this chain'}`,
+      'Initiate a transaction/signature request via the dApp',
+      'Transact/sign as normal via the Safe',
+    ]
+  }, [chain?.chainName])
+
   return (
-    <>
-      <Accordion sx={{ mb: 1 }}>
-        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-          <AccordionTitle>How do I connect to a dApp?</AccordionTitle>
-        </AccordionSummary>
-
-        <AccordionDetails>
-          <Typography>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
-            leo lobortis eget.
-          </Typography>
-        </AccordionDetails>
-      </Accordion>
-
-      <Accordion>
-        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-          <AccordionTitle>How do I interact with a dApp?</AccordionTitle>
-        </AccordionSummary>
-
-        <AccordionDetails>
-          <Typography>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
-            leo lobortis eget.
-          </Typography>
-        </AccordionDetails>
-      </Accordion>
-    </>
+    <Box display="flex" flexDirection="column" gap={1}>
+      <HintAccordion title="How do I connect to a dApp?" items={ConnectionSteps} />
+      <HintAccordion title="How do I interact with a dApp?" items={InteractionSteps} />
+    </Box>
   )
 }

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

@@ -0,0 +1,30 @@
+.title {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.questionIcon {
+  color: currentColor;
+  vertical-align: middle;
+  margin-right: var(--space-1);
+  font-size: inherit;
+}
+
+.list {
+  padding: var(--space-2);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.listItemAvatar {
+  min-width: unset;
+  margin-right: var(--space-2);
+}
+
+.avatar {
+  width: 16px;
+  height: 16px;
+  font-size: 11px;
+}