From 0faed5a940c7f053dd3390191434880b7ab15305 Mon Sep 17 00:00:00 2001
From: ian <ian@cryptape.com>
Date: Sat, 24 Feb 2024 00:35:03 +0800
Subject: [PATCH] :rotating_light: Fix build warnings

---
 src/AddressPage.js    |  3 +++
 src/App.js            |  4 ++--
 src/Layout.js         |  8 ++++++--
 src/NewAddressPage.js | 14 +++++---------
 src/reducer.js        | 10 ++++++----
 5 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/src/AddressPage.js b/src/AddressPage.js
index ad1ad0d..ffddeea 100644
--- a/src/AddressPage.js
+++ b/src/AddressPage.js
@@ -39,6 +39,9 @@ export default function AddressPage({ address, deleteAddress, navigate }) {
             navigate("#/");
           }}
         />
+        <Button outline color="light" as="a" href="#/">
+          Go Back
+        </Button>
       </div>
     </section>
   );
diff --git a/src/App.js b/src/App.js
index 44038be..2d9ad27 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,5 +1,5 @@
 import { Spinner } from "flowbite-react";
-import { Suspense, useCallback, useTransition } from "react";
+import { Suspense, useTransition } from "react";
 import { useHash } from "react-use";
 import AddressPage from "./AddressPage.js";
 import IndexPage from "./IndexPage.js";
@@ -24,7 +24,7 @@ function Router() {
   const [isPending, startTransition] = useTransition();
   const [state, { addAddress, deleteAddress }] = usePersistReducer();
 
-  const navigate = useCallback((url) => startTransition(() => setPage(url)));
+  const navigate = (url) => startTransition(() => setPage(url));
 
   const fallbackRoute = () => <NotFound {...{ page, navigate }} />;
   const staticRoutes = {
diff --git a/src/Layout.js b/src/Layout.js
index f9ec364..9ee7d28 100644
--- a/src/Layout.js
+++ b/src/Layout.js
@@ -6,9 +6,13 @@ export default function Layout({ children, isPending }) {
           style={{
             opacity: isPending ? 0.7 : 1,
           }}
-          className="font-serif text-xl leading-8 mb-8"
+          className="font-serif text-xl leading-8 mb-8 align-middle"
         >
-          <a href="#/">CKB Multisig CoBuild PoC</a>
+          <p>
+            <a className="align-top" href="#/">
+              CKB Multisig CoBuild PoC
+            </a>
+          </p>
         </header>
         <main className="box-border">{children}</main>
       </div>
diff --git a/src/NewAddressPage.js b/src/NewAddressPage.js
index 5c9d331..ffefc07 100644
--- a/src/NewAddressPage.js
+++ b/src/NewAddressPage.js
@@ -1,5 +1,5 @@
 import { Alert, Button, Label, TextInput } from "flowbite-react";
-import { useCallback, useEffect } from "react";
+import { useEffect } from "react";
 import { HiMinus, HiPlus } from "react-icons/hi";
 import { useImmerReducer } from "use-immer";
 import { MultisigConfig } from "./schemas.js";
@@ -72,17 +72,13 @@ export default function NewAddressPage({ addAddress, navigate, template }) {
       },
     },
   );
-  const incrementSigner = useCallback(() =>
-    dispatch({ type: "incrementSigner" }),
-  );
-  const decrementSigner = useCallback(() =>
-    dispatch({ type: "decrementSigner" }),
-  );
-  const submit = useCallback((e) => {
+  const incrementSigner = () => dispatch({ type: "incrementSigner" });
+  const decrementSigner = () => dispatch({ type: "decrementSigner" });
+  const submit = (e) => {
     e.preventDefault();
     const formData = new FormData(e.target);
     dispatch({ type: "submit", payload: formData });
-  });
+  };
 
   useEffect(() => {
     if (state.done) {
diff --git a/src/reducer.js b/src/reducer.js
index 2f37332..386e231 100644
--- a/src/reducer.js
+++ b/src/reducer.js
@@ -54,11 +54,13 @@ const usePersistReducer = () => {
   // `localStorage` as params to `useReducer`.
   // this will return `[state, dispatch]`
   const [state, dispatch] = useImmerReducer(reducerLocalStorage, savedState);
-  const addAddress = useCallback((address) =>
-    dispatch({ type: "addAddress", payload: address }),
+  const addAddress = useCallback(
+    (address) => dispatch({ type: "addAddress", payload: address }),
+    [dispatch],
   );
-  const deleteAddress = useCallback((args) =>
-    dispatch({ type: "deleteAddress", payload: args }),
+  const deleteAddress = useCallback(
+    (args) => dispatch({ type: "deleteAddress", payload: args }),
+    [dispatch],
   );
   return [state, { addAddress, deleteAddress }];
 };