diff --git a/src/components/DatacapAmountModel.tsx b/src/components/DatacapAmountModel.tsx index 876530f..5e37d7b 100644 --- a/src/components/DatacapAmountModel.tsx +++ b/src/components/DatacapAmountModel.tsx @@ -18,7 +18,7 @@ import MenuItem from '@mui/material/MenuItem' import TextField from '@mui/material/TextField' import { Button } from '@/components/ui/button' import { AllocationUnit, type Allocation, type Application } from '@/type' -import { type ReactNode, useState } from 'react' +import { type ReactNode, useState, useCallback } from 'react' import { bytesToiB } from '@/lib/utils' import Countdown from './Countdown' @@ -29,6 +29,7 @@ interface AllocationConfig { amount: string unit: AllocationUnit allocationType?: AllocationType + earlyRefillComment?: string } interface DatacapAmountModalProps { @@ -40,6 +41,7 @@ interface DatacapAmountModalProps { application: Application clientContractAddress?: string | null remainingDatacap?: number | undefined + usedDatatapInPercentage: number setAllocationConfig: (config: any) => void onClose: () => void onCancel: () => void @@ -59,6 +61,7 @@ const DatacapAmountModal = ({ title, clientContractAddress, remainingDatacap, + usedDatatapInPercentage, }: DatacapAmountModalProps): ReactNode => { const [isFillRemainingDatacapChecked, setIsFillRemainingDatacapChecked] = useState(false) @@ -76,6 +79,24 @@ const DatacapAmountModal = ({ })) } + const handleEarlyRefillCommentChange = useCallback( + (e: React.ChangeEvent) => { + setAllocationConfig((prev: AllocationConfig) => ({ + ...prev, + earlyRefillComment: e.target.value.trim(), + })) + }, + [setAllocationConfig], + ) + const isAllocationAmountValid = + !allocationConfig.amount || allocationConfig.amount === '0' + const isEarlyRefillCommentValid = + allocationConfig.earlyRefillComment !== undefined && + allocationConfig.earlyRefillComment.length < 10 && + usedDatatapInPercentage < 75 + const isSubmitDisabled = + isApiCalling || isAllocationAmountValid || isEarlyRefillCommentValid + return ( {title} @@ -86,8 +107,8 @@ const DatacapAmountModal = ({ )} -
- {remainingDatacap && ( + {remainingDatacap && remainingDatacap > 0 ? ( +
- )} -
+
+ ) : null}
{clientContractAddress && clientContractAddress !== null && @@ -222,6 +243,18 @@ const DatacapAmountModal = ({
+ {usedDatatapInPercentage < 75 && remainingDatacap ? ( +
+ +
+ ) : null} Cancel - diff --git a/src/components/cards/AppInfoCard.tsx b/src/components/cards/AppInfoCard.tsx index 448e4b2..be5fcc1 100644 --- a/src/components/cards/AppInfoCard.tsx +++ b/src/components/cards/AppInfoCard.tsx @@ -127,6 +127,7 @@ const AppInfoCard: React.FC = ({ unit: AllocationUnit isDialogOpen: boolean isFillRemainingDatacapChecked: boolean + earlyRefillComment?: string }>({ amount: '0', unit: AllocationUnit.GIB, @@ -685,6 +686,7 @@ const AppInfoCard: React.FC = ({ userName, amount: amountInBytes.toString(), unit: 'B' as AllocationUnit, + earlyRefillComment: refillInfoParams.earlyRefillComment, }) } catch (err) { handleSSAError(err) @@ -1216,12 +1218,12 @@ const AppInfoCard: React.FC = ({ )} ) : ( - progress > 75 && remaining > 0 && (