wallet-ext: import mnemonic flow step two (password)

toga0731 · Oct 11, 2022 · eb6a9cc · eb6a9cc
1 parent a3473ac
commit eb6a9cc
Show file tree

Hide file tree

Showing 19 changed files with 253 additions and 132 deletions.
diff --git a/apps/wallet/src/ui/app/pages/home/nft-details/transfer-nft/TransferNFTForm.module.scss b/apps/wallet/src/ui/app/pages/home/nft-details/transfer-nft/TransferNFTForm.module.scss
@@ -19,7 +19,6 @@
 .arrow-action-icon {
     font-size: 10px;
     color: #adcadd;
-    margin-left: 12px;
     font-weight: 300;
 }
 

diff --git a/.../wallet/src/ui/app/pages/home/transfer-coin/TransferCoinForm/TransferCoinForm.module.scss b/.../wallet/src/ui/app/pages/home/transfer-coin/TransferCoinForm/TransferCoinForm.module.scss
@@ -71,7 +71,6 @@
     font-weight: 600;
 
     .arrow-left {
-        margin-left: 10px;
         transform: rotate(180deg);
         margin-right: 0;
         color: colors.$cta-light-blue;

diff --git a/apps/wallet/src/ui/app/pages/initialize/backup/Backup.module.scss b/apps/wallet/src/ui/app/pages/initialize/backup/Backup.module.scss
@@ -45,7 +45,6 @@
 .btn {
     display: flex;
     flex-flow: row nowrap;
-    gap: 8px;
     margin-top: 45px;
     align-self: stretch;
     padding: 14px 20px;

diff --git a/apps/wallet/src/ui/app/pages/initialize/create/Create.module.scss b/apps/wallet/src/ui/app/pages/initialize/create/Create.module.scss
@@ -9,33 +9,6 @@
     text-align: left;
 }
 
-.label {
-    display: flex;
-    flex-flow: column nowrap;
-    gap: 10px;
-
-    & + & {
-        margin-top: 30px;
-    }
-}
-
-.label-text {
-    color: colors.$gray-85;
-
-    @include utils.typography('ParagraphPrimary/P1-SB');
-}
-
-.label-text,
-.info {
-    padding-left: 10px;
-}
-
-.info {
-    color: colors.$gray-75;
-
-    @include utils.typography('ParagraphPrimary/P2-M');
-}
-
 .terms {
     display: flex;
     align-items: center;
@@ -101,7 +74,6 @@
 }
 
 .next {
-    margin-left: 10px;
     font-weight: 500;
     font-size: 12px;
 }

diff --git a/apps/wallet/src/ui/app/pages/initialize/create/index.tsx b/apps/wallet/src/ui/app/pages/initialize/create/index.tsx
@@ -6,22 +6,18 @@ import { useNavigate } from 'react-router-dom';
 
 import { createMnemonicValidation } from './validation';
 import Button from '_app/shared/button';
-import PasswordInput from '_app/shared/input/password';
 import { WALLET_ENCRYPTION_ENABLED } from '_app/wallet/constants';
-import Alert from '_components/alert';
 import ExternalLink from '_components/external-link';
 import Icon, { SuiIcons } from '_components/icon';
 import Loading from '_components/loading';
 import { useAppDispatch } from '_hooks';
 import CardLayout from '_pages/initialize/shared/card-layout';
+import PasswordFields from '_pages/initialize/shared/password-fields';
 import { createMnemonic } from '_redux/slices/account';
 import { PRIVACY_POLICY_LINK, ToS_LINK } from '_shared/constants';
 
 import st from './Create.module.scss';
 
-const PASSWORD_INFO_ERROR =
-    'Minimum 8 characters. Password must include at least one number and uppercase letter.';
-
 const CreatePage = () => {
     const dispatch = useAppDispatch();
     const navigate = useNavigate();
@@ -58,42 +54,7 @@ const CreatePage = () => {
                                 className={st.fieldset}
                             >
                                 {WALLET_ENCRYPTION_ENABLED ? (
-                                    <>
-                                        <label className={st.label}>
-                                            <span className={st.labelText}>
-                                                Create Password
-                                            </span>
-                                            <Field
-                                                name="password"
-                                                component={PasswordInput}
-                                            />
-                                            {touched['password'] &&
-                                            errors['password'] ? (
-                                                <Alert>
-                                                    {PASSWORD_INFO_ERROR}
-                                                </Alert>
-                                            ) : (
-                                                <div className={st.info}>
-                                                    {PASSWORD_INFO_ERROR}
-                                                </div>
-                                            )}
-                                        </label>
-                                        <label className={st.label}>
-                                            <span className={st.labelText}>
-                                                Confirm Password
-                                            </span>
-                                            <Field
-                                                name="confirmPassword"
-                                                component={PasswordInput}
-                                            />
-                                            {touched['confirmPassword'] &&
-                                            errors['confirmPassword'] ? (
-                                                <Alert>
-                                                    {errors['confirmPassword']}
-                                                </Alert>
-                                            ) : null}
-                                        </label>
-                                    </>
+                                    <PasswordFields />
                                 ) : (
                                     <>
                                         <div className={st.space} />

diff --git a/apps/wallet/src/ui/app/pages/initialize/create/validation.ts b/apps/wallet/src/ui/app/pages/initialize/create/validation.ts
@@ -3,18 +3,9 @@
 
 import * as Yup from 'yup';
 
-import {
-    passwordValidation,
-    getConfirmPasswordValidation,
-} from '_app/shared/input/password/validation';
-import { WALLET_ENCRYPTION_ENABLED } from '_app/wallet/constants';
+import { passwordFieldsValidation } from '_pages/initialize/shared/password-fields/validation';
 
 export const createMnemonicValidation = Yup.object({
     ...{ terms: Yup.boolean().required().is([true]) },
-    ...(WALLET_ENCRYPTION_ENABLED
-        ? {
-              password: passwordValidation,
-              confirmPassword: getConfirmPasswordValidation('password'),
-          }
-        : {}),
+    ...passwordFieldsValidation,
 });
diff --git a/apps/wallet/src/ui/app/pages/initialize/import/index.tsx b/apps/wallet/src/ui/app/pages/initialize/import/index.tsx
@@ -4,6 +4,7 @@
 import { useCallback, useState } from 'react';
 
 import StepOne from './steps/StepOne';
+import StepTwo from './steps/StepTwo';
 import { WALLET_ENCRYPTION_ENABLED } from '_app/wallet/constants';
 import { useAppDispatch } from '_hooks';
 import CardLayout from '_pages/initialize/shared/card-layout';
@@ -18,7 +19,7 @@ const initialValues = {
 const allSteps = [StepOne];
 
 if (WALLET_ENCRYPTION_ENABLED) {
-    // TODO: add more steps
+    allSteps.push(StepTwo);
 }
 
 export type ImportValuesType = typeof initialValues;
@@ -29,8 +30,6 @@ const ImportPage = () => {
     const dispatch = useAppDispatch();
     const onHandleSubmit = useCallback(
         async ({ mnemonic, password }: ImportValuesType) => {
-            //TODO
-            await new Promise((r) => setTimeout(r, 3000));
             await dispatch(
                 createMnemonic({ importedMnemonic: mnemonic, password })
             );

diff --git a/apps/wallet/src/ui/app/pages/initialize/import/steps/StepOne.module.scss b/apps/wallet/src/ui/app/pages/initialize/import/steps/StepOne.module.scss
@@ -1,5 +1,4 @@
 @use '_values/colors';
-@use '_utils';
 
 .mnemonic {
     resize: none;
@@ -29,14 +28,6 @@
     flex: 1;
 }
 
-.label {
-    margin-bottom: 10px;
-    color: colors.$gray-85;
-    padding-left: 10px;
-
-    @include utils.typography('ParagraphPrimary/P1-SB');
-}
-
 .fill {
     flex: 1;
 }
@@ -51,7 +42,6 @@
 }
 
 .next {
-    margin-left: 5px;
     font-size: 12px;
     font-weight: 500;
 }
diff --git a/apps/wallet/src/ui/app/pages/initialize/import/steps/StepOne.tsx b/apps/wallet/src/ui/app/pages/initialize/import/steps/StepOne.tsx
@@ -10,21 +10,17 @@ import Alert from '_components/alert';
 import Icon, { SuiIcons } from '_components/icon';
 import Loading from '_components/loading';
 import { mnemonicValidation } from '_pages/initialize/import/validation';
+import FieldLabel from '_pages/initialize/shared/field-label';
 
-import type { ImportValuesType } from '_pages/initialize/import/index';
+import type { StepProps } from '.';
 
 import st from './StepOne.module.scss';
 
 const validationSchema = Yup.object({
     mnemonic: mnemonicValidation,
 });
 
-export type StepOneProps = {
-    next: (data: ImportValuesType, step: 1 | -1) => Promise<void>;
-    data: ImportValuesType;
-};
-
-export default function StepOne({ next, data }: StepOneProps) {
+export default function StepOne({ next, data }: StepProps) {
     const btnTxt = WALLET_ENCRYPTION_ENABLED ? 'Continue' : 'Import wallet Now';
     return (
         <Formik
@@ -47,29 +43,32 @@ export default function StepOne({ next, data }: StepOneProps) {
                 handleBlur,
             }) => (
                 <Form className={st.form}>
-                    <label className={st.label} htmlFor="importMnemonicTxt">
-                        Enter Recovery Phrase
-                    </label>
-                    <textarea
-                        id="importMnemonicTxt"
-                        onChange={handleChange}
-                        value={mnemonic}
-                        onBlur={async (e) => {
-                            const adjMnemonic =
-                                await validationSchema.fields.mnemonic.cast(
-                                    mnemonic
+                    <FieldLabel txt="Enter Recovery Phrase">
+                        <textarea
+                            id="importMnemonicTxt"
+                            onChange={handleChange}
+                            value={mnemonic}
+                            onBlur={async (e) => {
+                                const adjMnemonic =
+                                    await validationSchema.fields.mnemonic.cast(
+                                        mnemonic
+                                    );
+                                await setFieldValue(
+                                    'mnemonic',
+                                    adjMnemonic,
+                                    false
                                 );
-                            await setFieldValue('mnemonic', adjMnemonic, false);
-                            handleBlur(e);
-                        }}
-                        className={st.mnemonic}
-                        placeholder="Enter your 12-word recovery phrase"
-                        name="mnemonic"
-                        disabled={isSubmitting}
-                    />
-                    {touched.mnemonic && errors?.mnemonic && (
-                        <Alert>{errors?.mnemonic}</Alert>
-                    )}
+                                handleBlur(e);
+                            }}
+                            className={st.mnemonic}
+                            placeholder="Enter your 12-word recovery phrase"
+                            name="mnemonic"
+                            disabled={isSubmitting}
+                        />
+                        {touched.mnemonic && errors?.mnemonic && (
+                            <Alert>{errors?.mnemonic}</Alert>
+                        )}
+                    </FieldLabel>
                     <div className={st.fill} />
                     <Button
                         type="submit"

diff --git a/apps/wallet/src/ui/app/pages/initialize/import/steps/StepTwo.module.scss b/apps/wallet/src/ui/app/pages/initialize/import/steps/StepTwo.module.scss
@@ -0,0 +1,32 @@
+@use '_values/colors';
+
+.form {
+    display: flex;
+    flex-flow: column nowrap;
+    align-self: stretch;
+    flex: 1;
+}
+
+.fill {
+    flex: 1;
+}
+
+.actions {
+    display: flex;
+    flex-flow: row nowrap;
+    gap: 10px;
+}
+
+.btn {
+    flex: 1;
+}
+
+.prev {
+    font-size: 10px;
+    font-weight: 500;
+}
+
+.next {
+    font-size: 10px;
+    font-weight: 300;
+}
diff --git a/apps/wallet/src/ui/app/pages/initialize/import/steps/StepTwo.tsx b/apps/wallet/src/ui/app/pages/initialize/import/steps/StepTwo.tsx
@@ -0,0 +1,69 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { Form, Formik } from 'formik';
+import { object } from 'yup';
+
+import Button from '_app/shared/button';
+import Icon, { SuiIcons } from '_components/icon';
+import Loading from '_components/loading';
+import PasswordFields from '_pages/initialize/shared/password-fields';
+import { passwordFieldsValidation } from '_pages/initialize/shared/password-fields/validation';
+
+import type { StepProps } from '.';
+
+import st from './StepTwo.module.scss';
+
+const validationSchema = object(passwordFieldsValidation);
+
+export default function StepTwo({ next, data }: StepProps) {
+    return (
+        <Formik
+            initialValues={data}
+            validationSchema={validationSchema}
+            validateOnMount={true}
+            onSubmit={async (values) => {
+                await next(values, 1);
+            }}
+            enableReinitialize={true}
+        >
+            {({ isSubmitting, isValid, values }) => (
+                <Form className={st.form}>
+                    <PasswordFields />
+                    <div className={st.fill} />
+                    <div className={st.actions}>
+                        <Button
+                            type="button"
+                            disabled={isSubmitting}
+                            className={st.btn}
+                            mode="neutral"
+                            size="large"
+                            onClick={() => next(values, -1)}
+                        >
+                            <Icon
+                                icon={SuiIcons.ArrowLeft}
+                                className={st.prev}
+                            />
+                            Back
+                        </Button>
+                        <Button
+                            type="submit"
+                            disabled={isSubmitting || !isValid}
+                            mode="primary"
+                            className={st.btn}
+                            size="large"
+                        >
+                            <Loading loading={isSubmitting}>
+                                Import
+                                <Icon
+                                    icon={SuiIcons.ArrowRight}
+                                    className={st.next}
+                                />
+                            </Loading>
+                        </Button>
+                    </div>
+                </Form>
+            )}
+        </Formik>
+    );
+}