feat: new creation design + step 1

src/components/new-safe/CreateSafe/index.tsx

@@ -0,0 +1,52 @@
+import { Button, Typography, Grid } from '@mui/material'
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft'
+import { useRouter } from 'next/router'
+
+import WalletInfo from '@/components/common/WalletInfo'
+import { useCurrentChain } from '@/hooks/useChains'
+import useWallet from '@/hooks/wallets/useWallet'
+import OverviewWidget from '../OverviewWidget'
+import CreateSafeStep1 from '../steps/Step1'
+
+const CreateSafe = () => {
+  const router = useRouter()
+
+  // TODO: These rows are just a demo
+  const wallet = useWallet()
+  const chain = useCurrentChain()
+  const rows = [
+    ...(wallet && chain ? [{ title: 'Wallet', component: <WalletInfo wallet={wallet} chain={chain} /> }] : []),
+  ]
+
+  const onBack = () => {
+    router.back()
+
+    // Logic to be handled by stepper hook
+  }
+
+  // TODO: Improve layout when other widget/responsive design is ready
+  return (
+    <Grid container spacing={3}>
+      <Grid item xs={1} />
+      <Grid item xs={11}>
+        <Button variant="text" startIcon={<ChevronLeftIcon />} onClick={onBack} sx={{ my: 4, mx: 0 }}>
+          Back
+        </Button>
+        <Typography variant="h2" pb={2}>
+          Create new Safe
+        </Typography>
+      </Grid>
+
+      <Grid item xs={1} />
+      <Grid item xs={6}>
+        <CreateSafeStep1 />
+      </Grid>
+      <Grid item xs={4}>
+        <OverviewWidget rows={rows} />
+      </Grid>
+      <Grid item xs={1} />
+    </Grid>
+  )
+}
+
+export default CreateSafe

src/components/create-safe/OverviewWidget/styles.module.css → src/components/new-safe/OverviewWidget/styles.module.css

