Improve name validation

apps/desktop/src/views/settings/network/UpsertNetworkModal.tsx

@@ -10,7 +10,7 @@ import {
   ModalHeader,
 } from "@chakra-ui/react";
 import { useDynamicModalContext } from "@umami/components";
-import { networksActions, useAvailableNetworks } from "@umami/state";
+import { networksActions, useAvailableNetworks, useValidateName } from "@umami/state";
 import { type Network } from "@umami/tezos";
 import { useForm } from "react-hook-form";
 import { useDispatch } from "react-redux";
@@ -25,6 +25,7 @@ export const UpsertNetworkModal = ({ network }: { network?: Network }) => {
   const { onClose } = useDynamicModalContext();
   const dispatch = useDispatch();
   const availableNetworks = useAvailableNetworks();
+  const validateName = useValidateName();
 
   const {
     formState: { errors, isValid },
@@ -56,6 +57,7 @@ export const UpsertNetworkModal = ({ network }: { network?: Network }) => {
                     if (availableNetworks.find(n => n.name === name)) {
                       return "Network with this name already exists";
                     }
+                    return validateName(name);
                   },
                 })}
               />

apps/web/src/components/Menu/NetworkMenu/EditNetworkMenu.tsx

@@ -1,6 +1,11 @@
 import { Button, FormControl, FormErrorMessage, FormLabel, Input, VStack } from "@chakra-ui/react";
 import { useDynamicDrawerContext } from "@umami/components";
-import { networksActions, useAppDispatch, useAvailableNetworks } from "@umami/state";
+import {
+  networksActions,
+  useAppDispatch,
+  useAvailableNetworks,
+  useValidateName,
+} from "@umami/state";
 import { type Network } from "@umami/tezos";
 import { useForm } from "react-hook-form";
 
@@ -16,6 +21,7 @@ export const EditNetworkMenu = ({ network }: EditNetworkMenuProps) => {
   const { goBack } = useDynamicDrawerContext();
   const dispatch = useAppDispatch();
   const availableNetworks = useAvailableNetworks();
+  const validateName = useValidateName();
 
   const {
     formState: { errors, isValid },
@@ -43,6 +49,7 @@ export const EditNetworkMenu = ({ network }: EditNetworkMenuProps) => {
                     if (availableNetworks.find(n => n.name === name)) {
                       return "Network with this name already exists";
                     }
+                    return validateName(name);
                   },
                 })}
               />

packages/state/src/hooks/labels.test.ts

@@ -9,7 +9,7 @@ import {
 } from "@umami/core";
 import { MAINNET } from "@umami/tezos";
 
-import { useGetNextAvailableAccountLabels, useValidateName } from "./labels";
+import { PROHIBITED_CHARACTERS, useGetNextAvailableAccountLabels, useValidateName } from "./labels";
 import { contactsActions, multisigsActions, networksActions } from "../slices";
 import { type UmamiStore, makeStore } from "../store";
 import { addTestAccounts, renderHook } from "../testUtils";
@@ -22,6 +22,22 @@ beforeEach(() => {
 
 describe("labelsHooks", () => {
   describe("useValidateName", () => {
+    it.each(PROHIBITED_CHARACTERS)("fails if name contains `%s` special character", char => {
+      const {
+        result: { current: validateName },
+      } = renderHook(() => useValidateName(), { store });
+
+      expect(validateName(`Some ${char} name`)).toEqual("Name contains special character(s)");
+    });
+
+    it("fails if name exceeds 256 characters", () => {
+      const {
+        result: { current: validateName },
+      } = renderHook(() => useValidateName(), { store });
+
+      expect(validateName("a".repeat(257))).toEqual("Name should not exceed 256 characters");
+    });
+
     describe.each([
       { testCase: "with trailing whitespaces", withWhitespaces: true },
       { testCase: "without trailing whitespaces", withWhitespaces: false },

packages/state/src/hooks/labels.ts

@@ -1,12 +1,36 @@
 import { useAllContacts } from "./contacts";
 import { useAllAccounts } from "./getAccountData";
 
+export const PROHIBITED_CHARACTERS = [
+  "<",
+  ">",
+  '"',
+  "'",
+  "&",
+  "/",
+  "\\",
+  "\t",
+  "\n",
+  "\r",
+  "`",
+  "{",
+  "}",
+  "[",
+  "]",
+];
+
 /** Hook for validating name for account or contact. */
 export const useValidateName = (oldName?: string | undefined) => {
   const isUniqueLabel = useIsUniqueLabel();
 
   return (name: string) => {
     const trimmedName = name.trim();
+    if (trimmedName.length > 256) {
+      return "Name should not exceed 256 characters";
+    }
+    if (PROHIBITED_CHARACTERS.some(char => trimmedName.includes(char))) {
+      return "Name contains special character(s)";
+    }
     if (trimmedName.length === 0) {
       return "Name should not be empty";
     }