Implement router transitions

dapp/src/DApp.tsx

@@ -1,36 +1,23 @@
 import React from "react"
-import { Box, ChakraProvider } from "@chakra-ui/react"
+import { ChakraProvider } from "@chakra-ui/react"
 import { Provider as ReduxProvider } from "react-redux"
-import { RouterProvider } from "react-router-dom"
-import { useInitApp } from "./hooks"
-import { store } from "./store"
-import theme from "./theme"
+import { AcreSdkProvider } from "./acre-react/contexts"
+import GlobalStyles from "./components/GlobalStyles"
 import {
   DocsDrawerContextProvider,
   LedgerWalletAPIProvider,
   SidebarContextProvider,
   WalletContextProvider,
 } from "./contexts"
-import { AcreSdkProvider } from "./acre-react/contexts"
-import Header from "./components/Header"
-import Sidebar from "./components/Sidebar"
-import DocsDrawer from "./components/DocsDrawer"
-import GlobalStyles from "./components/GlobalStyles"
-import { router } from "./router"
+import { useInitApp } from "./hooks"
+import { Router } from "./router"
+import { store } from "./store"
+import theme from "./theme"
 
 function DApp() {
   useInitApp()
 
-  return (
-    <>
-      <Header />
-      <Box as="main">
-        <RouterProvider router={router} />
-      </Box>
-      <Sidebar />
-      <DocsDrawer />
-    </>
-  )
+  return <Router />
 }
 
 function DAppProviders() {

dapp/src/components/shared/Layout.tsx

@@ -0,0 +1,45 @@
+import React, { useState } from "react"
+import { AnimatePresence, motion, Variants } from "framer-motion"
+import { useLocation, useOutlet } from "react-router-dom"
+import Header from "../Header"
+import DocsDrawer from "../DocsDrawer"
+import Sidebar from "../Sidebar"
+
+const wrapperVariants: Variants = {
+  in: { opacity: 0, y: 48 },
+  out: { opacity: 0, y: -48 },
+  visible: { opacity: 1, y: 0 },
+}
+
+// This tricky component makes Outlet persistent so React and Framer Motion can
+// distinguish wheather it should be rerendered between routes.
+// Ref: https://github.com/remix-run/react-router/discussions/8008#discussioncomment-1280897
+function PersistentOutlet() {
+  const [outlet] = useState(useOutlet())
+  return outlet
+}
+
+function Layout() {
+  const location = useLocation()
+  return (
+    <>
+      <Header />
+      <AnimatePresence mode="popLayout">
+        <motion.main
+          key={location.pathname}
+          variants={wrapperVariants}
+          transition={{ type: "spring", damping: 12, stiffness: 120 }}
+          initial="in"
+          animate="visible"
+          exit="out"
+        >
+          <PersistentOutlet />
+        </motion.main>
+      </AnimatePresence>
+      <Sidebar />
+      <DocsDrawer />
+    </>
+  )
+}
+
+export default Layout

dapp/src/router/index.tsx

@@ -1,16 +1,22 @@
 import React from "react"
-import { createBrowserRouter } from "react-router-dom"
+import { BrowserRouter, Route, Routes } from "react-router-dom"
 import OverviewPage from "#/pages/OverviewPage"
 import ActivityPage from "#/pages/ActivityPage"
+import Layout from "#/components/shared/Layout"
 import { routerPath } from "./path"
 
-export const router = createBrowserRouter([
-  {
-    path: routerPath.home,
-    element: <OverviewPage />,
-  },
-  {
-    path: `${routerPath.activity}/:activityId`,
-    element: <ActivityPage />,
-  },
-])
+export function Router() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<Layout />}>
+          <Route index path={routerPath.home} element={<OverviewPage />} />
+          <Route
+            path={`${routerPath.activity}/:activityId`}
+            element={<ActivityPage />}
+          />
+        </Route>
+      </Routes>
+    </BrowserRouter>
+  )
+}