@@ -1,6 +1,6 @@
 .card {
   border: 1px solid var(--color-border-light);
-  width: 300px; /* TODO: Remove when added to flow */
+  width: 100%;
 }
 
 .header {

src/components/new-safe/StepCard/index.tsx

@@ -0,0 +1,41 @@
+import { Card, CardHeader, Avatar, Typography, CardContent, CardActions, LinearProgress } from '@mui/material'
+import type { ReactElement } from 'react'
+
+import css from './styles.module.css'
+
+const StepCard = ({
+  title,
+  subheader,
+  content,
+  actions,
+}: {
+  title: string
+  subheader: string
+  content: ReactElement
+  actions: ReactElement
+}): ReactElement => {
+  // TODO: `step` and `LinearProgress` will be set via stepper hook
+  const step = 1
+
+  return (
+    <Card className={css.card}>
+      <LinearProgress />
+      <CardHeader
+        title={title}
+        subheader={subheader}
+        titleTypographyProps={{ variant: 'h4' }}
+        subheaderTypographyProps={{ variant: 'body2' }}
+        avatar={
+          <Avatar className={css.step}>
+            <Typography variant="body2">{step}</Typography>
+          </Avatar>
+        }
+        className={css.header}
+      />
+      <CardContent className={css.content}>{content}</CardContent>
+      <CardActions className={css.actions}>{actions}</CardActions>
+    </Card>
+  )
+}
+
+export default StepCard

src/components/new-safe/StepCard/styles.module.css

@@ -0,0 +1,31 @@
+.card {
+  border: none;
+}
+
+.header {
+  padding: var(--space-3) var(--space-2);
+}
+
+.header :global .MuiCardHeader-title {
+  font-weight: 700;
+}
+
+.header :global .MuiCardHeader-subheader {
+  color: var(--color-text-primary);
+}
+
+.step {
+  background-color: var(--color-primary-main);
+  height: 20px;
+  width: 20px;
+}
+
+.content {
+  padding: var(--space-3) 52px;
+  border-top: 1px solid var(--color-border-light);
+  border-bottom: 1px solid var(--color-border-light);
+}
+
+.actions {
+  padding: var(--space-3) 52px;
+}

src/components/new-safe/steps/Step1/index.tsx

@@ -0,0 +1,100 @@
+import { InputAdornment, TextField, Tooltip, SvgIcon, Typography, Button, Link, Box } from '@mui/material'
+import { useForm } from 'react-hook-form'
+
+import { useMnemonicSafeName } from '@/hooks/useMnemonicName'
+import InfoIcon from '@/public/images/notifications/info.svg'
+import StepCard from '../../StepCard'
+
+import css from './styles.module.css'
+import NetworkSelector from '@/components/common/NetworkSelector'
+
+type CreateSafeStep1Form = {
+  name: string
+}
+
+enum CreateSafeStep1Fields {
+  name = 'name',
+}
+
+const STEP_1_FORM_ID = 'create-safe-step-1-form'
+
+const CreateSafeStep1 = () => {
+  const fallbackName = useMnemonicSafeName()
+
+  const {
+    handleSubmit,
+    register,
+    formState: { errors },
+  } = useForm<CreateSafeStep1Form>({
+    mode: 'all',
+    defaultValues: {
+      [CreateSafeStep1Fields.name]: '',
+    },
+  })
+
+  const onSubmit = (data: CreateSafeStep1Form) => {
+    console.log(data)
+  }
+
+  return (
+    <StepCard
+      title="Select network and name Safe"
+      subheader="Select the network on which to create your Safe"
+      content={
+        <form onSubmit={handleSubmit(onSubmit)} id={STEP_1_FORM_ID} className={css.form}>
+          <Box className={css.select}>
+            <Typography color="text.secondary" pl={2}>
+              Network
+            </Typography>
+            <Box className={css.networkSelect}>
+              <NetworkSelector />
+            </Box>
+          </Box>
+
+          <TextField
+            fullWidth
+            label={errors?.[CreateSafeStep1Fields.name]?.message || 'Name'}
+            error={!!errors?.[CreateSafeStep1Fields.name]}
+            placeholder={fallbackName}
+            InputProps={{
+              endAdornment: (
+                <Tooltip
+                  title="This name is stored locally and will never be shared with us or any third parties."
+                  arrow
+                  placement="top"
+                >
+                  <InputAdornment position="end">
+                    <SvgIcon component={InfoIcon} inheritViewBox />
+                  </InputAdornment>
+                </Tooltip>
+              ),
+            }}
+            InputLabelProps={{
+              shrink: true,
+            }}
+            {...register(CreateSafeStep1Fields.name)}
+          />
+
+          <Typography variant="body2">
+            By continuing, you agree to our{' '}
+            <Link href="https://gnosis-safe.io/terms" target="_blank" rel="noopener noreferrer" fontWeight={700}>
+              terms of use
+            </Link>{' '}
+            and{' '}
+            <Link href="https://gnosis-safe.io/privacy" target="_blank" rel="noopener noreferrer" fontWeight={700}>
+              privacy policy
+            </Link>
+            .
+          </Typography>
+        </form>
+      }
+      actions={
+        <Button variant="contained" form={STEP_1_FORM_ID} type="submit">
+          Continue
+        </Button>
+      }
+    />
+  )
+}
+
+export default CreateSafeStep1

src/components/new-safe/steps/Step1/styles.module.css

@@ -0,0 +1,28 @@
+.card {
+  border: none;
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  align-items: flex-start;
+}
+
+.select {
+  display: flex;
+  align-items: center;
+  border-radius: 8px;
+  border: 1px solid var(--color-border-light);
+}
+
+.select:hover,
+.select:hover .networkSelect {
+  border-color: var(--color-primary-main);
+}
+
+.networkSelect {
+  border-left: 1px solid var(--color-border-light);
+  padding: var(--space-2);
+  margin-left: var(--space-2);
+}

src/config/routes.ts

@@ -5,6 +5,7 @@ export const AppRoutes = {
   load: '/load',
   index: '/',
   home: '/home',
+  demo: '/demo',
   apps: '/apps',
   addressBook: '/address-book',
   balances: {

src/pages/demo.tsx

@@ -0,0 +1,17 @@
+import type { NextPage } from 'next'
+import Head from 'next/head'
+import CreateSafe from '@/components/new-safe/CreateSafe'
+
+const Open: NextPage = () => {
+  return (
+    <main>
+      <Head>
+        <title>Safe – Create Safe</title>
+      </Head>
+
+      <CreateSafe />
+    </main>
+  )
+}
+
+export default Open