Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

FIL-362 Extend modal and add client contract address to application t… #146

Merged
merged 1 commit into from
Oct 22, 2024
Merged

FIL-362 Extend modal and add client contract address to application t… #146

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
268 changes: 162 additions & 106 deletions src/components/cards/AppInfoCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,8 @@ interface ComponentProps {
allowance: any
}

type DeviationType = 'contract' | 'directly'

/**
* Represents the information for a specific application.
* Provides buttons to interact with the application.
Expand All @@ -78,7 +80,7 @@ const AppInfoCard: React.FC<ComponentProps> = ({
allowance,
}) => {
const session = useSession()
const { allocators, setSelectedAllocator } = useAllocator()
const { allocators, setSelectedAllocator, selectedAllocator } = useAllocator()
const {
application,
isApiCalling,
Expand Down Expand Up @@ -135,10 +137,12 @@ const AppInfoCard: React.FC<ComponentProps> = ({
const [allocationAmountConfig, setAllocationAmountConfig] = useState<{
amount: string
allocationType: string
deviationType: DeviationType
isDialogOpen: boolean
}>({
amount: '',
allocationType: '',
allocationType: 'fixed',
deviationType: 'directly',
isDialogOpen: false,
})

Expand Down Expand Up @@ -567,6 +571,7 @@ const AppInfoCard: React.FC<ComponentProps> = ({
...prev,
isDialogOpen: false,
amount: '',
deviationType: 'directly',
}))
return
}
Expand Down Expand Up @@ -599,6 +604,7 @@ const AppInfoCard: React.FC<ComponentProps> = ({
const requestId = application['Allocation Requests'].find(
(alloc) => alloc.Active,
)?.ID

if (!requestId) return

setAllocationAmountConfig((prev) => ({
Expand All @@ -612,9 +618,19 @@ const AppInfoCard: React.FC<ComponentProps> = ({
allocationAmount: validatedAllocationAmount,
})
} else {
const clientContractAddress =
typeof selectedAllocator === 'object'
? selectedAllocator?.client_contract_address
: undefined

await mutationTrigger.mutateAsync({
userName,
allocationAmount: validatedAllocationAmount,
clientContractAddress:
allocationAmountConfig.deviationType === 'contract' &&
clientContractAddress
? clientContractAddress
: undefined,
})
}
} catch (error) {
Expand Down Expand Up @@ -680,6 +696,7 @@ const AppInfoCard: React.FC<ComponentProps> = ({
application['Allocation Requests'].length > 1
) {
setAllocationAmountConfig((prev) => ({
deviationType: 'directly',
allocationType: 'manual',
amount:
application['Allocation Requests'].find((e) => e.Active)?.[
Expand Down Expand Up @@ -1262,121 +1279,160 @@ const AppInfoCard: React.FC<ComponentProps> = ({
<Spinner />
</div>
)}
<div className="flex gap-3 items-center">
<FormControl>
<FormLabel id="demo-controlled-radio-buttons-group">
Allocation Amount Type
</FormLabel>
<RadioGroup
aria-labelledby="demo-controlled-radio-buttons-group"
value={allocationAmountConfig.allocationType}
onChange={(e) => {
if (e.target.value !== 'manual') {
setAllocationAmountConfig({
...allocationAmountConfig,
amount: '',
})
}
setAllocationAmountConfig((prev) => ({
...prev,
allocationType: (e.target as HTMLInputElement).value,
}))
}}
>
<FormControlLabel
value={
allocation?.allocation_amount_type
? allocation.allocation_amount_type
: 'fixed'
}
control={<Radio />}
label={
allocation?.allocation_amount_type
? allocation.allocation_amount_type
.charAt(0)
.toUpperCase() +
allocation.allocation_amount_type.slice(1)
: 'Fixed'
}
/>
<FormControlLabel
value="manual"
control={<Radio />}
label="Manual"
/>
</RadioGroup>
</FormControl>
<div>
{!allocationAmountConfig.allocationType ||
allocationAmountConfig.allocationType === 'percentage' ||
allocationAmountConfig.allocationType === 'fixed' ? (
<Box sx={{ width: 230 }}>
<FormControl fullWidth>
<InputLabel>Amount</InputLabel>
<Select
disabled={!allocationAmountConfig.allocationType}
value={allocationAmountConfig.amount}
label="Allocation Amount"
onChange={(e: SelectChangeEvent) => {
<div className="flex gap-3 items-center flex-col">
{typeof selectedAllocator === 'object' &&
selectedAllocator?.client_contract_address &&
selectedAllocator?.client_contract_address !== null && (
<div className="flex justify-items-center justify-between content-center items-center w-full">
<FormControl>
<FormLabel id="demo-controlled-radio-buttons-group">
Deviation type
</FormLabel>
<RadioGroup
aria-labelledby="demo-controlled-radio-buttons-group"
value={allocationAmountConfig.deviationType}
onChange={(e) => {
setAllocationAmountConfig((prev) => ({
...prev,
amount: e.target.value,
deviationType: (e.target as HTMLInputElement)
.value as DeviationType,
}))
}}
>
{(allocation?.allocation_amount_type
? allocation.allocation_amount_quantity_options
: ['1TiB', '5TiB', '50TiB', '100TiB', '1PiB']
).map((e) => {
return (
<MenuItem
key={e}
value={
allocationAmountConfig.allocationType ===
<FormControlLabel
value="directly"
control={<Radio />}
label="Directly"
/>
<FormControlLabel
value={'contract'}
control={<Radio />}
label={'Contract'}
/>
</RadioGroup>
</FormControl>
</div>
)}
<div className="flex justify-items-center justify-between content-center items-center w-full">
<FormControl>
<FormLabel id="demo-controlled-radio-buttons-group">
Allocation Amount Type
</FormLabel>
<RadioGroup
aria-labelledby="demo-controlled-radio-buttons-group"
value={allocationAmountConfig.allocationType}
onChange={(e) => {
if (e.target.value !== 'manual') {
setAllocationAmountConfig({
...allocationAmountConfig,
amount: '',
})
}
setAllocationAmountConfig((prev) => ({
...prev,
allocationType: (e.target as HTMLInputElement).value,
}))
}}
>
<FormControlLabel
value={
allocation?.allocation_amount_type
? allocation.allocation_amount_type
: 'fixed'
}
control={<Radio />}
label={
allocation?.allocation_amount_type
? allocation.allocation_amount_type
.charAt(0)
.toUpperCase() +
allocation.allocation_amount_type.slice(1)
: 'Fixed'
}
/>
<FormControlLabel
value="manual"
control={<Radio />}
label="Manual"
/>
</RadioGroup>
</FormControl>
<div>
{!allocationAmountConfig.allocationType ||
allocationAmountConfig.allocationType === 'percentage' ||
allocationAmountConfig.allocationType === 'fixed' ? (
<Box sx={{ width: 230 }}>
<FormControl fullWidth>
<InputLabel>Amount</InputLabel>
<Select
disabled={!allocationAmountConfig.allocationType}
value={allocationAmountConfig.amount}
label="Allocation Amount"
onChange={(e: SelectChangeEvent) => {
setAllocationAmountConfig((prev) => ({
...prev,
amount: e.target.value,
}))
}}
>
{(allocation?.allocation_amount_type
? allocation.allocation_amount_quantity_options
: ['1TiB', '5TiB', '50TiB', '100TiB', '1PiB']
).map((e) => {
return (
<MenuItem
key={e}
value={
allocationAmountConfig.allocationType ===
'percentage'
? calculateDatacap(
e,
application.Datacap[
'Total Requested Amount'
],
)
: e
}
>
{e}
{allocationAmountConfig.allocationType ===
'percentage'
? calculateDatacap(
? `% - ${calculateDatacap(
e,
application.Datacap[
'Total Requested Amount'
],
)
: e
}
>
{e}
{allocationAmountConfig.allocationType ===
'percentage'
? `% - ${calculateDatacap(
e,
application.Datacap['Total Requested Amount'],
)}`
: ''}
</MenuItem>
)
})}
</Select>
</FormControl>
</Box>
) : (
<Box
sx={{
width: 230,
}}
>
<TextField
id="outlined-controlled"
label="Amount"
disabled={!allocationAmountConfig.allocationType}
value={allocationAmountConfig.amount}
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
setAllocationAmountConfig((prev) => ({
...prev,
amount: event.target.value,
}))
)}`
: ''}
</MenuItem>
)
})}
</Select>
</FormControl>
</Box>
) : (
<Box
sx={{
width: 230,
}}
/>
</Box>
)}
>
<TextField
id="outlined-controlled"
label="Amount"
disabled={!allocationAmountConfig.allocationType}
value={allocationAmountConfig.amount}
onChange={(
event: React.ChangeEvent<HTMLInputElement>,
) => {
setAllocationAmountConfig((prev) => ({
...prev,
amount: event.target.value,
}))
}}
/>
</Box>
)}
</div>
</div>
</div>
</DialogContent>
Expand Down
17 changes: 13 additions & 4 deletions src/hooks/useApplicationActions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,14 @@ import {
postRevertApplicationToReadyToSign,
triggerSSA,
} from '@/lib/apiClient'
import { getStateWaitMsg } from '@/lib/glifApi'
import { AllocatorTypeEnum, type Application, type RefillUnit } from '@/type'
import { useMemo, useState } from 'react'
import {
useMutation,
useQueryClient,
type UseMutationResult,
} from 'react-query'
import { getStateWaitMsg } from '@/lib/glifApi'

interface ApplicationActions {
application: Application
Expand Down Expand Up @@ -59,7 +59,11 @@ interface ApplicationActions {
mutationTrigger: UseMutationResult<
Application | undefined,
unknown,
{ allocationAmount: string; userName: string },
{
allocationAmount: string
userName: string
clientContractAddress?: string
},
unknown
>
mutationApproveChanges: UseMutationResult<
Expand Down Expand Up @@ -289,16 +293,21 @@ const useApplicationActions = (
const mutationTrigger = useMutation<
Application | undefined,
unknown,
{ userName: string; allocationAmount: string },
{
userName: string
allocationAmount: string
clientContractAddress?: string
},
unknown
>(
async ({ userName, allocationAmount }) => {
async ({ userName, allocationAmount, clientContractAddress }) => {
return await postApplicationTrigger(
initialApplication.ID,
userName,
repo,
owner,
allocationAmount,
clientContractAddress,
)
},
{
Expand Down
Loading