From 3cf8bcf5655b34cf9494799dbbffbb92d15ce561 Mon Sep 17 00:00:00 2001
From: iamacook <aaron@safe.global>
Date: Tue, 25 Oct 2022 08:59:53 +0200
Subject: [PATCH 1/6] feat: new creation design + step 1

---
 src/components/open/CardActions/index.tsx     |  10 ++
 .../open/CardActions/styles.module.css        |   3 +
 src/components/open/CardContent/index.tsx     |  10 ++
 .../open/CardContent/styles.module.css        |   5 +
 src/components/open/CardHeader/index.tsx      |  22 +++
 .../open/CardHeader/styles.module.css         |  17 +++
 src/components/open/CreateSafe/index.tsx      |  55 +++++++
 .../open/CreateSafe/styles.module.css         |   7 +
 .../OverviewWidget/index.tsx                  |   0
 .../OverviewWidget/styles.module.css          |   0
 src/components/open/steps/Step1/index.tsx     | 138 ++++++++++++++++++
 .../open/steps/Step1/styles.module.css        |  24 +++
 src/config/routes.ts                          |   1 +
 src/pages/demo.tsx                            |  17 +++
 14 files changed, 309 insertions(+)
 create mode 100644 src/components/open/CardActions/index.tsx
 create mode 100644 src/components/open/CardActions/styles.module.css
 create mode 100644 src/components/open/CardContent/index.tsx
 create mode 100644 src/components/open/CardContent/styles.module.css
 create mode 100644 src/components/open/CardHeader/index.tsx
 create mode 100644 src/components/open/CardHeader/styles.module.css
 create mode 100644 src/components/open/CreateSafe/index.tsx
 create mode 100644 src/components/open/CreateSafe/styles.module.css
 rename src/components/{create-safe => open}/OverviewWidget/index.tsx (100%)
 rename src/components/{create-safe => open}/OverviewWidget/styles.module.css (100%)
 create mode 100644 src/components/open/steps/Step1/index.tsx
 create mode 100644 src/components/open/steps/Step1/styles.module.css
 create mode 100644 src/pages/demo.tsx

