-
+
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 ca09df7..2de83bc 100644
--- a/src/components/OnBoarding/OnBoardingStepThree.tsx
+++ b/src/components/OnBoarding/OnBoardingStepThree.tsx
@@ -1,19 +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 {
- 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;
@@ -29,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);
@@ -37,179 +40,180 @@ export function OnBoardingStepThree({ online, onStepValid }: Props) {
useEffect(() => {
if (codex.isSuccess) {
persistence.refetch();
+ portForwarding.refetch();
}
- }, [persistence, 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 /
+ Device Health Check
-
- )}
-
+
+
+
+ Nice to meet {displayName},
+ Let’s establish our connection.
+
+
+
+
+
+ {isInvalid ? (
+
+ ) : (
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+ - Port forwarding should be default {forwardingPortValue}.
+
+
+
+
+
+
+
+
+
+ Health Check
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Personalization
+
+
diff --git a/src/components/Peers/PeerCountryCell.tsx b/src/components/Peers/PeerCountryCell.tsx
index 0737655..5ffef3d 100644
--- a/src/components/Peers/PeerCountryCell.tsx
+++ b/src/components/Peers/PeerCountryCell.tsx
@@ -52,7 +52,7 @@ export function PeerCountryCell({ address, onPinAdd }: Props) {
lng: data.longitude,
});
}
- }, [data]);
+ }, [data, onPinAdd]);
return (