merge setting page

src/components/Options/index.tsx

@@ -0,0 +1,78 @@
+import React, { ReactElement, useState, useEffect, useCallback } from 'react';
+
+const NOTARY_API_LS_KEY = 'notary-api';
+const PROXY_API_LS_KEY = 'proxy-api';
+
+export default function Options(): ReactElement {
+  const [notary, setNotary] = useState('http://localhost:7047');
+  const [proxy, setProxy] = useState('ws://127.0.0.1:55688');
+  const [dirty, setDirty] = useState(false);
+
+  useEffect(() => {
+    (async () => {
+      setNotary(await get(NOTARY_API_LS_KEY));
+      setProxy(await get(PROXY_API_LS_KEY));
+    })();
+  }, []);
+
+  const onSave = useCallback(async () => {
+    await set(NOTARY_API_LS_KEY, notary);
+    await set(PROXY_API_LS_KEY, proxy);
+    setDirty(false);
+  }, [notary, proxy]);
+
+  return (
+    <div className="flex flex-col flex-nowrap flex-grow">
+      <div className="flex flex-row flex-nowrap py-1 px-2 gap-2 font-bold text-base">
+        API Settings
+      </div>
+      <div className="flex flex-col flex-nowrap py-1 px-2 gap-2">
+        <div className="font-semibold">Notary API</div>
+        <input
+          type="text"
+          className="input border"
+          placeholder="http://localhost:7047"
+          onChange={e => {
+            setNotary(e.target.value);
+            setDirty(true);
+          }}
+          value={notary}
+        />
+      </div>
+      <div className="flex flex-col flex-nowrap py-1 px-2 gap-2">
+        <div className="font-semibold">Proxy API</div>
+        <input
+          type="text"
+          className="input border"
+          placeholder="ws://127.0.0.1:55688"
+          onChange={e => {
+            setProxy(e.target.value);
+            setDirty(true);
+          }}
+          value={proxy}
+        />
+      </div>
+      <div className="flex flex-row flex-nowrap justify-end gap-2 p-2">
+        <button 
+          className="button !bg-primary/[0.9] hover:bg-primary/[0.8] active:bg-primary !text-white"
+          disabled={!dirty}
+          onClick={onSave}
+        >
+          Save
+        </button>
+      </div>
+    </div>
+  );
+};
+
+async function set(key: string, value: string) {
+  return chrome.storage.sync
+    .set({ [key]: value });
+}
+
+async function get(key: string) {
+  return chrome.storage.sync
+    .get(key)
+    .then((json: any) => json[key])
+    .catch(() => '');
+}

src/manifest.json

@@ -32,6 +32,7 @@
     "offscreen",
     "http://*/",
     "https://*/",
+    "storage",
     "webRequest",
     "activeTab",
     "<all_urls>"

src/pages/Home/index.tsx

@@ -22,10 +22,10 @@ export default function Home(): ReactElement {
 
   return (
     <>
-      <div className="flex flex-row flex-nowrap justify-center gap-8 my-8">
+      <div className="flex flex-col flex-nowrap justify-center gap-2 my-8 mx-4">
         <NavButton fa="fa-solid fa-table" onClick={() => navigate('/requests')}>
-          <div>Requests</div>
-          <div>{`(${requests.length})`}</div>
+          <span>Requests</span>
+          <span>{`(${requests.length})`}</span>
         </NavButton>
         <NavButton
           fa="fa-solid fa-magnifying-glass"
@@ -40,9 +40,19 @@ export default function Home(): ReactElement {
         >
           Verify
         </NavButton>
-        <NavButton fa="fa-solid fa-list" onClick={() => navigate('/history')}>
+        <NavButton 
+          fa="fa-solid fa-list" 
+          onClick={() => navigate('/history')}
+          disabled
+        >
           History
         </NavButton>
+        <NavButton
+          fa="fa-solid fa-gear"
+          onClick={() => navigate('/options')}
+        >
+          Options
+        </NavButton>
       </div>
       <div className="flex flex-col flex-nowrap justify-center items-center gap-2 bg-slate-100 border border-slate-200 p-2 mb-4">
         <div className="text-sm text-slate-300">
@@ -129,8 +139,8 @@ function NavButton(props: {
   return (
     <button
       className={classNames(
-        'flex flex-col flex-nowrap items-center justify-center',
-        'text-white rounded-full p-4 h-20 w-20 gap-1',
+        'flex flex-row flex-nowrap items-center justify-center',
+        'text-white rounded px-2 py-1 gap-1',
         {
           'bg-primary/[.8] hover:bg-primary/[.7] active:bg-primary':
             !props.disabled,
@@ -141,8 +151,8 @@ function NavButton(props: {
       onClick={props.onClick}
       disabled={props.disabled}
     >
-      <Icon className="flex-grow flex-shrink h-0" fa={props.fa} size={1.5} />
-      <span className="flex-grow flex-shrink h-0 flex-grow text-[11px] font-bold">
+      <Icon className="flex-grow-0 flex-shrink-0" fa={props.fa} size={1} />
+      <span className="flex-grow flex-shrink w-0 flex-grow font-bold">
         {props.children}
       </span>
     </button>

src/pages/Options/index.css

@@ -0,0 +1,21 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
+
+@import "@fortawesome/fontawesome-free/scss/fontawesome";
+@import "@fortawesome/fontawesome-free/scss/brands";
+@import "@fortawesome/fontawesome-free/scss/solid";
+@import "@fortawesome/fontawesome-free/scss/regular";
+
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  position: relative;
+}

src/pages/Options/index.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 
-import Options from './Options';
+import Options from '../../components/Options';
 import './index.css';
 
 const container = document.getElementById('app-container');
 const root = createRoot(container!); // createRoot(container!) if you use TypeScript
-root.render(<Options title={'Settings'} />);
+root.render(<Options />);

src/pages/Popup/Popup.tsx

@@ -9,6 +9,7 @@ import {
 } from '../../reducers/requests';
 import { BackgroundActiontype } from '../Background/actionTypes';
 import Requests from '../Requests';
+import Options from '../../components/Options';
 import Request from '../Requests/Request';
 import Home from '../Home';
 import logo from '../../assets/img/icon-128.png';
@@ -60,6 +61,7 @@ const Popup = () => {
         <Route path="/requests/:requestId/*" element={<Request />} />
         <Route path="/requests" element={<Requests />} />
         <Route path="/custom/*" element={<RequestBuilder />} />
+        <Route path="/options" element={<Options />} />
         <Route path="/home" element={<Home />} />
         <Route path="*" element={<Navigate to="/home" />} />
       </Routes>