feat(wallet): rebrand import seed page (#1542)

* feat(wallet): rebrand import mnemonic screen * feat: add showText button and icon * feat: add import mnemonic page * fix: remove header * fix: bring back custom onPaste function and add buttonHtmlType * feat: refine seed page * refactor: update to latest figma changes * fix: remove unnecessary prop after merging * fix: update header Co-authored-by: evavirseda <[email protected]> * feat: update textarea * feat: remove derbis * feat: remove debris after merge * feat: use errorMessage instead of infobox * feat: move function outside html --------- Co-authored-by: JCNoguera <[email protected]> Co-authored-by: JCNoguera <[email protected]>
iotaledger · Aug 13, 2024 · f097ffa · f097ffa
1 parent d19a51c
commit f097ffa
Show file tree

Hide file tree

Showing 7 changed files with 76 additions and 82 deletions.
diff --git a/apps/wallet/src/ui/app/components/accounts/ImportPrivateKeyForm.tsx b/apps/wallet/src/ui/app/components/accounts/ImportPrivateKeyForm.tsx
@@ -48,7 +48,12 @@ export function ImportPrivateKeyForm({ onSubmit }: ImportPrivateKeyFormProps) {
     const isHexadecimal = isValid && !privateKey.startsWith('iotaprivkey');
     return (
         <Form className="flex h-full flex-col gap-2" form={form} onSubmit={onSubmit}>
-            <TextAreaField label="Enter Private Key" rows={4} {...register('privateKey')} />
+            <TextAreaField
+                label="Enter Private Key"
+                rows={4}
+                {...register('privateKey')}
+                errorMessage={form.formState.errors.privateKey?.message}
+            />
             {isHexadecimal ? (
                 <InfoBox
                     type={InfoBoxType.Default}

diff --git a/apps/wallet/src/ui/app/components/accounts/ImportSeedForm.tsx b/apps/wallet/src/ui/app/components/accounts/ImportSeedForm.tsx
@@ -1,14 +1,13 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { Button } from '_app/shared/ButtonUI';
 import { useZodForm } from '@iota/core';
 import { type SubmitHandler } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 import { z } from 'zod';
-
 import { seedValidation } from '../../helpers/validation/seedValidation';
 import { Form } from '../../shared/forms/Form';
+import { Button, ButtonType, ButtonHtmlType } from '@iota/apps-ui-kit';
 import { TextAreaField } from '../../shared/forms/TextAreaField';
 
 const formSchema = z.object({
@@ -33,17 +32,30 @@ export function ImportSeedForm({ onSubmit }: ImportSeedFormProps) {
     const navigate = useNavigate();
 
     return (
-        <Form className="flex h-full flex-col gap-2" form={form} onSubmit={onSubmit}>
-            <TextAreaField label="Enter Seed" rows={5} {...register('seed')} />
-            <div className="mt-auto flex gap-2.5">
-                <Button variant="outline" size="tall" text="Cancel" onClick={() => navigate(-1)} />
+        <Form
+            className="flex h-full flex-col justify-between gap-2"
+            form={form}
+            onSubmit={onSubmit}
+        >
+            <TextAreaField
+                label="Enter Seed"
+                rows={5}
+                {...register('seed')}
+                errorMessage={form.formState.errors.seed?.message}
+            />
+            <div className="flex flex-row justify-stretch gap-2.5">
+                <Button
+                    type={ButtonType.Secondary}
+                    text="Cancel"
+                    onClick={() => navigate(-1)}
+                    fullWidth
+                />
                 <Button
-                    type="submit"
+                    type={ButtonType.Primary}
                     disabled={isSubmitting || !isValid}
-                    variant="primary"
-                    size="tall"
-                    loading={isSubmitting}
-                    text="Add Account"
+                    text="Add Profile"
+                    fullWidth
+                    htmlType={ButtonHtmlType.Submit}
                 />
             </div>
         </Form>

diff --git a/apps/wallet/src/ui/app/pages/accounts/ImportPassphrasePage.tsx b/apps/wallet/src/ui/app/pages/accounts/ImportPassphrasePage.tsx
@@ -24,6 +24,18 @@ export function ImportPassphrasePage() {
         setIsTextVisible(!isTextVisible);
     }
 
+    function handleOnSubmit({ recoveryPhrase }: { recoveryPhrase: string[] }) {
+        setFormValues({
+            type: AccountsFormType.ImportMnemonic,
+            entropy: entropyToSerialized(mnemonicToEntropy(recoveryPhrase.join(' '))),
+        });
+        navigate(
+            `/accounts/protect-account?${new URLSearchParams({
+                accountsFormType: AccountsFormType.ImportMnemonic,
+            }).toString()}`,
+        );
+    }
+
     const BUTTON_ICON_CLASSES = 'w-5 h-5 text-neutral-10';
     return (
         <PageTemplate title="Import Mnemonic" isTitleCentered showBackButton>
@@ -47,19 +59,7 @@ export function ImportPassphrasePage() {
                         cancelButtonText="Back"
                         submitButtonText="Add Profile"
                         isTextVisible={isTextVisible}
-                        onSubmit={({ recoveryPhrase }) => {
-                            setFormValues({
-                                type: AccountsFormType.ImportMnemonic,
-                                entropy: entropyToSerialized(
-                                    mnemonicToEntropy(recoveryPhrase.join(' ')),
-                                ),
-                            });
-                            navigate(
-                                `/accounts/protect-account?${new URLSearchParams({
-                                    accountsFormType: AccountsFormType.ImportMnemonic,
-                                }).toString()}`,
-                            );
-                        }}
+                        onSubmit={handleOnSubmit}
                     />
                 </div>
             </div>

diff --git a/apps/wallet/src/ui/app/pages/accounts/ImportPrivateKeyPage.tsx b/apps/wallet/src/ui/app/pages/accounts/ImportPrivateKeyPage.tsx
@@ -15,23 +15,23 @@ export function ImportPrivateKeyPage() {
     const navigate = useNavigate();
     const [, setAccountsFormValues] = useAccountsFormContext();
 
+    function handleOnSubmit({ privateKey }: { privateKey: string }) {
+        setAccountsFormValues({
+            type: AccountsFormType.ImportPrivateKey,
+            keyPair: privateKey,
+        });
+        navigate(
+            `/accounts/protect-account?${new URLSearchParams({
+                accountsFormType: AccountsFormType.ImportPrivateKey,
+            }).toString()}`,
+        );
+    }
+
     return (
         <PageTemplate title="Import Private Key" isTitleCentered showBackButton>
             <div className="flex h-full w-full flex-col items-center ">
                 <div className="w-full grow">
-                    <ImportPrivateKeyForm
-                        onSubmit={({ privateKey }) => {
-                            setAccountsFormValues({
-                                type: AccountsFormType.ImportPrivateKey,
-                                keyPair: privateKey,
-                            });
-                            navigate(
-                                `/accounts/protect-account?${new URLSearchParams({
-                                    accountsFormType: AccountsFormType.ImportPrivateKey,
-                                }).toString()}`,
-                            );
-                        }}
-                    />
+                    <ImportPrivateKeyForm onSubmit={handleOnSubmit} />
                 </div>
             </div>
         </PageTemplate>

diff --git a/apps/wallet/src/ui/app/pages/accounts/ImportSeedPage.tsx b/apps/wallet/src/ui/app/pages/accounts/ImportSeedPage.tsx
@@ -1,45 +1,37 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { Text } from '_app/shared/text';
 import { useNavigate } from 'react-router-dom';
-
 import {
     AccountsFormType,
     useAccountsFormContext,
 } from '../../components/accounts/AccountsFormContext';
 import { ImportSeedForm } from '../../components/accounts/ImportSeedForm';
-import { Heading } from '../../shared/heading';
+import { PageTemplate } from '../../components/PageTemplate';
 
 export function ImportSeedPage() {
     const navigate = useNavigate();
     const [, setAccountsFormValues] = useAccountsFormContext();
 
+    function handleOnSubmit({ seed }: { seed: string }) {
+        setAccountsFormValues({
+            type: AccountsFormType.ImportSeed,
+            seed,
+        });
+        navigate(
+            `/accounts/protect-account?${new URLSearchParams({
+                accountsFormType: AccountsFormType.ImportSeed,
+            }).toString()}`,
+        );
+    }
+
     return (
-        <div className="bg-iota-lightest flex h-full w-full flex-col items-center rounded-20 px-6 py-10 shadow-wallet-content">
-            <Text variant="caption" color="steel-dark" weight="semibold">
-                Wallet Setup
-            </Text>
-            <div className="mt-2.5 text-center">
-                <Heading variant="heading1" color="gray-90" as="h1" weight="bold">
-                    Import Seed
-                </Heading>
-            </div>
-            <div className="mt-6 w-full grow">
-                <ImportSeedForm
-                    onSubmit={({ seed }) => {
-                        setAccountsFormValues({
-                            type: AccountsFormType.ImportSeed,
-                            seed,
-                        });
-                        navigate(
-                            `/accounts/protect-account?${new URLSearchParams({
-                                accountsFormType: AccountsFormType.ImportSeed,
-                            }).toString()}`,
-                        );
-                    }}
-                />
+        <PageTemplate title="Import Seed" isTitleCentered showBackButton>
+            <div className="flex h-full w-full flex-col items-center ">
+                <div className="w-full grow">
+                    <ImportSeedForm onSubmit={handleOnSubmit} />
+                </div>
             </div>
-        </div>
+        </PageTemplate>
     );
 }
diff --git a/apps/wallet/src/ui/app/shared/forms/FormField.tsx b/apps/wallet/src/ui/app/shared/forms/FormField.tsx
@@ -3,33 +3,18 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { type ReactNode } from 'react';
-import { useFormContext } from 'react-hook-form';
-
 import { FormLabel } from './FormLabel';
-import { InfoBox, InfoBoxStyle, InfoBoxType } from '@iota/apps-ui-kit';
-import { Exclamation } from '@iota/ui-icons';
 
 interface FormFieldProps {
     name: string;
     label?: ReactNode;
     children: ReactNode;
 }
 
-export function FormField({ children, name, label }: FormFieldProps) {
-    const { getFieldState, formState } = useFormContext();
-    const state = getFieldState(name, formState);
-
+export function FormField({ children, label }: FormFieldProps) {
     return (
         <div className="flex w-full flex-col gap-2.5">
             {label ? <FormLabel label={label}>{children}</FormLabel> : children}
-            {state.error && (
-                <InfoBox
-                    type={InfoBoxType.Default}
-                    supportingText={state.error.message}
-                    icon={<Exclamation />}
-                    style={InfoBoxStyle.Elevated}
-                />
-            )}
         </div>
     );
 }

diff --git a/apps/wallet/src/ui/app/shared/forms/TextAreaField.tsx b/apps/wallet/src/ui/app/shared/forms/TextAreaField.tsx
@@ -4,8 +4,8 @@
 
 import { forwardRef, type ComponentProps, type ReactNode } from 'react';
 
-import { TextArea } from '@iota/apps-ui-kit';
 import FormField from './FormField';
+import { TextArea } from '@iota/apps-ui-kit';
 
 type TextAreaFieldProps = {
     name: string;