) => {
const val = { ...storageRequest, ...data };
- WebStorage.set("storage-request", val);
+ WebStorage.set("storage-request-3", val);
setStorageRequest(val);
};
diff --git a/src/components/StorageRequestSetup/StorageRequestReview.tsx b/src/components/StorageRequestSetup/StorageRequestReview.tsx
index 639a0f7..787e382 100644
--- a/src/components/StorageRequestSetup/StorageRequestReview.tsx
+++ b/src/components/StorageRequestSetup/StorageRequestReview.tsx
@@ -14,6 +14,7 @@ import CommitmentIcon from "../../assets/icons/commitment.svg?react";
import RequestDurationIcon from "../../assets/icons/request-duration.svg?react";
import { attributes } from "../../utils/attributes";
import { Strings } from "../../utils/strings";
+import { Commitment } from "./Commitment";
type Durability = {
nodes: number;
@@ -27,6 +28,8 @@ const durabilities = [
{ nodes: 5, tolerance: 2, proofProbability: 4 },
];
+const TESTNET_MAX_VALUE = 7;
+
const findDurabilityIndex = (d: Durability) => {
const s = JSON.stringify({
nodes: d.nodes,
@@ -57,10 +60,10 @@ export function StorageRequestReview({
);
useEffect(() => {
- const invalid = isInvalidConstrainst(
- storageRequest.nodes,
- storageRequest.tolerance
- );
+ const invalid =
+ isInvalidConstrainst(storageRequest.nodes, storageRequest.tolerance) ||
+ storageRequest.availability > TESTNET_MAX_VALUE ||
+ storageRequest.availability == 0;
dispatch({
type: "toggle-buttons",
@@ -133,26 +136,29 @@ export function StorageRequestReview({
const isInvalidAvailability = (data: string) => {
const [value] = data.split(" ");
- const error = isInvalidNumber(value);
+ const error =
+ isInvalidNumber(value) ||
+ isInvalidAvailabilityNumber(value) ||
+ isRequiredNumber(value);
if (error) {
return error;
}
- // if (!unit.endsWith("s")) {
- // unit += "s";
- // }
-
- // if (!units.includes(unit)) {
- // return "Invalid unit must one of: minutes, hours, days, months, years";
- // }
-
return "";
};
const isInvalidNumber = (value: string) =>
isNaN(Number(value)) ? "The value is not a number" : "";
+ const isRequiredNumber = (value: string) =>
+ value == "0" ? "The value has to be more than 0." : "";
+
+ const isInvalidAvailabilityNumber = (value: string) =>
+ parseInt(value, 10) > TESTNET_MAX_VALUE
+ ? "The maximum value is on the current Testnet is 7 days"
+ : "";
+
const onNodesChange = (value: string) =>
onUpdateDurability({ nodes: Number(value) });
@@ -162,16 +168,12 @@ export function StorageRequestReview({
const onProofProbabilityChange = (value: string) =>
onUpdateDurability({ proofProbability: Number(value) });
- const onAvailabilityChange = (value: string) => {
+ const onAvailabilityChange = (value: string, unit: "days" | "months") => {
const [availability] = value.split(" ");
- // if (!availabilityUnit.endsWith("s")) {
- // availabilityUnit += "s";
- // }
-
onStorageRequestChange({
availability: Number(availability),
- availabilityUnit: "months",
+ availabilityUnit: unit,
});
};
@@ -184,18 +186,6 @@ export function StorageRequestReview({
const onCollateralChange = (value: string) =>
onStorageRequestChange({ collateral: Number(value) });
- // const pluralizeUnit = () => {
- // if (data.availability > 1 && !data.availabilityUnit.endsWith("s")) {
- // return data.availability + " " +data.availabilityUnit + "s";
- // }
-
- // if (data.availability <= 1 && data.availabilityUnit.endsWith("s")) {
- // return data.availabilityUnit.slice(0, -1);
- // }
-
- // return data.availabilityUnit;
- // };
-
const availability = storageRequest.availability;
return (
@@ -286,22 +276,19 @@ export function StorageRequestReview({
-
+ onValidation={isInvalidAvailability}>
+ title="Penality tokens">
+ title="Reward tokens for hosts">
diff --git a/src/components/StorageRequestSetup/types.ts b/src/components/StorageRequestSetup/types.ts
index 5a64ff3..c459698 100644
--- a/src/components/StorageRequestSetup/types.ts
+++ b/src/components/StorageRequestSetup/types.ts
@@ -16,29 +16,14 @@ export type StoragePriceStepValue = {
expiration: number;
};
-export type StorageAvailabilityUnit =
- | "days"
- | "months"
- | "years"
- | "minutes"
- | "hours";
-
export type StorageAvailabilityValue = {
value: number;
- unit: StorageAvailabilityUnit;
};
-export type AvailabilityUnit =
- | "days"
- | "months"
- | "years"
- | "minutes"
- | "hours";
-
export type StorageRequest = {
cid: string;
availability: number;
- availabilityUnit: AvailabilityUnit;
+ availabilityUnit: "months" | "days";
tolerance: number;
proofProbability: number;
nodes: number;
diff --git a/src/components/StorageRequestSetup/useStorageRequestMutation.ts b/src/components/StorageRequestSetup/useStorageRequestMutation.ts
index 1c349a6..322a865 100644
--- a/src/components/StorageRequestSetup/useStorageRequestMutation.ts
+++ b/src/components/StorageRequestSetup/useStorageRequestMutation.ts
@@ -29,7 +29,7 @@ export function useStorageRequestMutation(
// }
WebStorage.delete("storage-request-step");
- WebStorage.delete("storage-request");
+ WebStorage.delete("storage-request-3");
setError(null);
diff --git a/src/hooks/usePersistence.tsx b/src/hooks/usePersistence.tsx
index b66d68d..7546f11 100644
--- a/src/hooks/usePersistence.tsx
+++ b/src/hooks/usePersistence.tsx
@@ -9,7 +9,7 @@ export function usePersistence(isCodexOnline: boolean) {
queryKey: [],
queryFn: async () => {
return CodexSdk.marketplace()
- .purchases()
+ .activeSlots()
.then((data) => Promises.rejectOnError(data, report));
},
diff --git a/src/routes/dashboard/availabilities.css b/src/routes/dashboard/availabilities.css
index 3e7af3f..4898d1d 100644
--- a/src/routes/dashboard/availabilities.css
+++ b/src/routes/dashboard/availabilities.css
@@ -6,6 +6,12 @@
> .card {
flex: 1 1 50%;
+
+ @media (max-width: 800px) {
+ & {
+ flex: 1 1 100%;
+ }
+ }
}
.table {
diff --git a/src/routes/dashboard/availabilities.tsx b/src/routes/dashboard/availabilities.tsx
index e1a960f..20d83f1 100644
--- a/src/routes/dashboard/availabilities.tsx
+++ b/src/routes/dashboard/availabilities.tsx
@@ -10,7 +10,7 @@ import "./availabilities.css";
import { AvailabilitiesTable } from "../../components/Availability/AvailabilitiesTable";
import { AvailabilityEdit } from "../../components/Availability/AvailabilityEdit";
import { Strings } from "../../utils/strings";
-import { PrettyBytes } from "../../utils/bytes";
+import { Bytes } from "../../utils/bytes";
import { Sunburst } from "../../components/Availability/Sunburst";
import { Errors } from "../../utils/errors";
import { AvailabilityWithSlots } from "../../components/Availability/types";
@@ -111,7 +111,7 @@ export function AvailabilitiesRoute() {
(a, index) => ({
title: Strings.shortId(a.id),
size: a.totalSize,
- tooltip: a.id + "\u000D\u000A" + PrettyBytes(a.totalSize),
+ tooltip: a.id + "\u000D\u000A" + Bytes.pretty(a.totalSize),
color: AvailabilityUtils.availabilityColors[index],
})
);
@@ -170,7 +170,7 @@ export function AvailabilitiesRoute() {
diff --git a/src/routes/dashboard/logs.css b/src/routes/dashboard/logs.css
index 75b83f8..653c501 100644
--- a/src/routes/dashboard/logs.css
+++ b/src/routes/dashboard/logs.css
@@ -35,8 +35,19 @@
}
.button {
- width: 187px;
gap: 8px;
+
+ @media (min-width: 801px) {
+ & {
+ width: 187px;
+ }
+ }
+
+ @media (max-width: 800px) {
+ span {
+ display: none;
+ }
+ }
}
}
diff --git a/src/routes/dashboard/peers.css b/src/routes/dashboard/peers.css
index beaf10f..851cf1e 100644
--- a/src/routes/dashboard/peers.css
+++ b/src/routes/dashboard/peers.css
@@ -175,4 +175,12 @@
.gauge {
margin: auto;
}
+
+ @media (max-width: 800px) {
+ .peers-chart {
+ transform: scale(0.8);
+ margin: auto;
+ left: 0;
+ }
+ }
}
diff --git a/src/routes/root.css b/src/routes/root.css
index bc2ccfb..d2ef3bd 100644
--- a/src/routes/root.css
+++ b/src/routes/root.css
@@ -8,9 +8,9 @@
background-color: rgb(20, 20, 20);
> div {
- padding: 16px;
+ padding: 8px;
- @media (min-width: 1000px) {
+ @media (min-width: 800px) {
padding: 24px 48px;
}
}
diff --git a/src/utils/bytes.test.ts b/src/utils/bytes.test.ts
new file mode 100644
index 0000000..1c7f3e6
--- /dev/null
+++ b/src/utils/bytes.test.ts
@@ -0,0 +1,12 @@
+import { assert, describe, it } from "vitest";
+import { Bytes } from "./bytes";
+import { GB } from "./constants";
+
+describe("bytes", () => {
+ it("display the bytes", async () => {
+ assert.equal(Bytes.pretty(0), "0 B");
+ assert.equal(Bytes.pretty(512), "512.0 B");
+ assert.equal(Bytes.pretty(1025), "1.0 KB");
+ assert.equal(Bytes.pretty(GB), "1.0 GB");
+ });
+})
\ No newline at end of file
diff --git a/src/utils/bytes.ts b/src/utils/bytes.ts
index 7cf307a..a3171fe 100644
--- a/src/utils/bytes.ts
+++ b/src/utils/bytes.ts
@@ -1,14 +1,17 @@
-export const PrettyBytes = (bytes: number) => {
- const sizes = ["bytes", "KB", "MB", "GB", "TB"];
- if (bytes == 0) {
- return "0 b";
+export const Bytes = {
+ pretty(bytes: number) {
+ const sizes = ["B", "KB", "MB", "GB", "TB"];
+ if (bytes == 0) {
+ return "0 B";
+ }
+
+ const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)).toString());
+
+ if (i == 0) {
+ return bytes.toFixed(1) + " " + sizes[i];
+ }
+
+ return (bytes / Math.pow(1024, i)).toFixed(1) + " " + sizes[i];
}
- const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)).toString());
-
- if (i == 0) {
- return bytes + " " + sizes[i];
- }
-
- return (bytes / Math.pow(1024, i)).toFixed(1) + " " + sizes[i];
-};
+}
\ No newline at end of file
diff --git a/src/utils/times.test.ts b/src/utils/times.test.ts
new file mode 100644
index 0000000..e2cb3e2
--- /dev/null
+++ b/src/utils/times.test.ts
@@ -0,0 +1,28 @@
+import { assert, describe, it } from "vitest";
+import { Times } from "./times";
+
+describe("times", () => {
+ it("display the times", async () => {
+ assert.equal(Times.pretty(0), "0 second");
+ assert.equal(Times.pretty(2), "2 seconds");
+ assert.equal(Times.pretty(60), "1 minute");
+ assert.equal(Times.pretty(90), "1.5 minutes");
+ assert.equal(Times.pretty(3600), "1 hour");
+ assert.equal(Times.pretty(3600 * 2), "2 hours");
+ assert.equal(Times.pretty(3600 * 24), "1 day");
+ assert.equal(Times.pretty(3600 * 36), "1.5 days");
+ assert.equal(Times.pretty(3600 * 24 * 30), "1 month");
+ });
+
+ it("guess the time unit", async () => {
+ assert.equal(Times.unit(0), "hours");
+ assert.equal(Times.unit(3600 * 24), "days");
+ assert.equal(Times.unit(3600 * 24 * 30), "months");
+ })
+
+ it("get the seconds for a time unit given", async () => {
+ assert.equal(Times.value("hours"), 3600);
+ assert.equal(Times.value("days"), 3600 * 24);
+ assert.equal(Times.value("months"), 3600 * 24 * 30);
+ })
+})
\ No newline at end of file
diff --git a/src/utils/times.ts b/src/utils/times.ts
index 1ff5c4d..055513b 100644
--- a/src/utils/times.ts
+++ b/src/utils/times.ts
@@ -6,31 +6,33 @@ export type TimesUnit =
| "hours"
| "seconds";
-const plural = (value: number, unit: TimesUnit) =>
- value > 1 ? value + ` ${unit}` : value + ` ${unit.slice(0, -1)}`;
+const plural = (value: number, unit: TimesUnit) => {
+ const val = Number.isInteger(value) ? value : value.toFixed(1)
+ return value > 1 ? val + ` ${unit}` : val + ` ${unit.slice(0, -1)}`;
+}
export const Times = {
toSeconds(value: number, unit: TimesUnit) {
- let seconds = value;
+ let val = value;
/* eslint-disable no-fallthrough */
switch (unit) {
// @ts-expect-error - We don't want to break
case "years":
- seconds *= 365;
+ val *= 365;
// @ts-expect-error - We don't want to break
case "months":
- seconds *= 30;
+ val *= 30;
// @ts-expect-error - We don't want to break
case "days":
- seconds *= 24;
+ val *= 24;
// @ts-expect-error - We don't want to break
case "hours":
- seconds *= 60;
+ val *= 60;
case "minutes":
- seconds *= 60;
+ val *= 60;
}
- return seconds;
+ return val;
},
pretty(value: number) {
@@ -62,7 +64,7 @@ export const Times = {
return plural(value, "seconds");
},
- unit(value: number) {
+ unit(value: number): "months" | "days" | "hours" {
let seconds = 30 * 24 * 60 * 60;
if (value >= seconds) {
@@ -77,7 +79,7 @@ export const Times = {
return "hours"
},
- unitValue(unit: "hours" | "days" | "months") {
+ value(unit: "hours" | "days" | "months") {
switch (unit) {
case "months": {
return 30 * 24 * 60 * 60
@@ -90,4 +92,5 @@ export const Times = {
}
}
}
+
};