From 5fb79916589290fa4b9976fe37e00048defb66b4 Mon Sep 17 00:00:00 2001 From: Keith Date: Wed, 25 Sep 2024 13:04:59 +0900 Subject: [PATCH] feat: stylize peer list --- .../Fiber/PeerList/AddPeerForm.module.scss | 74 ++++++++++++ src/pages/Fiber/PeerList/AddPeerForm.tsx | 105 ++++++++++++++++++ src/pages/Fiber/PeerList/index.module.scss | 61 +++------- src/pages/Fiber/PeerList/index.tsx | 47 ++------ src/styles/table.module.scss | 43 +++++++ 5 files changed, 248 insertions(+), 82 deletions(-) create mode 100644 src/pages/Fiber/PeerList/AddPeerForm.module.scss create mode 100644 src/pages/Fiber/PeerList/AddPeerForm.tsx create mode 100644 src/styles/table.module.scss diff --git a/src/pages/Fiber/PeerList/AddPeerForm.module.scss b/src/pages/Fiber/PeerList/AddPeerForm.module.scss new file mode 100644 index 000000000..2fa4288b5 --- /dev/null +++ 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 new file mode 100644 index 000000000..a0d2ae5d2 --- /dev/null +++ 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 = ({ onSuccess }) => { + const dialogRef = useRef(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) => { + e.preventDefault() + e.stopPropagation() + const form = e.currentTarget + + const { peer_id, peer_name, rpc } = form + const params: Parameters[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 ( + <> + + + +
+

+ Add Fiber Peer + +

+
+ + +
+
+ + +
+
+ + +
+ +
+
+ + ) +} + +export default AddPeerForm diff --git a/src/pages/Fiber/PeerList/index.module.scss b/src/pages/Fiber/PeerList/index.module.scss index a4051c4e2..3daa3ca18 100644 --- 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 index 6ae8f3648..27e421281 100644 --- 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) => { - e.preventDefault() - e.stopPropagation() - const form = e.currentTarget - - const { peer_id, peer_name, rpc } = form - const params: Parameters[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 (
+

+ CKB Fiber Peers + + refetchList()} /> +

@@ -172,6 +154,7 @@ const PeerList = () => { })} +
{list.map(i => { return ( @@ -184,23 +167,9 @@ const PeerList = () => { ) })} + {/*
*/}
-
-
- - -
-
- - -
-
- - -
- -
) } diff --git a/src/styles/table.module.scss b/src/styles/table.module.scss new file mode 100644 index 000000000..c5052bc78 --- /dev/null +++ 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; + } +}