From 5d9ac7a2e7166b68fb4a17f31eb15a9ffedc4bf2 Mon Sep 17 00:00:00 2001
From: iamacook <aaron@safe.global>
Date: Wed, 8 Nov 2023 17:24:05 +0100
Subject: [PATCH] feat: basic settings template

---
 public/images/common/recovery-plus.svg        | 12 ++++
 .../EnableRecoveryFlowSettings.tsx            | 56 ++++++++++++++++++-
 .../tx-flow/flows/EnableRecovery/index.tsx    |  6 +-
 3 files changed, 70 insertions(+), 4 deletions(-)
 create mode 100644 public/images/common/recovery-plus.svg

diff --git a/public/images/common/recovery-plus.svg b/public/images/common/recovery-plus.svg
new file mode 100644
index 0000000000..351202af8e
--- /dev/null
+++ b/public/images/common/recovery-plus.svg
@@ -0,0 +1,12 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_873_32225)">
+<path d="M8.50004 1.16705C7.50068 1.16308 6.51125 1.36528 5.59358 1.76103C4.67592 2.15677 3.84974 2.73754 3.1667 3.46705V2.16705C3.1678 2.07041 3.14787 1.97469 3.1083 1.88653C3.06873 1.79836 3.01046 1.71984 2.93753 1.65643C2.8646 1.59302 2.77876 1.54621 2.68595 1.51927C2.59314 1.49232 2.49558 1.48588 2.40004 1.50038C2.23831 1.53173 2.09283 1.61911 1.98918 1.74715C1.88553 1.87519 1.83036 2.03568 1.83337 2.20038V5.16705C1.83337 5.34386 1.90361 5.51343 2.02863 5.63845C2.15366 5.76348 2.32322 5.83372 2.50004 5.83372H5.50004C5.59667 5.83481 5.69239 5.81488 5.78056 5.77531C5.86873 5.73574 5.94724 5.67747 6.01065 5.60455C6.07407 5.53162 6.12087 5.44578 6.14782 5.35297C6.17476 5.26016 6.1812 5.1626 6.1667 5.06705C6.13535 4.90533 6.04797 4.75984 5.91993 4.65619C5.7919 4.55255 5.63141 4.49737 5.4667 4.50038H4.03337C4.80987 3.63564 5.82081 3.01503 6.94334 2.71395C8.06588 2.41288 9.2517 2.4443 10.3567 2.8044C11.4617 3.1645 12.4384 3.83778 13.168 4.74244C13.8976 5.64709 14.3488 6.74417 14.4667 7.90038C14.4833 8.0654 14.5608 8.21831 14.6841 8.32925C14.8073 8.4402 14.9675 8.50121 15.1334 8.50038C15.2268 8.50085 15.3193 8.48167 15.4049 8.44407C15.4904 8.40648 15.5671 8.35132 15.63 8.28217C15.6929 8.21302 15.7405 8.13143 15.7698 8.04269C15.7991 7.95394 15.8094 7.86003 15.8 7.76705C15.6182 5.95761 14.7705 4.28029 13.4215 3.06069C12.0726 1.84108 10.3186 1.1662 8.50004 1.16705Z" class="illustration-main-fill" fill="#121312"/>
+<path d="M14.5013 11.1667H11.5013C11.4047 11.1656 11.309 11.1855 11.2208 11.2251C11.1326 11.2647 11.0541 11.3229 10.9907 11.3958C10.9273 11.4688 10.8805 11.5546 10.8536 11.6474C10.8266 11.7402 10.8202 11.8378 10.8347 11.9333C10.866 12.0951 10.9534 12.2405 11.0814 12.3442C11.2095 12.4478 11.37 12.503 11.5347 12.5H12.968C12.1915 13.3648 11.1806 13.9854 10.058 14.2864C8.9355 14.5875 7.74968 14.5561 6.64466 14.196C5.53965 13.8359 4.563 13.1626 3.83338 12.258C3.10377 11.3533 2.65259 10.2562 2.53467 9.10001C2.51809 8.93499 2.4406 8.78208 2.31732 8.67114C2.19405 8.56019 2.03385 8.49918 1.86801 8.50001C1.77456 8.49954 1.68205 8.51872 1.59649 8.55632C1.51093 8.59391 1.43423 8.64907 1.37137 8.71822C1.30851 8.78737 1.26089 8.86896 1.23159 8.9577C1.2023 9.04645 1.19199 9.14036 1.20134 9.23334C1.34135 10.633 1.88094 11.9628 2.75577 13.0643C3.63059 14.1657 4.80374 14.9924 6.13534 15.4456C7.46693 15.8988 8.90078 15.9596 10.2659 15.6205C11.6311 15.2814 12.8699 14.5569 13.8347 13.5333V14.8333C13.8336 14.93 13.8535 15.0257 13.8931 15.1139C13.9327 15.202 13.9909 15.2805 14.0638 15.344C14.1368 15.4074 14.2226 15.4542 14.3154 15.4811C14.4082 15.5081 14.5058 15.5145 14.6013 15.5C14.7631 15.4687 14.9085 15.3813 15.0122 15.2532C15.1158 15.1252 15.171 14.9647 15.168 14.8V11.8333C15.168 11.6565 15.0978 11.487 14.9727 11.3619C14.8477 11.2369 14.6782 11.1667 14.5013 11.1667Z" class="illustration-main-fill" fill="#121312"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.1582 7.95623H9.04558V5.84365C9.04558 5.54345 8.80221 5.2998 8.50173 5.2998C8.20153 5.2998 7.95788 5.54345 7.95788 5.84365V7.95623H5.84585C5.54537 7.95623 5.302 8.19987 5.302 8.50008C5.302 8.80028 5.54537 9.04392 5.84585 9.04392H7.95788V11.1562C7.95788 11.4564 8.20153 11.7001 8.50173 11.7001C8.80221 11.7001 9.04558 11.4564 9.04558 11.1562V9.04392H11.1582C11.4584 9.04392 11.702 8.80028 11.702 8.50008C11.702 8.19987 11.4584 7.95623 11.1582 7.95623Z" class="illustration-main-fill" fill="#121312"/>
+</g>
+<defs>
+<clipPath id="clip0_873_32225">
+<rect width="16" height="16" fill="white" transform="translate(0.5 0.5)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/components/tx-flow/flows/EnableRecovery/EnableRecoveryFlowSettings.tsx b/src/components/tx-flow/flows/EnableRecovery/EnableRecoveryFlowSettings.tsx
index 79709c965d..dbb1b792c1 100644
--- a/src/components/tx-flow/flows/EnableRecovery/EnableRecoveryFlowSettings.tsx
+++ b/src/components/tx-flow/flows/EnableRecovery/EnableRecoveryFlowSettings.tsx
@@ -1,8 +1,12 @@
+import { Divider, CardActions, Button, Typography } from '@mui/material'
+import { useForm, FormProvider } from 'react-hook-form'
 import type { ReactElement } from 'react'
 
 import TxCard from '../../common/TxCard'
 import type { EnableRecoveryFlowProps } from '.'
 
