-
Notifications
You must be signed in to change notification settings - Fork 411
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* fix: populate help section * refactor: extract constants + debounce hints
- Loading branch information
Showing
3 changed files
with
111 additions
and
50 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } |