@@ -4,9 +4,11 @@ import {
44 Box ,
55 Button ,
66 CircularProgress ,
7+ FormControl ,
8+ MenuItem ,
9+ Select as MuiSelect ,
710 Stack ,
811 Typography ,
9- TextField ,
1012} from '@mui/material' ;
1113import ErrorIcon from '@mui/icons-material/Error' ;
1214import SuccessIcon from '@mui/icons-material/CheckCircle' ;
@@ -23,6 +25,20 @@ interface ReportAbuseModalProps {
2325
2426const ABUSE_ERROR = 'Abuse has already been reported' ;
2527
28+ const REASON_OPTIONS = [
29+ 'sexual_content' ,
30+ 'nudity' ,
31+ 'violence' ,
32+ 'gore' ,
33+ 'hate_or_racism' ,
34+ 'drugs' ,
35+ 'terrorism' ,
36+ 'child_abuse' ,
37+ 'self_harm' ,
38+ 'weapons' ,
39+ 'criminal_activity' ,
40+ ] as const ;
41+
2642function ErrorState ( { error } : { error : string } ) {
2743 const { t } = useTranslation ( ) ;
2844
@@ -101,11 +117,11 @@ export function ReportAbuseModal({
101117 const isIdleOrLoading = isIdle || isPending ;
102118
103119 const handleReportAbuse = ( ) => {
104- reason . trim ( ) . length > 0 &&
120+ reason . length > 0 &&
105121 reportAbuseMutation ( {
106122 escrow_address : escrowAddress ,
107123 chain_id : chainId ,
108- reason : reason . trim ( ) ,
124+ reason,
109125 } ) ;
110126 } ;
111127
@@ -120,27 +136,30 @@ export function ReportAbuseModal({
120136 { t ( 'worker.reportAbuse.modalHeader' ) }
121137 </ Typography >
122138 { isIdleOrLoading && (
123- < Typography variant = { isMobile ? 'body2' : 'body1' } textAlign = "center" >
124- { t ( 'worker.reportAbuse.modalParagraph' ) }
125- </ Typography >
139+ < >
140+ < Typography variant = { isMobile ? 'body2' : 'body1' } textAlign = "center" >
141+ { t ( 'worker.reportAbuse.modalParagraph' ) }
142+ </ Typography >
143+ < FormControl fullWidth sx = { { my : { xs : 2 , md : 3 } } } >
144+ < MuiSelect
145+ value = { reason }
146+ displayEmpty
147+ onChange = { ( e ) => {
148+ setReason ( e . target . value ) ;
149+ } }
150+ >
151+ { REASON_OPTIONS . map ( ( value ) => (
152+ < MenuItem key = { value } value = { value } >
153+ { t ( `worker.reportAbuse.reasons.${ value } ` ) }
154+ </ MenuItem >
155+ ) ) }
156+ </ MuiSelect >
157+ </ FormControl >
158+ </ >
126159 ) }
127160 { isPending && < CircularProgress size = { 40 } sx = { { mx : 'auto' , my : 7 } } /> }
128161 { isError && < ErrorState error = { error } /> }
129162 { isSuccess && < SuccessState /> }
130- < TextField
131- fullWidth
132- multiline
133- rows = { 3 }
134- label = { t ( 'worker.reportAbuse.modalReason' ) }
135- value = { reason }
136- sx = { {
137- display : isIdle ? 'flex' : 'none' ,
138- my : { xs : 4 , md : 5 } ,
139- } }
140- onChange = { ( e ) => {
141- setReason ( e . target . value ) ;
142- } }
143- />
144163 < Box display = "flex" gap = { 2 } width = "100%" >
145164 < Button
146165 fullWidth
@@ -156,7 +175,7 @@ export function ReportAbuseModal({
156175 fullWidth
157176 onClick = { handleReportAbuse }
158177 variant = "contained"
159- disabled = { ! reason . trim ( ) || isPending }
178+ disabled = { ! reason || isPending }
160179 sx = { { display : isIdleOrLoading ? 'flex' : 'none' } }
161180 >
162181 { isMobile
0 commit comments