feat: use errorMessage instead of infobox

iotaledger · Aug 12, 2024 · 444862a · 444862a
1 parent d698517
commit 444862a
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 31 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
@@ -37,7 +37,12 @@ export function ImportSeedForm({ onSubmit }: ImportSeedFormProps) {
             form={form}
             onSubmit={onSubmit}
         >
-            <TextAreaField label="Enter Seed" rows={5} {...register('seed')} />
+            <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}

diff --git a/apps/wallet/src/ui/app/pages/accounts/ImportSeedPage.tsx b/apps/wallet/src/ui/app/pages/accounts/ImportSeedPage.tsx
@@ -13,23 +13,23 @@ 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 (
         <PageTemplate title="Import Seed" isTitleCentered showBackButton>
             <div className="flex h-full w-full flex-col items-center ">
                 <div className="w-full grow">
-                    <ImportSeedForm
-                        onSubmit={({ seed }) => {
-                            setAccountsFormValues({
-                                type: AccountsFormType.ImportSeed,
-                                seed,
-                            });
-                            navigate(
-                                `/accounts/protect-account?${new URLSearchParams({
-                                    accountsFormType: AccountsFormType.ImportSeed,
-                                }).toString()}`,
-                            );
-                        }}
-                    />
+                    <ImportSeedForm onSubmit={handleOnSubmit} />
                 </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>
     );
 }