Fix lint

src/components/Availability/AvailabilityConfirmation.tsx

@@ -1,12 +1,8 @@
-import {
-  SpaceAllocation,
-  StepperAction,
-} from "@codex-storage/marketplace-ui-components";
+import { StepperAction } from "@codex-storage/marketplace-ui-components";
 import { Dispatch, useEffect } from "react";
 import "./AvailabilityForm.css";
 import { CodexNodeSpace } from "@codex-storage/sdk-js";
 import { UIAvailability } from "./types";
-import { GB, TB } from "../../utils/constants";
 import "./AvailabilityConfirm.css";
 import { Info } from "lucide-react";
 import { AvailabilitySpaceAllocation } from "./AvailabilitySpaceAllocation";
@@ -30,28 +26,6 @@ export function AvailabilityConfirm({
     }
   }, [dispatch, enableNext]);
 
-  const unit = availability.totalSizeUnit === "gb" ? GB : TB;
-  const { quotaMaxBytes, quotaReservedBytes } = space;
-  const size = availability.totalSize * unit;
-  const isUpdating = !!availability.id;
-  const allocated = isUpdating ? quotaReservedBytes - size : quotaReservedBytes;
-  const remaining = quotaMaxBytes - allocated - size;
-
-  const spaceData = [
-    {
-      title: "Space allocated",
-      size: allocated,
-    },
-    {
-      title: "New space allocation",
-      size: size,
-    },
-    {
-      title: "Remaining space",
-      size: remaining < 0 ? 0 : remaining,
-    },
-  ];
-
   return (
     <>
       <AvailabilitySpaceAllocation availability={availability} space={space} />

src/components/Availailibities/Availabilities.tsx

@@ -0,0 +1,42 @@
+import { Placeholder } from "@codex-storage/marketplace-ui-components";
+import { useQuery } from "@tanstack/react-query";
+import { CircleX } from "lucide-react";
+import { Promises } from "../../utils/promises";
+import { AvailabilityCreate } from "../Availability/AvailabilityCreate";
+import { CodexSdk } from "../../sdk/codex";
+
+export function Availabilities() {
+  {
+    const {
+      data = {
+        quotaMaxBytes: 0,
+        quotaReservedBytes: 0,
+        quotaUsedBytes: 0,
+        totalBlocks: 0,
+      },
+      isError,
+      error,
+    } = useQuery({
+      queryFn: () =>
+        CodexSdk.data.space().then((s) => Promises.rejectOnError(s)),
+      queryKey: ["space"],
+    });
+
+    if (isError) {
+      return (
+        <Placeholder
+          Icon={<CircleX size={"4em"}></CircleX>}
+          title="Something went wrong"
+          message={error.message}></Placeholder>
+      );
+    }
+
+    return (
+      <div className="container">
+        <div className="availabilities-actions">
+          <AvailabilityCreate space={data} />
+        </div>
+      </div>
+    );
+  }
+}

src/routes/dashboard/availabilities.tsx

@@ -1,44 +1,7 @@
-import { Placeholder } from "@codex-storage/marketplace-ui-components";
 import { createFileRoute } from "@tanstack/react-router";
 import "./availabilities.css";
-import { CircleX } from "lucide-react";
-import { AvailabilityCreate } from "../../components/Availability/AvailabilityCreate";
-import { Promises } from "../../utils/promises";
-import { CodexSdk } from "../../sdk/codex";
-import { useQuery } from "@tanstack/react-query";
+import { Availabilities } from "../../components/Availailibities/Availabilities";
 
 export const Route = createFileRoute("/dashboard/availabilities")({
-  component: () => {
-    const {
-      data = {
-        quotaMaxBytes: 0,
-        quotaReservedBytes: 0,
-        quotaUsedBytes: 0,
-        totalBlocks: 0,
-      },
-      isError,
-      error,
-    } = useQuery({
-      queryFn: () =>
-        CodexSdk.data.space().then((s) => Promises.rejectOnError(s)),
-      queryKey: ["space"],
-    });
-
-    if (isError) {
-      return (
-        <Placeholder
-          Icon={<CircleX size={"4em"}></CircleX>}
-          title="Something went wrong"
-          message={error.message}></Placeholder>
-      );
-    }
-
-    return (
-      <div className="container">
-        <div className="availabilities-actions">
-          <AvailabilityCreate space={data} />
-        </div>
-      </div>
-    );
-  },
+  component: Availabilities,
 });