+import commonCss from '@/components/tx-flow/common/styles.module.css'
+
 export function EnableRecoveryFlowSettings({
   params,
   onSubmit,
@@ -10,5 +14,55 @@ export function EnableRecoveryFlowSettings({
   params: EnableRecoveryFlowProps
   onSubmit: (formData: EnableRecoveryFlowProps) => void
 }): ReactElement {
-  return <TxCard>EnableRecoveryFlowSettings</TxCard>
+  const formMethods = useForm<EnableRecoveryFlowProps>({
+    defaultValues: params,
+    mode: 'onChange',
+  })
+
+  return (
+    <>
+      <FormProvider {...formMethods}>
+        <form onSubmit={formMethods.handleSubmit(onSubmit)} className={commonCss.form}>
+          <TxCard>
+            <Typography variant="h5">Trusted guardian</Typography>
+            <Typography variant="body2">
+              Choosen a guardian, such as a hardware wallet or family member&apos;s wallet, that can initiate the
+              recovery process in the future.
+            </Typography>
+
+            {/* TODO: Address field */}
+
+            {/* TODO: Info button */}
+            <Typography variant="h5">Recovery delay</Typography>
+            <Typography variant="body2">
+              You can cancel any recovery attempt when it is not needed or wanted within the delay period.
+            </Typography>
+
+            {/* TODO: Delay field */}
+
+            {/* TODO: Advanced options */}
+          </TxCard>
+
+          <TxCard>
+            {/* TODO: Recommended badge */}
+
+            <Typography variant="h5">Receive email updates</Typography>
+            <Typography variant="body2">Get notified about any recovery initiations and their statuses.</Typography>
+
+            {/* TODO: Email address field */}
+
+            {/* TODO: Tenderly logo */}
+
+            <Divider className={commonCss.nestedDivider} />
+
+            <CardActions sx={{ mt: '0 !important' }}>
+              <Button variant="contained" type="submit">
+                Next
+              </Button>
+            </CardActions>
+          </TxCard>
+        </form>
+      </FormProvider>
+    </>
+  )
 }
diff --git a/src/components/tx-flow/flows/EnableRecovery/index.tsx b/src/components/tx-flow/flows/EnableRecovery/index.tsx
index 2784c3441a..5c0065b630 100644
--- a/src/components/tx-flow/flows/EnableRecovery/index.tsx
+++ b/src/components/tx-flow/flows/EnableRecovery/index.tsx
@@ -1,7 +1,7 @@
 import type { ReactElement } from 'react'
 
 import TxLayout from '@/components/tx-flow/common/TxLayout'
-import CodeIcon from '@/public/images/apps/code-icon.svg'
+import RecoveryPlus from '@/public/images/common/recovery-plus.svg'
 import useTxStepper from '../../useTxStepper'
 import { EnableRecoveryFlowReview } from './EnableRecoveryFlowReview'
 import { EnableRecoveryFlowSettings } from './EnableRecoveryFlowSettings'
@@ -38,10 +38,10 @@ export function EnableRecoveryFlow(): ReactElement {
   const subtitle = isIntro
     ? 'How does recovery work?'
     : isSettings
-    ? 'Set up account settings'
+    ? 'Set up account recovery settings'
     : 'Set up account recovery'
 
-  const icon = isIntro ? undefined : CodeIcon
+  const icon = isIntro ? undefined : RecoveryPlus
 
   return (
     <TxLayout