From ce31302404b3cf2ef6b324336ad0d8552625b1e5 Mon Sep 17 00:00:00 2001 From: Johnathan Reale Date: Mon, 15 Sep 2025 12:12:45 -0400 Subject: [PATCH 01/27] First UI pieces --- .../src/components/RouterTooltip.tsx | 14 +++ .../src/components/SpecifyRoutersCheckbox.tsx | 27 ++++++ .../register-ui/src/pages/CommitDotOsName.tsx | 91 ++++++++++++++++--- 3 files changed, 121 insertions(+), 11 deletions(-) create mode 100644 hyperdrive/src/register-ui/src/components/RouterTooltip.tsx create mode 100644 hyperdrive/src/register-ui/src/components/SpecifyRoutersCheckbox.tsx diff --git a/hyperdrive/src/register-ui/src/components/RouterTooltip.tsx b/hyperdrive/src/register-ui/src/components/RouterTooltip.tsx new file mode 100644 index 000000000..5abcbb518 --- /dev/null +++ b/hyperdrive/src/register-ui/src/components/RouterTooltip.tsx @@ -0,0 +1,14 @@ +import React from "react"; +import { Tooltip } from "./Tooltip"; + +export const RouterTooltip: React.FC = () => { + return ( + + ); +}; \ No newline at end of file diff --git a/hyperdrive/src/register-ui/src/components/SpecifyRoutersCheckbox.tsx b/hyperdrive/src/register-ui/src/components/SpecifyRoutersCheckbox.tsx new file mode 100644 index 000000000..f618e85c1 --- /dev/null +++ b/hyperdrive/src/register-ui/src/components/SpecifyRoutersCheckbox.tsx @@ -0,0 +1,27 @@ + +import { RouterTooltip } from "./RouterTooltip"; +import { FaSquareCheck, FaRegSquare } from "react-icons/fa6"; + +interface SpecifyRoutersProps { + specifyRouters: boolean; + setSpecifyRouters: (specifyRouters: boolean) => void; +} + +export default function SpecifyRoutersCheckbox({ specifyRouters, setSpecifyRouters }: SpecifyRoutersProps) { + return ( +
+ +
+ Specify routers for an indirect node. + If you are unsure, leave unchecked. +
+ +
+ ); +} \ No newline at end of file diff --git a/hyperdrive/src/register-ui/src/pages/CommitDotOsName.tsx b/hyperdrive/src/register-ui/src/pages/CommitDotOsName.tsx index df2d06150..064a263e7 100644 --- a/hyperdrive/src/register-ui/src/pages/CommitDotOsName.tsx +++ b/hyperdrive/src/register-ui/src/pages/CommitDotOsName.tsx @@ -6,6 +6,7 @@ import Loader from "../components/Loader"; import { PageProps } from "../lib/types"; import DirectNodeCheckbox from "../components/DirectCheckbox"; +import SpecifyRoutersCheckbox from "../components/SpecifyRoutersCheckbox"; import { Tooltip } from "../components/Tooltip"; import { useAccount, useWaitForTransactionReceipt, useWriteContract } from "wagmi"; @@ -17,15 +18,15 @@ import BackButton from "../components/BackButton"; interface RegisterOsNameProps extends PageProps { } function CommitDotOsName({ - direct, - setDirect, - setHnsName, - setNetworkingKey, - setIpAddress, - setWsPort, - setTcpPort, - setRouters, -}: RegisterOsNameProps) { + direct, + setDirect, + setHnsName, + setNetworkingKey, + setIpAddress, + setWsPort, + setTcpPort, + setRouters, + }: RegisterOsNameProps) { let { address } = useAccount(); let navigate = useNavigate(); let { openConnectModal } = useConnectModal(); @@ -47,6 +48,43 @@ function CommitDotOsName({ const [nameValidities, setNameValidities] = useState([]) const [triggerNameCheck, setTriggerNameCheck] = useState(false) const [isConfirmed, setIsConfirmed] = useState(false) + const [specifyRouters, setSpecifyRouters] = useState(false) + const [customRouters, setCustomRouters] = useState('') + + // Modified setDirect function to handle mutual exclusivity + const handleSetDirect = (value: boolean) => { + setDirect(value); + if (value) { + setSpecifyRouters(false); + setCustomRouters(''); // Clear custom routers when switching to direct + } + }; + + // Modified setSpecifyRouters function to handle mutual exclusivity + const handleSetSpecifyRouters = (value: boolean) => { + setSpecifyRouters(value); + if (value) { + setDirect(false); + } else { + setCustomRouters(''); // Clear custom routers when unchecking + } + }; + + // Add a validation function for custom routers + const getValidCustomRouters = () => { + if (!specifyRouters) return []; + return customRouters + .split('\n') + .map(router => router.trim()) + .filter(router => router.length > 0); + }; + + const isCustomRoutersValid = () => { + if (!specifyRouters) return true; // Not required if checkbox is unchecked + return getValidCustomRouters().length > 0; + }; + + useEffect(() => { document.title = "Register" @@ -143,8 +181,39 @@ function CommitDotOsName({
Advanced Options - +
+ + + {specifyRouters && ( +
+ +