Merge pull request #339 from alleslabs/chore/update-routes

Update route scheme to plural form

CHANGELOG.md

@@ -44,6 +44,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#339](https://github.com/alleslabs/celatone-frontend/pull/339) Update all routes to plural form, and patch all codes
 - [#334](https://github.com/alleslabs/celatone-frontend/pull/334) Change `osmo-test-4` to `osmo-test-5`, fix tx service when accountId is undefined
 - [#311](https://github.com/alleslabs/celatone-frontend/pull/311) Refine css styling
 - [#328](https://github.com/alleslabs/celatone-frontend/pull/328) Add proposal and pool page in sidebar navigation

next.config.js

@@ -33,6 +33,48 @@ const nextConfig = {
       },
     ];
   },
+  async redirects() {
+    const routes = [
+      "account",
+      "tx",
+      "block",
+      "code",
+      "contract",
+      "proposal",
+      "project",
+      "contract-list",
+      "past-tx",
+      "my-code",
+    ];
+
+    return routes.reduce((acc, route) => {
+      acc.push({
+        source: `/:network/${route}/:id`,
+        destination: `/:network/${route}s/:id`,
+        permanent: false,
+      });
+
+      acc.push({
+        source: `/${route}/:id`,
+        destination: `/${route}s/:id`,
+        permanent: false,
+      });
+
+      acc.push({
+        source: `/:network/${route}`,
+        destination: `/:network/${route}s`,
+        permanent: false,
+      });
+
+      acc.push({
+        source: `/${route}`,
+        destination: `/${route}s`,
+        permanent: false,
+      });
+
+      return acc;
+    }, []);
+  },
 };
 
 const moduleExports = {

src/lib/components/ExplorerLink.tsx

@@ -43,22 +43,22 @@ const getNavigationUrl = (
   let url = "";
   switch (type) {
     case "tx_hash":
-      url = "/tx";
+      url = "/txs";
       break;
     case "contract_address":
-      url = "/contract";
+      url = "/contracts";
       break;
     case "user_address":
-      url = "/account";
+      url = "/accounts";
       break;
     case "validator_address":
       url = getExplorerValidatorUrl(currentChainName);
       break;
     case "code_id":
-      url = "/code";
+      url = "/codes";
       break;
     case "block_height":
-      url = "/block";
+      url = "/blocks";
       break;
     case "proposal_id":
       url = getExplorerProposalUrl(currentChainName);

src/lib/components/StickySidebar.tsx

@@ -74,7 +74,9 @@ export const StickySidebar = ({
                     color: "lilac.light",
                     bgColor: "lilac.background",
                   }}
-                  onClick={() => navigate({ pathname: "/proposal/store-code" })}
+                  onClick={() =>
+                    navigate({ pathname: "/proposals/store-code" })
+                  }
                 >
                   <Text variant="body3" color="inherit" fontWeight={700}>
                     Submit Proposal To Store Code

src/lib/components/button/NewProposalButton.tsx

@@ -24,7 +24,7 @@ export const NewProposalButton = () => {
           icon={<CustomIcon name="code" color="pebble.600" />}
           onClick={() => {
             navigate({
-              pathname: "/proposal/store-code",
+              pathname: "/proposals/store-code",
             });
           }}
         >
@@ -33,9 +33,8 @@ export const NewProposalButton = () => {
         {/* <MenuItem
           icon={<CustomIcon name="contract-address" color="pebble.600"/>}
           onClick={() => {
-            // TODO - Change navigation path
             navigate({
-              pathname: "/proposal-instantiate",
+              pathname: "/proposals/instantiate",
             });
           }}
         >
@@ -50,7 +49,7 @@ export const NewProposalButton = () => {
             icon={<CustomIcon name="admin" color="pebble.600" />}
             onClick={() => {
               navigate({
-                pathname: "/proposal/whitelist",
+                pathname: "/proposals/whitelist",
               });
             }}
           >

src/lib/components/modal/list/EditListName.tsx

@@ -69,13 +69,13 @@ export function EditListNameModal({
     <ActionModal
       title="Edit list name"
       icon="add-new"
-      trigger={<MenuItem {...menuItemProps} />}
+      trigger={<MenuItem {...menuItemProps} as="button" />}
       mainBtnTitle="Save"
       mainAction={() => {
         handleSave();
         if (reroute)
           navigate({
-            pathname: "/contract-list/[slug]",
+            pathname: "/contract-lists/[slug]",
             query: { slug: formatSlugName(listName) },
             replace: true,
           });

src/lib/components/modal/list/RemoveList.tsx

@@ -24,8 +24,8 @@ export function RemoveListModal({ list, menuItemProps }: RemoveListModalProps) {
   const handleRemove = () => {
     AmpTrack(AmpEvent.LIST_REMOVE);
     removeList(userKey, list.value);
-    navigate({ pathname: "/contract-list" });
-    // TODO: show toast after removed and redirect to /contract-list
+    navigate({ pathname: "/contract-lists" });
+    // TODO: show toast after removed and redirect to /contract-lists
     setTimeout(() => {
       toast({
         title: `Removed ${shortenName(list.label)}`,
@@ -43,7 +43,7 @@ export function RemoveListModal({ list, menuItemProps }: RemoveListModalProps) {
       title={`Remove ${shortenName(list.label)}?`}
       icon="delete"
       iconColor="error.light"
-      trigger={<MenuItem {...menuItemProps} />}
+      trigger={<MenuItem {...menuItemProps} as="button" />}
       mainBtnTitle="Yes, Remove list"
       mainAction={handleRemove}
       otherBtnTitle="No, Keep It"

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

@@ -50,7 +50,7 @@ export const ButtonSection = ({
           <Button
             variant="ghost-lilac"
             onClick={() => {
-              navigate({ pathname: "/codes" });
+              navigate({ pathname: "/my-codes" });
               onClose?.();
             }}
           >
@@ -99,7 +99,7 @@ export const ButtonSection = ({
           <Button
             variant="primary"
             onClick={() =>
-              navigate({ pathname: `/contract/${router.query.contract}` })
+              navigate({ pathname: `/contracts/${router.query.contract}` })
             }
           >
             View Contract Details

src/lib/hooks/useIsCurrentPage.ts

@@ -13,8 +13,8 @@ export const useIsCurrentPage = () => {
         case "/":
           return pathName === `${networkPath}` || pathName === "/";
         // handle contract list page and public project page
-        case "/contract-list":
-        case "/public-project":
+        case "/contract-lists":
+        case "/projects":
           return pathName === `${networkPath}${slug}`;
         // handle page with query param
         default:

src/lib/hooks/useOpenTxTab.ts

@@ -17,7 +17,7 @@ export const useOpenTxTab = (type: "lcd" | "tx-page") => {
       ? `${CELATONE_API_ENDPOINT}/txs/${getChainApiPath(
           currentChainName
         )}/${chainId}`
-      : `/${getNetworkByChainName(currentChainName)}/tx`;
+      : `/${getNetworkByChainName(currentChainName)}/txs`;
 
   return useCallback(
     (txHash: Option<string>) => {

src/lib/layout/Searchbar.tsx

@@ -39,15 +39,15 @@ interface ResultItemProps {
 const getRoute = (type: SearchResultType) => {
   switch (type) {
     case "Code ID":
-      return "/code";
+      return "/codes";
     case "Contract Address":
-      return "/contract";
+      return "/contracts";
     case "Wallet Address":
-      return "/account";
+      return "/accounts";
     case "Transaction Hash":
-      return "/tx";
+      return "/txs";
     case "Block":
-      return "/block";
+      return "/blocks";
     default:
       return null;
   }

src/lib/layout/SubHeader.tsx

@@ -23,7 +23,7 @@ const SubHeader = () => {
 
   const activeColor = "violet.light";
 
-  const myPageSlug = `/account/${address}`;
+  const myPageSlug = `/accounts/${address}`;
 
   return (
     <Flex px={6} alignItems="center" h="full" justifyContent="space-between">

src/lib/layout/navbar/index.tsx

@@ -73,21 +73,21 @@ const Navbar = observer(({ isExpand, setIsExpand }: NavbarProps) => {
     {
       category: "Codes",
       submenu: [
-        { name: "My Codes", slug: "/codes", icon: "code" },
-        { name: "Recent Codes", slug: "/recent-codes", icon: "website" },
+        { name: "My Codes", slug: "/my-codes", icon: "code" },
+        { name: "Recent Codes", slug: "/codes", icon: "website" },
       ],
     },
     {
       category: "Contracts",
       submenu: [
         {
           name: INSTANTIATED_LIST_NAME,
-          slug: `/contract-list/${formatSlugName(INSTANTIATED_LIST_NAME)}`,
+          slug: `/contract-lists/${formatSlugName(INSTANTIATED_LIST_NAME)}`,
           icon: getListIcon(INSTANTIATED_LIST_NAME),
         },
         {
           name: SAVED_LIST_NAME,
-          slug: `/contract-list/${formatSlugName(SAVED_LIST_NAME)}`,
+          slug: `/contract-lists/${formatSlugName(SAVED_LIST_NAME)}`,
           icon: getListIcon(SAVED_LIST_NAME),
         },
         ...getContractLists()
@@ -96,12 +96,12 @@ const Navbar = observer(({ isExpand, setIsExpand }: NavbarProps) => {
           .slice(0, 3)
           .map((list) => ({
             name: list.name,
-            slug: `/contract-list/${list.slug}`,
+            slug: `/contract-lists/${list.slug}`,
             icon: getListIcon(list.name),
           })),
         {
           name: "View All Lists",
-          slug: "/contract-list",
+          slug: "/contract-lists",
           icon: "more",
         },
       ],
@@ -114,12 +114,12 @@ const Navbar = observer(({ isExpand, setIsExpand }: NavbarProps) => {
       submenu: [
         ...getSavedPublicProjects().map((list) => ({
           name: list.name,
-          slug: `/public-project/${list.slug}`,
+          slug: `/projects/${list.slug}`,
           logo: list.logo,
         })),
         {
           name: "View All Projects",
-          slug: "/public-project",
+          slug: "/projects",
           icon: "public-project",
         },
       ],

src/lib/pages/account-details/components/tables/AdminContractsTable.tsx

@@ -28,7 +28,7 @@ export const AdminContractsTable = ({
   const navigate = useInternalNavigate();
   const onRowSelect = (contract: ContractAddr) =>
     navigate({
-      pathname: "/contract/[contract]",
+      pathname: "/contracts/[contract]",
       query: { contract },
     });
 

src/lib/pages/account-details/components/tables/InstantiatedContractsTable.tsx

@@ -28,7 +28,7 @@ export const InstantiatedContractsTable = ({
   const navigate = useInternalNavigate();
   const onRowSelect = (contract: ContractAddr) =>
     navigate({
-      pathname: "/contract/[contract]",
+      pathname: "/contracts/[contract]",
       query: { contract },
     });
 

src/lib/pages/account-details/components/tables/StoredCodesTable.tsx

@@ -28,7 +28,7 @@ export const StoredCodesTable = ({
   const navigate = useInternalNavigate();
   const onRowSelect = (codeId: number) =>
     navigate({
-      pathname: "/code/[codeId]",
+      pathname: "/codes/[codeId]",
       query: { codeId },
     });
 

src/lib/pages/block-details/components/BlockDetailsTop.tsx

@@ -77,14 +77,14 @@ export const BlockDetailsTop = ({ blockData }: BlockDetailsTopProps) => {
       </Flex>
       <Flex gap={2}>
         {!disablePrevious && (
-          <AppLink href={`/block/${block - 1}`}>
+          <AppLink href={`/blocks/${block - 1}`}>
             <StyledIconButton
               icon={<CustomIcon name="chevron-left" />}
               variant="ghost-gray"
             />
           </AppLink>
         )}
-        <AppLink href={`/block/${block + 1}`}>
+        <AppLink href={`/blocks/${block + 1}`}>
           <StyledIconButton
             icon={<CustomIcon name="chevron-right" />}
             variant="ghost-gray"

src/lib/pages/code-details/components/table/CodeContractsTable.tsx

@@ -21,7 +21,7 @@ export const CodeContractsTable = observer(
     const navigate = useInternalNavigate();
     const onRowSelect = (contract: ContractAddr) =>
       navigate({
-        pathname: "/contract/[contract]",
+        pathname: "/contracts/[contract]",
         query: { contract },
       });
 

src/lib/pages/codes/index.tsx

@@ -34,7 +34,7 @@ const Codes = observer(() => {
   const navigate = useInternalNavigate();
   const onRowSelect = (codeId: number) =>
     navigate({
-      pathname: "/code/[codeId]",
+      pathname: "/codes/[codeId]",
       query: { codeId },
     });
 

src/lib/pages/contract-list/index.tsx

@@ -19,7 +19,7 @@ const AllContractListsPage = observer(() => {
   const contractLists = [useInstantiatedMockInfoByMe(), ...getContractLists()];
 
   const handleListSelect = (slug: string) => {
-    navigate({ pathname: "/contract-list/[slug]", query: { slug } });
+    navigate({ pathname: "/contract-lists/[slug]", query: { slug } });
   };
 
   useEffect(() => {

src/lib/pages/contract-list/slug.tsx

@@ -48,15 +48,15 @@ const ContractsByList = observer(() => {
 
   const onContractSelect = (contract: ContractAddr) =>
     navigate({
-      pathname: "/contract/[contract]",
+      pathname: "/contracts/[contract]",
       query: { contract },
     });
 
   useEffect(() => {
     // TODO: find a better approach?
     const timeoutId = setTimeout(() => {
       if (isHydrated && contractListInfo === undefined)
-        navigate({ pathname: "/contract-list" });
+        navigate({ pathname: "/contract-lists" });
     }, 100);
     return () => clearTimeout(timeoutId);
   }, [contractListInfo, isHydrated, navigate]);
@@ -91,7 +91,7 @@ const ContractsByList = observer(() => {
           _hover={{ opacity: 0.8 }}
           transition="all 0.25s ease-in-out"
         >
-          <AppLink color="text.dark" href="/contract-list">
+          <AppLink color="text.dark" href="/contract-lists">
             Contract Lists
           </AppLink>
         </BreadcrumbItem>

src/lib/pages/instantiate/completed.tsx

@@ -61,7 +61,7 @@ const Completed = ({ txInfo }: CompletedProps) => {
           w="full"
           variant="outline-gray"
           onClick={() =>
-            navigate({ pathname: `/contract/${txInfo.contractAddress}` })
+            navigate({ pathname: `/contracts/${txInfo.contractAddress}` })
           }
         >
           View Contract