From ffb4258e9157556366e08917884dc9347905f534 Mon Sep 17 00:00:00 2001
From: William Robertson <williamrobertson13@users.noreply.github.com>
Date: Thu, 27 Jul 2023 16:47:19 -0400
Subject: [PATCH] [wallet-ext] build new "Protect Account" UI screen and add
 some form primitives (#13160)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description

This PR adds the new "Protect Account" screen used when clicking "Create
a new account" button and as the second step of the "Import Passphrase"
and "Import Private Key" flows. As part of this, I attempted to create
some new form primitives to make building forms more manageable (all of
the existing components aren't quite up to spec, use Formik, and aren't
fully accessible). I ended up following an approach similar to
https://www.brendonovich.dev/blog/the-ultimate-form-abstraction which
gave some creds to @Jordan-Mysten 😆

As a rough outline, we have generic, non-form-library-specific input
controls like `TextArea`, `Input`, `PasswordInput`, `Checkbox` which are
used to create `react-hook-form` specific controls such as `TextField`,
`TextAreaField`, `CheckboxField`, and so forth. We also have some helper
components like `Form` and `FormField` to help abstract away some
specific form details such as error states when using react-hook-form. I
considered using the Radix form primitives, but I didn't really see the
immediate value 🤷🏼

Additional note #1: Some of these pages are used in different flows and
have different submission logic depending on the usage context. I think
I might need to brainstorm on the best way to handle that and tackle it
in a follow-up PR

Additional note #2: the auto-lock input is still a WIP on the design
side, so I have a TODO to add that once it's ready.

Checkbox in Figma -
https://www.figma.com/file/T06obgYVOUD2JDGXM8QEDX?node-id=341%3A378&main-component=1&fuid=1209977329759347633

Input in Figma -
https://www.figma.com/file/T06obgYVOUD2JDGXM8QEDX/01-Components-%3A-Shared?node-id=19%3A312&mode=dev

<img width="631" alt="image"
src="https://github.com/MystenLabs/sui/assets/7453188/4c851808-b751-412a-b25e-06d4660b5fa3">

## Test Plan
- Manual testing (error states, successful submission, accessibility,
focus/disabled/hover states, etc.)
- CI

---
If your changes are not user-facing and not a breaking change, you can
skip the following section. Otherwise, please indicate what changed, and
then add to the Release Notes section as highlighted during the release
process.

### Type of Change (Check all that apply)

- [ ] protocol change
- [ ] user-visible impact
- [ ] breaking change for a client SDKs
- [ ] breaking change for FNs (FN binary must upgrade)
- [ ] breaking change for validators or node operators (must upgrade
binaries)
- [ ] breaking change for on-chain data layout
- [ ] necessitate either a data wipe or data migration

### Release notes
---
 apps/wallet/package.json                      |   1 +
 .../accounts/ImportPrivateKeyForm.tsx         |  34 ++---
 .../accounts/ProtectAccountForm.tsx           |  94 +++++++++++++
 apps/wallet/src/ui/app/index.tsx              |   6 +-
 .../ui/app/pages/accounts/AddAccountPage.tsx  |   2 +-
 .../pages/accounts/CreateNewAccountPage.tsx   |   6 -
 .../app/pages/accounts/ProtectAccountPage.tsx |  34 +++++
 .../src/ui/app/shared/forms/CheckboxField.tsx |  33 +++++
 apps/wallet/src/ui/app/shared/forms/Form.tsx  |  25 ++++
 .../src/ui/app/shared/forms/FormField.tsx     |  26 ++++
 .../src/ui/app/shared/forms/FormLabel.tsx     |  24 ++++
 .../src/ui/app/shared/forms/TextAreaField.tsx |  19 +++
 .../src/ui/app/shared/forms/TextField.tsx     |  24 ++++
 .../ui/app/shared/forms/controls/Checkbox.tsx |  35 +++++
 .../ui/app/shared/forms/controls/Input.tsx    |  15 ++
 .../shared/forms/controls/PasswordInput.tsx   |  35 +++++
 .../ui/app/shared/forms/controls/TextArea.tsx |  15 ++
 pnpm-lock.yaml                                | 128 +++++-------------
 18 files changed, 427 insertions(+), 129 deletions(-)
 create mode 100644 apps/wallet/src/ui/app/components/accounts/ProtectAccountForm.tsx
 delete mode 100644 apps/wallet/src/ui/app/pages/accounts/CreateNewAccountPage.tsx
 create mode 100644 apps/wallet/src/ui/app/pages/accounts/ProtectAccountPage.tsx
 create mode 100644 apps/wallet/src/ui/app/shared/forms/CheckboxField.tsx
 create mode 100644 apps/wallet/src/ui/app/shared/forms/Form.tsx
 create mode 100644 apps/wallet/src/ui/app/shared/forms/FormField.tsx
 create mode 100644 apps/wallet/src/ui/app/shared/forms/FormLabel.tsx
 create mode 100644 apps/wallet/src/ui/app/shared/forms/TextAreaField.tsx
 create mode 100644 apps/wallet/src/ui/app/shared/forms/TextField.tsx
 create mode 100644 apps/wallet/src/ui/app/shared/forms/controls/Checkbox.tsx
 create mode 100644 apps/wallet/src/ui/app/shared/forms/controls/Input.tsx
 create mode 100644 apps/wallet/src/ui/app/shared/forms/controls/PasswordInput.tsx
 create mode 100644 apps/wallet/src/ui/app/shared/forms/controls/TextArea.tsx

diff --git a/apps/wallet/package.json b/apps/wallet/package.json
index 6a78d5b9a3b86..dea2c6ac3d3be 100644
--- a/apps/wallet/package.json
+++ b/apps/wallet/package.json
@@ -121,6 +121,7 @@
 		"@mysten/sui.js": "workspace:*",
 		"@mysten/wallet-standard": "workspace:*",
 		"@noble/hashes": "^1.3.1",
+		"@radix-ui/react-checkbox": "^1.0.4",
 		"@reduxjs/toolkit": "^1.9.5",
 		"@scure/bip32": "^1.3.1",
 		"@scure/bip39": "^1.2.1",
diff --git a/apps/wallet/src/ui/app/components/accounts/ImportPrivateKeyForm.tsx b/apps/wallet/src/ui/app/components/accounts/ImportPrivateKeyForm.tsx
index 73d0c07afd599..2da561b16a4c3 100644
--- a/apps/wallet/src/ui/app/components/accounts/ImportPrivateKeyForm.tsx
+++ b/apps/wallet/src/ui/app/components/accounts/ImportPrivateKeyForm.tsx
@@ -6,9 +6,9 @@ import { useForm, type SubmitHandler } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 import * as Yup from 'yup';
 import { privateKeyValidation } from '../../helpers/validation/privateKeyValidation';
+import { Form } from '../../shared/forms/Form';
+import { TextAreaField } from '../../shared/forms/TextAreaField';
 import { Button } from '_app/shared/ButtonUI';
-import Alert from '_src/ui/app/components/alert';
-import { Text } from '_src/ui/app/shared/text';
 
 const formSchema = Yup.object({
 	privateKey: privateKeyValidation,
@@ -21,33 +21,19 @@ type ImportPrivateKeyFormProps = {
 };
 
 export function ImportPrivateKeyForm({ onSubmit }: ImportPrivateKeyFormProps) {
-	const {
-		register,
-		handleSubmit,
-		formState: { isSubmitting, isValid, touchedFields, errors },
-	} = useForm({
+	const form = useForm({
 		mode: 'onTouched',
 		resolver: yupResolver(formSchema),
 	});
+	const {
+		register,
+		formState: { isSubmitting, isValid },
+	} = form;
 	const navigate = useNavigate();
 
 	return (
-		<form className="flex flex-col h-full" onSubmit={handleSubmit(onSubmit)}>
-			<label className="flex flex-col gap-2.5">
-				<div className="pl-2.5">
-					<Text variant="pBody" color="steel-darker" weight="semibold">
-						Enter Private Key
-					</Text>
-				</div>
-				<textarea
-					className="resize-none w-full text-body text-steel-dark font-medium p-3 border border-solid border-gray-45 rounded-2lg shadow-button focus:border-steel focus:shadow-none"
-					rows={4}
-					{...register('privateKey')}
-				/>
-				{touchedFields.privateKey && errors.privateKey && (
-					<Alert>{errors.privateKey.message}</Alert>
-				)}
-			</label>
+		<Form className="flex flex-col h-full" form={form} onSubmit={onSubmit}>
+			<TextAreaField label="Enter Private Key" rows={4} {...register('privateKey')} />
 			<div className="flex gap-2.5 mt-auto">
 				<Button variant="outline" size="tall" text="Cancel" onClick={() => navigate(-1)} />
 				<Button
@@ -59,6 +45,6 @@ export function ImportPrivateKeyForm({ onSubmit }: ImportPrivateKeyFormProps) {
 					text="Add Account"
 				/>
 			</div>
-		</form>
+		</Form>
 	);
 }
diff --git a/apps/wallet/src/ui/app/components/accounts/ProtectAccountForm.tsx b/apps/wallet/src/ui/app/components/accounts/ProtectAccountForm.tsx
new file mode 100644
index 0000000000000..76bb05027b0aa
--- /dev/null
+++ b/apps/wallet/src/ui/app/components/accounts/ProtectAccountForm.tsx
@@ -0,0 +1,94 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { yupResolver } from '@hookform/resolvers/yup';
+import { useForm, type SubmitHandler } from 'react-hook-form';
+import { useNavigate } from 'react-router-dom';
+import * as Yup from 'yup';
+import { CheckboxField } from '../../shared/forms/CheckboxField';
+import { Form } from '../../shared/forms/Form';
+import { TextField } from '../../shared/forms/TextField';
+import ExternalLink from '../external-link';
+import { Button } from '_app/shared/ButtonUI';
+import { ToS_LINK } from '_src/shared/constants';
+
+const formSchema = Yup.object({
+	password: Yup.string().required('Required'),
+	confirmedPassword: Yup.string().required('Required'),
+	acceptedTos: Yup.boolean().required().oneOf([true]),
+	enabledAutolock: Yup.boolean(),
+});
+
+type FormValues = Yup.InferType<typeof formSchema>;
+
+type ProtectAccountFormProps = {
+	submitButtonText: string;
+	cancelButtonText: string;
+	onSubmit: SubmitHandler<FormValues>;
+};
+
+export function ProtectAccountForm({
+	submitButtonText,
+	cancelButtonText,
+	onSubmit,
+}: ProtectAccountFormProps) {
+	const form = useForm({
+		mode: 'all',
+		defaultValues: {
+			password: '',
+			confirmedPassword: '',
+			acceptedTos: false,
+			enabledAutolock: true,
+		},
+		resolver: yupResolver(formSchema),
+	});
+	const {
+		register,
+		formState: { isSubmitting, isValid },
+	} = form;
+	const navigate = useNavigate();
+
+	return (
+		<Form className="flex flex-col gap-6 h-full" form={form} onSubmit={onSubmit}>
+			<TextField type="password" label="Create Account Password" {...register('password')} />
+			<TextField
+				type="password"
+				label="Confirm Account Password"
+				{...register('confirmedPassword')}
+			/>
+			<div className="flex flex-col gap-4">
+				<CheckboxField name="enabledAutolock" label="Auto-lock after I am inactive for" />
+				{/* TODO: Abhi is working on designs for the auto-lock input, we'll add this when it's ready */}
+			</div>
+			<div className="flex flex-col gap-5 mt-auto">
+				<CheckboxField
+					name="acceptedTos"
+					label={
+						<>
+							I read and agreed to the{' '}
+							<ExternalLink href={ToS_LINK} className="text-[#1F6493] no-underline">
+								Terms of Services
+							</ExternalLink>
+						</>
+					}
+				/>
+				<div className="flex gap-2.5">
+					<Button
+						variant="outline"
+						size="tall"
+						text={cancelButtonText}
+						onClick={() => navigate(-1)}
+					/>
+					<Button
+						type="submit"
+						disabled={isSubmitting || !isValid}
+						variant="primary"
+						size="tall"
+						loading={isSubmitting}
+						text={submitButtonText}
+					/>
+				</div>
+			</div>
+		</Form>
+	);
+}
diff --git a/apps/wallet/src/ui/app/index.tsx b/apps/wallet/src/ui/app/index.tsx
index 0c683dd7d76d7..c09f2f4673d76 100644
--- a/apps/wallet/src/ui/app/index.tsx
+++ b/apps/wallet/src/ui/app/index.tsx
@@ -6,11 +6,12 @@ import { useEffect } from 'react';
 import { Navigate, Route, Routes, useLocation } from 'react-router-dom';
 
 import { useInitialPageView } from './hooks/useInitialPageView';
-import { CreateNewAccountPage } from './pages/accounts/CreateNewAccountPage';
+import { ProtectAccountPage } from './pages/accounts/ProtectAccountPage';
 import AssetsPage from './pages/home/assets';
 import { QredoConnectInfoPage } from './pages/qredo-connect/QredoConnectInfoPage';
 import { SelectQredoAccountsPage } from './pages/qredo-connect/SelectQredoAccountsPage';
 import { RestrictedPage } from './pages/restricted';
+import WelcomePage from './pages/welcome';
 import { AppType } from './redux/slices/app/AppType';
 import { Staking } from './staking/home';
 import ForgotPasswordPage from '_app/wallet/forgot-password-page';
@@ -41,7 +42,6 @@ import CreatePage from '_pages/initialize/create';
 import { ImportPage } from '_pages/initialize/import';
 import SelectPage from '_pages/initialize/select';
 import SiteConnectPage from '_pages/site-connect';
-import WelcomePage from '_pages/welcome';
 import { setNavVisibility } from '_redux/slices/app';
 
 const HIDDEN_MENU_PATHS = [
@@ -97,7 +97,7 @@ const App = () => {
 			{useNewOnboardingFlow && (
 				<Route path="/accounts" element={<AccountsPage />}>
 					<Route path="add-account" element={<AddAccountPage />} />
-					<Route path="create-new-account" element={<CreateNewAccountPage />} />
+					<Route path="protect-account" element={<ProtectAccountPage />} />
 					<Route path="import-ledger-accounts" element={<ImportLedgerAccountsPage />} />
 					<Route path="import-passphrase" element={<ImportPassphrasePage />} />
 					<Route path="import-private-key" element={<ImportPrivateKeyPage />} />
diff --git a/apps/wallet/src/ui/app/pages/accounts/AddAccountPage.tsx b/apps/wallet/src/ui/app/pages/accounts/AddAccountPage.tsx
index fbffe23c7ad08..d5118e81dc139 100644
--- a/apps/wallet/src/ui/app/pages/accounts/AddAccountPage.tsx
+++ b/apps/wallet/src/ui/app/pages/accounts/AddAccountPage.tsx
@@ -96,7 +96,7 @@ export function AddAccountPage({ showSocialSignInOptions = false }: AddAccountPa
 						variant="outline"
 						size="tall"
 						text="Create a new Passphrase Account"
-						to="/accounts/create-new-account"
+						to="/accounts/protect-account"
 						onClick={() => {
 							ampli.clickedCreateNewAccount({ sourceFlow });
 						}}
diff --git a/apps/wallet/src/ui/app/pages/accounts/CreateNewAccountPage.tsx b/apps/wallet/src/ui/app/pages/accounts/CreateNewAccountPage.tsx
deleted file mode 100644
index 46a81cc93971f..0000000000000
--- a/apps/wallet/src/ui/app/pages/accounts/CreateNewAccountPage.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-// Copyright (c) Mysten Labs, Inc.
-// SPDX-License-Identifier: Apache-2.0
-
-export function CreateNewAccountPage() {
-	return <div>Implement me!</div>;
-}
diff --git a/apps/wallet/src/ui/app/pages/accounts/ProtectAccountPage.tsx b/apps/wallet/src/ui/app/pages/accounts/ProtectAccountPage.tsx
new file mode 100644
index 0000000000000..b660add0a8691
--- /dev/null
+++ b/apps/wallet/src/ui/app/pages/accounts/ProtectAccountPage.tsx
@@ -0,0 +1,34 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { ProtectAccountForm } from '../../components/accounts/ProtectAccountForm';
+import { Heading } from '../../shared/heading';
+import { Text } from '_app/shared/text';
+
+export function ProtectAccountPage() {
+	return (
+		<div className="rounded-20 bg-sui-lightest shadow-wallet-content flex flex-col items-center px-6 py-10 h-full">
+			<Text variant="caption" color="steel-dark" weight="semibold">
+				Wallet Setup
+			</Text>
+			<div className="text-center mt-2.5">
+				<Heading variant="heading1" color="gray-90" as="h1" weight="bold">
+					Protect Account with a Password Lock
+				</Heading>
+			</div>
+			<div className="mt-6 w-full grow">
+				<ProtectAccountForm
+					cancelButtonText="Back"
+					submitButtonText="Create Wallet"
+					onSubmit={(formValues) => {
+						// eslint-disable-next-line no-console
+						console.log(
+							'TODO: Do something when the user submits the form successfully',
+							formValues,
+						);
+					}}
+				/>
+			</div>
+		</div>
+	);
+}
diff --git a/apps/wallet/src/ui/app/shared/forms/CheckboxField.tsx b/apps/wallet/src/ui/app/shared/forms/CheckboxField.tsx
new file mode 100644
index 0000000000000..d04bbfeeb7ce5
--- /dev/null
+++ b/apps/wallet/src/ui/app/shared/forms/CheckboxField.tsx
@@ -0,0 +1,33 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { type ComponentProps, type ReactNode, forwardRef } from 'react';
+import { Controller, useFormContext } from 'react-hook-form';
+import { Checkbox } from './controls/Checkbox';
+
+type CheckboxFieldProps = {
+	name: string;
+	label: ReactNode;
+} & Omit<ComponentProps<'button'>, 'ref'>;
+
+export const CheckboxField = forwardRef<HTMLButtonElement, CheckboxFieldProps>(
+	({ label, name, ...props }, forwardedRef) => {
+		const { control } = useFormContext();
+		return (
+			<Controller
+				control={control}
+				name={name}
+				render={({ field: { onChange, name, value } }) => (
+					<Checkbox
+						label={label}
+						onCheckedChange={onChange}
+						name={name}
+						checked={value}
+						ref={forwardedRef}
+						{...props}
+					/>
+				)}
+			/>
+		);
+	},
+);
diff --git a/apps/wallet/src/ui/app/shared/forms/Form.tsx b/apps/wallet/src/ui/app/shared/forms/Form.tsx
new file mode 100644
index 0000000000000..ffde456f1b3b8
--- /dev/null
+++ b/apps/wallet/src/ui/app/shared/forms/Form.tsx
@@ -0,0 +1,25 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { type ComponentProps } from 'react';
+import {
+	type FieldValues,
+	FormProvider,
+	type SubmitHandler,
+	type UseFormReturn,
+} from 'react-hook-form';
+
+type FormProps<T extends FieldValues> = Omit<ComponentProps<'form'>, 'onSubmit'> & {
+	form: UseFormReturn<T>;
+	onSubmit: SubmitHandler<T>;
+};
+
+export function Form<T extends FieldValues>({ form, onSubmit, children, ...props }: FormProps<T>) {
+	return (
+		<FormProvider {...form}>
+			<form onSubmit={form.handleSubmit(onSubmit)} {...props}>
+				{children}
+			</form>
+		</FormProvider>
+	);
+}
diff --git a/apps/wallet/src/ui/app/shared/forms/FormField.tsx b/apps/wallet/src/ui/app/shared/forms/FormField.tsx
new file mode 100644
index 0000000000000..b4950c07870b1
--- /dev/null
+++ b/apps/wallet/src/ui/app/shared/forms/FormField.tsx
@@ -0,0 +1,26 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+import { type ReactNode } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { FormLabel } from './FormLabel';
+import Alert from '../../components/alert';
+
+type FormFieldProps = {
+	name: string;
+	label: ReactNode;
+	children: ReactNode;
+};
+
+export function FormField({ children, name, label }: FormFieldProps) {
+	const { getFieldState, formState } = useFormContext();
+	const state = getFieldState(name, formState);
+
+	return (
+		<div className="flex flex-col gap-2.5">
+			<FormLabel label={label}>{children}</FormLabel>
+			{state.error && <Alert>{state.error.message}</Alert>}
+		</div>
+	);
+}
+
+export default FormField;
diff --git a/apps/wallet/src/ui/app/shared/forms/FormLabel.tsx b/apps/wallet/src/ui/app/shared/forms/FormLabel.tsx
new file mode 100644
index 0000000000000..00b1f2c288d11
--- /dev/null
+++ b/apps/wallet/src/ui/app/shared/forms/FormLabel.tsx
@@ -0,0 +1,24 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { Text } from '_app/shared/text';
+
+import type { ReactNode } from 'react';
+
+export type FormLabelProps = {
+	label: ReactNode;
+	children: ReactNode;
+};
+
+export function FormLabel({ label, children }: FormLabelProps) {
+	return (
+		<label className="flex flex-col flex-nowrap gap-2.5">
+			<div className="pl-2.5">
+				<Text variant="body" color="steel-darker" weight="semibold">
+					{label}
+				</Text>
+			</div>
+			{children}
+		</label>
+	);
+}
diff --git a/apps/wallet/src/ui/app/shared/forms/TextAreaField.tsx b/apps/wallet/src/ui/app/shared/forms/TextAreaField.tsx
new file mode 100644
index 0000000000000..62b60a07ad18c
--- /dev/null
+++ b/apps/wallet/src/ui/app/shared/forms/TextAreaField.tsx
@@ -0,0 +1,19 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { type ComponentProps, type ReactNode, forwardRef } from 'react';
+import FormField from './FormField';
+import { TextArea } from './controls/TextArea';
+
+type TextAreaFieldProps = {
+	name: string;
+	label: ReactNode;
+} & ComponentProps<'textarea'>;
+
+export const TextAreaField = forwardRef<HTMLTextAreaElement, TextAreaFieldProps>(
+	({ label, ...props }, forwardedRef) => (
+		<FormField name={props.name} label={label}>
+			<TextArea {...props} ref={forwardedRef} />
+		</FormField>
+	),
+);
diff --git a/apps/wallet/src/ui/app/shared/forms/TextField.tsx b/apps/wallet/src/ui/app/shared/forms/TextField.tsx
new file mode 100644
index 0000000000000..a1eba79169769
--- /dev/null
+++ b/apps/wallet/src/ui/app/shared/forms/TextField.tsx
@@ -0,0 +1,24 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { type ComponentProps, type ReactNode, forwardRef } from 'react';
+import FormField from './FormField';
+import { Input } from './controls/Input';
+import { PasswordInput } from './controls/PasswordInput';
+
+type TextFieldProps = {
+	name: string;
+	label: ReactNode;
+} & ComponentProps<'input'>;
+
+export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
+	({ label, ...props }, forwardedRef) => {
+		const InputComponent = props.type === 'password' ? PasswordInput : Input;
+
+		return (
+			<FormField name={props.name} label={label}>
+				<InputComponent {...props} ref={forwardedRef} />
+			</FormField>
+		);
+	},
+);
diff --git a/apps/wallet/src/ui/app/shared/forms/controls/Checkbox.tsx b/apps/wallet/src/ui/app/shared/forms/controls/Checkbox.tsx
new file mode 100644
index 0000000000000..d9a94041a1997
--- /dev/null
+++ b/apps/wallet/src/ui/app/shared/forms/controls/Checkbox.tsx
@@ -0,0 +1,35 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { Check12 } from '@mysten/icons';
+import * as RadixCheckbox from '@radix-ui/react-checkbox';
+import { forwardRef } from 'react';
+
+import type { ComponentProps, ReactNode } from 'react';
+
+type CheckboxProps = {
+	label: ReactNode;
+} & Omit<ComponentProps<typeof RadixCheckbox.Root>, 'className' | 'ref' | 'id'>;
+
+export const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(
+	({ label, ...props }, forwardedRef) => (
+		<div className="flex items-center gap-2 pl-2.5">
+			<RadixCheckbox.Root
+				className="group peer appearance-none border-0 bg-transparent p-0 m-0"
+				ref={forwardedRef}
+				id={props.name}
+				{...props}
+			>
+				<div className="bg-white group-data-[state=checked]:bg-success group-data-[state=checked]:border-0 h-5 w-5 border-steel disabled:border-hero-darkest/10 border border-solid rounded flex items-center justify-center">
+					<Check12 className="text-hero-darkest/10 group-data-[state=checked]:text-white text-body font-semibold" />
+				</div>
+			</RadixCheckbox.Root>
+			<label
+				className="text-body text-steel-dark peer-data-[state=checked]:text-steel-darker peer-disabled:text-gray-60 font-medium"
+				htmlFor={props.name}
+			>
+				{label}
+			</label>
+		</div>
+	),
+);
diff --git a/apps/wallet/src/ui/app/shared/forms/controls/Input.tsx b/apps/wallet/src/ui/app/shared/forms/controls/Input.tsx
new file mode 100644
index 0000000000000..f6f2cbf33fe83
--- /dev/null
+++ b/apps/wallet/src/ui/app/shared/forms/controls/Input.tsx
@@ -0,0 +1,15 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { forwardRef } from 'react';
+import type { ComponentProps } from 'react';
+
+type InputProps = Omit<ComponentProps<'input'>, 'className'>;
+
+export const Input = forwardRef<HTMLInputElement, InputProps>((props, forwardedRef) => (
+	<input
+		className="transition peer items-center p-3 bg-white text-body font-medium placeholder:text-gray-60 w-full shadow-button border-solid border border-gray-45 text-steel-darker rounded-2lg hover:border-steel focus:border-steel disabled:border-gray-40 disabled:text-gray-55"
+		ref={forwardedRef}
+		{...props}
+	/>
+));
diff --git a/apps/wallet/src/ui/app/shared/forms/controls/PasswordInput.tsx b/apps/wallet/src/ui/app/shared/forms/controls/PasswordInput.tsx
new file mode 100644
index 0000000000000..e659b6a1e8149
--- /dev/null
+++ b/apps/wallet/src/ui/app/shared/forms/controls/PasswordInput.tsx
@@ -0,0 +1,35 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { EyeOpen16, EyeClose16 } from '@mysten/icons';
+import { forwardRef, useState, type ComponentProps } from 'react';
+import { Input } from './Input';
+import { ButtonOrLink } from '../../utils/ButtonOrLink';
+
+type PasswordInputProps = {
+	name: string;
+} & Omit<ComponentProps<'input'>, 'className' | 'type' | 'name' | 'ref'>;
+
+export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(
+	({ placeholder, ...props }, forwardedRef) => {
+		const [passwordShown, setPasswordShown] = useState(false);
+		const IconComponent = passwordShown ? EyeOpen16 : EyeClose16;
+
+		return (
+			<div className="flex w-full relative items-center">
+				<Input
+					{...props}
+					type={passwordShown ? 'text' : 'password'}
+					placeholder="Password"
+					ref={forwardedRef}
+				/>
+				<ButtonOrLink
+					className="flex appearance-none bg-transparent border-none cursor-pointer absolute right-3 text-gray-60 peer-focus:text-steel"
+					onClick={() => setPasswordShown((prevState) => !prevState)}
+				>
+					<IconComponent className="w-4 h-4" />
+				</ButtonOrLink>
+			</div>
+		);
+	},
+);
diff --git a/apps/wallet/src/ui/app/shared/forms/controls/TextArea.tsx b/apps/wallet/src/ui/app/shared/forms/controls/TextArea.tsx
new file mode 100644
index 0000000000000..a2d824c47431f
--- /dev/null
+++ b/apps/wallet/src/ui/app/shared/forms/controls/TextArea.tsx
@@ -0,0 +1,15 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { forwardRef } from 'react';
+import type { ComponentProps } from 'react';
+
+type TextAreaProps = Omit<ComponentProps<'textarea'>, 'className' | 'ref'>;
+
+export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>((props, forwardedRef) => (
+	<textarea
+		className="resize-none w-full text-body text-steel-dark font-medium p-3 border border-solid border-gray-45 rounded-2lg shadow-button focus:border-steel focus:shadow-none"
+		ref={forwardedRef}
+		{...props}
+	/>
+));
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1523f7895c389..4ed3127e6b5a0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -561,6 +561,9 @@ importers:
       '@noble/hashes':
         specifier: ^1.3.1
         version: 1.3.1
+      '@radix-ui/react-checkbox':
+        specifier: ^1.0.4
+        version: 1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.15)(react-dom@18.2.0)(react@18.2.0)
       '@reduxjs/toolkit':
         specifier: ^1.9.5
         version: 1.9.5(react-redux@8.1.1)(react@18.2.0)
@@ -1395,10 +1398,10 @@ importers:
         version: 13.4.10(react-dom@18.2.0)(react@18.2.0)
       nextra:
         specifier: latest
-        version: 2.3.0(next@13.4.10)(react-dom@18.2.0)(react@18.2.0)
+        version: 2.10.0(next@13.4.10)(react-dom@18.2.0)(react@18.2.0)
       nextra-theme-docs:
         specifier: latest
-        version: 2.3.0(next@13.4.10)(nextra@2.3.0)(react-dom@18.2.0)(react@18.2.0)
+        version: 2.10.0(next@13.4.10)(nextra@2.10.0)(react-dom@18.2.0)(react@18.2.0)
       react:
         specifier: ^18.2.0
         version: 18.2.0
@@ -5534,6 +5537,34 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
+  /@radix-ui/react-checkbox@1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.15)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-CBuGQa52aAYnADZVt/KBQzXrwx6TqnlwtcIPGtVt5JkkzQwMOLJjPukimhfKEr4GQNd43C+djUh5Ikopj8pSLg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.22.6
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.15)(react@18.2.0)
+      '@radix-ui/react-context': 1.0.1(@types/react@18.2.15)(react@18.2.0)
+      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.7)(@types/react@18.2.15)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.15)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.15)(react@18.2.0)
+      '@radix-ui/react-use-previous': 1.0.1(@types/react@18.2.15)(react@18.2.0)
+      '@radix-ui/react-use-size': 1.0.1(@types/react@18.2.15)(react@18.2.0)
+      '@types/react': 18.2.15
+      '@types/react-dom': 18.2.7
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
   /@radix-ui/react-collapsible@1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.15)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-UBmVDkmR6IvDsloHVN+3rtx4Mi5TFvylYXpluuv0f37dtaz3H99bp8No0LGXRigVpl3UAT4l9j6bIchh42S/Gg==}
     peerDependencies:
@@ -17580,18 +17611,6 @@ packages:
       - supports-color
     dev: false
 
-  /next-seo@5.15.0(next@13.4.10)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-LGbcY91yDKGMb7YI+28n3g+RuChUkt6pXNpa8FkfKkEmNiJkeRDEXTnnjVtwT9FmMhG6NH8qwHTelGrlYm9rgg==}
-    peerDependencies:
-      next: ^8.1.1-canary.54 || >=9.0.0
-      react: '>=16.0.0'
-      react-dom: '>=16.0.0'
-    dependencies:
-      next: 13.4.10(react-dom@18.2.0)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    dev: false
-
   /next-seo@6.1.0(next@13.4.10)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-iMBpFoJsR5zWhguHJvsoBDxDSmdYTHtnVPB1ij+CD0NReQCP78ZxxbdL9qkKIf4oEuZEqZkrjAQLB0bkII7RYA==}
     peerDependencies:
