chore: squash

src/extension/components/AmountInput/AmountInput.tsx

@@ -239,15 +239,15 @@ const AmountInput: FC<IProps> = ({
           _hover={{
             bg: buttonHoverBackgroundColor,
           }}
-          aria-label="Add maximum amount"
+          aria-label={t<string>('labels.addMaximumAmount')}
           borderRadius="md"
-          h="100%"
+          h="full"
           onClick={handleMaximumAmountClick}
           p={0}
           variant="ghost"
         >
           <Text color={defaultTextColor} fontSize="md">
-            {t<string>('labels.max').toUpperCase()}
+            {t<string>('buttons.max').toUpperCase()}
           </Text>
         </Button>
       </HStack>

src/extension/components/EnterMnemonicPhraseInput/EnterMnemonicPhraseInput.tsx → src/extension/components/SeedPhraseInput/SeedPhraseInput.tsx

@@ -11,41 +11,41 @@ import {
   VStack,
 } from '@chakra-ui/react';
 import React, {
-  ChangeEvent,
-  ClipboardEvent,
-  FC,
-  ReactNode,
+  type ChangeEvent,
+  type ClipboardEvent,
+  type FC,
+  type ReactNode,
   useState,
 } from 'react';
 import { useTranslation } from 'react-i18next';
 
+// components
+import Label from '@extension/components/Label';
+
+// constants
+import { DEFAULT_GAP, INPUT_HEIGHT } from '@extension/constants';
+
 // hooks
 import useButtonHoverBackgroundColor from '@extension/hooks/useButtonHoverBackgroundColor';
-import useDefaultTextColor from '@extension/hooks/useDefaultTextColor';
 import usePrimaryColor from '@extension/hooks/usePrimaryColor';
 import useSubTextColor from '@extension/hooks/useSubTextColor';
 
+// types
+import type { IProps } from './types';
+
 // utils
 import { isPhrasesEmpty } from './utils';
-import { DEFAULT_GAP } from '@extension/constants';
 
-interface IProps {
-  disabled?: boolean;
-  error: string | null;
-  onChange: (phrases: string[]) => void;
-  phrases: string[];
-}
-
-const EnterMnemonicPhraseInput: FC<IProps> = ({
+const SeedPhraseInput: FC<IProps> = ({
+  _context,
   disabled,
   error,
   onChange,
   phrases,
-}: IProps) => {
+}) => {
   const { t } = useTranslation();
   // hooks
   const buttonHoverBackgroundColor = useButtonHoverBackgroundColor();
-  const defaultTextColor = useDefaultTextColor();
   const primaryColor = usePrimaryColor();
   const subTextColor = useSubTextColor();
   // states
@@ -81,21 +81,19 @@ const EnterMnemonicPhraseInput: FC<IProps> = ({
 
   return (
     <VStack>
-      <HStack alignItems="center" minH={8} spacing={DEFAULT_GAP / 3} w="full">
+      <HStack
+        alignItems="center"
+        minH={DEFAULT_GAP + 2}
+        spacing={DEFAULT_GAP / 3}
+        w="full"
+      >
         {/*label*/}
-        <HStack alignItems="flex-end" justifyContent="space-between" w="full">
-          <Text
-            color={error ? 'red.300' : defaultTextColor}
-            fontSize="sm"
-            textAlign="left"
-          >
-            {t<string>('labels.seedPhrase')}
-          </Text>
-
-          <Text color="red.300" fontSize="xs" textAlign="right">
-            {error}
-          </Text>
-        </HStack>
+        <Label
+          error={error}
+          label={t<string>('labels.seedPhrase')}
+          pl={DEFAULT_GAP / 3}
+          required={true}
+        />
 
         <Spacer />
 
@@ -105,13 +103,15 @@ const EnterMnemonicPhraseInput: FC<IProps> = ({
             _hover={{
               bg: buttonHoverBackgroundColor,
             }}
-            aria-label="Reset the phrases"
-            borderRadius={0}
+            aria-label={t<string>('labels.resetSeedPhrase')}
+            borderRadius="md"
             onClick={handleResetClick}
             size="sm"
             variant="ghost"
           >
-            {t<string>('buttons.reset')}
+            <Text color={subTextColor} fontSize="md">
+              {t<string>('buttons.reset').toUpperCase()}
+            </Text>
           </Button>
         )}
       </HStack>
@@ -123,26 +123,28 @@ const EnterMnemonicPhraseInput: FC<IProps> = ({
             <InputGroup size="md">
               <InputLeftElement
                 color={subTextColor}
+                h="full"
                 pointerEvents="none"
-                width={5}
+                w={DEFAULT_GAP + 2}
               >
-                <Text color={subTextColor} fontSize="xs">
+                <Text as="b" color={subTextColor} fontSize="sm">
                   {index + 1}
                 </Text>
               </InputLeftElement>
 
               <Input
                 autoFocus={currentFocusIndex === index}
-                disabled={disabled}
+                borderRadius="full"
                 focusBorderColor={error ? 'red.300' : primaryColor}
+                h={INPUT_HEIGHT}
+                isDisabled={disabled}
                 isInvalid={!!error}
                 onChange={handleOnChange(index)}
                 onFocus={handleOnFocus(index)}
                 onPaste={handleOnPaste}
-                pb={4}
-                pl={5}
-                pr={3}
-                pt={4}
+                pl={DEFAULT_GAP + 1}
+                pr={DEFAULT_GAP / 2}
+                py={DEFAULT_GAP - 2}
                 type="text"
                 value={value}
               />
@@ -154,17 +156,15 @@ const EnterMnemonicPhraseInput: FC<IProps> = ({
               <GridItem
                 colEnd={2}
                 colStart={2}
-                key={`enter-mnemonic-phrase-input-phrase-input-item-${index}`}
+                key={`${_context}-seed-phrase-input-item-${index}`}
               >
                 {input}
               </GridItem>
             );
           }
 
           return (
-            <GridItem
-              key={`enter-mnemonic-phrase-input-phrase-input-item-${index}`}
-            >
+            <GridItem key={`${_context}-seed-phrase-input-item-${index}`}>
               {input}
             </GridItem>
           );
@@ -174,4 +174,4 @@ const EnterMnemonicPhraseInput: FC<IProps> = ({
   );
 };
 
-export default EnterMnemonicPhraseInput;
+export default SeedPhraseInput;

src/extension/components/SeedPhraseInput/index.ts

@@ -0,0 +1,3 @@
+export { default } from './SeedPhraseInput';
+export * from './types';
+export * from './utils';

src/extension/components/SeedPhraseInput/types/IProps.ts

@@ -0,0 +1,11 @@
+// types
+import type { IPropsWithContext } from '@extension/types';
+
+interface IProps extends IPropsWithContext {
+  disabled?: boolean;
+  error: string | null;
+  onChange: (phrases: string[]) => void;
+  phrases: string[];
+}
+
+export default IProps;

src/extension/components/SeedPhraseInput/types/index.ts

@@ -0,0 +1 @@
+export type { default as IProps } from './IProps';

src/extension/components/EnterMnemonicPhraseInput/utils/validate.ts → src/extension/components/SeedPhraseInput/utils/validate.ts

@@ -4,6 +4,7 @@ import { TFunction } from 'i18next';
 import isMnemonicValid from '@extension/utils/isMnemonicValid';
 
 export default function validate(
+  label: string,
   phrases: string[],
   t: TFunction
 ): string | null {
@@ -13,12 +14,12 @@ export default function validate(
 
   if (phrases.every((value) => value.length <= 0)) {
     return t<string>('errors.inputs.requiredWithLabel', {
-      name: 'Mnemonic phrase',
+      name: label,
     });
   }
 
   if (!isMnemonicValid(phrases.join(' '))) {
-    return t<string>('errors.inputs.invalidMnemonic');
+    return t<string>('errors.inputs.invalidSeedPhrase');
   }
 
   return null;

src/extension/pages/CreateNewAccountPage/CreateNewAccountPage.tsx

@@ -160,7 +160,7 @@ const CreateNewAccountPage: FC<IAddAccountPageProps> = ({
                   textAlign="left"
                   w="full"
                 >
-                  {t<string>('captions.saveMnemonicPhrase1')}
+                  {t<string>('captions.saveSeedPhrase1')}
                 </Text>
 
                 <Text
@@ -169,7 +169,7 @@ const CreateNewAccountPage: FC<IAddAccountPageProps> = ({
                   textAlign="left"
                   w="full"
                 >
-                  {t<string>('captions.saveMnemonicPhrase2')}
+                  {t<string>('captions.saveSeedPhrase2')}
                 </Text>
 
                 {/*seed phrase*/}

src/extension/pages/ImportAccountViaSeedPhrasePage/ImportAccountViaSeedPhrasePage.tsx

@@ -1,17 +1,15 @@
 import { Heading, HStack, Spacer, Text, VStack } from '@chakra-ui/react';
 import { Step, useSteps } from 'chakra-ui-steps';
-import React, { ChangeEvent, FC, useState } from 'react';
+import React, { type ChangeEvent, type FC, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 
 // components
 import Button from '@extension/components/Button';
-import EnterMnemonicPhraseInput, {
-  validate,
-} from '@extension/components/EnterMnemonicPhraseInput';
 import GenericInput from '@extension/components/GenericInput';
 import PageHeader from '@extension/components/PageHeader';
+import SeedPhraseInput from '@extension/components/SeedPhraseInput';
 import Steps from '@extension/components/Steps';
 
 // constants
@@ -43,6 +41,7 @@ import type {
 } from '@extension/types';
 
 // utils
+import { validate } from '@extension/components/SeedPhraseInput';
 import convertPublicKeyToAVMAddress from '@extension/utils/convertPublicKeyToAVMAddress';
 import convertSeedPhraseToPrivateKey from '@extension/utils/convertSeedPhraseToPrivateKey';
 
@@ -72,6 +71,7 @@ const ImportAccountViaSeedPhrasePage: FC<IAddAccountPageProps> = ({
   );
   const [seedPhraseError, setSeedPhraseError] = useState<string | null>(null);
   // misc
+  const _context = 'import-account-via-seed-phrase-page';
   const stepsLabels = [
     t<string>('headings.enterYourSeedPhrase'),
     t<string>('headings.nameYourAccount'),
@@ -121,7 +121,11 @@ const ImportAccountViaSeedPhrasePage: FC<IAddAccountPageProps> = ({
 
     // if this is the first step, validate the mnemonic
     if (activeStep <= StepsEnum.SeedPhrase) {
-      _seedPhraseError = validate(seedPhrases, t);
+      _seedPhraseError = validate(
+        t<string>('labels.seedPhrase'),
+        seedPhrases,
+        t
+      );
 
       setSeedPhraseError(_seedPhraseError);
 
@@ -193,7 +197,8 @@ const ImportAccountViaSeedPhrasePage: FC<IAddAccountPageProps> = ({
                 {t<string>('captions.enterSeedPhrase')}
               </Text>
 
-              <EnterMnemonicPhraseInput
+              <SeedPhraseInput
+                _context={_context}
                 disabled={saving}
                 error={seedPhraseError}
                 onChange={handleOnMnemonicPhraseChange}

src/extension/translations/en.ts

@@ -31,6 +31,7 @@ const translation: IResourceLanguage = {
     getStarted: 'Get Started',
     hide: 'Hide',
     import: 'Import',
+    max: 'max',
     moreDetails: 'More Details',
     next: 'Next',
     ok: 'OK',
@@ -260,9 +261,9 @@ const translation: IResourceLanguage = {
       '2. After your password has been confirmed, you will then be asked to use your passkey to decrypt the private keys.',
     requestingPasskeyPermission:
       'Requesting permission from the passkey "{{name}}".',
-    saveMnemonicPhrase1:
+    saveSeedPhrase1:
       'Here is your 25 word mnemonic seed phrase; it is the key to your account.',
-    saveMnemonicPhrase2: `Make sure you save this in a secure place.`,
+    saveSeedPhrase2: `Make sure you save this in a secure place.`,
     scannedQrCodes: 'Scanning {{count}} of {{total}} codes',
     scanningForQrCode:
       'Scanning for a QR Code. Make sure the QR code is visible in the background.',
@@ -312,8 +313,8 @@ const translation: IResourceLanguage = {
       copySeedPhraseRequired:
         'You must confirm you have copied the seed phrase',
       invalidAddress: 'Invalid address',
-      invalidMnemonic: 'Invalid seed phrase',
       invalidPassword: 'Invalid password',
+      invalidSeedPhrase: 'Invalid seed phrase',
       passwordMinLength: 'Must be at least 8 characters',
       passwordTooWeak: 'This password is too weak',
       required: 'This field required',
@@ -471,6 +472,7 @@ const translation: IResourceLanguage = {
     accountToFreeze: 'Account To Freeze',
     accountToUnfreeze: 'Account To Unfreeze',
     addAccount: 'Add Account',
+    addMaximumAmount: 'Add Maximum Amount',
     algorithm: 'Algorithm',
     allowActionTracking: 'Allow certain actions to be tracked?',
     allowBetaNet: 'Allow BetaNet networks?',
@@ -588,6 +590,7 @@ const translation: IResourceLanguage = {
     removedAccount: 'Removed Account',
     removeSession: 'Remove Session',
     reserveAccount: 'Reserve Account',
+    resetSeedPhrase: 'Reset Seed Phrase',
     scanQRCode: 'Scan QR Code',
     seedPhrase: 'Seed Phrase',
     selectAccount: 'Select Account',
@@ -599,7 +602,7 @@ const translation: IResourceLanguage = {
     sendAsset: 'Send {{nativeCurrency}}/Asset',
     settings: 'Settings',
     shareAddress: 'Share Address',
-    showHidePassword: 'Show/hide password',
+    showHidePassword: 'Show/hide Password',
     signingMethod: 'Signing Method',
     stateProofKey: 'State Proof Public Key',
     symbol: 'Symbol',