fix(suite-native): Maximum characters not checked during account import

trezor · Jan 10, 2025 · e55a8c0 · e55a8c0
1 parent 0ae29ea
commit e55a8c0
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 12 deletions.
diff --git a/suite-native/module-accounts-import/package.json b/suite-native/module-accounts-import/package.json
@@ -45,6 +45,7 @@
         "@trezor/styles": "workspace:*",
         "@trezor/utxo-lib": "workspace:*",
         "react": "18.2.0",
+        "react-hook-form": "^7.54.2",
         "react-native": "0.76.1",
         "react-native-reanimated": "3.16.1",
         "react-redux": "8.0.7"

diff --git a/suite-native/module-accounts-import/src/components/AccountImportConfirmFormScreen.tsx b/suite-native/module-accounts-import/src/components/AccountImportConfirmFormScreen.tsx
@@ -68,7 +68,7 @@ export const AccountImportConfirmFormScreen = ({
     const form = useAccountLabelForm(defaultAccountLabel);
     const {
         handleSubmit,
-        formState: { errors },
+        formState: { isValid },
     } = form;
 
     const handleImportAccount = handleSubmit(async ({ accountLabel }: AccountFormValues) => {
@@ -121,7 +121,7 @@ export const AccountImportConfirmFormScreen = ({
                         testID="@account-import/coin-synced/confirm-button"
                         onPress={handleImportAccount}
                         size="large"
-                        isDisabled={!!errors.accountLabel}
+                        isDisabled={!isValid}
                     >
                         <Translation id="generic.buttons.confirm" />
                     </Button>
@@ -133,7 +133,11 @@ export const AccountImportConfirmFormScreen = ({
                     ListEmptyComponent={null}
                     ListHeaderComponent={
                         <>
-                            <AccountImportOverview balance={accountInfo.balance} symbol={symbol} />
+                            <AccountImportOverview
+                                balance={accountInfo.balance}
+                                symbol={symbol}
+                                formControl={form.control}
+                            />
                             {knownTokens.length > 0 && (
                                 <Box marginTop="sp16" marginBottom="sp8">
                                     <Text variant="titleSmall">

diff --git a/suite-native/module-accounts-import/src/components/AccountImportOverview.tsx b/suite-native/module-accounts-import/src/components/AccountImportOverview.tsx
@@ -1,3 +1,5 @@
+import { Control } from 'react-hook-form';
+
 import { getNetwork, type NetworkSymbol } from '@suite-common/wallet-config';
 import {
     CryptoAmountFormatter,
@@ -8,15 +10,21 @@ import { RoundedIcon, VStack } from '@suite-native/atoms';
 import { isTestnet } from '@suite-common/wallet-utils';
 import { TextInputField } from '@suite-native/forms';
 import { useTranslate } from '@suite-native/intl';
+import {
+    AccountFormValues,
+    AccountLabelFieldHint,
+    MAX_ACCOUNT_LABEL_LENGTH,
+} from '@suite-native/accounts';
 
 import { AccountImportOverviewCard } from './AccountImportOverviewCard';
 
 type AssetsOverviewProps = {
     balance: string;
     symbol: NetworkSymbol;
+    formControl: Control<AccountFormValues>;
 };
 
-export const AccountImportOverview = ({ balance, symbol }: AssetsOverviewProps) => {
+export const AccountImportOverview = ({ balance, symbol, formControl }: AssetsOverviewProps) => {
     const { translate } = useTranslate();
 
     const fiatBalanceValue = useFiatFromCryptoValue({
@@ -27,7 +35,6 @@ export const AccountImportOverview = ({ balance, symbol }: AssetsOverviewProps)
         'moduleAccountManagement.accountSettingsScreen.renameForm.coinLabel',
     );
 
-    // TODO 9052
     return (
         <AccountImportOverviewCard
             icon={<RoundedIcon symbol={symbol} iconSize="large" />}
@@ -44,12 +51,16 @@ export const AccountImportOverview = ({ balance, symbol }: AssetsOverviewProps)
         >
             <VStack spacing="sp24">
                 {!isTestnet(symbol) && <FiatBalanceFormatter value={fiatBalanceValue} />}
-                <TextInputField
-                    testID="@account-import/coin-synced/label-input"
-                    name="accountLabel"
-                    label={coinLabelFieldLabel}
-                    elevation="1"
-                />
+                <VStack spacing="sp8">
+                    <TextInputField
+                        testID="@account-import/coin-synced/label-input"
+                        name="accountLabel"
+                        label={coinLabelFieldLabel}
+                        maxLength={MAX_ACCOUNT_LABEL_LENGTH}
+                        elevation="1"
+                    />
+                    <AccountLabelFieldHint formControl={formControl} />
+                </VStack>
             </VStack>
         </AccountImportOverviewCard>
     );

diff --git a/yarn.lock b/yarn.lock
@@ -9893,6 +9893,7 @@ __metadata:
     "@trezor/styles": "workspace:*"
     jotai: "npm:1.9.1"
     react: "npm:18.2.0"
+    react-hook-form: "npm:^7.54.2"
     react-native: "npm:0.76.1"
     react-native-reanimated: "npm:3.16.1"
     react-redux: "npm:8.0.7"
@@ -10547,6 +10548,7 @@ __metadata:
     "@trezor/styles": "workspace:*"
     "@trezor/utxo-lib": "workspace:*"
     react: "npm:18.2.0"
+    react-hook-form: "npm:^7.54.2"
     react-native: "npm:0.76.1"
     react-native-reanimated: "npm:3.16.1"
     react-redux: "npm:8.0.7"
@@ -10587,7 +10589,6 @@ __metadata:
     date-fns: "npm:^2.30.0"
     jotai: "npm:1.9.1"
     react: "npm:18.2.0"
-    react-hook-form: "npm:^7.54.2"
     react-native: "npm:0.76.1"
     react-redux: "npm:8.0.7"
   languageName: unknown