Port page routing

packages/keychain/src/components/app.tsx

@@ -1,23 +1,22 @@
-import { Outlet, Route, Routes, Navigate } from "react-router-dom";
+import { Route, Routes } from "react-router-dom";
 import { Home } from "./home";
+import { Authenticate } from "./authenticate";
+import { Session } from "./session";
+import { Failure } from "./failure";
+import { Success } from "./success";
+import { Pending } from "./pending";
+import { Slot } from "./slot";
 
 export function App() {
   return (
     <Routes>
       <Route path="/" element={<Home />} />
-      <Route path="/slot" element={<Outlet />}>
-        <Route path="auth" element={<Navigate to="/slot" replace />} />
-        <Route
-          path="auth/success"
-          element={<Navigate to="/success" replace />}
-        />
-        <Route
-          path="auth/failure"
-          element={<Navigate to="/failure" replace />}
-        />
-      </Route>
-      <Route path="/success" element={<div>Success</div>} />
-      <Route path="/failure" element={<div>Failure</div>} />
+      <Route path="authenticate" element={<Authenticate />} />
+      <Route path="session" element={<Session />} />
+      <Route path="slot" element={<Slot />} />
+      <Route path="success" element={<Success />} />
+      <Route path="failure" element={<Failure />} />
+      <Route path="pending" element={<Pending />} />
       <Route path="*" element={<div>Page not found</div>} />
     </Routes>
   );

packages/keychain/src/pages/failure.tsx → packages/keychain/src/components/failure.tsx

@@ -1,12 +1,10 @@
-"use client";
-
 import { Container } from "@/components/layout";
 import { AlertIcon, ExternalIcon } from "@cartridge/ui";
 import { Link as UILink, Text } from "@chakra-ui/react";
 import { CARTRIDGE_DISCORD_LINK } from "@/const";
 import { Link } from "react-router-dom";
 
-export default function Failure() {
+export function Failure() {
   return (
     <Container
       variant="expanded"

packages/keychain/src/pages/session.tsx → packages/keychain/src/components/session.tsx

@@ -32,7 +32,7 @@ type SessionQueryParams = {
 /**
     This page is for registering session
 */
-export default function Session() {
+export function Session() {
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
   const queries: SessionQueryParams = useMemo(

packages/keychain/src/pages/slot/consent.tsx → packages/keychain/src/components/slot/consent.tsx

@@ -25,7 +25,7 @@ export function Consent() {
 
   useEffect(() => {
     if (!Controller.fromStore(import.meta.env.VITE_ORIGIN!)) {
-      navigate("/slot/auth");
+      navigate("/slot");
     }
   }, [navigate]);
 

packages/keychain/src/pages/slot/index.tsx → packages/keychain/src/components/slot/index.tsx

@@ -1,11 +1,32 @@
+export { Consent } from "./consent";
+
 import { PageLoading } from "@/components/Loading";
 import { CreateController } from "@/components/connect";
 import { useMeQuery } from "@cartridge/utils/api/cartridge";
 import { useController } from "@/hooks/controller";
 import { useEffect } from "react";
-import { useNavigate, useSearchParams } from "react-router-dom";
+import {
+  Navigate,
+  useLocation,
+  useNavigate,
+  useSearchParams,
+} from "react-router-dom";
+
+export function Slot() {
+  const { pathname } = useLocation();
+  switch (pathname) {
+    case "/slot/auth":
+      return <Navigate to="/slot" replace />;
+    case "/slot/auth/success":
+      return <Navigate to="/success" replace />;
+    case "/slot/auth/failure":
+      return <Navigate to="/failure" replace />;
+    default:
+      return <Auth />;
+  }
+}
 
-export function Auth() {
+function Auth() {
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
   const { controller } = useController();

packages/keychain/src/pages/success.tsx → packages/keychain/src/components/success.tsx

@@ -1,10 +1,8 @@
-"use client";
-
 import { Container } from "@/components/layout";
 import { SparklesDuoIcon } from "@cartridge/ui";
 import { useSearchParams } from "react-router-dom";
 
-export default function Success() {
+export function Success() {
   const [searchParams] = useSearchParams();
   const title = searchParams.get("title");
   const description = searchParams.get("description");