feat: add base pages for phase 3 (#1150)

apps/namadillo/src/App/AccountOverview/NavigationFooter.tsx

@@ -1,6 +1,5 @@
 import { ActionButton, Heading, Stack } from "@namada/components";
-import GovernanceRoutes from "App/Governance/routes";
-import StakingRoutes from "App/Staking/routes";
+import { routes } from "App/routes";
 
 export const NavigationFooter = (): JSX.Element => {
   return (
@@ -11,7 +10,7 @@ export const NavigationFooter = (): JSX.Element => {
       <Stack gap={3} direction="horizontal">
         <ActionButton
           className="border uppercase"
-          href={StakingRoutes.overview().url}
+          href={routes.staking}
           size="sm"
           backgroundColor="cyan"
           outlineColor="cyan"
@@ -23,7 +22,7 @@ export const NavigationFooter = (): JSX.Element => {
         </ActionButton>
         <ActionButton
           size="sm"
-          href={GovernanceRoutes.index()}
+          href={routes.governance}
           outlineColor="yellow"
           className="uppercase"
           backgroundColor="transparent"

apps/namadillo/src/App/AppRoutes.tsx

@@ -1,4 +1,5 @@
 import { Router } from "@remix-run/router";
+import { applicationFeaturesAtom } from "atoms/settings";
 import { useAtomValue } from "jotai";
 import {
   Route,
@@ -10,24 +11,35 @@ import {
 } from "react-router-dom";
 import { AccountOverview } from "./AccountOverview";
 import { App } from "./App";
+import { NotFound } from "./Common/NotFound";
 import { RouteErrorBoundary } from "./Common/RouteErrorBoundary";
-import { Governance } from "./Governance";
-import { Ibc } from "./Ibc";
+import { GovernanceOverview } from "./Governance/GovernanceOverview";
+import { ProposalAndVote } from "./Governance/ProposalAndVote";
+import { SubmitVote } from "./Governance/SubmitVote";
+import { ViewJson } from "./Governance/ViewJson";
+import { IbcLayout } from "./Ibc/IbcLayout";
+import { IbcShieldAll } from "./Ibc/IbcShieldAll";
+import { IbcTransfer } from "./Ibc/IbcTransfer";
+import { IbcWithdraw } from "./Ibc/IbcWithdraw";
+import { MaspLayout } from "./Masp/MaspLayout";
+import { MaspOverview } from "./Masp/MaspOverview";
+import { MaspShield } from "./Masp/MaspShield";
+import { MaspUnshield } from "./Masp/MaspUnshield";
+import { Advanced } from "./Settings/Advanced";
+import { EnableFeatures } from "./Settings/EnableFeatures";
+import { SettingsMain } from "./Settings/SettingsMain";
 import { SettingsPanel } from "./Settings/SettingsPanel";
-import { Staking } from "./Staking";
-import { SwitchAccountPanel } from "./SwitchAccount/SwitchAccountPanel";
-
-import { applicationFeaturesAtom } from "atoms/settings";
-import GovernanceRoutes from "./Governance/routes";
-import IbcRoutes from "./Ibc/routes";
-import SettingsRoutes from "./Settings/routes";
+import { SettingsSignArbitrary } from "./Settings/SettingsSignArbitrary";
 import { SignMessages } from "./SignMessages/SignMessages";
-import MessageRoutes from "./SignMessages/routes";
+import IncrementBonding from "./Staking/IncrementBonding";
+import { ReDelegate } from "./Staking/ReDelegate";
+import { StakingOverview } from "./Staking/StakingOverview";
 import { StakingRewards } from "./Staking/StakingRewards";
-import StakingRoutes from "./Staking/routes";
-import SwitchAccountRoutes from "./SwitchAccount/routes";
-import { Transfer } from "./Transfer/Transfer";
-import TransferRoutes from "./Transfer/routes";
+import { Unstake } from "./Staking/Unstake";
+import { SwitchAccountPanel } from "./SwitchAccount/SwitchAccountPanel";
+import { NamTransfer } from "./Transfer/NamTransfer";
+import { TransferLayout } from "./Transfer/TransferLayout";
+import { routes } from "./routes";
 
 export const MainRoutes = (): JSX.Element => {
   const location = useLocation();
@@ -36,46 +48,97 @@ export const MainRoutes = (): JSX.Element => {
 
   // Avoid animation being fired twice when navigating inside settings modal routes
   const settingsAnimationKey =
-    location.pathname.indexOf(SettingsRoutes.index()) > -1 ?
+    location.pathname.indexOf(routes.settings) > -1 ?
       "settings-modal"
     : location.pathname;
 
   return (
     <>
       <Routes location={state?.backgroundLocation || location}>
-        <Route path="/" element={<App />} errorElement={<RouteErrorBoundary />}>
+        <Route
+          path={routes.root}
+          element={<App />}
+          errorElement={<RouteErrorBoundary />}
+        >
+          {/* Home */}
           <Route index element={<AccountOverview />} />
-          <Route path={`${StakingRoutes.index()}/*`} element={<Staking />} />
+
+          {/* Staking */}
+          <Route path={routes.staking} element={<StakingOverview />} />
           <Route
-            path={`${GovernanceRoutes.index()}/*`}
-            element={<Governance />}
+            path={routes.stakingBondingIncrement}
+            element={<IncrementBonding />}
           />
-          <Route path={`${TransferRoutes.index()}/*`} element={<Transfer />} />
+          <Route path={routes.stakingBondingUnstake} element={<Unstake />} />
+          <Route
+            path={routes.stakingBondingRedelegate}
+            element={<ReDelegate />}
+          />
+
+          {/* Governance */}
+          <Route path={routes.governance} element={<GovernanceOverview />} />
+          <Route
+            path={routes.governanceProposal}
+            element={<ProposalAndVote />}
+          />
+          <Route path={routes.governanceSubmitVote} element={<SubmitVote />} />
+          <Route path={routes.governanceJson} element={<ViewJson />} />
+
+          {/* Masp */}
+          {features.maspEnabled && (
+            <Route element={<MaspLayout />}>
+              <Route path={routes.masp} element={<MaspOverview />} />
+              <Route path={routes.maspShield} element={<MaspShield />} />
+              <Route path={routes.maspUnshield} element={<MaspUnshield />} />
+            </Route>
+          )}
+
+          {/* Ibc */}
           {features.ibcTransfersEnabled && (
-            <Route path={`${IbcRoutes.index()}/*`} element={<Ibc />} />
+            <Route element={<IbcLayout />}>
+              <Route path={routes.ibc} element={<IbcTransfer />} />
+              <Route path={routes.ibcWithdraw} element={<IbcWithdraw />} />
+              <Route path={routes.ibcShieldAll} element={<IbcShieldAll />} />
+            </Route>
           )}
+
+          {/* Transfer */}
+          {features.namTransfersEnabled && (
+            <Route element={<TransferLayout />}>
+              <Route path={routes.transfer} element={<NamTransfer />} />
+            </Route>
+          )}
+
+          {/* Other */}
+          <Route path="*" element={<NotFound />} />
         </Route>
       </Routes>
+
+      {/* Modals */}
       <Routes location={location} key={settingsAnimationKey}>
-        <Route
-          path={`${SettingsRoutes.index()}/*`}
-          element={<SettingsPanel />}
-          errorElement={<RouteErrorBoundary />}
-        />
-        <Route
-          path={`${SwitchAccountRoutes.index()}/*`}
-          element={<SwitchAccountPanel />}
-          errorElement={<RouteErrorBoundary />}
-        />
-        <Route
-          path={`${MessageRoutes.index()}/*`}
-          element={<SignMessages />}
-          errorElement={<RouteErrorBoundary />}
-        />
-        <Route
-          path={`${StakingRoutes.claimRewards().url}`}
-          element={<StakingRewards />}
-        />
+        <Route errorElement={<RouteErrorBoundary />}>
+          {/* Settings */}
+          <Route element={<SettingsPanel />}>
+            <Route path={routes.settings} element={<SettingsMain />} />
+            <Route path={routes.settingsAdvanced} element={<Advanced />} />
+            <Route
+              path={routes.settingsSignArbitrary}
+              element={<SettingsSignArbitrary />}
+            />
+            <Route
+              path={routes.settingsFeatures}
+              element={<EnableFeatures />}
+            />
+          </Route>
+
+          {/* Other Modals */}
+          <Route path={routes.switchAccount} element={<SwitchAccountPanel />} />
+          <Route path={routes.signMessages} element={<SignMessages />} />
+          <Route
+            path={routes.stakingClaimRewards}
+            element={<StakingRewards />}
+          />
+        </Route>
       </Routes>
       <ScrollRestoration />
     </>

apps/namadillo/src/App/Common/NotFound.tsx

@@ -0,0 +1,13 @@
+import { ErrorBox } from "./ErrorBox";
+
+export const NotFound = (): JSX.Element => {
+  return (
+    <ErrorBox
+      niceError="404 Not found"
+      containerProps={{
+        className:
+          "bg-black max-w-full rounded-sm w-full text-white min-h-full",
+      }}
+    />
+  );
+};

apps/namadillo/src/App/Governance/AllProposalsTable.tsx

@@ -4,20 +4,20 @@ import { Proposal, isProposalStatus, proposalStatuses } from "@namada/types";
 import { mapUndefined } from "@namada/utils";
 import { Search } from "App/Common/Search";
 import { TableWithPaginator } from "App/Common/TableWithPaginator";
+import { routes } from "App/routes";
 import { paginatedProposalsFamily } from "atoms/proposals";
 import clsx from "clsx";
 import { useAtomValue } from "jotai";
 import { useEffect, useState } from "react";
 import { GoCheckCircleFill, GoInfo } from "react-icons/go";
-import { useNavigate } from "react-router-dom";
+import { generatePath, useNavigate } from "react-router-dom";
 import {
   proposalStatusToString,
   proposalTypeStringToString,
   secondsToDateString,
   secondsToTimeString,
 } from "utils";
 import { StatusLabel, TypeLabel } from "./ProposalLabels";
-import GovernanceRoutes from "./routes";
 
 const Table: React.FC<
   {
@@ -50,7 +50,11 @@ const Table: React.FC<
       "[&_td:first-child]:rounded-s-md [&_td:last-child]:rounded-e-md"
     ),
     onClick: () => {
-      navigate(GovernanceRoutes.proposal(proposal.id).url);
+      navigate(
+        generatePath(routes.governanceProposal, {
+          proposalId: proposal.id.toString(),
+        })
+      );
     },
     cells: [
       // ID

apps/namadillo/src/App/Governance/LiveGovernanceProposals.tsx

@@ -1,12 +1,12 @@
 import { SegmentedBar, Stack } from "@namada/components";
 import { Proposal, VoteType, voteTypes } from "@namada/types";
+import { routes } from "App/routes";
 import BigNumber from "bignumber.js";
 import clsx from "clsx";
 import { GoInfo } from "react-icons/go";
-import { useNavigate } from "react-router-dom";
+import { generatePath, useNavigate } from "react-router-dom";
 import { secondsToDateTimeString } from "utils";
 import { StatusLabel, TypeLabel, VotedLabel } from "./ProposalLabels";
-import GovernanceRoutes from "./routes";
 import { colors } from "./types";
 
 const ProposalListItem: React.FC<{
@@ -33,7 +33,13 @@ const ProposalListItem: React.FC<{
     <Stack
       as="li"
       gap={3}
-      onClick={() => navigate(GovernanceRoutes.proposal(proposal.id).url)}
+      onClick={() =>
+        navigate(
+          generatePath(routes.governanceProposal, {
+            proposalId: proposal.id.toString(),
+          })
+        )
+      }
       className={clsx(
         "group/proposal cursor-pointer text-sm",
         "rounded-md bg-[#191919] p-4"
@@ -85,8 +91,9 @@ export const LiveGovernanceProposals: React.FC<
         className="dark-scrollbar overscroll-contain overflow-x-auto"
       >
         {proposals.map((proposal) => {
-          const vote = votedProposals.find((v) => v.proposalId === proposal.id)
-            ?.vote;
+          const vote = votedProposals.find(
+            (v) => v.proposalId === proposal.id
+          )?.vote;
           return (
             <ProposalListItem
               proposal={proposal}