Add a check for marketplace persistence

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;

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<HTMLInputElement>) => {
     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 (
     <div className="index-column-section">
@@ -127,21 +136,41 @@ export function OnBoardingStepThree({ online, onStepValid }: Props) {
               Status indicator for the Codex network.
             </SimpleText>
           </div>
-          {!codex.enabled && (
+          {!persistence.enabled && (
             <a
               className="onboarding-check-refresh"
-              onClick={() => codex.refetch()}>
+              onClick={() => persistence.refetch()}>
               <RefreshCcw
                 size={"1.25rem"}
                 className={classnames([
                   "onboarding-check-refresh--fetching",
-                  codex.isFetching,
+                  persistence.isFetching,
                 ])}
               />
             </a>
           )}
         </div>
       </div>
+      <div
+        className={classnames(
+          ["onboarding-check"],
+          ["onboarding-check--valid", persistence.enabled]
+        )}>
+        <PersistenceIcon
+          className={classnames(
+            ["onboarding-check-icon--valid", persistence.enabled],
+            ["onboarding-check-icon--warning", !persistence.enabled]
+          )}
+        />
+        <div className="onboarding-check-line">
+          <div>
+            <p>Marketplace</p>
+            <SimpleText variant="light">
+              Status indicator for the marketplace on the Codex node.
+            </SimpleText>
+          </div>
+        </div>
+      </div>
     </div>
   );
 }

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 };
+}