diff --git a/src/components/OnBoarding/OnBoardingStepThree.css b/src/components/OnBoarding/OnBoardingStepThree.css
index 0d49e69..0c56661 100644
--- a/src/components/OnBoarding/OnBoardingStepThree.css
+++ b/src/components/OnBoarding/OnBoardingStepThree.css
@@ -27,10 +27,6 @@
cursor: pointer;
}
-.onboarding-check-refresh--fetching {
- animation: rotateAnimation 2s linear infinite;
-}
-
.onboarding-group {
display: flex;
align-items: center;
@@ -43,6 +39,75 @@
padding-left: 1rem;
}
+.onboarding-deviceCheck {
+ margin-top: 1rem;
+ margin-bottom: 1rem;
+ font-family: Azeret Mono;
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 16.34px;
+ display: inline-block;
+}
+
+.onboarding--deviceCheck-block {
+ flex: 0.3;
+}
+
+.onboarding-displayName {
+ margin-bottom: 1.75rem;
+}
+
+.onboarding-healthCheck-item {
+ display: flex;
+ align-items: center;
+ padding: 16px 0;
+ gap: 16px;
+ border-top: 1px solid #3c3d3e;
+ border-bottom: 1px solid #3c3d3e;
+}
+
+.onboarding-healthCheck-itemText {
+ font-family: Inter;
+ font-size: 16px;
+ font-weight: 500;
+ line-height: 24px;
+ letter-spacing: -0.011em;
+}
+
+.onboarding-healthChecks {
+ margin-bottom: 32px;
+}
+
+.onboarding-healthCheck-icon {
+ display: flex;
+ align-items: center;
+ width: 20px;
+ height: 20px;
+ justify-content: center;
+}
+
+.onboarding-refresh {
+ position: relative;
+ top: 14px;
+ cursor: pointer;
+}
+
+.onboarding-refresh--fetching {
+ animation: rotate 2s linear infinite;
+}
+
+.onboarding-portContainer,
+.onboarding-addressContainer {
+ position: relative;
+}
+
+.onboarding--addressSuccessIcon {
+ position: absolute;
+ top: 53px;
+ bottom: 0;
+ right: 18px;
+}
+
@keyframes rotate {
from {
transform: rotate(0deg); /* Start at 0 degrees */
diff --git a/src/components/OnBoarding/OnBoardingStepThree.tsx b/src/components/OnBoarding/OnBoardingStepThree.tsx
index c104a8b..2de83bc 100644
--- a/src/components/OnBoarding/OnBoardingStepThree.tsx
+++ b/src/components/OnBoarding/OnBoardingStepThree.tsx
@@ -1,20 +1,21 @@
-import { CheckIcon, RefreshCcw, Save, ShieldAlert, X } from "lucide-react";
import { classnames } from "../../utils/classnames";
import "./OnBoardingStepThree.css";
import { usePortForwarding } from "../../hooks/usePortForwarding";
-import { useCodexConnection } from "../../hooks/useCodexConnection";
-import {
- Alert,
- ButtonIcon,
- Input,
- SimpleText,
-} from "@codex-storage/marketplace-ui-components";
-import { useEffect, useState } from "react";
+import { Input, SimpleText } from "@codex-storage/marketplace-ui-components";
+import { ClipboardEvent, useEffect, useState } from "react";
import { CodexSdk } from "../../sdk/codex";
import { useQueryClient } from "@tanstack/react-query";
import { usePersistence } from "../../hooks/usePersistence";
import { useDebug } from "../../hooks/useDebug";
import { DebugUtils } from "../../utils/debug";
+import { AlphaIcon } from "./AlphaIcon";
+import { OnBoardingUtils } from "../../utils/onboarding";
+import { RefreshIcon } from "../RefreshIcon/RefreshIcon";
+import { HealthCheckIcon } from "./HealthCheckIcon";
+import { HealthCheckItem } from "./HealthCheckItem";
+import { Strings } from "../../utils/strings";
+import { SuccessCheckIcon } from "../SuccessCheckIcon/SuccessCheckIcon";
+import { ErrorCircleIcon } from "../ErrorCircleIcon/ErrorCircleIcon";
type Props = {
online: boolean;
@@ -30,6 +31,7 @@ export function OnBoardingStepThree({ online, onStepValid }: Props) {
const persistence = usePersistence(codex.isSuccess);
const [url, setUrl] = useState(CodexSdk.url);
const queryClient = useQueryClient();
+ const [isInvalid, setIsInvalid] = useState(false);
useEffect(() => {
onStepValid(online && portForwarding.enabled && codex.isSuccess);
@@ -38,179 +40,180 @@ export function OnBoardingStepThree({ online, onStepValid }: Props) {
useEffect(() => {
if (codex.isSuccess) {
persistence.refetch();
+ portForwarding.refetch();
}
- }, [codex.isSuccess]);
+ }, [persistence, portForwarding, codex.isSuccess]);
- const onChange = (e: React.FormEvent) => {
+ const onAddressChange = (e: React.FormEvent) => {
+ const [, port] = Strings.splitURLAndPort(url);
+ const element = e.currentTarget;
const value = e.currentTarget.value;
- if (value) {
- setUrl(value);
+
+ if (
+ value.startsWith("http://") === false &&
+ value.startsWith("https://") === false
+ ) {
+ setIsInvalid(true);
+ return;
+ }
+
+ console.info("isInvalid", isInvalid);
+
+ setIsInvalid(!element.checkValidity());
+ setUrl(value + ":" + port);
+ };
+
+ const onPaste = (e: ClipboardEvent) => {
+ const text = e.clipboardData.getData("text");
+
+ try {
+ new URL(text);
+ setUrl(text);
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ } catch (_) {
+ // Nothing to do here
}
};
- const onSave = () =>
+ const onPortChange = (e: React.FormEvent) => {
+ const [address] = Strings.splitURLAndPort(url);
+ const element = e.currentTarget;
+ const value = element.value;
+
+ setUrl(address + ":" + value);
+ };
+
+ const onSave = () => {
+ if (isInvalid === true) {
+ return;
+ }
+
CodexSdk.updateURL(url)
.then(() => queryClient.invalidateQueries())
.then(() => codex.refetch());
+ };
- const InternetIcon = online ? CheckIcon : X;
- const PortForWarningIcon = portForwarding.enabled ? CheckIcon : X;
- const CodexIcon = codex.isSuccess ? CheckIcon : X;
- const PersistenceIcon = persistence.enabled ? CheckIcon : ShieldAlert;
-
- let hasPortForwarningWarning = false;
- let portValue = 0;
+ let forwardingPortValue = defaultPort;
if (codex.isSuccess && codex.data) {
const port = DebugUtils.getTcpPort(codex.data);
- if (port.error === false && port.data !== defaultPort) {
- hasPortForwarningWarning = true;
- }
if (!port.error) {
- portValue = port.data;
+ forwardingPortValue = port.data;
}
}
+ const displayName = OnBoardingUtils.getDisplayName();
+ const [address, port] = Strings.splitURLAndPort(url);
+
return (
-
-
+ <>
+
-
-
-
-
Internet connection
-
- Status indicator for the Internet.
-
-
-
-
-
-
-
-
Port forwarding
-
- Status indicator for port forwarding activation.
-
- {portValue && (
- <>
-
-
- TCP Port detected: {portValue}.
-
-
- )}
-
- {!portForwarding.enabled && (
-
portForwarding.refetch()}>
-
- )}
-
-
-
Codex
-
-
-
-
-
-
-
Marketplace
-
- Status indicator for the marketplace on the Codex node.
-
-
-
-
-
-
- {hasPortForwarningWarning && (
-
+
- It seems like you are using a different port than the default one (
- {defaultPort}). Be sure the port forwarning is enabled for the port
- you are running.
+ Connection /
-
- )}
-
+
+
+
+ Nice to meet {displayName},
+
+
+
+
+
+
+
+
+
+
+
+
+ Port forwarding should be default {forwardingPortValue}.
+
+
+
+
+
+
+
+
+ Health Check
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
) => {
- setDisplayName(e.currentTarget.value);
- onStepValid(!!e.currentTarget.value);
+ const value = e.currentTarget.value;
+ OnBoardingUtils.setDisplayName(value);
+ setDisplayName(value);
+ onStepValid(!!value);
};
return (
<>
+
+
+
+ Personalization
+
+
diff --git a/src/components/RefreshIcon/RefreshIcon.tsx b/src/components/RefreshIcon/RefreshIcon.tsx
new file mode 100644
index 0000000..dd73da3
--- /dev/null
+++ b/src/components/RefreshIcon/RefreshIcon.tsx
@@ -0,0 +1,22 @@
+type Props = {
+ onClick?: () => void;
+ className?: string;
+};
+
+export function RefreshIcon({ className, onClick }: Props) {
+ return (
+
+
+ );
+}
diff --git a/src/components/SuccessCheckIcon/SuccessCheckIcon.tsx b/src/components/SuccessCheckIcon/SuccessCheckIcon.tsx
new file mode 100644
index 0000000..4a19441
--- /dev/null
+++ b/src/components/SuccessCheckIcon/SuccessCheckIcon.tsx
@@ -0,0 +1,24 @@
+type Props = {
+ variant: "primary" | "default";
+ className?: string;
+};
+
+export function SuccessCheckIcon({ variant, className = "" }: Props) {
+ const color = variant === "primary" ? "#1FC16B" : "#444444";
+
+ return (
+
+
+
+
+ );
+}
diff --git a/src/index.css b/src/index.css
index 880fb88..f47b4af 100644
--- a/src/index.css
+++ b/src/index.css
@@ -31,6 +31,7 @@
--codex-color-disabled: #717171;
--codex-color-light: rgb(150 150 150);
--codex-border-color: #2b303b;
+ --codex-input-border-color: #494949;
--codex-background-secondary: rgb(38 38 38);
--codex-highlight-color: #2f2f2f;
--codex-background-light: rgb(64 64 64);
@@ -41,6 +42,10 @@
BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans,
sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol,
Noto Color Emoji;
+ --codex-input-label-color: #7b7b7b;
+ --codex-input-border-color: #494949;
+ --codex-input-background: #232323;
+ --codex-input-color-error: #fb3748;
-webkit-tap-highlight-color: transparent;
-webkit-text-size-adjust: 100%;
@@ -173,3 +178,11 @@ a[aria-disabled] {
.page {
max-width: 100%;
}
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
+ -webkit-transition-delay: 9999s;
+ transition-delay: 9999s;
+}
diff --git a/src/routes/index.css b/src/routes/index.css
index 164581f..dcf4e53 100644
--- a/src/routes/index.css
+++ b/src/routes/index.css
@@ -139,15 +139,15 @@
}
.index-column-section {
- max-width: 450px;
+ max-width: 500px;
}
-.index-column-section:not(:first-child) {
+.index-column-section {
flex: 1;
}
.index-column-section:first-child {
- flex: 0.7;
+ flex: 0.5;
}
.index-column-section:last-child {
@@ -185,6 +185,10 @@
opacity: 1;
}
+.index-displayName {
+ margin-top: 1rem;
+}
+
@keyframes pulse {
0% {
opacity: 0.4;
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index e0b5fe0..c397de6 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -2,7 +2,6 @@ import { createFileRoute, useNavigate } from "@tanstack/react-router";
import "./index.css";
import { ArrowRightCircle } from "../components/ArrowRightCircle/ArrowRightCircle";
import { useNetwork } from "../network/useNetwork";
-import { NetworkIcon } from "../components/NetworkIcon/NetworkIcon";
import { Logotype } from "../components/Logotype/Logotype";
import { useState } from "react";
import { OnBoardingStepOne } from "../components/OnBoarding/OnBoardingStepOne";
@@ -10,7 +9,6 @@ import { OnBoardingStepTwo } from "../components/OnBoarding/OnBoardingStepTwo";
import { classnames } from "../utils/classnames";
import { OnBoardingStepThree } from "../components/OnBoarding/OnBoardingStepThree";
import { attributes } from "../utils/attributes";
-import { CodexLogo } from "../components/CodexLogo/CodexLogo";
import { OnBoardingImage } from "../components/OnBoarding/OnBoardingImage";
import { OnBoardingUtils } from "../utils/onboarding";
@@ -52,7 +50,7 @@ function Index() {
@@ -88,13 +86,14 @@ function Index() {
|