diff --git a/src/components/OnBoarding/OnBoardingStepThree.css b/src/components/OnBoarding/OnBoardingStepThree.css index f3bdc05..6f38f14 100644 --- a/src/components/OnBoarding/OnBoardingStepThree.css +++ b/src/components/OnBoarding/OnBoardingStepThree.css @@ -13,6 +13,10 @@ color: rgb(var(--codex-color-error)); } +.onboarding-check-icon--warning { + color: rgb(var(--codex-color-warning)); +} + .onboarding-check-line { display: flex; align-items: center; diff --git a/src/components/OnBoarding/OnBoardingStepThree.tsx b/src/components/OnBoarding/OnBoardingStepThree.tsx index 2873f51..06ac5d3 100644 --- a/src/components/OnBoarding/OnBoardingStepThree.tsx +++ b/src/components/OnBoarding/OnBoardingStepThree.tsx @@ -1,4 +1,4 @@ -import { CheckIcon, RefreshCcw, Save, X } from "lucide-react"; +import { CheckIcon, RefreshCcw, Save, ShieldAlert, X } from "lucide-react"; import { classnames } from "../../utils/classnames"; import "./OnBoardingStepThree.css"; import { usePortForwarding } from "../../hooks/usePortForwarding"; @@ -11,6 +11,7 @@ import { import { useEffect, useState } from "react"; import { CodexSdk } from "../../sdk/codex"; import { useQueryClient } from "@tanstack/react-query"; +import { usePersistence } from "../../hooks/usePersistence"; type Props = { online: boolean; @@ -20,6 +21,7 @@ type Props = { export function OnBoardingStepThree({ online, onStepValid }: Props) { const portForwarding = usePortForwarding(online); const codex = useCodexConnection(); + const persistence = usePersistence(codex.enabled); const [url, setUrl] = useState(CodexSdk.url); const queryClient = useQueryClient(); @@ -27,6 +29,12 @@ export function OnBoardingStepThree({ online, onStepValid }: Props) { onStepValid(online && portForwarding.enabled && codex.enabled); }, [portForwarding.enabled, codex.enabled, onStepValid, online]); + useEffect(() => { + if (codex.enabled) { + persistence.refetch(); + } + }, [codex.enabled]); + const onChange = (e: React.FormEvent) => { const value = e.currentTarget.value; if (value) { @@ -42,6 +50,7 @@ export function OnBoardingStepThree({ online, onStepValid }: Props) { const InternetIcon = online ? CheckIcon : X; const PortForWarningIcon = portForwarding.enabled ? CheckIcon : X; const CodexIcon = codex.enabled ? CheckIcon : X; + const PersistenceIcon = persistence.enabled ? CheckIcon : ShieldAlert; return (
@@ -127,21 +136,41 @@ export function OnBoardingStepThree({ online, onStepValid }: Props) { Status indicator for the Codex network.
- {!codex.enabled && ( + {!persistence.enabled && ( codex.refetch()}> + onClick={() => persistence.refetch()}> )} +
+ +
+
+

Marketplace

+ + Status indicator for the marketplace on the Codex node. + +
+
+
); } diff --git a/src/hooks/usePersistence.tsx b/src/hooks/usePersistence.tsx new file mode 100644 index 0000000..00ad58c --- /dev/null +++ b/src/hooks/usePersistence.tsx @@ -0,0 +1,33 @@ +import { useQuery } from "@tanstack/react-query"; +import { CodexSdk } from "../sdk/codex"; +import { Promises } from "../utils/promises"; + +const report = false; + +export function usePersistence(isCodexOnline: boolean) { + const { data, isError, isFetching, refetch } = useQuery({ + queryKey: ["availabilities"], + queryFn: async () => { + return CodexSdk.marketplace() + .purchases() + .then((data) => Promises.rejectOnError(data, report)); + }, + refetchInterval: 5000, + + // Enable only when the use has an internet connection + enabled: !!isCodexOnline, + + // No need to retry because we defined a refetch interval + retry: false, + + // The client node should be local, so display the cache value while + // making a background request looks good. + staleTime: 0, + + // Refreshing when focus returns can be useful if a user comes back + // to the UI after performing an operation in the terminal. + refetchOnWindowFocus: true, + }); + + return { enabled: !isError && !!data, isFetching, refetch }; +}