-
-
-
-
-
-
+
diff --git a/src/components/Availability/AvailabilityReservations.tsx b/src/components/Availability/AvailabilityReservations.tsx
index 6354d29..4b55d92 100644
--- a/src/components/Availability/AvailabilityReservations.tsx
+++ b/src/components/Availability/AvailabilityReservations.tsx
@@ -11,14 +11,14 @@ import { Promises } from "../../utils/promises";
import { CodexAvailability } from "@codex-storage/sdk-js";
import { useEffect } from "react";
import { ErrorPlaceholder } from "../ErrorPlaceholder/ErrorPlaceholder";
-import { availabilityColors } from "./availability.colors";
+import { AvailabilityUtils } from "./availability.utils";
type Props = {
availability: CodexAvailability | null;
open: boolean;
onClose: () => unknown;
};
-// TODO remove this
+
export function AvailabilityReservations({
availability,
onClose,
@@ -95,12 +95,15 @@ export function AvailabilityReservations({
...data.map((val, index) => ({
title: val.id,
size: parseInt(val.size, 10),
- color: availabilityColors[index],
+ color: AvailabilityUtils.availabilityColors[index],
})),
{
title: "Sale space remaining",
size: totalSize - totalUsed,
- color: availabilityColors[availabilityColors.length - 1],
+ color:
+ AvailabilityUtils.availabilityColors[
+ AvailabilityUtils.availabilityColors.length - 1
+ ],
},
];
const isEmpty = !data.length;
diff --git a/src/components/Availability/AvailabilitySheetCreate.tsx b/src/components/Availability/AvailabilitySheetCreate.tsx
deleted file mode 100644
index fb7ca19..0000000
--- a/src/components/Availability/AvailabilitySheetCreate.tsx
+++ /dev/null
@@ -1,164 +0,0 @@
-import {
- Stepper,
- useStepperReducer,
- Button,
- Modal,
-} from "@codex-storage/marketplace-ui-components";
-import { useEffect, useRef, useState } from "react";
-import { AvailabilityForm } from "./AvailabilityForm";
-import { Plus } from "lucide-react";
-import { CodexNodeSpace } from "@codex-storage/sdk-js";
-import { AvailabilityConfirm } from "./AvailabilityConfirmation";
-import { WebStorage } from "../../utils/web-storage";
-import { AvailabilityState } from "./types";
-import { STEPPER_DURATION } from "../../utils/constants";
-import { useAvailabilityMutation } from "./useAvailabilityMutation";
-import { AvailabilitySuccess } from "./AvailabilitySuccess";
-import { AvailabilityError } from "./AvailabilityError";
-import "./AvailabilityCreate.css";
-
-type Props = {
- space: CodexNodeSpace;
- hasLabel?: boolean;
- className?: string;
-};
-
-const CONFIRM_STATE = 2;
-
-const defaultAvailabilityData: AvailabilityState = {
- totalSize: 1,
- duration: 1,
- minPrice: 0,
- maxCollateral: 0,
- totalSizeUnit: "gb",
- durationUnit: "days",
-};
-
-export function AvailabilitySheetCreate({
- space,
- className = "",
- hasLabel = true,
-}: Props) {
- const steps = useRef(["Sale", "Confirmation", "Success"]);
- const [availability, setAvailability] = useState
(
- defaultAvailabilityData
- );
- const { state, dispatch } = useStepperReducer();
- const { mutateAsync, error } = useAvailabilityMutation(dispatch, state);
-
- useEffect(() => {
- Promise.all([
- WebStorage.get("availability-step"),
- WebStorage.get("availability"),
- ]).then(([s, a]) => {
- if (s) {
- dispatch({
- type: "next",
- step: s,
- });
- }
-
- if (a) {
- setAvailability(a);
- }
- });
- }, [dispatch]);
-
- const components = [
- AvailabilityForm,
- AvailabilityConfirm,
- error ? AvailabilityError : AvailabilitySuccess,
- ];
-
- const onNextStep = async (step: number) => {
- if (step === components.length) {
- setAvailability(defaultAvailabilityData);
-
- dispatch({
- step: 0,
- type: "next",
- });
-
- dispatch({
- type: "close",
- });
-
- return;
- }
-
- WebStorage.set("availability-step", step);
-
- if (step == CONFIRM_STATE) {
- mutateAsync(availability);
- } else {
- dispatch({
- step,
- type: "next",
- });
- }
- };
-
- const onAvailabilityChange = (data: Partial) => {
- const val = { ...availability, ...data };
-
- WebStorage.set("availability", val);
-
- setAvailability(val);
- };
-
- const onOpen = () => {
- if (availability.id) {
- WebStorage.set("availability-step", 0);
- WebStorage.set("availability", defaultAvailabilityData);
-
- setAvailability(defaultAvailabilityData);
- }
-
- dispatch({
- type: "open",
- });
-
- dispatch({
- step: 0,
- type: "next",
- });
- };
-
- const onClose = () => dispatch({ type: "close" });
-
- const Body = components[state.step] || (() => );
- const backLabel = state.step ? "Back" : "Close";
- const nextLabel = state.step === steps.current.length - 1 ? "Finish" : "Next";
-
- return (
- <>
-
-
-
-
-
-
-
-
- );
-}
diff --git a/src/components/Availability/AvailabilitySpaceAllocation.css b/src/components/Availability/AvailabilitySpaceAllocation.css
deleted file mode 100644
index f5f3d3e..0000000
--- a/src/components/Availability/AvailabilitySpaceAllocation.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.availabilitySpaceAllocation-title {
- margin-left: auto;
- margin-right: auto;
- margin-bottom: 1rem;
-}
diff --git a/src/components/Availability/AvailabilitySpaceAllocation.tsx b/src/components/Availability/AvailabilitySpaceAllocation.tsx
deleted file mode 100644
index b3495fe..0000000
--- a/src/components/Availability/AvailabilitySpaceAllocation.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { CodexNodeSpace } from "@codex-storage/sdk-js";
-import { AvailabilityState } from "./types";
-import { SpaceAllocation } from "@codex-storage/marketplace-ui-components";
-import "./AvailabilitySpaceAllocation.css";
-import { nodeSpaceAllocationColors } from "../NodeSpace/nodeSpace.domain";
-
-type Props = {
- space: CodexNodeSpace;
- availability: AvailabilityState;
-};
-
-export function AvailabilitySpaceAllocation({ availability, space }: Props) {
- const { quotaMaxBytes, quotaReservedBytes, quotaUsedBytes } = space;
- const isUpdating = !!availability.id;
- const allocated = isUpdating
- ? quotaReservedBytes - availability.totalSize + quotaUsedBytes
- : quotaReservedBytes + quotaUsedBytes;
- const remaining =
- availability.totalSize > quotaMaxBytes - allocated
- ? quotaMaxBytes - allocated
- : quotaMaxBytes - allocated - availability.totalSize;
-
- const spaceData = [
- {
- title: "Space allocated",
- size: Math.trunc(allocated),
- color: nodeSpaceAllocationColors[0],
- },
- {
- title: "New space allocation",
- size: Math.trunc(availability.totalSize),
- color: nodeSpaceAllocationColors[1],
- },
- {
- title: "Remaining space",
- size: Math.trunc(remaining),
- color: nodeSpaceAllocationColors[nodeSpaceAllocationColors.length - 1],
- },
- ];
-
- return (
- <>
- Node space allocation
-
-
-
- );
-}
diff --git a/src/components/Availability/AvailabilitySuccess.tsx b/src/components/Availability/AvailabilitySuccess.tsx
index 646d2b2..9bc22c0 100644
--- a/src/components/Availability/AvailabilitySuccess.tsx
+++ b/src/components/Availability/AvailabilitySuccess.tsx
@@ -1,7 +1,7 @@
import { Placeholder } from "@codex-storage/marketplace-ui-components";
-import { SuccessIcon } from "../SuccessIcon/SuccessIcon";
import { AvailabilityComponentProps } from "./types";
import { useEffect } from "react";
+import SuccessCircleIcon from "../../assets/icons/success-circle.svg?react";
export function AvailabilitySuccess({ dispatch }: AvailabilityComponentProps) {
useEffect(() => {
@@ -14,7 +14,7 @@ export function AvailabilitySuccess({ dispatch }: AvailabilityComponentProps) {
return (
}
+ Icon={}
title="Success"
message="The new sale will appear in your sale list. You can safely close this dialog.">
);
diff --git a/src/components/Availability/Sunburst.css b/src/components/Availability/Sunburst.css
index 80d6ecd..84ce893 100644
--- a/src/components/Availability/Sunburst.css
+++ b/src/components/Availability/Sunburst.css
@@ -1,5 +1,3 @@
.sunburst {
- height: 350px;
- width: 350px;
margin: auto;
}
diff --git a/src/components/Availability/Sunburst.tsx b/src/components/Availability/Sunburst.tsx
index 31608fd..c0950c5 100644
--- a/src/components/Availability/Sunburst.tsx
+++ b/src/components/Availability/Sunburst.tsx
@@ -4,16 +4,24 @@ import { Strings } from "../../utils/strings";
import { PrettyBytes } from "../../utils/bytes";
import { useEffect, useRef, useState } from "react";
import { CallbackDataParams, ECBasicOption } from "echarts/types/dist/shared";
-import * as echarts from "echarts";
-import { availabilityColors, slotColors } from "./availability.colors";
+import * as echarts from "echarts/core";
+
+// Import bar charts, all suffixed with Chart
+import { SunburstChart } from "echarts/charts";
import { AvailabilityWithSlots } from "./types";
import "./Sunburst.css";
+import { AvailabilityUtils } from "./availability.utils";
type Props = {
availabilities: AvailabilityWithSlots[];
space: CodexNodeSpace;
};
+import { TooltipComponent } from "echarts/components";
+import { SVGRenderer } from "echarts/renderers";
+
+echarts.use([SunburstChart, TooltipComponent, SVGRenderer]);
+
export function Sunburst({ availabilities, space }: Props) {
const div = useRef(null);
const chart = useRef(null);
@@ -33,7 +41,7 @@ export function Sunburst({ availabilities, space }: Props) {
name: Strings.shortId(a.id),
value: a.totalSize,
itemStyle: {
- color: availabilityColors[index],
+ color: AvailabilityUtils.availabilityColors[index],
borderColor: "transparent",
},
tooltip: {
@@ -66,7 +74,7 @@ export function Sunburst({ availabilities, space }: Props) {
value: parseFloat(slot.size),
children: [],
itemStyle: {
- color: slotColors[index],
+ color: AvailabilityUtils.slotColors[index],
borderColor: "transparent",
},
tooltip: {
@@ -87,80 +95,80 @@ export function Sunburst({ availabilities, space }: Props) {
};
});
- const option: ECBasicOption = {
- series: {
- type: "sunburst",
- data: [
- ...data,
- {
- name: "Space remaining",
- value:
- space.quotaMaxBytes -
- space.quotaReservedBytes -
- space.quotaUsedBytes,
- children: [],
- itemStyle: {
- color: "#2F2F2F",
- borderColor: "transparent",
- },
- tooltip: {
- backgroundColor: "#333",
- textStyle: {
- color: "#fff",
- },
- formatter: (params: CallbackDataParams) => {
- return (
- params.marker +
- " Space remaining " +
- PrettyBytes(
- space.quotaMaxBytes -
- space.quotaReservedBytes -
- space.quotaUsedBytes
- )
- );
- },
- },
- },
- ],
- radius: [60, "90%"],
- itemStyle: {
- borderWidth: 1,
- },
- label: {
- show: false,
- },
- levels: [
- {},
- {
- r0: "35%",
- r: "70%",
- label: {
- align: "right",
- },
- },
- {
- r0: "75%",
- r: "85%",
- itemStyle: {},
- label: {
- position: "outside",
- textShadowBlur: 5,
- textShadowColor: "#333",
- },
- downplay: {
- label: {
- opacity: 1,
- },
- },
- },
- ],
- },
- tooltip: {
- // type: "item",
- },
- };
-
if (chart.current) {
+ const option: ECBasicOption = {
+ series: {
+ type: "sunburst",
+ data: [
+ ...data,
+ {
+ name: "Space remaining",
+ value:
+ space.quotaMaxBytes -
+ space.quotaReservedBytes -
+ space.quotaUsedBytes,
+ children: [],
+ itemStyle: {
+ color: "#2F2F2F",
+ borderColor: "transparent",
+ },
+ tooltip: {
+ backgroundColor: "#333",
+ textStyle: {
+ color: "#fff",
+ },
+ formatter: (params: CallbackDataParams) => {
+ return (
+ params.marker +
+ " Space remaining " +
+ PrettyBytes(
+ space.quotaMaxBytes -
+ space.quotaReservedBytes -
+ space.quotaUsedBytes
+ )
+ );
+ },
+ },
+ },
+ ],
+ radius: [60, "90%"],
+ itemStyle: {
+ borderWidth: 1,
+ },
+ label: {
+ show: false,
+ },
+ levels: [
+ {},
+ {
+ r0: "35%",
+ r: "70%",
+ label: {
+ align: "right",
+ },
+ },
+ {
+ r0: "75%",
+ r: "85%",
+ itemStyle: {},
+ label: {
+ position: "outside",
+ textShadowBlur: 5,
+ textShadowColor: "#333",
+ },
+ downplay: {
+ label: {
+ opacity: 1,
+ },
+ },
+ },
+ ],
+ },
+ tooltip: {
+ // type: "item",
+ },
+ };
+
chart.current.setOption(option);
// chart.current.off("click");
// chart.current.on("click", function (params) {
@@ -180,5 +188,16 @@ export function Sunburst({ availabilities, space }: Props) {
// });
}
- return ;
+ const size = window.innerWidth > 500 ? 350 : 300;
+
+ return (
+
+ );
}
diff --git a/src/components/Availability/availability.colors.ts b/src/components/Availability/availability.colors.ts
deleted file mode 100644
index be484b2..0000000
--- a/src/components/Availability/availability.colors.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-export const availabilityColors = [
- "#34A0FFFF",
- "#34A0FFEE",
- "#34A0FFDD",
- "#34A0FFCC",
- "#34A0FFBB",
- "#34A0FFAA",
- "#34A0FF99",
-];
-
-export const slotColors = [
- "#D2493CFF",
- "#D2493CEE",
- "#D2493CDD",
- "#D2493CCC",
- "#D2493CBB",
- "#D2493CAA",
- "#D2493C99",
-];
\ No newline at end of file
diff --git a/src/components/Availability/availability.domain.ts b/src/components/Availability/availability.domain.ts
deleted file mode 100644
index 199d867..0000000
--- a/src/components/Availability/availability.domain.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import { CodexNodeSpace } from "@codex-storage/sdk-js";
-import { GB, TB } from "../../utils/constants";
-import { AvailabilityState } from "./types";
-
-export class AvailabilityDomain {
- space: CodexNodeSpace
- state: AvailabilityState
-
- constructor(space: CodexNodeSpace, availability: AvailabilityState) {
- this.space = space
- this.state = availability
- }
-
- get unitInBytes() {
- return this.state.totalSizeUnit === "gb" ? GB : TB;
- }
-
- get unit() {
- return this.state.totalSizeUnit;
- }
-
- get sizeInUnit() {
- return this.state.totalSize
- }
-
- get maxInBytes() {
- return this.space.quotaMaxBytes - this.space.quotaReservedBytes - this.space.quotaUsedBytes
- }
-
- get maxInUnit() {
- return this.maxInBytes / this.unitInBytes / this.unitInBytes
- }
-
- isValid() {
- const size = this.state.totalSize * this.unitInBytes;
-
- return size > 0 && size <= this.maxInBytes;
- }
-}
-
-export const isAvailabilityValid = (
- availability: AvailabilityState,
- max: number
-) => availability.totalSize > 0 && availability.totalSize <= max;
-
-
diff --git a/src/components/Availability/availability.utils.test.ts b/src/components/Availability/availability.utils.test.ts
index e883fbe..645ed75 100644
--- a/src/components/Availability/availability.utils.test.ts
+++ b/src/components/Availability/availability.utils.test.ts
@@ -1,5 +1,8 @@
import { assert, describe, it } from "vitest";
import { AvailabilityUtils } from "./availability.utils";
+import { GB, TB } from "../../utils/constants";
+import { CodexNodeSpace } from "@codex-storage/sdk-js";
+import { AvailabilityState } from "./types";
describe("files", () => {
it("sorts by id", async () => {
@@ -156,4 +159,35 @@ describe("files", () => {
assert.deepEqual(ascSorted, [a, b]);
});
+
+ it("returns the number of bytes per unit", async () => {
+ assert.deepEqual(AvailabilityUtils.toUnit(GB, "gb"), 1);
+ assert.deepEqual(AvailabilityUtils.toUnit(TB, "tb"), 1);
+ })
+
+
+ it("returns the max value possible for an availability", async () => {
+ const space: CodexNodeSpace = {
+ quotaMaxBytes: 8 * GB,
+ quotaReservedBytes: 2 * GB,
+ quotaUsedBytes: GB,
+ totalBlocks: 0
+ }
+ assert.deepEqual(AvailabilityUtils.maxValue(space), 5 * GB);
+ })
+
+ it("checks the availability max value", async () => {
+ const availability = {
+ totalSize: GB
+ } as AvailabilityState
+ assert.deepEqual(AvailabilityUtils.isValid(availability, GB * 2), true);
+ assert.deepEqual(AvailabilityUtils.isValid({ ...availability, totalSize: -1 }, GB), false);
+ assert.deepEqual(AvailabilityUtils.isValid({ ...availability, totalSize: 2 * GB }, GB), false);
+ })
+
+ it("toggles item in array", async () => {
+ const array: string[] = []
+ assert.deepEqual(AvailabilityUtils.toggle(array, "1"), ["1"]);
+ assert.deepEqual(AvailabilityUtils.toggle(AvailabilityUtils.toggle(array, "1"), "1"), []);
+ })
})
\ No newline at end of file
diff --git a/src/components/Availability/availability.utils.ts b/src/components/Availability/availability.utils.ts
index 28c5ae7..464c600 100644
--- a/src/components/Availability/availability.utils.ts
+++ b/src/components/Availability/availability.utils.ts
@@ -48,5 +48,45 @@ export const AvailabilityUtils = {
availability: AvailabilityState,
max: number
) => availability.totalSize > 0 && availability.totalSize <= max
+ ,
+ toggle: (arr: Array, value: T) =>
+ arr.includes(value) ? arr.filter(i => i !== value) : [...arr, value],
+ availabilityColors: [
+ "#34A0FFFF",
+ "#34A0FFEE",
+ "#34A0FFDD",
+ "#34A0FFCC",
+ "#34A0FFBB",
+ "#34A0FFAA",
+ "#34A0FF99",
+ "#34A0FF88",
+ "#34A0FF77",
+ "#34A0FF66",
+ "#34A0FF55",
+ "#34A0FF44",
+ "#34A0FF33",
+ "#34A0FF22",
+ "#34A0FF11",
+ "#34A0FF00",
+ ],
+
+ slotColors: [
+ "#D2493CFF",
+ "#D2493CEE",
+ "#D2493CDD",
+ "#D2493CCC",
+ "#D2493CBB",
+ "#D2493CAA",
+ "#D2493C99",
+ "#D2493C88",
+ "#D2493C77",
+ "#D2493C66",
+ "#D2493C55",
+ "#D2493C44",
+ "#D2493C33",
+ "#D2493C22",
+ "#D2493C11",
+ "#D2493C00",
+ ]
}
\ No newline at end of file
diff --git a/src/components/CardNumbers/CardNumbers.tsx b/src/components/CardNumbers/CardNumbers.tsx
index 03aa7f7..4b2896e 100644
--- a/src/components/CardNumbers/CardNumbers.tsx
+++ b/src/components/CardNumbers/CardNumbers.tsx
@@ -58,34 +58,6 @@ export function CardNumbers({
{unit}
-
- {/*
- {error ? (
- {error}
- ) : (
- {helper}
- )} */}
);
}
diff --git a/src/components/ConnectedAccount/ConnectedAccount.css b/src/components/ConnectedAccount/ConnectedAccount.css
index 55f6c46..299f46d 100644
--- a/src/components/ConnectedAccount/ConnectedAccount.css
+++ b/src/components/ConnectedAccount/ConnectedAccount.css
@@ -2,7 +2,7 @@
border-radius: 8px;
display: flex;
flex-direction: column;
- min-width: 550px;
+ /* min-width: 550px; */
main {
flex: 1;
diff --git a/src/components/ConnectedAccount/ProgressCircle.tsx b/src/components/ConnectedAccount/ProgressCircle.tsx
index 1137d1b..652b39b 100644
--- a/src/components/ConnectedAccount/ProgressCircle.tsx
+++ b/src/components/ConnectedAccount/ProgressCircle.tsx
@@ -4,6 +4,7 @@ type Props = {
value: number;
};
+/* eslint-disable @typescript-eslint/no-unused-vars */
export function ProgressCircle(_: Props) {
return (
diff --git a/src/components/CustomStateCellRender/CustomStateCellRender.tsx b/src/components/CustomStateCellRender/CustomStateCellRender.tsx
index c3722fa..2dde7f8 100644
--- a/src/components/CustomStateCellRender/CustomStateCellRender.tsx
+++ b/src/components/CustomStateCellRender/CustomStateCellRender.tsx
@@ -14,7 +14,7 @@ export const CustomStateCellRender = ({ state, message }: Props) => {
pending: PurchaseStateIcon,
submitted: PurchaseStateIcon,
started: PurchaseStateIcon,
- finished: SuccessCircleIcon,
+ finished: () =>
,
cancelled: ErrorCircleIcon,
errored: ErrorCircleIcon,
};
@@ -26,10 +26,10 @@ export const CustomStateCellRender = ({ state, message }: Props) => {
{message ? (
-
+
) : (
-
+
)}
diff --git a/src/components/Debug/Debug.tsx b/src/components/Debug/Debug.tsx
index 9036a8b..12e65c5 100644
--- a/src/components/Debug/Debug.tsx
+++ b/src/components/Debug/Debug.tsx
@@ -8,7 +8,7 @@ export function Debug() {
if (isPending) {
return (
-
+
);
diff --git a/src/components/Dialog/Dialog.css b/src/components/Dialog/Dialog.css
index cdb76e9..7b0246d 100644
--- a/src/components/Dialog/Dialog.css
+++ b/src/components/Dialog/Dialog.css
@@ -1,11 +1,11 @@
-.dialog::backdrop {
- background: rgba(70, 70, 70, 0.75);
- backdrop-filter: blur(2px);
-}
-
.dialog {
background-color: var(--codex-background-secondary);
border: none;
color: var(--codex-color);
min-width: 200px;
+
+ &::backdrop {
+ background: rgba(70, 70, 70, 0.75);
+ backdrop-filter: blur(2px);
+ }
}
diff --git a/src/components/Download/Download.tsx b/src/components/Download/Download.tsx
index 630ecef..3c510cb 100644
--- a/src/components/Download/Download.tsx
+++ b/src/components/Download/Download.tsx
@@ -22,8 +22,9 @@ export function Download() {
id="cid"
placeholder="CID"
inputClassName="download-input"
- size={"medium" as any}
+ variant={"medium"}
autoComplete="off"
+ value={cid}
onChange={onCidChange}>
diff --git a/src/components/ErrorIcon/ErrorIcon.tsx b/src/components/ErrorIcon/ErrorIcon.tsx
deleted file mode 100644
index 1f41214..0000000
--- a/src/components/ErrorIcon/ErrorIcon.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { CircleX } from "lucide-react";
-
-export function ErrorIcon() {
- return (
-
-
-
- );
-}
diff --git a/src/components/ErrorPlaceholder/ErrorPlaceholder.tsx b/src/components/ErrorPlaceholder/ErrorPlaceholder.tsx
index a5c50fb..3e42e6c 100644
--- a/src/components/ErrorPlaceholder/ErrorPlaceholder.tsx
+++ b/src/components/ErrorPlaceholder/ErrorPlaceholder.tsx
@@ -1,5 +1,5 @@
import { Placeholder } from "@codex-storage/marketplace-ui-components";
-import { ErrorIcon } from "../ErrorIcon/ErrorIcon";
+import ErrorCircleIcon from "../../assets/icons/error-circle.svg?react";
type Props = {
subtitle?: string;
@@ -13,7 +13,7 @@ export function ErrorPlaceholder({ subtitle, error }: Props) {
return (
}
+ Icon={
}
title="Error"
subtitle={subtitle}
message={message}>
diff --git a/src/components/FileCellRender/FileCell.css b/src/components/FileCellRender/FileCell.css
index 3c0a853..b7acf7d 100644
--- a/src/components/FileCellRender/FileCell.css
+++ b/src/components/FileCellRender/FileCell.css
@@ -1,24 +1,18 @@
-.fileCell {
+.file-render {
display: flex;
gap: 0.75rem;
-}
-.fileCell-cid {
- white-space: nowrap;
-}
+ .tooltip:hover::after {
+ left: 0;
+ }
-.fileCell-subtitle {
- display: flex;
- align-items: center;
- gap: 0.5rem;
- position: relative;
-}
-
-.fileCell-tooltip {
- display: flex;
- align-items: center;
-}
-
-.fileCell .tooltip:hover:after {
- left: -33%;
+ small {
+ white-space: nowrap;
+ font-family: Inter;
+ font-size: 12px;
+ font-weight: 500;
+ line-height: 16px;
+ text-align: left;
+ color: #7d7d7d;
+ }
}
diff --git a/src/components/FileCellRender/FileCell.tsx b/src/components/FileCellRender/FileCell.tsx
index 9095046..07c699a 100644
--- a/src/components/FileCellRender/FileCell.tsx
+++ b/src/components/FileCellRender/FileCell.tsx
@@ -69,17 +69,17 @@ export function FileCell({ requestId, purchaseCid, data, onMetadata }: Props) {
return (
-
+
-
+
{filename}
-
-
+
+
- {cidTruncated}
+ {cidTruncated}
-
+
diff --git a/src/components/Files/FileActions.css b/src/components/Files/FileActions.css
index 242ffac..5a8d6b7 100644
--- a/src/components/Files/FileActions.css
+++ b/src/components/Files/FileActions.css
@@ -16,4 +16,10 @@
border: 1px solid #96969633;
}
}
+
+ @media (max-width: 800px) {
+ .folder-button {
+ display: none;
+ }
+ }
}
diff --git a/src/components/Files/FileActions.tsx b/src/components/Files/FileActions.tsx
index 18151dd..adfb2c0 100644
--- a/src/components/Files/FileActions.tsx
+++ b/src/components/Files/FileActions.tsx
@@ -27,7 +27,7 @@ export function FileActions({
window.open(url + content.cid, "_blank")}
- Icon={DownloadIcon}>
+ Icon={() => }>
[
diff --git a/src/components/Files/FileDetails.tsx b/src/components/Files/FileDetails.tsx
index ac2275a..04cea98 100644
--- a/src/components/Files/FileDetails.tsx
+++ b/src/components/Files/FileDetails.tsx
@@ -6,7 +6,6 @@ import {
} from "@codex-storage/marketplace-ui-components";
import { CodexDataContent, CodexPurchase } from "@codex-storage/sdk-js";
import { PrettyBytes } from "../../utils/bytes";
-import { Dates } from "../../utils/dates";
import { CidCopyButton } from "./CidCopyButton";
import "./FileDetails.css";
import { CodexSdk } from "../../sdk/codex";
@@ -43,7 +42,8 @@ export function FileDetails({ onClose, details }: Props) {
}
return {
- error: false as any,
+ /* eslint-disable @typescript-eslint/prefer-as-const */
+ error: false as false,
data: all,
};
})
@@ -122,7 +122,11 @@ export function FileDetails({ onClose, details }: Props) {
Date:
- {Dates.format(details.manifest.uploadedAt).toString()}
+
+ {FilesUtils.formatDate(
+ details.manifest.uploadedAt
+ ).toString()}
+
diff --git a/src/components/Files/Files.css b/src/components/Files/Files.css
index 68a5aa9..6c6e059 100644
--- a/src/components/Files/Files.css
+++ b/src/components/Files/Files.css
@@ -26,4 +26,15 @@
table thead tr th {
background-color: #14141499;
}
+
+ @media (max-width: 800px) {
+ table th:nth-child(2),
+ table td:nth-child(2),
+ table th:nth-child(3),
+ table td:nth-child(3),
+ section,
+ .filters {
+ display: none;
+ }
+ }
}
diff --git a/src/components/Files/Files.tsx b/src/components/Files/Files.tsx
index 9f5e275..83d0e85 100644
--- a/src/components/Files/Files.tsx
+++ b/src/components/Files/Files.tsx
@@ -1,6 +1,5 @@
import { ChangeEvent, useEffect, useState } from "react";
import { PrettyBytes } from "../../utils/bytes";
-import { Dates } from "../../utils/dates";
import "./Files.css";
import {
Tabs,
@@ -166,7 +165,9 @@ export function Files({ limit }: Props) {
cells={[
,
{PrettyBytes(c.manifest.datasetSize)} | ,
- {Dates.format(c.manifest.uploadedAt).toString()} | ,
+
+ {FilesUtils.formatDate(c.manifest.uploadedAt).toString()}
+ | ,
diff --git a/src/components/Files/FolderButton.tsx b/src/components/Files/FolderButton.tsx
index dbbc2aa..8b60849 100644
--- a/src/components/Files/FolderButton.tsx
+++ b/src/components/Files/FolderButton.tsx
@@ -1,10 +1,10 @@
import { Backdrop, ButtonIcon } from "@codex-storage/marketplace-ui-components";
-import { CheckCircle } from "lucide-react";
import "./FolderButton.css";
import { useState } from "react";
import { attributes } from "../../utils/attributes";
import { classnames } from "../../utils/classnames";
import FolderIcon from "../../assets/icons/folder.svg?react";
+import SuccessCircleIcon from "../../assets/icons/success-circle.svg?react";
type Props = {
folders: [string, boolean][];
@@ -42,7 +42,7 @@ export function FolderButton({ folders, onFolderToggle }: Props) {
{folders.map(([folder, isActive]) => (
onFolderToggle(folder)}>
{folder}
- {isActive && }
+ {isActive && }
))}
|
@@ -125,7 +129,7 @@ export function HealthChecks({ online, onStepValid }: Props) {
value={port}
isInvalid={isPortInvalid}
placeholder="8080">
-
+
diff --git a/src/components/Menu/menu.css b/src/components/Menu/menu.css
index 459116b..9466962 100644
--- a/src/components/Menu/menu.css
+++ b/src/components/Menu/menu.css
@@ -6,33 +6,25 @@
transition: left 0.25s;
position: sticky;
z-index: 10;
- view-transition-name: main-menu;
height: 100%;
top: 0;
transition:
width 0.5s,
font-size 0.5s,
- left 0.05s;
- min-width: 0;
+ left 0.5s;
width: 272px;
min-width: 80px;
- @media (max-width: 1199px) {
+ @media (max-width: 800px) {
& {
- width: 80px;
- .items {
- a {
- width: 26px;
- gap: 0;
- display: flex;
- justify-content: center;
+ left: -300px;
+ position: fixed;
+ z-index: 12;
+ }
- span + span {
- font-size: 0;
- display: none;
- }
- }
- }
+ &[aria-expanded] {
+ left: 0px;
+ font-size: 12px;
}
}
@@ -63,9 +55,11 @@
display: flex;
justify-content: center;
- span + span {
- font-size: 0;
- display: none;
+ @media (min-width: 801px) {
+ span + span {
+ font-size: 0;
+ display: none;
+ }
}
}
}
@@ -154,17 +148,17 @@
top: 115px;
}
- &:has(.active:nth-child(4))::before {
+ /* &:has(.active:nth-child(4))::before {
top: 158px;
- }
-
+ } */
+ /*
&:has(.active:nth-child(5))::before {
top: 201px;
}
&:has(.active:nth-child(6))::before {
top: 244px;
- }
+ } */
&:has(.active:nth-child(8))::before {
top: 339px;
@@ -227,7 +221,7 @@
margin-left: 6px;
&:hover:not([aria-disabled="true"]),
- &.active {
+ &.active:not([aria-disabled="true"]) {
background-color: var(--codex-highlight-color);
color: #c7c7c7;
}
@@ -244,10 +238,15 @@
span + span {
display: inline-block;
overflow: hidden;
- min-width: 0;
}
- &.active span:first-child {
+ @media (min-width: 801px) {
+ span + span {
+ min-width: 0;
+ }
+ }
+
+ &.active:not([aria-disabled="true"]) span:first-child {
color: var(--codex-color-primary);
}
}
diff --git a/src/components/NodeSpace/nodeSpace.domain.ts b/src/components/NodeSpace/nodeSpace.domain.ts
deleted file mode 100644
index f8b8a3a..0000000
--- a/src/components/NodeSpace/nodeSpace.domain.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export const nodeSpaceAllocationColors = [
- "var(--codex-color-primary)",
- "#f9fa93",
- "#ccc",
-]
\ No newline at end of file
diff --git a/src/components/OnBoarding/OnBoardingLayout.css b/src/components/OnBoarding/OnBoardingLayout.css
index c58252a..40cf5f8 100644
--- a/src/components/OnBoarding/OnBoardingLayout.css
+++ b/src/components/OnBoarding/OnBoardingLayout.css
@@ -192,7 +192,7 @@
.navigation {
cursor: pointer;
- position: absolute;
+ position: fixed;
right: 16px;
bottom: 16px;
border-bottom: none;
diff --git a/src/components/OnBoarding/OnBoardingLayout.tsx b/src/components/OnBoarding/OnBoardingLayout.tsx
index 9f752a1..0e32889 100644
--- a/src/components/OnBoarding/OnBoardingLayout.tsx
+++ b/src/components/OnBoarding/OnBoardingLayout.tsx
@@ -4,7 +4,7 @@ import Logotype from "../../assets/icons/logotype.svg?react";
import { attributes } from "../../utils/attributes";
import "./OnBoardingLayout.css";
import { BackgroundImage } from "../BackgroundImage/BackgroundImage";
-import { useNavigate } from "@tanstack/react-router";
+import { useNavigate } from "react-router-dom";
type Props = {
children: ReactElement<{ onStepValid: (isValid: boolean) => void }>;
@@ -13,7 +13,7 @@ type Props = {
};
export function OnBoardingLayout({ children, step }: Props) {
- const navigate = useNavigate({ from: window.location.pathname });
+ const navigate = useNavigate();
return (