✨ Add page to create multisig address

package.json

@@ -3,19 +3,24 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@ckb-lumos/base": "^0.21.1",
+    "@ckb-lumos/helpers": "^0.21.1",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "autoprefixer": "^10.4.17",
     "flowbite-react": "^0.7.2",
+    "immer": "^10.0.3",
     "postcss": "^8.4.35",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.0.1",
     "react-scripts": "5.0.1",
     "react-use": "^17.5.0",
     "tailwindcss": "^3.4.1",
     "use-immer": "^0.9.0",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^2.1.4",
+    "zod": "^3.22.4"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.js

@@ -1,8 +1,10 @@
-import { Suspense, useTransition } from "react";
+import { Suspense, useCallback, useTransition } from "react";
 import { useHash } from "react-use";
 import IndexPage from "./IndexPage.js";
+import NewAddressPage from "./NewAddressPage.js";
 import Layout from "./Layout.js";
 import { Spinner } from "flowbite-react";
+import usePersistReducer from "./reducer.js";
 
 function App() {
   return (
@@ -15,6 +17,7 @@ function App() {
 function Router() {
   const [page, setPage] = useHash();
   const [isPending, startTransition] = useTransition();
+  const [state, dispatch] = usePersistReducer();
 
   function navigate(url) {
     startTransition(() => {
@@ -23,11 +26,19 @@ function Router() {
   }
 
   let content;
-  if (page === "" || page === "#/") {
-    content = <IndexPage />;
-  } else {
-    content = <NotFound page={page} navigate={navigate} />;
+  switch (page) {
+    case "":
+    case "#/":
+      content = <IndexPage {...{ navigate, state }} />;
+      break;
+    case "#/addresses/new":
+      content = <NewAddressPage {...{ navigate, dispatch }} />;
+      break;
+    default:
+      content = <NotFound {...{ page, navigate }} />;
+      break;
   }
+
   return <Layout isPending={isPending}>{content}</Layout>;
 }
 

src/IndexPage.js

@@ -1,3 +1,22 @@
-export default function IndexPage() {
-  return <p>Index</p>;
+import { Button } from "flowbite-react";
+
+function AddressesList({ navigate, addresses }) {
+  return (
+    <section>
+      <h2 className="text-lg border-b-2 leading-8 mb-4">Mulgisig Addresses</h2>
+      <ul className="mb-4">
+        {addresses.map((address) => (
+          <li className="leading-8 font-mono">{address.args}</li>
+        ))}
+      </ul>
+      <Button onClick={() => navigate("#/addresses/new")}>Add Address</Button>
+    </section>
+  );
+}
+export default function IndexPage({ navigate, state }) {
+  return (
+    <>
+      <AddressesList {...{ navigate, addresses: state.addresses }} />
+    </>
+  );
 }

src/Layout.js

@@ -1,14 +1,14 @@
 export default function Layout({ children, isPending }) {
   return (
     <div className="max-w-5xl mx-auto p-3 md:p-6">
-      <section
+      <header
         style={{
           opacity: isPending ? 0.7 : 1,
         }}
-        className="font-serif text-xl leading-8"
+        className="font-serif text-xl leading-8 mb-8"
       >
         CKB Multisig CoBuild PoC
-      </section>
+      </header>
       <main>{children}</main>
     </div>
   );