@@ -17685,32 +17704,6 @@ packages:
       zod: 3.21.4
     dev: false
 
-  /nextra-theme-docs@2.3.0(next@13.4.10)(nextra@2.3.0)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-KMvHhGOvaKIqR71Gnx+w/1c9LLfpQJ3+fnCAgg9qfjXo2agr1zRKyRDROyY8cGINdslpzmEGgs/MH2gDSAI6nw==}
-    peerDependencies:
-      next: '>=9.5.3'
-      nextra: 2.3.0
-      react: '>=16.13.1'
-      react-dom: '>=16.13.1'
-    dependencies:
-      '@headlessui/react': 1.7.15(react-dom@18.2.0)(react@18.2.0)
-      '@popperjs/core': 2.11.8
-      clsx: 1.2.1
-      flexsearch: 0.7.31
-      focus-visible: 5.2.0
-      git-url-parse: 13.1.0
-      intersection-observer: 0.12.2
-      match-sorter: 6.3.1
-      next: 13.4.10(react-dom@18.2.0)(react@18.2.0)
-      next-seo: 5.15.0(next@13.4.10)(react-dom@18.2.0)(react@18.2.0)
-      next-themes: 0.2.1(next@13.4.10)(react-dom@18.2.0)(react@18.2.0)
-      nextra: 2.3.0(next@13.4.10)(react-dom@18.2.0)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      scroll-into-view-if-needed: 3.0.10
-      zod: 3.21.4
-    dev: false
-
   /nextra@2.10.0(next@13.4.10)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-euv93UnWpdth8slMRJLqMrWvCCzR/VTVH6DPrn1JW7hZS03c2lzG2q+fsiYULGiy/kFyysmlxd4Nx5KGB1Txwg==}
     engines: {node: '>=16'}
