Merge pull request #1094 from alleslabs/fix/add-route-zod-validation

fix(components): add zod validation to pages

CHANGELOG.md

@@ -41,6 +41,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#1094](https://github.com/alleslabs/celatone-frontend/pull/1094) Replace getFirstQueryParam with zod validation
+
 ### Bug fixes
 
 - [#1150](https://github.com/alleslabs/celatone-frontend/pull/1150) Fix camel case on message

src/lib/components/button/InstantiateButton.tsx

@@ -58,7 +58,7 @@ export const InstantiateButton = ({
   const { address, isWalletConnected } = useCurrentChain();
   const navigate = useInternalNavigate();
   const goToInstantiate = () =>
-    navigate({ pathname: "/instantiate", query: { "code-id": codeId } });
+    navigate({ pathname: "/instantiate", query: { codeId } });
 
   const isAllowed = resolvePermission(
     address,

src/lib/components/json-schema/section/SchemaInputNotExist.tsx

@@ -24,7 +24,7 @@ export const SchemaInputNotExist = ({
   if (verifiedSchema)
     return (
       <Text color="text.main" fontWeight={700} variant="body1">
-        `Verified JSON Schema doesn’t have ${prettyType}Msg`
+        Verified JSON Schema doesn’t have {prettyType}Msg
       </Text>
     );
 

src/lib/components/modal/wasm-verify-submit/WasmVerifySubmitForm.tsx

@@ -68,7 +68,7 @@ export const WasmVerifySubmitForm = ({
           }),
         commit: z
           .string()
-          .min(1, { message: "Commit hash is requried" })
+          .min(1, { message: "Commit hash is required" })
           .regex(
             /^[0-9a-fA-F]+$/,
             "Only hexadecimal digits are allowed, such as 0-9 and A-F"

src/lib/components/select-code/CodeSelect.tsx

@@ -11,33 +11,33 @@ import type { Code } from "lib/services/types";
 import { useDerivedWasmVerifyInfo } from "lib/services/verification/wasm";
 import { useCodeLcd } from "lib/services/wasm/code";
 import { AccessConfigPermission } from "lib/types";
-import { getWasmVerifyStatus, isId } from "lib/utils";
+import { getWasmVerifyStatus } from "lib/utils";
 
 import { CodeSelectDrawerButton } from "./CodeSelectDrawerButton";
 
 interface CodeSelectProps extends Omit<FlexProps, "onSelect"> {
-  onCodeSelect: (code: string) => void;
+  codeId: number;
+  onCodeSelect: (code: number) => void;
   setCodeHash: (data: Code) => void;
-  codeId: string;
   status: FormStatus;
 }
 
 export const CodeSelect = ({
+  codeId,
   onCodeSelect,
   setCodeHash,
-  codeId,
   status,
   ...componentProps
 }: CodeSelectProps) => {
   const { getCodeLocalInfo } = useCodeStore();
-  const name = getCodeLocalInfo(Number(codeId))?.name;
-  const { data } = useCodeLcd(Number(codeId), {
-    enabled: isId(codeId),
+  const name = getCodeLocalInfo(codeId)?.name;
+  const { data } = useCodeLcd(codeId, {
+    enabled: !!codeId,
     onSuccess: setCodeHash,
   });
 
   const { data: wasmDerivedVerifyInfos } = useDerivedWasmVerifyInfo(
-    Number(codeId),
+    codeId,
     data?.hash
   );
 

src/lib/components/select-code/CodeSelectDrawerButton.tsx

@@ -32,7 +32,7 @@ interface CodeFilterState {
 }
 
 interface CodeSelectDrawerButtonProps {
-  onCodeSelect: (code: string) => void;
+  onCodeSelect: (code: number) => void;
   buttonText: string;
 }
 
@@ -65,7 +65,7 @@ export const CodeSelectDrawerButton = ({
   } = useMyCodesData(keyword, permissionValue);
 
   const handleSelect = (codeId: number) => {
-    onCodeSelect(codeId.toString());
+    onCodeSelect(codeId);
     onClose();
   };
 

src/lib/components/select-code/CodeSelectSection.tsx

@@ -12,11 +12,11 @@ import type { Option } from "lib/types";
 import { CodeSelect } from "./CodeSelect";
 
 interface CodeSelectSectionProps<T extends FieldValues> {
-  codeId: string;
+  codeId: number;
   name: FieldPath<T>;
   control: Control<T>;
   error: Option<string>;
-  onCodeSelect: (codeId: string) => void;
+  onCodeSelect: (codeId: number) => void;
   setCodeHash: (data: Code) => void;
   status: FormStatus;
 }
@@ -61,9 +61,9 @@ export const CodeSelectSection = <T extends FieldValues>({
           <CodeSelect
             mt={4}
             mb={8}
+            codeId={codeId}
             onCodeSelect={onCodeSelect}
             setCodeHash={setCodeHash}
-            codeId={codeId}
             status={status}
           />
         ) : (

src/lib/components/tx/modal/ButtonSection.tsx

@@ -59,7 +59,7 @@ export const ButtonSection = ({
             const codeId = receipts.find((r) => r.title === "Code ID")?.value;
             navigate({
               pathname: "/migrate",
-              query: { contract: router.query.contract, "code-id": codeId },
+              query: { contract: router.query.contract, codeId },
             });
             onClose?.();
           }}

src/lib/pages/account-details/components/resources/ResourceLeftPanel.tsx

@@ -7,7 +7,6 @@ import {
   Flex,
   Text,
 } from "@chakra-ui/react";
-import { useRouter } from "next/router";
 import { useCallback, useMemo, useState } from "react";
 
 import { AmpEvent, track, trackUseExpand } from "lib/amplitude";
@@ -16,40 +15,34 @@ import InputWithIcon from "lib/components/InputWithIcon";
 import { ResourceCard } from "lib/components/resource";
 import type {
   BechAddr,
+  Option,
   ResourceGroup,
   ResourceGroupByAccount,
 } from "lib/types";
-import { getFirstQueryParam, truncate } from "lib/utils";
+import { truncate } from "lib/utils";
 
 interface ResourceSectionBodyProps {
   address: BechAddr;
   resourcesByOwner: ResourceGroupByAccount[];
+  selectedAccount: Option<string>;
+  selectedGroupName: Option<string>;
 }
 
 export const ResourceLeftPanel = ({
   address,
   resourcesByOwner,
+  selectedAccount,
+  selectedGroupName,
 }: ResourceSectionBodyProps) => {
-  const router = useRouter();
   const navigate = useInternalNavigate();
   const [keyword, setKeyword] = useState("");
 
-  const selectedAccountParam = getFirstQueryParam(
-    router.query.account,
-    resourcesByOwner?.[0]?.owner
-  );
-  const selectedNameParam = getFirstQueryParam(
-    router.query.selected,
-    resourcesByOwner?.[0]?.resources[0]?.group
-  );
-
   const handleSelectResource = useCallback(
     (
       account: ResourceGroupByAccount["owner"],
       resource: ResourceGroup["group"]
     ) => {
-      if (account === selectedAccountParam && resource === selectedNameParam)
-        return;
+      if (account === selectedAccount && resource === selectedGroupName) return;
       navigate({
         pathname: `/accounts/[accountAddress]/[tab]`,
         query: {
@@ -64,7 +57,7 @@ export const ResourceLeftPanel = ({
         },
       });
     },
-    [selectedNameParam, selectedAccountParam, address, navigate]
+    [selectedGroupName, selectedAccount, address, navigate]
   );
 
   const filteredResourcesByOwner = useMemo(() => {
@@ -81,11 +74,11 @@ export const ResourceLeftPanel = ({
   }, [keyword, resourcesByOwner]);
 
   const selectedIndex = filteredResourcesByOwner.findIndex(
-    (item) => item.owner === selectedAccountParam
+    (item) => item.owner === selectedAccount
   );
   const selectedGroup = filteredResourcesByOwner[selectedIndex];
   const selectedResources = selectedGroup?.resources.find(
-    (item) => item.group === selectedNameParam
+    (item) => item.group === selectedGroupName
   );
 
   return (

src/lib/pages/account-details/components/resources/ResourceSection.tsx

@@ -10,13 +10,17 @@ interface ResourceSectionProps {
   totalCount: Option<number>;
   resourcesByOwner: Option<ResourceGroupByAccount[]>;
   isLoading: boolean;
+  selectedAccountParam: Option<string>;
+  selectedGroupNameParam: Option<string>;
 }
 
 export const ResourceSection = ({
   address,
   totalCount,
   resourcesByOwner,
   isLoading,
+  selectedAccountParam,
+  selectedGroupNameParam,
 }: ResourceSectionProps) => (
   <Flex direction="column" mt={8}>
     <TableTitle
@@ -28,6 +32,8 @@ export const ResourceSection = ({
       address={address}
       resourcesByOwner={resourcesByOwner}
       isLoading={isLoading}
+      selectedAccountParam={selectedAccountParam}
+      selectedGroupNameParam={selectedGroupNameParam}
     />
   </Flex>
 );

src/lib/pages/account-details/components/resources/ResourceSectionBody.tsx

@@ -7,7 +7,6 @@ import {
   GridItem,
   Heading,
 } from "@chakra-ui/react";
-import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 
 import { trackUseExpandAll } from "lib/amplitude";
@@ -18,38 +17,35 @@ import { Loading } from "lib/components/Loading";
 import { ResourceDetailCard } from "lib/components/resource";
 import { EmptyState, ErrorFetching } from "lib/components/state";
 import type { BechAddr, Option, ResourceGroupByAccount } from "lib/types";
-import { getFirstQueryParam } from "lib/utils";
 
 import { ResourceLeftPanel } from "./ResourceLeftPanel";
 
 interface ResourceSectionBodyProps {
   address: BechAddr;
   resourcesByOwner: Option<ResourceGroupByAccount[]>;
   isLoading: boolean;
+  selectedAccountParam: Option<string>;
+  selectedGroupNameParam: Option<string>;
 }
 
 export const ResourceSectionBody = ({
   address,
   resourcesByOwner,
   isLoading,
+  selectedAccountParam,
+  selectedGroupNameParam,
 }: ResourceSectionBodyProps) => {
-  const router = useRouter();
   const isMobile = useMobile();
 
   const [expandedIndexes, setExpandedIndexes] = useState<number[]>([]);
 
-  const selectedAccountParam = getFirstQueryParam(
-    router.query.account,
-    resourcesByOwner?.[0]?.owner
-  );
-  const selectedNameParam = getFirstQueryParam(
-    router.query.selected,
-    resourcesByOwner?.[0]?.resources[0]?.group
-  );
+  const selectedAccount = selectedAccountParam ?? resourcesByOwner?.[0]?.owner;
+  const selectedGroupName =
+    selectedGroupNameParam ?? resourcesByOwner?.[0]?.resources[0]?.group;
 
   const selectedResource = resourcesByOwner
-    ?.find((resource) => resource.owner === selectedAccountParam)
-    ?.resources?.find((resource) => resource.group === selectedNameParam);
+    ?.find((resource) => resource.owner === selectedAccount)
+    ?.resources?.find((resource) => resource.group === selectedGroupName);
 
   useEffect(() => {
     setExpandedIndexes(selectedResource?.items.length === 1 ? [0] : []);
@@ -65,6 +61,8 @@ export const ResourceSectionBody = ({
         <ResourceLeftPanel
           address={address}
           resourcesByOwner={resourcesByOwner}
+          selectedAccount={selectedAccount}
+          selectedGroupName={selectedGroupName}
         />
       </GridItem>
       {selectedResource && (

src/lib/pages/account-details/index.tsx

@@ -62,9 +62,11 @@ import { TabIndex, zAccountDetailsQueryParams } from "./types";
 
 const tableHeaderId = "accountDetailsTab";
 
-export interface AccountDetailsBodyProps {
+interface AccountDetailsBodyProps {
   accountAddressParam: Addr;
   tabParam: TabIndex;
+  resourceSelectedAccountParam: Option<string>;
+  resourceSelectedGroupNameParam: Option<string>;
 }
 
 const getAddressOnPath = (hexAddress: HexAddr, accountAddress: BechAddr) =>
@@ -75,6 +77,8 @@ const InvalidAccount = () => <InvalidState title="Account does not exist" />;
 const AccountDetailsBody = ({
   accountAddressParam,
   tabParam,
+  resourceSelectedAccountParam,
+  resourceSelectedGroupNameParam,
   // eslint-disable-next-line sonarjs/cognitive-complexity
 }: AccountDetailsBodyProps) => {
   // ------------------------------------------//
@@ -556,6 +560,8 @@ const AccountDetailsBody = ({
               totalCount={resourcesData?.totalCount}
               resourcesByOwner={resourcesData?.groupedByOwner}
               isLoading={isResourceLoading}
+              selectedAccountParam={resourceSelectedAccountParam}
+              selectedGroupNameParam={resourceSelectedGroupNameParam}
             />
             <UserDocsLink
               title="What is resources?"
@@ -616,6 +622,8 @@ const AccountDetails = () => {
         <AccountDetailsBody
           accountAddressParam={validated.data.accountAddress}
           tabParam={validated.data.tab}
+          resourceSelectedAccountParam={validated.data.account}
+          resourceSelectedGroupNameParam={validated.data.selected}
         />
       )}
     </PageContainer>

src/lib/pages/account-details/types.ts

@@ -25,4 +25,7 @@ export const zAccountDetailsQueryParams = z.object({
       .optional()
       .transform(() => TabIndex.Overview),
   ]),
+  // for resource tab
+  account: z.string().optional(),
+  selected: z.string().optional(),
 });