diff --git a/src/components/Availability/AvailabilityEdit.tsx b/src/components/Availability/AvailabilityEdit.tsx index 5b7590a..6899d50 100644 --- a/src/components/Availability/AvailabilityEdit.tsx +++ b/src/components/Availability/AvailabilityEdit.tsx @@ -31,7 +31,7 @@ const defaultAvailabilityData: AvailabilityState = { totalSize: 0.5, duration: 1, minPricePerBytePerSecond: 1, - totalCollateral: 0, + totalCollateral: Math.round(0.5 * GB), totalSizeUnit: "gb", durationUnit: "days", }; diff --git a/src/components/Availability/AvailabilityForm.tsx b/src/components/Availability/AvailabilityForm.tsx index 44406eb..815fa9f 100644 --- a/src/components/Availability/AvailabilityForm.tsx +++ b/src/components/Availability/AvailabilityForm.tsx @@ -4,7 +4,7 @@ import { SpaceAllocation, Tooltip, } from "@codex-storage/marketplace-ui-components"; -import { ChangeEvent, useEffect } from "react"; +import { ChangeEvent, useEffect, useState } from "react"; import "./AvailabilityForm.css"; import { AvailabilityComponentProps } from "./types"; import NodesIcon from "../../assets/icons/nodes.svg?react"; @@ -20,6 +20,8 @@ export function AvailabilityForm({ space, editAvailabilityValue, }: AvailabilityComponentProps) { + const [isTotalCollateralDirty, setIsTotalCollateralDirty] = useState(false); + useEffect(() => { let max = AvailabilityUtils.maxValue(space); if (availability.id && editAvailabilityValue) { @@ -64,15 +66,23 @@ export function AvailabilityForm({ const onAvailablityChange = async (e: ChangeEvent) => { const element = e.currentTarget; const v = element.value; + const totalSize = parseFloat(v); onAvailabilityChange({ - totalSize: parseFloat(v), + totalSize: totalSize, + totalCollateral: isTotalCollateralDirty + ? availability.totalCollateral + : Math.round(totalSize * GB), }); }; const onInputChange = async (e: ChangeEvent) => { const element = e.currentTarget; + if (element.name === "totalCollateral") { + setIsTotalCollateralDirty(true); + } + onAvailabilityChange({ [element.name]: element.name === "name" ? element.value : parseFloat(element.value), @@ -210,10 +220,7 @@ export function AvailabilityForm({ label="Total collateral" min={0} onChange={onInputChange} - value={( - availability.totalCollateral || - Math.round(availability.totalSize * GB) - ).toString()} + value={availability.totalCollateral.toString()} />