@@ -17751,42 +17744,6 @@ packages:
       - supports-color
     dev: false
 
-  /nextra@2.3.0(next@13.4.10)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-v17vMq2bJa15iKKt9+6AidSeIoKcK1ZlXmwqFqTgc0pQmRrl6pTJaSR36UZKcpMwvvLZ/7/xWuWV/OQB599O3g==}
-    engines: {node: '>=16'}
-    peerDependencies:
-      next: '>=9.5.3'
-      react: '>=16.13.1'
-      react-dom: '>=16.13.1'
-    dependencies:
-      '@mdx-js/mdx': 2.3.0
-      '@mdx-js/react': 2.3.0(react@18.2.0)
-      '@napi-rs/simple-git': 0.1.8
-      github-slugger: 2.0.0
-      graceful-fs: 4.2.11
-      gray-matter: 4.0.3
-      katex: 0.16.8
-      lodash.get: 4.4.2
-      next: 13.4.10(react-dom@18.2.0)(react@18.2.0)
-      next-mdx-remote: 4.4.1(react-dom@18.2.0)(react@18.2.0)
-      p-limit: 3.1.0
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      rehype-katex: 6.0.3
-      rehype-pretty-code: 0.9.3(shiki@0.14.3)
-      remark-gfm: 3.0.1
-      remark-math: 5.1.1
-      remark-reading-time: 2.0.1
-      shiki: 0.14.3
-      slash: 3.0.0
-      title: 3.5.3
-      unist-util-remove: 3.1.1
-      unist-util-visit: 4.1.2
-      zod: 3.21.4
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
-
   /nice-try@1.0.5:
     resolution: {integrity: sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==}
     dev: true
