feat: stylize peer list

Magickbase · Sep 25, 2024 · 5fb7991 · 5fb7991
1 parent e07d826
commit 5fb7991
Show file tree

Hide file tree

Showing 5 changed files with 248 additions and 82 deletions.
diff --git a/src/pages/Fiber/PeerList/AddPeerForm.module.scss b/src/pages/Fiber/PeerList/AddPeerForm.module.scss
@@ -0,0 +1,74 @@
+.container {
+  font-size: 1rem;
+
+  &::backdrop {
+    background: rgb(0 0 0 / 40%);
+  }
+
+  form {
+    background: #fff;
+    position: fixed;
+    transform: translateX(-50%) translateY(-50%);
+    font-size: 0.875rem;
+    width: min-content;
+    margin: 16px auto;
+    top: 50%;
+    left: 50%;
+    padding: 23px 40px;
+    border-radius: 4px;
+  }
+
+  h3 {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-bottom: 22px;
+    border-bottom: 1px solid #e5e5e5;
+    margin-bottom: 16px;
+
+    button {
+      svg {
+        color: #000;
+      }
+    }
+  }
+
+  fieldset {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 16px;
+  }
+
+  label {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    color: #666;
+    margin-bottom: 12px;
+
+    &[data-required]::after {
+      content: '*';
+      color: var(--accent-color);
+    }
+  }
+
+  input {
+    width: 320px;
+    padding: 9px 12px;
+    border: 1px solid #e5e5e5;
+    border-radius: 4px;
+    font-size: inherit;
+  }
+
+  button[type='submit'] {
+    padding: 14px 40px;
+    color: #fff;
+    background: var(--primary-color);
+    border-radius: 4px;
+    font-size: 1rem;
+  }
+
+  @media screen and (width < 1030px) {
+    font-size: 14px;
+  }
+}
diff --git a/src/pages/Fiber/PeerList/AddPeerForm.tsx b/src/pages/Fiber/PeerList/AddPeerForm.tsx
@@ -0,0 +1,105 @@
+import { Cross2Icon } from '@radix-ui/react-icons'
+import { type FC, useRef, useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useSetToast } from '../../../components/Toast'
+import { explorerService } from '../../../services/ExplorerService'
+import styles from './AddPeerForm.module.scss'
+
+interface AddPeerFormProps {
+  onSuccess: () => void
+}
+const AddPeerForm: FC<AddPeerFormProps> = ({ onSuccess }) => {
+  const dialogRef = useRef<HTMLDialogElement | null>(null)
+  const [t] = useTranslation()
+  const setToast = useSetToast()
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        dialogRef.current?.close()
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [])
+
+  const handleClose = () => {
+    dialogRef.current?.close()
+  }
+
+  const handleSubmit = async (e: React.SyntheticEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    e.stopPropagation()
+    const form = e.currentTarget
+
+    const { peer_id, peer_name, rpc } = form
+    const params: Parameters<typeof explorerService.api.addFiberPeer>[0] = {
+      rpc: rpc instanceof HTMLInputElement ? rpc.value : '',
+      id: peer_id instanceof HTMLInputElement ? peer_id.value : '',
+      name: peer_name instanceof HTMLInputElement ? peer_name.value : undefined,
+    }
+
+    if (params.rpc && params.id) {
+      try {
+        await explorerService.api.addFiberPeer(params)
+        setToast({ message: 'submitted' })
+        onSuccess()
+      } catch (e) {
+        const message = e instanceof Error ? e.message : JSON.stringify(e)
+        setToast({ message })
+      }
+    }
+  }
+
+  const handleClickOutside = (e: React.MouseEvent) => {
+    if (e.target === dialogRef.current) {
+      dialogRef.current?.close()
+    }
+  }
+
+  const handleOpen = () => {
+    dialogRef.current?.showModal()
+  }
+
+  return (
+    <>
+      <button type="button" onClick={handleOpen}>
+        Add Peer
+      </button>
+
+      <dialog ref={dialogRef} onClick={handleClickOutside} className={styles.container}>
+        <form onSubmit={handleSubmit}>
+          <h3>
+            <span>Add Fiber Peer</span>
+            <button type="button" onClick={handleClose}>
+              <Cross2Icon />
+            </button>
+          </h3>
+          <fieldset>
+            <label htmlFor="rpc" data-required>
+              {t('fiber.peer.rpc_addr')}
+            </label>
+            <input required id="rpc" placeholder="Peer RPC Address" />
+          </fieldset>
+          <fieldset>
+            <label htmlFor="peer_id" data-required>
+              Peer ID
+            </label>
+            <input required id="peer_id" placeholder="Peer ID" />
+          </fieldset>
+          <fieldset>
+            <label htmlFor="peer_name">{t('fiber.peer.name')}</label>
+            <input id="peer_name" placeholder="Peer Alias" />
+          </fieldset>
+          <button type="submit">Submit</button>
+        </form>
+      </dialog>
+    </>
+  )
+}
+
+export default AddPeerForm
diff --git a/src/pages/Fiber/PeerList/index.module.scss b/src/pages/Fiber/PeerList/index.module.scss
@@ -1,36 +1,19 @@
-@import '../../../styles//variables.module.scss';
+@import '../../../styles/variables.module';
+@import '../../../styles/table.module';
 
 .container {
   text-wrap: nowrap;
   display: flex;
+  flex-direction: column;
   margin: 24px 120px;
   font-size: 1rem;
-  align-items: flex-start;
 
   a {
     color: var(--primary-color);
   }
 
   table {
-    width: 100%;
-    text-align: left;
-    cursor: default;
-
-    td,
-    th {
-      padding: 8px;
-      padding-right: 16px;
-
-      &:last-child {
-        text-align: right;
-      }
-    }
-
-    tbody {
-      tr:hover {
-        background: #ccc;
-      }
-    }
+    @extend %base-table;
   }
 
   svg {
@@ -84,6 +67,20 @@
     }
   }
 
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 1.5rem;
+    margin-bottom: 20px;
+
+    button {
+      font-size: 0.875rem;
+      color: var(--primary-color);
+      padding-left: 8px;
+    }
+  }
+
   .balance {
     display: flex;
     flex-direction: column;
@@ -139,25 +136,3 @@
     }
   }
 }