diff --git a/src/components/open/CardActions/index.tsx b/src/components/open/CardActions/index.tsx
new file mode 100644
index 0000000000..c381746004
--- /dev/null
+++ b/src/components/open/CardActions/index.tsx
@@ -0,0 +1,10 @@
+import { CardActions } from '@mui/material'
+import type { CardActionsProps } from '@mui/material'
+
+import css from './styles.module.css'
+
+const CreateSafeCardActions = (props: CardActionsProps) => {
+  return <CardActions className={css.actions} {...props} />
+}
+
+export default CreateSafeCardActions
diff --git a/src/components/open/CardActions/styles.module.css b/src/components/open/CardActions/styles.module.css
new file mode 100644
index 0000000000..90bb38b53f
--- /dev/null
+++ b/src/components/open/CardActions/styles.module.css
@@ -0,0 +1,3 @@
+.actions {
+  padding: var(--space-3) 52px;
+}
diff --git a/src/components/open/CardContent/index.tsx b/src/components/open/CardContent/index.tsx
new file mode 100644
index 0000000000..dd86289c48
--- /dev/null
+++ b/src/components/open/CardContent/index.tsx
@@ -0,0 +1,10 @@
+import { CardContent } from '@mui/material'
+import type { CardContentProps } from '@mui/material'
+
+import css from './styles.module.css'
+
+const CreateSafeCardContent = (props: CardContentProps) => {
+  return <CardContent className={css.content} {...props} />
+}
+
+export default CreateSafeCardContent
diff --git a/src/components/open/CardContent/styles.module.css b/src/components/open/CardContent/styles.module.css
new file mode 100644
index 0000000000..ed6e28fea8
--- /dev/null
+++ b/src/components/open/CardContent/styles.module.css
@@ -0,0 +1,5 @@
+.content {
+  padding: var(--space-3) 52px;
+  border-top: 1px solid var(--color-border-light);
+  border-bottom: 1px solid var(--color-border-light);
+}
diff --git a/src/components/open/CardHeader/index.tsx b/src/components/open/CardHeader/index.tsx
new file mode 100644
index 0000000000..a3f4b47b70
--- /dev/null
+++ b/src/components/open/CardHeader/index.tsx
@@ -0,0 +1,22 @@
+import { CardHeader, Avatar, Typography } from '@mui/material'
+import type { CardHeaderProps } from '@mui/material'
+
+import css from './styles.module.css'
+
+const CreateSafeCardHeader = ({ step, ...props }: CardHeaderProps & { step: number }) => {
+  return (
+    <CardHeader
+      titleTypographyProps={{ variant: 'h4' }}
+      subheaderTypographyProps={{ variant: 'body2' }}
+      avatar={
+        <Avatar className={css.avatar}>
+          <Typography variant="body2">{step}</Typography>
+        </Avatar>
+      }
+      className={css.header}
+      {...props}
+    />
+  )
+}
+
+export default CreateSafeCardHeader
diff --git a/src/components/open/CardHeader/styles.module.css b/src/components/open/CardHeader/styles.module.css
new file mode 100644
index 0000000000..be95a226f1
--- /dev/null
+++ b/src/components/open/CardHeader/styles.module.css
@@ -0,0 +1,17 @@
+.header {
+  padding: var(--space-3) var(--space-2);
+}
+
+.header :global .MuiCardHeader-title {
+  font-weight: 700;
+}
+
+.header :global .MuiCardHeader-subheader {
+  color: var(--color-text-primary);
+}
+
+.avatar {
+  background-color: var(--color-primary-main);
+  height: 20px;
+  width: 20px;
+}
diff --git a/src/components/open/CreateSafe/index.tsx b/src/components/open/CreateSafe/index.tsx
new file mode 100644
index 0000000000..6522b43015
--- /dev/null
+++ b/src/components/open/CreateSafe/index.tsx
@@ -0,0 +1,55 @@
+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'
+
+import css from './styles.module.css'
+
+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={6}>
+        <Button variant="text" startIcon={<ChevronLeftIcon />} className={css.back} onClick={onBack}>
+          Back
+        </Button>
+        <Typography variant="h2" className={css.title}>
+          Create new Safe
+        </Typography>
+      </Grid>
+      <Grid item xs={5} />
+
+      <Grid item xs={1} />
+      <Grid item xs={6}>
+        <CreateSafeStep1 />
+      </Grid>
+      <Grid item xs={5}>
+        <OverviewWidget rows={rows} />
+      </Grid>
+      <Grid item xs={1} />
+    </Grid>
+  )
+}
+
+export default CreateSafe
diff --git a/src/components/open/CreateSafe/styles.module.css b/src/components/open/CreateSafe/styles.module.css
new file mode 100644
index 0000000000..57cc135937
--- /dev/null
+++ b/src/components/open/CreateSafe/styles.module.css
@@ -0,0 +1,7 @@
+.back {
+  margin: var(--space-4) 0;
+}
+
+.title {
+  padding-bottom: var(--space-2);
+}
diff --git a/src/components/create-safe/OverviewWidget/index.tsx b/src/components/open/OverviewWidget/index.tsx
similarity index 100%
rename from src/components/create-safe/OverviewWidget/index.tsx
rename to src/components/open/OverviewWidget/index.tsx
diff --git a/src/components/create-safe/OverviewWidget/styles.module.css b/src/components/open/OverviewWidget/styles.module.css
similarity index 100%
rename from src/components/create-safe/OverviewWidget/styles.module.css
rename to src/components/open/OverviewWidget/styles.module.css
diff --git a/src/components/open/steps/Step1/index.tsx b/src/components/open/steps/Step1/index.tsx
new file mode 100644
index 0000000000..5d6ce43a31
--- /dev/null
+++ b/src/components/open/steps/Step1/index.tsx
@@ -0,0 +1,138 @@
+import {
+  Card,
+  LinearProgress,
+  Select,
+  InputAdornment,
+  InputLabel,
+  MenuItem,
+  TextField,
+  Tooltip,
+  SvgIcon,
+  Typography,
+  Button,
+  Link,
+} from '@mui/material'
+import { useForm } from 'react-hook-form'
+
+import ChainIndicator from '@/components/common/ChainIndicator'
+import useChainId from '@/hooks/useChainId'
+import useChains from '@/hooks/useChains'
+import { useMnemonicSafeName } from '@/hooks/useMnemonicName'
+import InfoIcon from '@/public/images/notifications/info.svg'
+import CreateSafeCardContent from '../../CardContent'
+import CreateSafeCardHeader from '../../CardHeader'
+import CreateSafeCardActions from '../../CardActions'
+
+import css from './styles.module.css'
+
+type CreateSafeStep1Form = {
+  chainId: string
+  name: string
+}
+
+enum CreateSafeStep1Fields {
+  chainId = 'chainId',
+  name = 'name',
+}
+
+const STEP_1_FORM_ID = 'create-safe-step-1-form'
+
+const CreateSafeStep1 = () => {
+  const chainId = useChainId()
+  const { configs } = useChains()
+  const fallbackName = useMnemonicSafeName()
+
+  const {
+    handleSubmit,
+    register,
+    formState: { errors },
+  } = useForm<CreateSafeStep1Form>({
+    mode: 'all',
+    defaultValues: {
+      [CreateSafeStep1Fields.chainId]: chainId || '',
+      [CreateSafeStep1Fields.name]: '',
+    },
+  })
+
+  const onSubmit = (data: CreateSafeStep1Form) => {
+    console.log(data)
+  }
+
+  return (
+    <Card className={css.card}>
+      <LinearProgress />
+
+      <CreateSafeCardHeader
+        step={1}
+        title="Select network and name Safe"
+        subheader="Select the network on which to create your Safe"
+      />
+
+      <CreateSafeCardContent>
+        <form onSubmit={handleSubmit(onSubmit)} id={STEP_1_FORM_ID} className={css.form}>
+          <Select
+            startAdornment={
+              <InputAdornment position="start">
+                <InputLabel>Network</InputLabel>
+              </InputAdornment>
+            }
+            {...register(CreateSafeStep1Fields.chainId)}
+            SelectDisplayProps={{
+              className: css.select,
+            }}
+            defaultValue={chainId}
+          >
+            {configs.map((chain) => (
+              <MenuItem key={chain.chainId} value={chain.chainId}>
+                <ChainIndicator chainId={chain.chainId} className={css.chain} />
+              </MenuItem>
+            ))}
+          </Select>
+
+          <TextField
+            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>
+      </CreateSafeCardContent>
+
+      <CreateSafeCardActions>
+        <Button variant="contained" form={STEP_1_FORM_ID} type="submit">
+          Continue
+        </Button>
+      </CreateSafeCardActions>
+    </Card>
+  )
+}
+
+export default CreateSafeStep1
diff --git a/src/components/open/steps/Step1/styles.module.css b/src/components/open/steps/Step1/styles.module.css
new file mode 100644
index 0000000000..9aa4f18ffa
--- /dev/null
+++ b/src/components/open/steps/Step1/styles.module.css
@@ -0,0 +1,24 @@
+.card {
+  border: none;
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  align-items: flex-start;
+}
+
+.select {
+  border-radius: 0;
+  padding-left: var(--space-1);
+  border-left: 1px solid var(--color-border-main);
+}
+
+.chain {
+  min-width: 90px;
+  min-height: var(--space-2);
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 700px;
+}
diff --git a/src/config/routes.ts b/src/config/routes.ts
index 28342223ce..9a323bd190 100644
--- a/src/config/routes.ts
+++ b/src/config/routes.ts
@@ -5,6 +5,7 @@ export const AppRoutes = {
   load: '/load',
   index: '/',
   home: '/home',
+  demo: '/demo',
   apps: '/apps',
   addressBook: '/address-book',
   balances: {
diff --git a/src/pages/demo.tsx b/src/pages/demo.tsx
new file mode 100644
index 0000000000..08cd69846d
--- /dev/null
+++ b/src/pages/demo.tsx
@@ -0,0 +1,17 @@
+import type { NextPage } from 'next'
+import Head from 'next/head'
+import CreateSafe from '@/components/open/CreateSafe'
+
+const Open: NextPage = () => {
+  return (
+    <main>
+      <Head>
+        <title>Safe – Create Safe</title>
+      </Head>
+
+      <CreateSafe />
+    </main>
+  )
+}
+
+export default Open

From ddaf0d9161944059ce3eb1047cd363b5ed8b766d Mon Sep 17 00:00:00 2001
From: iamacook <aaron@safe.global>
Date: Tue, 25 Oct 2022 09:03:06 +0200
Subject: [PATCH 2/6] fix: widget width

---
 src/components/open/CreateSafe/index.tsx             | 5 ++---
 src/components/open/OverviewWidget/styles.module.css | 2 +-
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/open/CreateSafe/index.tsx b/src/components/open/CreateSafe/index.tsx
index 6522b43015..1f1dd6da25 100644
--- a/src/components/open/CreateSafe/index.tsx
+++ b/src/components/open/CreateSafe/index.tsx
@@ -30,7 +30,7 @@ const CreateSafe = () => {
   return (
     <Grid container spacing={3}>
       <Grid item xs={1} />
-      <Grid item xs={6}>
+      <Grid item xs={11}>
         <Button variant="text" startIcon={<ChevronLeftIcon />} className={css.back} onClick={onBack}>
           Back
         </Button>
@@ -38,13 +38,12 @@ const CreateSafe = () => {
           Create new Safe
         </Typography>
       </Grid>
-      <Grid item xs={5} />
 
       <Grid item xs={1} />
       <Grid item xs={6}>
         <CreateSafeStep1 />
       </Grid>
-      <Grid item xs={5}>
+      <Grid item xs={4}>
         <OverviewWidget rows={rows} />
       </Grid>
       <Grid item xs={1} />
diff --git a/src/components/open/OverviewWidget/styles.module.css b/src/components/open/OverviewWidget/styles.module.css
index 98c0c668fc..c7e87b7dbe 100644
--- a/src/components/open/OverviewWidget/styles.module.css
+++ b/src/components/open/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 {

From 4997dc08fae824bbd23f3f22557decd35fd13447 Mon Sep 17 00:00:00 2001
From: iamacook <aaron@safe.global>
Date: Tue, 25 Oct 2022 09:33:42 +0200
Subject: [PATCH 3/6] refactor: combine components

---
 src/components/open/CardActions/index.tsx     | 10 -----
 .../open/CardActions/styles.module.css        |  3 --
 src/components/open/CardContent/index.tsx     | 10 -----
 .../open/CardContent/styles.module.css        |  5 ---
 src/components/open/CardHeader/index.tsx      | 22 ----------
 src/components/open/StepCard/index.tsx        | 41 +++++++++++++++++++
 .../styles.module.css                         | 16 +++++++-
 src/components/open/steps/Step1/index.tsx     | 29 ++++---------
 8 files changed, 65 insertions(+), 71 deletions(-)
 delete mode 100644 src/components/open/CardActions/index.tsx
 delete mode 100644 src/components/open/CardActions/styles.module.css
 delete mode 100644 src/components/open/CardContent/index.tsx
 delete mode 100644 src/components/open/CardContent/styles.module.css
 delete mode 100644 src/components/open/CardHeader/index.tsx
 create mode 100644 src/components/open/StepCard/index.tsx
 rename src/components/open/{CardHeader => StepCard}/styles.module.css (54%)

diff --git a/src/components/open/CardActions/index.tsx b/src/components/open/CardActions/index.tsx
deleted file mode 100644
index c381746004..0000000000
--- a/src/components/open/CardActions/index.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { CardActions } from '@mui/material'
-import type { CardActionsProps } from '@mui/material'
-
-import css from './styles.module.css'
-
-const CreateSafeCardActions = (props: CardActionsProps) => {
-  return <CardActions className={css.actions} {...props} />
-}
-
-export default CreateSafeCardActions
diff --git a/src/components/open/CardActions/styles.module.css b/src/components/open/CardActions/styles.module.css
deleted file mode 100644
index 90bb38b53f..0000000000
--- a/src/components/open/CardActions/styles.module.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.actions {
-  padding: var(--space-3) 52px;
-}
diff --git a/src/components/open/CardContent/index.tsx b/src/components/open/CardContent/index.tsx
deleted file mode 100644
index dd86289c48..0000000000
--- a/src/components/open/CardContent/index.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { CardContent } from '@mui/material'
-import type { CardContentProps } from '@mui/material'
-
-import css from './styles.module.css'
-
-const CreateSafeCardContent = (props: CardContentProps) => {
-  return <CardContent className={css.content} {...props} />
-}
-
-export default CreateSafeCardContent
diff --git a/src/components/open/CardContent/styles.module.css b/src/components/open/CardContent/styles.module.css
deleted file mode 100644
index ed6e28fea8..0000000000
--- a/src/components/open/CardContent/styles.module.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.content {
-  padding: var(--space-3) 52px;
-  border-top: 1px solid var(--color-border-light);
-  border-bottom: 1px solid var(--color-border-light);
-}
diff --git a/src/components/open/CardHeader/index.tsx b/src/components/open/CardHeader/index.tsx
deleted file mode 100644
index a3f4b47b70..0000000000
--- a/src/components/open/CardHeader/index.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { CardHeader, Avatar, Typography } from '@mui/material'
-import type { CardHeaderProps } from '@mui/material'
-
-import css from './styles.module.css'
-
-const CreateSafeCardHeader = ({ step, ...props }: CardHeaderProps & { step: number }) => {
-  return (
-    <CardHeader
-      titleTypographyProps={{ variant: 'h4' }}
-      subheaderTypographyProps={{ variant: 'body2' }}
-      avatar={
-        <Avatar className={css.avatar}>
-          <Typography variant="body2">{step}</Typography>
-        </Avatar>
-      }
-      className={css.header}
-      {...props}
-    />
-  )
-}
-
-export default CreateSafeCardHeader
diff --git a/src/components/open/StepCard/index.tsx b/src/components/open/StepCard/index.tsx
new file mode 100644
index 0000000000..2037eb412f
--- /dev/null
+++ b/src/components/open/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
diff --git a/src/components/open/CardHeader/styles.module.css b/src/components/open/StepCard/styles.module.css
similarity index 54%
rename from src/components/open/CardHeader/styles.module.css
rename to src/components/open/StepCard/styles.module.css
index be95a226f1..8ea2864b08 100644
--- a/src/components/open/CardHeader/styles.module.css
+++ b/src/components/open/StepCard/styles.module.css
@@ -1,3 +1,7 @@
+.card {
+  border: none;
+}
+
 .header {
   padding: var(--space-3) var(--space-2);
 }
@@ -10,8 +14,18 @@
   color: var(--color-text-primary);
 }
 
-.avatar {
+.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;
+}
diff --git a/src/components/open/steps/Step1/index.tsx b/src/components/open/steps/Step1/index.tsx
index 5d6ce43a31..516e103f28 100644
--- a/src/components/open/steps/Step1/index.tsx
+++ b/src/components/open/steps/Step1/index.tsx
@@ -1,6 +1,4 @@
 import {
-  Card,
-  LinearProgress,
   Select,
   InputAdornment,
   InputLabel,
@@ -19,9 +17,7 @@ import useChainId from '@/hooks/useChainId'
 import useChains from '@/hooks/useChains'
 import { useMnemonicSafeName } from '@/hooks/useMnemonicName'
 import InfoIcon from '@/public/images/notifications/info.svg'
-import CreateSafeCardContent from '../../CardContent'
-import CreateSafeCardHeader from '../../CardHeader'
-import CreateSafeCardActions from '../../CardActions'
+import StepCard from '../../StepCard'
 
 import css from './styles.module.css'
 
@@ -59,16 +55,10 @@ const CreateSafeStep1 = () => {
   }
 
   return (
-    <Card className={css.card}>
-      <LinearProgress />
-
-      <CreateSafeCardHeader
-        step={1}
-        title="Select network and name Safe"
-        subheader="Select the network on which to create your Safe"
-      />
-
-      <CreateSafeCardContent>
+    <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}>
           <Select
             startAdornment={
@@ -124,14 +114,13 @@ const CreateSafeStep1 = () => {
             .
           </Typography>
         </form>
-      </CreateSafeCardContent>
-
-      <CreateSafeCardActions>
+      }
+      actions={
         <Button variant="contained" form={STEP_1_FORM_ID} type="submit">
           Continue
         </Button>
-      </CreateSafeCardActions>
-    </Card>
+      }
+    />
   )
 }
 

From 40dfd11083f62c9e8f8e504bbae9c268f6c56326 Mon Sep 17 00:00:00 2001
From: iamacook <aaron@safe.global>
Date: Tue, 25 Oct 2022 10:24:29 +0200
Subject: [PATCH 4/6] fix: rename folder + remove CSS module

---
 src/components/{open => new-safe}/CreateSafe/index.tsx    | 8 ++------
 .../{open => new-safe}/OverviewWidget/index.tsx           | 0
 .../{open => new-safe}/OverviewWidget/styles.module.css   | 0
 src/components/{open => new-safe}/StepCard/index.tsx      | 0
 .../{open => new-safe}/StepCard/styles.module.css         | 0
 src/components/{open => new-safe}/steps/Step1/index.tsx   | 0
 .../{open => new-safe}/steps/Step1/styles.module.css      | 0
 src/components/open/CreateSafe/styles.module.css          | 7 -------
 src/pages/demo.tsx                                        | 2 +-
 9 files changed, 3 insertions(+), 14 deletions(-)
 rename src/components/{open => new-safe}/CreateSafe/index.tsx (83%)
 rename src/components/{open => new-safe}/OverviewWidget/index.tsx (100%)
 rename src/components/{open => new-safe}/OverviewWidget/styles.module.css (100%)
 rename src/components/{open => new-safe}/StepCard/index.tsx (100%)
 rename src/components/{open => new-safe}/StepCard/styles.module.css (100%)
 rename src/components/{open => new-safe}/steps/Step1/index.tsx (100%)
 rename src/components/{open => new-safe}/steps/Step1/styles.module.css (100%)
 delete mode 100644 src/components/open/CreateSafe/styles.module.css

diff --git a/src/components/open/CreateSafe/index.tsx b/src/components/new-safe/CreateSafe/index.tsx
similarity index 83%
rename from src/components/open/CreateSafe/index.tsx
rename to src/components/new-safe/CreateSafe/index.tsx
index 1f1dd6da25..2de26403b9 100644
--- a/src/components/open/CreateSafe/index.tsx
+++ b/src/components/new-safe/CreateSafe/index.tsx
@@ -8,8 +8,6 @@ import useWallet from '@/hooks/wallets/useWallet'
 import OverviewWidget from '../OverviewWidget'
 import CreateSafeStep1 from '../steps/Step1'
 
-import css from './styles.module.css'
-
 const CreateSafe = () => {
   const router = useRouter()
 
@@ -31,12 +29,10 @@ const CreateSafe = () => {
     <Grid container spacing={3}>
       <Grid item xs={1} />
       <Grid item xs={11}>
-        <Button variant="text" startIcon={<ChevronLeftIcon />} className={css.back} onClick={onBack}>
+        <Button variant="text" startIcon={<ChevronLeftIcon />} onClick={onBack} sx={{ my: 4, mx: 0 }}>
           Back
         </Button>
-        <Typography variant="h2" className={css.title}>
-          Create new Safe
-        </Typography>
+        <Typography variant="h2">Create new Safe</Typography>
       </Grid>
 
       <Grid item xs={1} />
diff --git a/src/components/open/OverviewWidget/index.tsx b/src/components/new-safe/OverviewWidget/index.tsx
similarity index 100%
rename from src/components/open/OverviewWidget/index.tsx
rename to src/components/new-safe/OverviewWidget/index.tsx
diff --git a/src/components/open/OverviewWidget/styles.module.css b/src/components/new-safe/OverviewWidget/styles.module.css
similarity index 100%
rename from src/components/open/OverviewWidget/styles.module.css
rename to src/components/new-safe/OverviewWidget/styles.module.css
diff --git a/src/components/open/StepCard/index.tsx b/src/components/new-safe/StepCard/index.tsx
similarity index 100%
rename from src/components/open/StepCard/index.tsx
rename to src/components/new-safe/StepCard/index.tsx
diff --git a/src/components/open/StepCard/styles.module.css b/src/components/new-safe/StepCard/styles.module.css
similarity index 100%
rename from src/components/open/StepCard/styles.module.css
rename to src/components/new-safe/StepCard/styles.module.css
diff --git a/src/components/open/steps/Step1/index.tsx b/src/components/new-safe/steps/Step1/index.tsx
similarity index 100%
rename from src/components/open/steps/Step1/index.tsx
rename to src/components/new-safe/steps/Step1/index.tsx
diff --git a/src/components/open/steps/Step1/styles.module.css b/src/components/new-safe/steps/Step1/styles.module.css
similarity index 100%
rename from src/components/open/steps/Step1/styles.module.css
rename to src/components/new-safe/steps/Step1/styles.module.css
diff --git a/src/components/open/CreateSafe/styles.module.css b/src/components/open/CreateSafe/styles.module.css
deleted file mode 100644
index 57cc135937..0000000000
--- a/src/components/open/CreateSafe/styles.module.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.back {
-  margin: var(--space-4) 0;
-}
-
-.title {
-  padding-bottom: var(--space-2);
-}
diff --git a/src/pages/demo.tsx b/src/pages/demo.tsx
index 08cd69846d..20c09006d8 100644
--- a/src/pages/demo.tsx
+++ b/src/pages/demo.tsx
@@ -1,6 +1,6 @@
 import type { NextPage } from 'next'
 import Head from 'next/head'
-import CreateSafe from '@/components/open/CreateSafe'
+import CreateSafe from '@/components/new-safe/CreateSafe'
 
 const Open: NextPage = () => {
   return (

From abe288e58757bb59f085258ffbd2fcbd9b1645f5 Mon Sep 17 00:00:00 2001
From: iamacook <aaron@safe.global>
Date: Tue, 25 Oct 2022 10:26:35 +0200
Subject: [PATCH 5/6] fix: missing padding

---
 src/components/new-safe/CreateSafe/index.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/new-safe/CreateSafe/index.tsx b/src/components/new-safe/CreateSafe/index.tsx
index 2de26403b9..b0ff33ddf7 100644
--- a/src/components/new-safe/CreateSafe/index.tsx
+++ b/src/components/new-safe/CreateSafe/index.tsx
@@ -32,7 +32,9 @@ const CreateSafe = () => {
         <Button variant="text" startIcon={<ChevronLeftIcon />} onClick={onBack} sx={{ my: 4, mx: 0 }}>
           Back
         </Button>
-        <Typography variant="h2">Create new Safe</Typography>
+        <Typography variant="h2" pb={2}>
+          Create new Safe
+        </Typography>
       </Grid>
 
       <Grid item xs={1} />

From c7cb07552668bf0db10fdb5884397c8193832235 Mon Sep 17 00:00:00 2001
From: Usame Algan <usame@safe.global>
Date: Wed, 26 Oct 2022 15:40:41 +0200
Subject: [PATCH 6/6] fix: Reuse NetworkSelector component

---
 src/components/new-safe/steps/Step1/index.tsx | 49 +++++--------------
 .../new-safe/steps/Step1/styles.module.css    | 22 +++++----
 2 files changed, 24 insertions(+), 47 deletions(-)

diff --git a/src/components/new-safe/steps/Step1/index.tsx b/src/components/new-safe/steps/Step1/index.tsx
index 516e103f28..a28ce8b218 100644
--- a/src/components/new-safe/steps/Step1/index.tsx
+++ b/src/components/new-safe/steps/Step1/index.tsx
@@ -1,41 +1,24 @@
-import {
-  Select,
-  InputAdornment,
-  InputLabel,
-  MenuItem,
-  TextField,
-  Tooltip,
-  SvgIcon,
-  Typography,
-  Button,
-  Link,
-} from '@mui/material'
+import { InputAdornment, TextField, Tooltip, SvgIcon, Typography, Button, Link, Box } from '@mui/material'
 import { useForm } from 'react-hook-form'
 
-import ChainIndicator from '@/components/common/ChainIndicator'
-import useChainId from '@/hooks/useChainId'
-import useChains from '@/hooks/useChains'
 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 = {
-  chainId: string
   name: string
 }
 
 enum CreateSafeStep1Fields {
-  chainId = 'chainId',
   name = 'name',
 }
 
 const STEP_1_FORM_ID = 'create-safe-step-1-form'
 
 const CreateSafeStep1 = () => {
-  const chainId = useChainId()
-  const { configs } = useChains()
   const fallbackName = useMnemonicSafeName()
 
   const {
@@ -45,7 +28,6 @@ const CreateSafeStep1 = () => {
   } = useForm<CreateSafeStep1Form>({
     mode: 'all',
     defaultValues: {
-      [CreateSafeStep1Fields.chainId]: chainId || '',
       [CreateSafeStep1Fields.name]: '',
     },
   })
@@ -60,26 +42,17 @@ const CreateSafeStep1 = () => {
       subheader="Select the network on which to create your Safe"
       content={
         <form onSubmit={handleSubmit(onSubmit)} id={STEP_1_FORM_ID} className={css.form}>
-          <Select
-            startAdornment={
-              <InputAdornment position="start">
-                <InputLabel>Network</InputLabel>
-              </InputAdornment>
-            }
-            {...register(CreateSafeStep1Fields.chainId)}
-            SelectDisplayProps={{
-              className: css.select,
-            }}
-            defaultValue={chainId}
-          >
-            {configs.map((chain) => (
-              <MenuItem key={chain.chainId} value={chain.chainId}>
-                <ChainIndicator chainId={chain.chainId} className={css.chain} />
-              </MenuItem>
-            ))}
-          </Select>
+          <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}
diff --git a/src/components/new-safe/steps/Step1/styles.module.css b/src/components/new-safe/steps/Step1/styles.module.css
index 9aa4f18ffa..e11fa9bc7b 100644
--- a/src/components/new-safe/steps/Step1/styles.module.css
+++ b/src/components/new-safe/steps/Step1/styles.module.css
@@ -10,15 +10,19 @@
 }
 
 .select {
-  border-radius: 0;
-  padding-left: var(--space-1);
-  border-left: 1px solid var(--color-border-main);
+  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);
 }
 
-.chain {
-  min-width: 90px;
-  min-height: var(--space-2);
-  border-radius: 4px;
-  font-size: 12px;
-  font-weight: 700px;
+.networkSelect {
+  border-left: 1px solid var(--color-border-light);
+  padding: var(--space-2);
+  margin-left: var(--space-2);
 }