-
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.
- Loading branch information
1 parent
abdc544
commit c7655a4
Showing
9 changed files
with
274 additions
and
104 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
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,85 @@ | ||
| import React from 'react' | ||
| import { Box, Button, Grid, Typography } from '@mui/material' | ||
| import css from './styles.module.css' | ||
| import Link from 'next/link' | ||
|
|
||
| import ChevronLeftIcon from '@mui/icons-material/ChevronLeft' | ||
| import WelcomeLogin from './WelcomeLogin' | ||
| import GnosisChainLogo from '@/public/images/common/gnosis-chain-logo.png' | ||
| import Image from 'next/image' | ||
| import SafeListDrawer from '@/components/welcome/SafeListDrawer' | ||
|
|
||
| const BulletListItem = ({ text }: { text: string }) => ( | ||
| <li> | ||
| <Typography color="static.main" fontWeight={700}> | ||
| {text} | ||
| </Typography> | ||
| </li> | ||
| ) | ||
|
|
||
| const MarqueeItem = () => { | ||
| return ( | ||
| <li className={css.marqueeItem}> | ||
| Free on | ||
| <Image src={GnosisChainLogo} alt="Gnosis Chain logo" width={24} height={24} /> | ||
| Gnosis Chain | ||
| </li> | ||
| ) | ||
| } | ||
|
|
||
| const NewSafeSocial = () => { | ||
| return ( | ||
| <> | ||
| <Grid container spacing={3} p={3} pb={0} flex={1} direction="row-reverse"> | ||
| <Grid item xs={12} lg={6}> | ||
| <WelcomeLogin /> | ||
| </Grid> | ||
| <Grid item xs={12} lg={6} flex={1}> | ||
| <div className={css.content}> | ||
| <Box minWidth={{ md: 480 }} className={css.sidebar}> | ||
| <SafeListDrawer /> | ||
| </Box> | ||
|
|
||
| <Box pt={5} alignSelf="center" margin="auto"> | ||
| <Typography | ||
| variant="h1" | ||
| fontSize={[44, null, 52]} | ||
| lineHeight={1.15} | ||
| letterSpacing={-1.5} | ||
| color="static.main" | ||
| > | ||
| Get started in 30 seconds with your Google Account | ||
| </Typography> | ||
|
|
||
| <ul className={css.numberList}> | ||
| <BulletListItem text="Choose your Google Account" /> | ||
| <BulletListItem text="Review, wait and you’re done!" /> | ||
| <BulletListItem text="Add more signers later to level up your security" /> | ||
| </ul> | ||
|
|
||
| {/* TODO: Replace with actual link */} | ||
| <Link href="https://safe.global" passHref> | ||
| <Button startIcon={<ChevronLeftIcon />}>Back to landing page</Button> | ||
| </Link> | ||
| </Box> | ||
|
|
||
| <div className={css.marquee}> | ||
| <ul className={css.marqueeContent}> | ||
| <MarqueeItem /> | ||
| <MarqueeItem /> | ||
| <MarqueeItem /> | ||
| </ul> | ||
| <ul className={css.marqueeContent} aria-hidden="true"> | ||
| <MarqueeItem /> | ||
| <MarqueeItem /> | ||
| <MarqueeItem /> | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| </Grid> | ||
| </Grid> | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| export default NewSafeSocial |
File renamed without changes.
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,55 @@ | ||
| import React, { useState } from 'react' | ||
| import SafeList from '@/components/sidebar/SafeList' | ||
| import { DataWidget } from '@/components/welcome/SafeListDrawer/DataWidget' | ||
| import { Button, Drawer, Typography } from '@mui/material' | ||
| import ChevronRightIcon from '@mui/icons-material/ChevronRight' | ||
| import { useAppSelector } from '@/store' | ||
| import { selectTotalAdded } from '@/store/addedSafesSlice' | ||
| import useOwnedSafes from '@/hooks/useOwnedSafes' | ||
| import drawerCSS from '@/components/sidebar/Sidebar/styles.module.css' | ||
| import css from './styles.module.css' | ||
|
|
||
| const SafeListDrawer = () => { | ||
| const numberOfAddedSafes = useAppSelector(selectTotalAdded) | ||
| const ownedSafes = useOwnedSafes() | ||
| const numberOfOwnedSafes = Object.values(ownedSafes).reduce((acc, curr) => acc + curr.length, 0) | ||
| const totalNumberOfSafes = numberOfOwnedSafes + numberOfAddedSafes | ||
| const [showSidebar, setShowSidebar] = useState(false) | ||
|
|
||
| const closeSidebar = () => setShowSidebar(false) | ||
|
|
||
| if (totalNumberOfSafes <= 0) { | ||
| return null | ||
| } | ||
|
|
||
| return ( | ||
| <> | ||
| <Drawer variant="temporary" anchor="left" open={showSidebar} onClose={closeSidebar}> | ||
| <div className={drawerCSS.drawer}> | ||
| <SafeList closeDrawer={closeSidebar} /> | ||
|
|
||
| <div className={drawerCSS.dataWidget}> | ||
| <DataWidget /> | ||
| </div> | ||
| </div> | ||
| </Drawer> | ||
| <Button | ||
| className={css.button} | ||
| fullWidth | ||
| variant="contained" | ||
| color="background" | ||
| startIcon={<ChevronRightIcon />} | ||
| onClick={() => setShowSidebar(true)} | ||
| > | ||
| <Typography className={css.buttonText} fontWeight="bold"> | ||
| My Safe Accounts{' '} | ||
| <Typography color="text.secondary" fontWeight="bold"> | ||
| ({totalNumberOfSafes}) | ||
| </Typography> | ||
| </Typography> | ||
| </Button> | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| export default SafeListDrawer |
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,33 @@ | ||
| .button { | ||
| padding: var(--space-2); | ||
| } | ||
|
|
||
| .buttonText { | ||
| align-self: center; | ||
| margin: auto; | ||
| display: flex; | ||
| gap: var(--space-1); | ||
| } | ||
|
|
||
| .fileIcon { | ||
| display: flex; | ||
| align-items: center; | ||
| padding: var(--space-1); | ||
| background-color: var(--color-background-main); | ||
| } | ||
|
|
||
| .card { | ||
| padding: var(--space-3); | ||
| gap: var(--space-2); | ||
| display: flex; | ||
| flex-direction: column; | ||
| } | ||
|
|
||
| .card :global .MuiCardHeader-root, | ||
| .card :global .MuiCardContent-root { | ||
| padding: 0; | ||
| } | ||
|
|
||
| .cardHeader { | ||
| text-align: left; | ||
| } |
Oops, something went wrong.