Merge branch 'fix/settings/update-url-in-settings' into releases/v0.0.4

2026-01-09 08:53:07 +00:00 · 2024-10-10 11:05:38 +02:00 · 2024-10-10 11:05:38 +02:00 · 9b66dcdd3d
commit 9b66dcdd3d
parent 984538bb99 d879225b13
16 changed files with 100 additions and 30 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -9,7 +9,7 @@
      "version": "0.0.3",
      "license": "MIT",
      "dependencies": {
-        "@codex-storage/marketplace-ui-components": "^0.0.16",
+        "@codex-storage/marketplace-ui-components": "^0.0.17",
        "@codex-storage/sdk-js": "^0.0.7",
        "@sentry/browser": "^8.32.0",
        "@sentry/react": "^8.31.0",
@ -42,6 +42,47 @@
        "node": ">=18"
      }
    },
+    "../storybook": {
+      "name": "@codex-storage/marketplace-ui-components",
+      "version": "0.0.16",
+      "license": "MIT",
+      "dependencies": {
+        "lucide-react": "^0.441.0"
+      },
+      "devDependencies": {
+        "@chromatic-com/storybook": "^2.0.2",
+        "@storybook/addon-essentials": "^8.2.9",
+        "@storybook/addon-interactions": "^8.2.9",
+        "@storybook/addon-links": "^8.2.9",
+        "@storybook/addon-onboarding": "^8.2.9",
+        "@storybook/blocks": "^8.2.9",
+        "@storybook/react": "^8.2.9",
+        "@storybook/react-vite": "^8.2.9",
+        "@storybook/test": "^8.2.9",
+        "@typescript-eslint/eslint-plugin": "^8.6.0",
+        "@typescript-eslint/parser": "^8.0.0",
+        "@vitejs/plugin-react": "^4.3.1",
+        "eslint": "^8.57.0",
+        "eslint-plugin-react-hooks": "^4.6.2",
+        "eslint-plugin-react-refresh": "^0.4.7",
+        "glob": "^9.3.5",
+        "prettier": "^3.3.3",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "storybook": "^8.2.9",
+        "typescript": "5.5.2",
+        "vite-plugin-dts": "^4.0.3",
+        "vite-plugin-lib-inject-css": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@codex-storage/sdk-js": "^0.0.6",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1"
+      }
+    },
    "node_modules/@ampproject/remapping": {
      "version": "2.3.0",
      "dev": true,
@ -351,9 +392,9 @@
      "dev": true
    },
    "node_modules/@codex-storage/marketplace-ui-components": {
-      "version": "0.0.16",
-      "resolved": "https://registry.npmjs.org/@codex-storage/marketplace-ui-components/-/marketplace-ui-components-0.0.16.tgz",
-      "integrity": "sha512-49RQB/ld3EIZrFr/1GL7NB/cEI7TjnHRIBD3LJqZ2/ml+0gj//Mep85yV9Df1owiE2yyFh76bAeC8rUTo9cA/g==",
+      "version": "0.0.17",
+      "resolved": "https://registry.npmjs.org/@codex-storage/marketplace-ui-components/-/marketplace-ui-components-0.0.17.tgz",
+      "integrity": "sha512-76NHMwL0Ggf8e3I11opvrnJqJ5kKc0sb1uEdsPLTYv+4xS2TCkhQwk+4E8Okw5bUeR1HQwVqj01hpQ1lR1fAVQ==",
      "dependencies": {
        "lucide-react": "^0.441.0"
      },
@ -361,7 +402,7 @@
        "node": ">=18"
      },
      "peerDependencies": {
-        "@codex-storage/sdk-js": "^0.0.6",
+        "@codex-storage/sdk-js": ">=0.0.7",
        "react": "^18.3.1",
        "react-dom": "^18.3.1"
      }
@ -4514,4 +4555,4 @@
      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
    }
  }
