Add codex network url input

src/components/NetworkIcon/NetworkIcon.tsx

@@ -1,4 +1,11 @@
-export function NetworkIcon() {
+type Props = {
+  active?: boolean;
+};
+
+export function NetworkIcon({ active }: Props) {
+  const stroke = active
+    ? "var(--codex-color-primary)"
+    : "rgb(var(--codex-color-error))";
   return (
     <svg
       width="12"
@@ -6,7 +13,7 @@ export function NetworkIcon() {
       viewBox="0 0 12 12"
       fill="none"
       xmlns="http://www.w3.org/2000/svg">
-      <path d="M9.11111 2L2 9.11111M10 6.44444L6.44444 10" stroke="#6CCC93" />
+      <path d="M9.11111 2L2 9.11111M10 6.44444L6.44444 10" stroke={stroke} />
     </svg>
   );
 }

src/components/OnBoarding/OnBoardingStepThree.css

@@ -27,6 +27,13 @@
   animation: rotateAnimation 2s linear infinite;
 }
 
+.onboarding-group {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 0.5rem;
+}
+
 @keyframes rotate {
   from {
     transform: rotate(0deg); /* Start at 0 degrees */

src/components/OnBoarding/OnBoardingStepThree.tsx

@@ -1,10 +1,17 @@
-import { CheckIcon, RefreshCcw, X } from "lucide-react";
+import { CheckIcon, RefreshCcw, Save, X } from "lucide-react";
 import { classnames } from "../../utils/classnames";
 import "./OnBoardingStepThree.css";
 import { usePortForwarding } from "../../hooks/usePortForwarding";
 import { useCodexConnection } from "../../hooks/useCodexConnection";
-import { SimpleText } from "@codex-storage/marketplace-ui-components";
-import { useEffect } from "react";
+import {
+  Button,
+  ButtonIcon,
+  Input,
+  SimpleText,
+} from "@codex-storage/marketplace-ui-components";
+import { useEffect, useState } from "react";
+import { CodexSdk } from "../../sdk/codex";
+import { useQueryClient } from "@tanstack/react-query";
 
 type Props = {
   online: boolean;
@@ -14,17 +21,43 @@ type Props = {
 export function OnBoardingStepThree({ online, onStepValid }: Props) {
   const portForwarding = usePortForwarding(online);
   const codex = useCodexConnection();
+  const [url, setUrl] = useState(CodexSdk.url);
+  const queryClient = useQueryClient();
 
   useEffect(() => {
     onStepValid(online && portForwarding.enabled && codex.enabled);
   }, [portForwarding.enabled, codex.enabled, onStepValid, online]);
 
+  const onChange = (e: React.FormEvent<HTMLInputElement>) => {
+    const value = e.currentTarget.value;
+    if (value) {
+      setUrl(value);
+    }
+  };
+
+  const onSave = () =>
+    CodexSdk.updateURL(url)
+      .then(() => queryClient.invalidateQueries())
+      .then(() => codex.refetch());
+
   const InternetIcon = online ? CheckIcon : X;
   const PortForWarningIcon = portForwarding.enabled ? CheckIcon : X;
   const CodexIcon = codex.enabled ? CheckIcon : X;
 
   return (
     <div className="index-column-section">
+      <div className="onboarding-group">
+        <div>
+          <Input
+            id="url"
+            label="Codex client node URL"
+            onChange={onChange}
+            value={url}
+            inputClassName="settings-input"></Input>
+        </div>
+
+        <ButtonIcon Icon={Save} onClick={onSave}></ButtonIcon>
+      </div>
       <div
         className={classnames(
           ["onboarding-check"],

src/routes/index.css

@@ -11,8 +11,10 @@
   display: flex;
   position: absolute;
   top: -19px;
-  left: -106px;
+  left: -161px;
   gap: 4px;
+  width: 200px;
+  justify-content: flex-end;
 }
 
 .index-network-text {

src/routes/index.tsx

@@ -88,7 +88,7 @@ function Index() {
           <div className="index-logo">
             <div className="index-network">
               <p className="index-network-text">{text}</p>
-              <NetworkIcon></NetworkIcon>
+              <NetworkIcon active={online}></NetworkIcon>
             </div>
             <CodexLogo></CodexLogo>
           </div>