From 868f0acef8f1b6c1624a558029a93bd52eb318c4 Mon Sep 17 00:00:00 2001
From: Aaron Cook <aaron@safe.global>
Date: Thu, 12 Oct 2023 11:56:58 +0200
Subject: [PATCH] fix: populate help section (#2619)

* fix: populate help section

* refactor: extract constants + debounce hints
---
 .../walletconnect/ConnectionForm/index.tsx    |  26 +++--
 src/components/walletconnect/Hints/index.tsx  | 105 +++++++++++-------
 .../walletconnect/Hints/styles.module.css     |  30 +++++
 3 files changed, 111 insertions(+), 50 deletions(-)
 create mode 100644 src/components/walletconnect/Hints/styles.module.css

diff --git a/src/components/walletconnect/ConnectionForm/index.tsx b/src/components/walletconnect/ConnectionForm/index.tsx
index 5cda73deb3..f45a12b685 100644
--- a/src/components/walletconnect/ConnectionForm/index.tsx
+++ b/src/components/walletconnect/ConnectionForm/index.tsx
@@ -8,6 +8,7 @@ import SessionList from '../SessionList'
 import WcInput from '../WcInput'
 import InfoIcon from '@/public/images/notifications/info.svg'
 import { WalletConnectHeader } from '../SessionManager/Header'
+import useDebounce from '@/hooks/useDebounce'
 
 import css from './styles.module.css'
 
@@ -21,19 +22,24 @@ export const ConnectionForm = ({
   onDisconnect: (session: SessionTypes.Struct) => Promise<void>
 }): ReactElement => {
   const [hideHints = false, setHideHints] = useLocalStorage<boolean>(WC_HINTS_KEY)
+  const debouncedHideHints = useDebounce(hideHints, 300)
 
   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={!debouncedHideHints}
+          placement="top"
+          arrow
+          className={css.infoIcon}
+        >
+          <span>
+            <IconButton onClick={() => setHideHints(false)}>
+              <SvgIcon component={InfoIcon} inheritViewBox color="border" />
+            </IconButton>
+          </span>
+        </Tooltip>
 
         <WalletConnectHeader />
 
@@ -50,7 +56,7 @@ export const ConnectionForm = ({
         <SessionList sessions={sessions} onDisconnect={onDisconnect} />
       </Grid>
 
-      {!hideHints && (
+      {!debouncedHideHints && (
         <>
           <Divider flexItem className={css.divider} />
 
diff --git a/src/components/walletconnect/Hints/index.tsx b/src/components/walletconnect/Hints/index.tsx
index 3dd1bd195c..8640e83237 100644
--- a/src/components/walletconnect/Hints/index.tsx
+++ b/src/components/walletconnect/Hints/index.tsx
@@ -1,53 +1,78 @@
 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 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 ConnectionTitle = 'How do I connect to a dApp?'
+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',
+]
+
+const InteractionTitle = 'How do I interact with a dApp?'
+const InteractionSteps = [
+  'Connect a dApp by following the above steps',
+  `Ensure the dApp is connected to %%chain%%`,
+  'Initiate a transaction/signature request via the dApp',
+  'Transact/sign as normal via the Safe',
+]
+
 export const Hints = (): ReactElement => {
+  const chain = useCurrentChain()
+
+  if (chain?.chainName) {
+    InteractionSteps[1] = InteractionSteps[1].replace(/%%chain%%/, 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={ConnectionTitle} items={ConnectionSteps} />
+      <HintAccordion title={InteractionTitle} items={InteractionSteps} />
+    </Box>
   )
 }
diff --git a/src/components/walletconnect/Hints/styles.module.css b/src/components/walletconnect/Hints/styles.module.css
new file mode 100644
index 0000000000..ee3635b0ce
--- /dev/null
+++ b/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;
+}