Move network fields validation scheme to @umami/components pkg

trilitech · Oct 7, 2024 · 74a3d28 · 74a3d28 · github-actions · Oct 7, 2024
1 parent a3a55b7
commit 74a3d28
Show file tree

Hide file tree

Showing 30 changed files with 169 additions and 293 deletions.
diff --git a/apps/desktop/package.json b/apps/desktop/package.json
@@ -154,6 +154,7 @@
   },
   "packageManager": "[email protected]",
   "dependencies": {
-    "electron-updater": "6.3.9"
+    "electron-updater": "6.3.9",
+    "@hookform/resolvers": "^3.9.0"
   }
 }
diff --git a/apps/desktop/src/views/settings/network/UpsertNetworkModal.test.tsx b/apps/desktop/src/views/settings/network/UpsertNetworkModal.test.tsx
@@ -12,6 +12,14 @@ beforeEach(() => {
 });
 
 describe("<UpsertNetworkModal />", () => {
+  const updatedNetwork = {
+    ...customNetwork,
+    rpcUrl: "https://rpc.com",
+    tzktApiUrl: "https://tzkt.com",
+    tzktExplorerUrl: "https://explorer.com",
+    buyTezUrl: "",
+  };
+
   describe("edit mode", () => {
     beforeEach(() => {
       store.dispatch(networksActions.upsertNetwork(customNetwork));
@@ -27,14 +35,6 @@ describe("<UpsertNetworkModal />", () => {
       const user = userEvent.setup();
       render(<UpsertNetworkModal network={customNetwork} />, { store });
 
-      const updatedNetwork = {
-        ...customNetwork,
-        rpcUrl: "https://rpc",
-        tzktApiUrl: "https://tzkt",
-        tzktExplorerUrl: "https://explorer",
-        buyTezUrl: "",
-      };
-
       await act(() => user.clear(screen.getByLabelText("RPC URL")));
       await act(() => user.clear(screen.getByLabelText("Tzkt API URL")));
       await act(() => user.clear(screen.getByLabelText("Tzkt Explorer URL")));
@@ -55,14 +55,6 @@ describe("<UpsertNetworkModal />", () => {
       const user = userEvent.setup();
       render(<UpsertNetworkModal network={customNetwork} />, { store });
 
-      const updatedNetwork = {
-        ...customNetwork,
-        rpcUrl: "https://rpc",
-        tzktApiUrl: "https://tzkt",
-        tzktExplorerUrl: "https://explorer",
-        buyTezUrl: "",
-      };
-
       await act(() => user.clear(screen.getByLabelText("RPC URL")));
       await act(() => user.clear(screen.getByLabelText("Tzkt API URL")));
       await act(() => user.clear(screen.getByLabelText("Tzkt Explorer URL")));
@@ -85,6 +77,48 @@ describe("<UpsertNetworkModal />", () => {
     });
   });
 
+  describe("URL fields validation", () => {
+    const urlFields = [
+      { label: "RPC URL", required: true },
+      { label: "Tzkt API URL", required: true },
+      { label: "Tzkt Explorer URL", required: true },
+      { label: "Buy Tez URL", required: false },
+    ];
+
+    it.each(urlFields)("validates $label field", async ({ label, required }) => {
+      const user = userEvent.setup();
+      render(<UpsertNetworkModal />, { store });
+
+      await user.type(screen.getByLabelText(label), "invalid-url");
+      await user.tab();
+
+      await waitFor(() => {
+        expect(screen.getByText(`Enter a valid ${label}`)).toBeVisible();
+      });
+
+      await user.clear(screen.getByLabelText(label));
+      await user.tab();
+
+      if (required) {
+        await waitFor(() => {
+          expect(screen.getByText(`${label} is required`)).toBeVisible();
+        });
+      } else {
+        await waitFor(() => {
+          expect(screen.queryByText(`${label} is required`)).not.toBeInTheDocument();
+        });
+      }
+
+      await user.type(screen.getByLabelText(label), "https://valid-url.com");
+      await user.tab();
+
+      await waitFor(() => {
+        expect(screen.queryByText(`Enter a valid ${label}`)).not.toBeInTheDocument();
+      });
+      expect(screen.queryByText(`${label} is required`)).not.toBeInTheDocument();
+    });
+  });
+
   describe("create mode", () => {
     describe("name field", () => {
       it("validates uniqueness", async () => {

diff --git a/apps/desktop/src/views/settings/network/UpsertNetworkModal.tsx b/apps/desktop/src/views/settings/network/UpsertNetworkModal.tsx
@@ -9,7 +9,8 @@ import {
   ModalFooter,
   ModalHeader,
 } from "@chakra-ui/react";
-import { useDynamicModalContext } from "@umami/components";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { getNetworkValidationScheme, useDynamicModalContext } from "@umami/components";
 import { networksActions, useAvailableNetworks } from "@umami/state";
 import { type Network } from "@umami/tezos";
 import { useForm } from "react-hook-form";
@@ -30,7 +31,11 @@ export const UpsertNetworkModal = ({ network }: { network?: Network }) => {
     formState: { errors, isValid },
     register,
     handleSubmit,
-  } = useForm<Network>({ mode: "onBlur", defaultValues: network });
+  } = useForm<Network>({
+    mode: "onBlur",
+    defaultValues: network,
+    resolver: zodResolver(getNetworkValidationScheme(availableNetworks, network)),
+  });
 
   const onSubmit = (network: Network) => {
     dispatch(networksActions.upsertNetwork(network));
@@ -51,12 +56,7 @@ export const UpsertNetworkModal = ({ network }: { network?: Network }) => {
               <Input
                 placeholder="mainnet"
                 {...register("name", {
-                  required: "Name is required",
-                  validate: name => {
-                    if (availableNetworks.find(n => n.name === name)) {
-                      return "Network with this name already exists";
-                    }
-                  },
+                  setValueAs: removeTrailingSlashes,
                 })}
               />
               {errors.name && <FormErrorMessage>{errors.name.message}</FormErrorMessage>}
@@ -67,7 +67,6 @@ export const UpsertNetworkModal = ({ network }: { network?: Network }) => {
             <Input
               placeholder="https://prod.tcinfra.net/rpc/mainnet"
               {...register("rpcUrl", {
-                required: "RPC URL is required",
                 setValueAs: removeTrailingSlashes,
               })}
             />
@@ -78,7 +77,6 @@ export const UpsertNetworkModal = ({ network }: { network?: Network }) => {
             <Input
               placeholder="https://api.ghostnet.tzkt.io"
               {...register("tzktApiUrl", {
-                required: "Tzkt API URL is required",
                 setValueAs: removeTrailingSlashes,
               })}
             />
@@ -89,7 +87,6 @@ export const UpsertNetworkModal = ({ network }: { network?: Network }) => {
             <Input
               placeholder="https://ghostnet.tzkt.io"
               {...register("tzktExplorerUrl", {
-                required: "Tzkt Explorer URL is required",
                 setValueAs: removeTrailingSlashes,
               })}
             />
@@ -98,9 +95,10 @@ export const UpsertNetworkModal = ({ network }: { network?: Network }) => {
             )}
           </FormControl>
 
-          <FormControl>
+          <FormControl isInvalid={!!errors.buyTezUrl}>
             <FormLabel>Buy Tez URL</FormLabel>
             <Input placeholder="https://faucet.ghostnet.teztnets.com" {...register("buyTezUrl")} />
+            {errors.buyTezUrl && <FormErrorMessage>{errors.buyTezUrl.message}</FormErrorMessage>}
           </FormControl>
           <ModalFooter>
             <Button width="100%" isDisabled={!isValid} onClick={() => {}} type="submit">

diff --git a/apps/web/src/components/Menu/NetworkMenu/EditNetworkMenu.test.tsx b/apps/web/src/components/Menu/NetworkMenu/EditNetworkMenu.test.tsx
@@ -79,6 +79,48 @@ describe("<EditNetworkMenu />", () => {
     });
   });
 
+  describe("URL fields validation", () => {
+    const urlFields = [
+      { label: "RPC URL", required: true },
+      { label: "Tzkt API URL", required: true },
+      { label: "Tzkt Explorer URL", required: true },
+      { label: "Buy Tez URL", required: false },
+    ];
+
+    it.each(urlFields)("validates $label field", async ({ label, required }) => {
+      const user = userEvent.setup();
+      await renderInDrawer(<EditNetworkMenu />, store);
+
+      await user.type(screen.getByLabelText(label), "invalid-url");
+      await user.tab();
+
+      await waitFor(() => {
+        expect(screen.getByText(`Enter a valid ${label}`)).toBeVisible();
+      });
+
+      await user.clear(screen.getByLabelText(label));
+      await user.tab();
+
+      if (required) {
+        await waitFor(() => {
+          expect(screen.getByText(`${label} is required`)).toBeVisible();
+        });
+      } else {
+        await waitFor(() => {
+          expect(screen.queryByText(`${label} is required`)).not.toBeInTheDocument();
+        });
+      }
+
+      await user.type(screen.getByLabelText(label), "https://valid-url.com");
+      await user.tab();
+
+      await waitFor(() => {
+        expect(screen.queryByText(`Enter a valid ${label}`)).not.toBeInTheDocument();
+      });
+      expect(screen.queryByText(`${label} is required`)).not.toBeInTheDocument();
+    });
+  });
+
   describe("create mode", () => {
     describe("name field", () => {
       it("validates uniqueness", async () => {
@@ -99,51 +141,6 @@ describe("<EditNetworkMenu />", () => {
       });
     });
 
-    describe("URL fields validation", () => {
-      const urlFields = [
-        { label: "RPC URL", required: true },
-        { label: "Tzkt API URL", required: true },
-        { label: "Tzkt Explorer URL", required: true },
-        { label: "Buy Tez URL", required: false },
-      ];
-
-      it.each(urlFields)("validates $label field", async ({ label, required }) => {
-        const user = userEvent.setup();
-        await renderInDrawer(<EditNetworkMenu />, store);
-
-        // Test invalid URL
-        await user.type(screen.getByLabelText(label), "invalid-url");
-        await user.tab(); // Trigger blur event
-
-        await waitFor(() => {
-          expect(screen.getByText(`Enter a valid ${label}`)).toBeVisible();
-        });
-
-        // Test empty field
-        await user.clear(screen.getByLabelText(label));
-        await user.tab(); // Trigger blur event
-
-        if (required) {
-          await waitFor(() => {
-            expect(screen.getByText(`${label} is required`)).toBeVisible();
-          });
-        } else {
-          await waitFor(() => {
-            expect(screen.queryByText(`${label} is required`)).not.toBeInTheDocument();
-          });
-        }
-
-        // Test valid URL
-        await user.type(screen.getByLabelText(label), "https://valid-url.com");
-        await user.tab(); // Trigger blur event
-
-        await waitFor(() => {
-          expect(screen.queryByText(`Enter a valid ${label}`)).not.toBeInTheDocument();
-        });
-        expect(screen.queryByText(`${label} is required`)).not.toBeInTheDocument();
-      });
-    });
-
     it("validates RPC URL field presence", async () => {
       await renderInDrawer(<EditNetworkMenu />, store);
       fireEvent.blur(screen.getByLabelText("RPC URL"));

diff --git a/apps/web/src/components/Menu/NetworkMenu/EditNetworkMenu.tsx b/apps/web/src/components/Menu/NetworkMenu/EditNetworkMenu.tsx
@@ -1,10 +1,9 @@
 import { Button, FormControl, FormErrorMessage, FormLabel, Input, VStack } from "@chakra-ui/react";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useDynamicDrawerContext } from "@umami/components";
+import { getNetworkValidationScheme, useDynamicDrawerContext } from "@umami/components";
 import { networksActions, useAppDispatch, useAvailableNetworks } from "@umami/state";
 import { type Network } from "@umami/tezos";
 import { useForm } from "react-hook-form";
-import { z } from "zod";
 
 import { DrawerContentWrapper } from "../DrawerContentWrapper";
 
@@ -14,25 +13,6 @@ type EditNetworkMenuProps = {
 
 const removeTrailingSlashes = (url: string) => url.replace(/\/+$/g, "");
 
-const getNetworkSchema = (availableNetworks: Network[], network?: Network) =>
-  z.object({
-    name: network
-      ? z.string().optional()
-      : z
-          .string()
-          .min(1, "Name is required")
-          .refine(name => !availableNetworks.find(n => n.name === name), {
-            message: "Network with this name already exists",
-          }),
-    rpcUrl: z.string().min(1, "RPC URL is required").url("Enter a valid RPC URL"),
-    tzktApiUrl: z.string().min(1, "Tzkt API URL is required").url("Enter a valid Tzkt API URL"),
-    tzktExplorerUrl: z
-      .string()
-      .min(1, "Tzkt Explorer URL is required")
-      .url("Enter a valid Tzkt Explorer URL"),
-    buyTezUrl: z.string().url("Enter a valid Buy Tez URL").or(z.literal("")),
-  });
-
 export const EditNetworkMenu = ({ network }: EditNetworkMenuProps) => {
   const { goBack } = useDynamicDrawerContext();
   const dispatch = useAppDispatch();
@@ -45,7 +25,7 @@ export const EditNetworkMenu = ({ network }: EditNetworkMenuProps) => {
   } = useForm<Network>({
     mode: "onBlur",
     defaultValues: network,
-    resolver: zodResolver(getNetworkSchema(availableNetworks, network)),
+    resolver: zodResolver(getNetworkValidationScheme(availableNetworks, network)),
   });
 
   const onSubmit = (network: Network) => {
@@ -100,7 +80,6 @@ export const EditNetworkMenu = ({ network }: EditNetworkMenuProps) => {
           <FormControl isInvalid={!!errors.buyTezUrl}>
             <FormLabel>Buy Tez URL</FormLabel>
             <Input placeholder="https://faucet.ghostnet.teztnets.com" {...register("buyTezUrl")} />
-
             {errors.buyTezUrl && <FormErrorMessage>{errors.buyTezUrl.message}</FormErrorMessage>}
           </FormControl>
         </VStack>

diff --git a/.../src/AddressPill/AddressPillText.test.tsx → ...ents/AddressPill/AddressPillText.test.tsx b/.../src/AddressPill/AddressPillText.test.tsx → ...ents/AddressPill/AddressPillText.test.tsx
@@ -3,7 +3,7 @@ import { GHOSTNET, formatPkh, mockImplicitAddress } from "@umami/tezos";
 
 import { AddressPillText } from "./AddressPillText";
 import { mockFA2AddressKind } from "./testUtils";
-import { render, screen } from "../testUtils";
+import { render, screen } from "../../testUtils";
 const { upsert } = contactsActions;
 
 let store: UmamiStore;

diff --git a/...nents/src/AddressPill/AddressPillText.tsx → ...omponents/AddressPill/AddressPillText.tsx b/...nents/src/AddressPill/AddressPillText.tsx → ...omponents/AddressPill/AddressPillText.tsx
diff --git a/packages/components/src/AddressPill/index.ts → ...nents/src/components/AddressPill/index.ts b/packages/components/src/AddressPill/index.ts → ...nents/src/components/AddressPill/index.ts
diff --git a/...s/components/src/AddressPill/testUtils.ts → ...s/src/components/AddressPill/testUtils.ts b/...s/components/src/AddressPill/testUtils.ts → ...s/src/components/AddressPill/testUtils.ts
@@ -1,5 +1,6 @@
+import { mockContractAddress } from "@umami/tezos";
+
 import { type FA2Address } from "./types";
-import { mockContractAddress } from "../../../tezos/src/testUtils";
 
 export const mockFA2AddressKind = (index?: number): FA2Address => ({
   type: "fa2",

diff --git a/packages/components/src/AddressPill/types.ts → ...nents/src/components/AddressPill/types.ts b/packages/components/src/AddressPill/types.ts → ...nents/src/components/AddressPill/types.ts
diff --git a/...ts/src/AddressPill/useAddressKind.test.ts → ...onents/AddressPill/useAddressKind.test.ts b/...ts/src/AddressPill/useAddressKind.test.ts → ...onents/AddressPill/useAddressKind.test.ts
@@ -28,7 +28,7 @@ import {
 import { cloneDeep } from "lodash";
 
 import { useAddressKind } from "./useAddressKind";
-import { renderHook } from "../testUtils";
+import { renderHook } from "../../testUtils";
 
 let store: UmamiStore;
 

diff --git a/...ponents/src/AddressPill/useAddressKind.ts → .../components/AddressPill/useAddressKind.ts b/...ponents/src/AddressPill/useAddressKind.ts → .../components/AddressPill/useAddressKind.ts
diff --git a/...s/src/AddressPill/useAddressPill.test.tsx → ...nents/AddressPill/useAddressPill.test.tsx b/...s/src/AddressPill/useAddressPill.test.tsx → ...nents/AddressPill/useAddressPill.test.tsx
@@ -1,8 +1,8 @@
-import { makeStore, UmamiStore } from "@umami/state";
+import { type UmamiStore, makeStore } from "@umami/state";
 import { mockImplicitAddress } from "@umami/tezos";
+
 import { useAddressPill } from "./useAddressPill";
-import { act, fireEvent, render, renderHook, screen, waitFor } from "../testUtils";
-import { Box, useDisclosure } from "@chakra-ui/react";
+import { act, renderHook } from "../../testUtils";
 
 let store: UmamiStore;
 

diff --git a/...ponents/src/AddressPill/useAddressPill.ts → .../components/AddressPill/useAddressPill.ts b/...ponents/src/AddressPill/useAddressPill.ts → .../components/AddressPill/useAddressPill.ts
diff --git a/...amicDisclosure/DynamicDisclosure.test.tsx → ...amicDisclosure/DynamicDisclosure.test.tsx b/...amicDisclosure/DynamicDisclosure.test.tsx → ...amicDisclosure/DynamicDisclosure.test.tsx
@@ -1,5 +1,5 @@
 import { useDynamicDrawer, useDynamicModal, useDynamicModalContext } from "./DynamicDisclosure";
-import { act, render, renderHook, screen } from "../testUtils";
+import { act, render, renderHook, screen } from "../../testUtils";
 
 describe("DynamicDisclosure", () => {
   describe("useDynamicModal", () => {

diff --git a/...c/DynamicDisclosure/DynamicDisclosure.tsx → ...s/DynamicDisclosure/DynamicDisclosure.tsx b/...c/DynamicDisclosure/DynamicDisclosure.tsx → ...s/DynamicDisclosure/DynamicDisclosure.tsx
diff --git a/...components/src/DynamicDisclosure/index.ts → ...src/components/DynamicDisclosure/index.ts b/...components/src/DynamicDisclosure/index.ts → ...src/components/DynamicDisclosure/index.ts
diff --git a/...c/DynamicDisclosure/useMultiForm.test.tsx → ...s/DynamicDisclosure/useMultiForm.test.tsx b/...c/DynamicDisclosure/useMultiForm.test.tsx → ...s/DynamicDisclosure/useMultiForm.test.tsx
@@ -11,7 +11,7 @@ import {
 
 import { useDynamicModalContext } from "./DynamicDisclosure";
 import { useMultiForm } from "./useMultiForm";
-import { act, renderHook, screen, userEvent, waitFor } from "../testUtils";
+import { act, renderHook, screen, userEvent, waitFor } from "../../testUtils";
 
 const Page3 = () => {
   const { goBack, allFormValues } = useDynamicModalContext();

diff --git a/...ts/src/DynamicDisclosure/useMultiForm.tsx → ...onents/DynamicDisclosure/useMultiForm.tsx b/...ts/src/DynamicDisclosure/useMultiForm.tsx → ...onents/DynamicDisclosure/useMultiForm.tsx
diff --git a/...utocomplete/MnemonicAutocomplete.test.tsx → ...utocomplete/MnemonicAutocomplete.test.tsx b/...utocomplete/MnemonicAutocomplete.test.tsx → ...utocomplete/MnemonicAutocomplete.test.tsx
@@ -2,7 +2,7 @@ import { FormControl, Text } from "@chakra-ui/react";
 import { FormProvider, useForm } from "react-hook-form";
 
 import { MnemonicAutocomplete } from "./MnemonicAutocomplete";
-import { fireEvent, render, screen, waitFor } from "../testUtils";
+import { fireEvent, render, screen, waitFor } from "../../testUtils";
 
 type FormFields = { word: string };
 

diff --git a/...onicAutocomplete/MnemonicAutocomplete.tsx → ...onicAutocomplete/MnemonicAutocomplete.tsx b/...onicAutocomplete/MnemonicAutocomplete.tsx → ...onicAutocomplete/MnemonicAutocomplete.tsx
diff --git a/...ponents/src/MnemonicAutocomplete/index.ts → .../components/MnemonicAutocomplete/index.ts b/...ponents/src/MnemonicAutocomplete/index.ts → .../components/MnemonicAutocomplete/index.ts
diff --git a/packages/components/src/ReactIdenticon.tsx → ...ponents/ReactIdenticon/ReactIdenticon.tsx b/packages/components/src/ReactIdenticon.tsx → ...ponents/ReactIdenticon/ReactIdenticon.tsx
diff --git a/packages/components/src/components/ReactIdenticon/index.ts b/packages/components/src/components/ReactIdenticon/index.ts
@@ -0,0 +1 @@
+export * from "./ReactIdenticon";
Title	Statements	Branches	Functions
apps/desktop	83.6% (1765/2111)	78.81% (837/1062)	78.14% (447/572)
apps/web	83.6% (1765/2111)	78.81% (837/1062)	78.14% (447/572)
packages/components	97.17% (172/177)	95.12% (78/82)	85.41% (41/48)
packages/core	82.22% (222/270)	71.73% (99/138)	81.96% (50/61)
packages/crypto	100% (28/28)	100% (3/3)	100% (5/5)
packages/data-polling	95.27% (141/148)	87.5% (21/24)	92.85% (39/42)
packages/multisig	98.47% (129/131)	85.71% (18/21)	100% (35/35)
packages/social-auth	100% (21/21)	100% (11/11)	100% (3/3)
packages/state	84.61% (792/936)	80.97% (166/205)	78.72% (296/376)
packages/tezos	85.57% (89/104)	89.47% (17/19)	82.75% (24/29)
packages/tzkt	84.05% (58/69)	81.25% (13/16)	76.92% (30/39)