1
- import { Button , Stepper , Text } from '@mantine/core'
1
+ import { Box , Button , Group , Stepper } from '@mantine/core'
2
2
import {
3
3
Community ,
4
4
getEnumOptions ,
@@ -14,14 +14,15 @@ import { toastError, toastSuccess, UiCard, UiDebug, UiInfo, UiStack } from '@pub
14
14
import { useMemo , useState } from 'react'
15
15
import { RoleConditionUiItem } from './role-condition-ui-item'
16
16
import { RoleConditionUiNavLink } from './role-condition-ui-nav-link'
17
- import { RoleConditionUiTypeForm } from './role-condition-ui-type-form'
17
+ import { RoleConditionUiAmountForm , RoleConditionUiTypeForm } from './role-condition-ui-type-form'
18
18
import { RoleUiItem } from './role-ui-item'
19
19
20
20
export function RoleConditionUiCreateWizard ( props : { role : Role ; community : Community ; tokens : NetworkToken [ ] } ) {
21
21
const { query, createRoleCondition } = useUserFindOneRole ( { roleId : props . role . id } )
22
22
const [ networkTokenType , setNetworkTokenType ] = useState < NetworkTokenType | undefined > ( undefined )
23
23
const [ networkToken , setNetworkToken ] = useState < NetworkToken | undefined > ( undefined )
24
24
const [ amount , setAmount ] = useState < string > ( '0' )
25
+ const [ amountMax , setAmountMax ] = useState < string > ( '0' )
25
26
const tokens : NetworkToken [ ] = useMemo ( ( ) => {
26
27
if ( networkTokenType === NetworkTokenType . Fungible ) {
27
28
return props . tokens . filter ( ( token ) => token . type === NetworkTokenType . Fungible )
@@ -62,12 +63,10 @@ export function RoleConditionUiCreateWizard(props: { role: Role; community: Comm
62
63
} , [ props . role . id , networkTokenType , networkToken ] )
63
64
64
65
async function addCondition ( type : NetworkTokenType , token : NetworkToken ) {
65
- console . log ( 'addCondition' , type , token )
66
66
createRoleCondition ( { ...config , type, tokenId : token . id } )
67
67
. then ( async ( res ) => {
68
- console . log ( 'res' , res )
69
68
toastSuccess ( 'Condition created' )
70
- query . refetch ( )
69
+ await query . refetch ( )
71
70
} )
72
71
. catch ( ( err ) => {
73
72
toastError ( 'Error creating condition' )
@@ -109,9 +108,10 @@ export function RoleConditionUiCreateWizard(props: { role: Role; community: Comm
109
108
< Stepper . Step label = "Configuration" description = "Configure the condition" >
110
109
{ networkTokenType ? (
111
110
< UiStack >
111
+ < Box px = "sm" py = "xs" >
112
+ < RoleConditionUiItem type = { networkTokenType } />
113
+ </ Box >
112
114
< RoleConditionUiTypeForm
113
- amount = { amount }
114
- setAmount = { setAmount }
115
115
networkToken = { networkToken }
116
116
setNetworkToken = { setNetworkToken }
117
117
type = { networkTokenType }
@@ -131,17 +131,22 @@ export function RoleConditionUiCreateWizard(props: { role: Role; community: Comm
131
131
[ 'Type' , < RoleConditionUiItem type = { networkTokenType } /> ] ,
132
132
networkToken ? [ 'Token' , < NetworkTokenUiItem networkToken = { networkToken } /> ] : undefined ,
133
133
[
134
- 'Amount (min)' ,
135
- < Text size = "xl" fw = "bold" >
136
- { amount } { networkToken ?. symbol }
137
- </ Text > ,
134
+ 'Amount' ,
135
+ < Group >
136
+ < RoleConditionUiAmountForm label = "Amount (min)" amount = { amount } setAmount = { setAmount } />
137
+ < RoleConditionUiAmountForm label = "Amount (max)" amount = { amountMax } setAmount = { setAmountMax } />
138
+ </ Group > ,
139
+ ] ,
140
+ [
141
+ '' ,
142
+ < Group justify = "end" >
143
+ < Button size = "xl" onClick = { ( ) => addCondition ( networkTokenType , networkToken ) } >
144
+ Create Condition
145
+ </ Button >
146
+ </ Group > ,
138
147
] ,
139
148
] }
140
149
/>
141
-
142
- < Button size = "xl" onClick = { ( ) => addCondition ( networkTokenType , networkToken ) } >
143
- Create Condition
144
- </ Button >
145
150
</ UiStack >
146
151
) : (
147
152
< UiInfo message = "Select a condition type and configure it" />
0 commit comments