-
-.addFiberPeer {
-  width: min-content;
-  margin: 16px auto;
-
-  fieldset {
-    margin: 8px 0;
-  }
-
-  input {
-    width: 250px;
-    padding: 4px 8px;
-  }
-
-  button {
-    padding: 4px 16px;
-  }
-
-  @media screen and (width < 1030px) {
-    font-size: 14px;
-  }
-}
diff --git a/src/pages/Fiber/PeerList/index.tsx b/src/pages/Fiber/PeerList/index.tsx
@@ -11,6 +11,7 @@ import { shannonToCkb } from '../../../utils/util'
 import { localeNumberString } from '../../../utils/number'
 import { parseNumericAbbr } from '../../../utils/chart'
 import styles from './index.module.scss'
+import AddPeerForm from './AddPeerForm'
 
 const fields = [
   {
@@ -137,33 +138,14 @@ const PeerList = () => {
     navigator?.clipboard.writeText(copyText).then(() => setToast({ message: t('common.copied') }))
   }
 
-  const handleAddPeer = async (e: React.SyntheticEvent<HTMLFormElement>) => {
-    e.preventDefault()
-    e.stopPropagation()
-    const form = e.currentTarget
-
-    const { peer_id, peer_name, rpc } = form
-    const params: Parameters<typeof explorerService.api.addFiberPeer>[0] = {
-      rpc: rpc instanceof HTMLInputElement ? rpc.value : '',
-      id: peer_id instanceof HTMLInputElement ? peer_id.value : '',
-      name: peer_name instanceof HTMLInputElement ? peer_name.value : undefined,
-    }
-
-    if (params.rpc && params.id) {
-      try {
-        await explorerService.api.addFiberPeer(params)
-        setToast({ message: 'submitted' })
-        refetchList()
-      } catch (e) {
-        const message = e instanceof Error ? e.message : JSON.stringify(e)
-        setToast({ message })
-      }
-    }
-  }
-
   return (
     <Content>
       <div className={styles.container} onClick={handleCopy}>
+        <h1 className={styles.header}>
+          <span>CKB Fiber Peers</span>
+
+          <AddPeerForm onSuccess={() => refetchList()} />
+        </h1>
         <table>
           <thead>
             <tr>
@@ -172,6 +154,7 @@ const PeerList = () => {
               })}
             </tr>
           </thead>
+          <div className={styles.tableSeparator} />
           <tbody>
             {list.map(i => {
               return (
@@ -184,23 +167,9 @@ const PeerList = () => {
               )
             })}
           </tbody>
+          {/* <div className={styles.tableSeparator} /> */}
         </table>
       </div>
-      <form onSubmit={handleAddPeer} className={styles.addFiberPeer}>
-        <fieldset>
-          <label htmlFor="peer_name">{t('fiber.peer.name')}</label>
-          <input id="peer_name" placeholder="Peer Alias" />
-        </fieldset>
-        <fieldset>
-          <label htmlFor="rpc">{t('fiber.peer.rpc_addr')}</label>
-          <input required id="rpc" placeholder="Peer RPC Address" />
-        </fieldset>
-        <fieldset>
-          <label htmlFor="peer_id">Peer ID</label>
-          <input required id="peer_id" placeholder="Peer ID" />
-        </fieldset>
-        <button type="submit">Submit</button>
-      </form>
     </Content>
   )
 }

diff --git a/src/styles/table.module.scss b/src/styles/table.module.scss
@@ -0,0 +1,43 @@
+%base-table {
+  width: 100%;
+  text-align: left;
+  cursor: default;
+  overflow: hidden;
+  border-radius: 6px;
+  box-shadow: rgb(0 0 0 / 12%) 0 2px 6px 0;
+  font-size: 0.875rem;
+
+  tr {
+    background: #fff;
+  }
+
+  td,
+  th {
+    padding: 8px;
+    padding-right: 1rem;
+
+    &:first-child {
+      padding-left: 40px;
+    }
+
+    &:last-child {
+      text-align: right;
+    }
+  }
+
+  thead {
+    th {
+      height: 3.5rem;
+    }
+  }
+
+  tbody {
+    tr:hover {
+      background: #ccc;
+    }
+  }
+
+  .tableSeparator {
+    height: 4px;
+  }
+}