-}
+}
--- a/package.json
+++ b/package.json
@ -23,7 +23,7 @@
    "React"
  ],
  "dependencies": {
-    "@codex-storage/marketplace-ui-components": "^0.0.16",
+    "@codex-storage/marketplace-ui-components": "^0.0.17",
    "@codex-storage/sdk-js": "^0.0.7",
    "@sentry/browser": "^8.32.0",
    "@sentry/react": "^8.31.0",
--- a/src/components/Availability/AvailabilityReservations.tsx
+++ b/src/components/Availability/AvailabilityReservations.tsx
@ -38,7 +38,7 @@ export function AvailabilityReservations({
    error,
  } = useQuery({
    queryFn: () =>
-      CodexSdk.marketplace
+      CodexSdk.marketplace()
        .reservations(availability!.id)
        .then((s) => Promises.rejectOnError(s)),
    queryKey: ["reservations"],
--- a/src/components/Availability/useAvailabilityMutation.ts
+++ b/src/components/Availability/useAvailabilityMutation.ts
@ -29,18 +29,18 @@ export function useAvailabilityMutation(
      name,
      ...input
    }: AvailabilityState) => {
-      const marketplace = CodexSdk.marketplace;
+      const unit = totalSizeUnit === "gb" ? GB : TB;
      const time = Times.toSeconds(duration, durationUnit);

      const fn: (
        input: Omit<AvailabilityState, "totalSizeUnit" | "durationUnit">
-      ) => Promise<CodexAvailabilityCreateResponse | ""> = input.id
+      ) => Promise<unknown> = input.id
          ? (input) =>
-            marketplace
+            CodexSdk.marketplace()
              .updateAvailability({ ...input, id: input.id || "" })
              .then((s) => Promises.rejectOnError(s))
          : (input) =>
-            marketplace
+            CodexSdk.marketplace()
              .createAvailability(input)
              .then((s) => Promises.rejectOnError(s));

--- a/src/components/Debug/Debug.tsx
+++ b/src/components/Debug/Debug.tsx
@ -6,7 +6,10 @@ import { CircleX } from "lucide-react";

 export function Debug() {
  const { data, isPending, isError, error } = useQuery({
-    queryFn: () => CodexSdk.debug.info().then((s) => Promises.rejectOnError(s)),
+    queryFn: () =>
+      CodexSdk.debug()
+        .info()
+        .then((s) => Promises.rejectOnError(s)),
    queryKey: ["debug"],

    // No need to retry because if the connection to the node
--- a/src/components/LogLevel/LogLevel.tsx
+++ b/src/components/LogLevel/LogLevel.tsx
@ -15,7 +15,9 @@ export function LogLevel() {
  const [level, setLevel] = useState<CodexLogLevel>("DEBUG");
  const { mutateAsync, isPending } = useMutation({
    mutationFn: (level: CodexLogLevel) =>
-      CodexSdk.debug.setLogLevel(level).then((s) => Promises.rejectOnError(s)),
+      CodexSdk.debug()
+        .setLogLevel(level)
+        .then((s) => Promises.rejectOnError(s)),
    onSuccess: () => {
      setToast({
        message: "The log level has been updated successfully.",
--- a/src/components/NodeIndicator/NodeIndicator.tsx
+++ b/src/components/NodeIndicator/NodeIndicator.tsx
@ -19,8 +19,11 @@ export function NodeIndicator() {

  const { data, isError } = useQuery({
    queryKey: ["spr"],
-    queryFn: async () =>
-      CodexSdk.node.spr().then((data) => Promises.rejectOnError(data, report)),
+    queryFn: async () => {
+      return CodexSdk.node()
+        .spr()
+        .then((data) => Promises.rejectOnError(data, report));
+    },
    refetchInterval: 5000,

    // No need to retry because we defined a refetch interval
--- a/src/components/NodeSpaceAllocation/NodeSpaceAllocation.tsx
+++ b/src/components/NodeSpaceAllocation/NodeSpaceAllocation.tsx
@ -14,7 +14,10 @@ const defaultSpace = {

 export function NodeSpaceAllocation() {
  const { data: space, isPending } = useQuery({
-    queryFn: () => CodexSdk.data.space().then((s) => Promises.rejectOnError(s)),
+    queryFn: () =>
+      CodexSdk.data()
+        .space()
+        .then((s) => Promises.rejectOnError(s)),
    queryKey: ["space"],
    initialData: defaultSpace,

--- a/src/components/StorageRequestSetup/StorageRequestFileChooser.tsx
+++ b/src/components/StorageRequestSetup/StorageRequestFileChooser.tsx
@ -95,7 +95,7 @@ export function StorageRequestFileChooser({
        onSuccess={onSuccess}
        editable={false}
        onDeleteItem={onDelete}
-        codexData={CodexSdk.data}
+        codexData={CodexSdk.data()}
        successMessage={"Success, the CID has been copied to the field on top."}
      />
    </>
--- a/src/components/StorageRequestSetup/useStorageRequestMutation.ts
+++ b/src/components/StorageRequestSetup/useStorageRequestMutation.ts
@ -18,7 +18,7 @@ export function useStorageRequestMutation(

  const { mutateAsync } = useMutation({
    mutationFn: (input: CodexCreateStorageRequestInput) =>
-      CodexSdk.marketplace
+      CodexSdk.marketplace()
        .createStorageRequest(input)
        .then((s) => Promises.rejectOnError(s)),
    onSuccess: async () => {
--- a/src/hooks/useData.tsx
+++ b/src/hooks/useData.tsx
@ -7,7 +7,9 @@ export function useData() {
  const { data = { content: [] } satisfies CodexDataResponse } =
    useQuery<CodexDataResponse>({
      queryFn: () =>
-        CodexSdk.data.cids().then((res) => Promises.rejectOnError(res)),
+        CodexSdk.data()
+          .cids()
+          .then((res) => Promises.rejectOnError(res)),
      queryKey: ["cids"],

      initialData: { content: [] } satisfies CodexDataResponse,
--- a/src/proxy.ts
+++ b/src/proxy.ts
@ -180,6 +180,6 @@ class CodexMarketplaceMock extends CodexMarketplace {

 export const CodexSdk = {
  ...Sdk,
-  marketplace: new CodexMarketplaceMock(import.meta.env.VITE_CODEX_API_URL),
-  data: new CodexDataMock(import.meta.env.VITE_CODEX_API_URL),
+  marketplace: () => new CodexMarketplaceMock(CodexSdk.url()),
+  data: () => new CodexDataMock(CodexSdk.url()),
 };
--- a/src/routes/dashboard/availabilities.tsx
+++ b/src/routes/dashboard/availabilities.tsx
@ -33,7 +33,7 @@ export function Availabilities() {
      AvailabilityWithSlots[]
    >({
      queryFn: () =>
-        CodexSdk.marketplace
+        CodexSdk.marketplace()
          .availabilities()
          .then((s) => Promises.rejectOnError(s))
          .then((res) => res.sort((a, b) => b.totalSize - a.totalSize))
@ -84,7 +84,9 @@ export function Availabilities() {
    // Error will be catched in ErrorBounday
    const { data: space = defaultSpace } = useQuery({
      queryFn: () =>
-        CodexSdk.data.space().then((s) => Promises.rejectOnError(s)),
+        CodexSdk.data()
+          .space()
+          .then((s) => Promises.rejectOnError(s)),
      queryKey: ["space"],
      initialData: defaultSpace,

--- a/src/routes/dashboard/index.tsx
+++ b/src/routes/dashboard/index.tsx
@ -29,7 +29,11 @@ function About() {
            />
          )}>
          <Card title="Upload a file">
-            <Upload multiple codexData={CodexSdk.data} onSuccess={onSuccess} />
+            <Upload
+              multiple
+              codexData={CodexSdk.data()}
+              onSuccess={onSuccess}
+            />
          </Card>
        </ErrorBoundary>

--- a/src/routes/dashboard/purchases.tsx
+++ b/src/routes/dashboard/purchases.tsx
@ -20,7 +20,9 @@ import { ErrorBoundary } from "@sentry/react";
 const Purchases = () => {
  const { data, isPending } = useQuery({
    queryFn: () =>
-      CodexSdk.marketplace.purchases().then((s) => Promises.rejectOnError(s)),
+      CodexSdk.marketplace()
+        .purchases()
+        .then((s) => Promises.rejectOnError(s)),
    queryKey: ["purchases"],

    // No need to retry because if the connection to the node
--- a/src/sdk/codex.ts
+++ b/src/sdk/codex.ts
@ -23,11 +23,19 @@ export const CodexSdk = {
    return WebStorage.set("codex-node-url", url);
  },

-  debug: client.debug,
+  debug() {
+    return client.debug
+  },

-  data: client.data,
+  data() {
+    return client.data
+  },

-  node: client.node,
+  node() {
+    return client.node
+  },

-  marketplace: client.marketplace,
+  marketplace() {
+    return client.marketplace
+  },
 };