@@ -20144,17 +20101,6 @@ packages:
       shiki: 0.14.3
     dev: false
 
-  /rehype-pretty-code@0.9.3(shiki@0.14.3):
-    resolution: {integrity: sha512-57i+ifrttqpeQxub0NZ2pRw0aiUPYeBpr234NLWfZ4BfbEaP+29+iCXB1rUMkzoPi6IBC4w4I93mUPgw36IajQ==}
-    engines: {node: ^12.16.0 || >=13.2.0}
-    peerDependencies:
-      shiki: '*'
-    dependencies:
-      hash-obj: 4.0.0
-      parse-numeric-range: 1.3.0
-      shiki: 0.14.3
-    dev: false
-
   /relateurl@0.2.7:
     resolution: {integrity: sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==}
     engines: {node: '>= 0.10'}
@@ -22320,14 +22266,6 @@ packages:
       unist-util-visit: 4.1.2
     dev: false
 
-  /unist-util-remove@3.1.1:
-    resolution: {integrity: sha512-kfCqZK5YVY5yEa89tvpl7KnBBHu2c6CzMkqHUrlOqaRgGOMp0sMvwWOVrbAtj03KhovQB7i96Gda72v/EFE0vw==}
-    dependencies:
-      '@types/unist': 2.0.7
-      unist-util-is: 5.2.1
-      unist-util-visit-parents: 5.1.3
-    dev: false
-
   /unist-util-remove@4.0.0:
     resolution: {integrity: sha512-b4gokeGId57UVRX/eVKej5gXqGlc9+trkORhFJpu9raqZkZhU0zm8Doi05+HaiBsMEIJowL+2WtQ5ItjsngPXg==}
     dependencies: