-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #229 from Gateway-DAO/release/oct-18
Release/oct 18
- Loading branch information
Showing
46 changed files
with
620 additions
and
342 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
203 changes: 203 additions & 0 deletions
203
apps/website/components/molecules/add-task/hold-nft-task/hold-nft-task.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,203 @@ | ||
| import { useEffect, useState } from 'react'; | ||
|
|
||
| import { useFormContext } from 'react-hook-form'; | ||
|
|
||
| import { ExpandLess, ExpandMore } from '@mui/icons-material'; | ||
| import DeleteIcon from '@mui/icons-material/Delete'; | ||
| import { | ||
| Box, | ||
| FormControl, | ||
| IconButton, | ||
| InputLabel, | ||
| MenuItem, | ||
| Select, | ||
| Stack, | ||
| TextField, | ||
| Typography, | ||
| } from '@mui/material'; | ||
|
|
||
| import { CircleWithNumber } from '../../../atoms/circle-with-number'; | ||
| import { | ||
| CreateGateTypes, | ||
| HoldNFTDataError, | ||
| } from '../../../templates/create-gate/schema'; | ||
| import { mockChains } from '../hold-token-task/__mock__'; | ||
|
|
||
| const HoldNFTTask = ({ taskId, deleteTask }) => { | ||
| const { | ||
| register, | ||
| setValue, | ||
| getValues, | ||
| formState: { errors }, | ||
| } = useFormContext<CreateGateTypes>(); | ||
|
|
||
| const formValues = getValues(); | ||
|
|
||
| useEffect(() => { | ||
| if (formValues.tasks.data[taskId]?.title === '') { | ||
| setValue(`tasks.data.${taskId}.title`, 'Untitled Requirement'); | ||
| } | ||
| setValue(`tasks.data.${taskId}.task_type`, 'nft_hold'); | ||
| }, [taskId, setValue, formValues.tasks.data]); | ||
|
|
||
| const [taskVisible, setTaskVisible] = useState(false); | ||
|
|
||
| return ( | ||
| <Stack | ||
| sx={(theme) => ({ | ||
| padding: '50px', | ||
| border: '2px solid rgba(229, 229, 229, 0.08)', | ||
| background: `linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.05) 100%), ${theme.palette.background.paper}`, | ||
| borderRadius: '10px', | ||
| [theme.breakpoints.down('sm')]: { | ||
| padding: '20px', | ||
| }, | ||
| })} | ||
| > | ||
| <Stack | ||
| direction={'row'} | ||
| alignItems={'center'} | ||
| marginBottom={!taskVisible ? '40px' : 0} | ||
| sx={{ | ||
| display: 'flex', | ||
| justifyContent: 'space-between', | ||
| alignItems: 'center', | ||
| }} | ||
| > | ||
| <Stack | ||
| direction={'row'} | ||
| alignItems={'center'} | ||
| sx={{ width: '100%', mr: '20px' }} | ||
| > | ||
| <CircleWithNumber | ||
| number={taskId + 1} | ||
| sx={(theme) => ({ | ||
| mr: theme.spacing(3.75), | ||
| [theme.breakpoints.down('sm')]: { mr: theme.spacing(2.5) }, | ||
| })} | ||
| /> | ||
| <Stack> | ||
| <Typography variant="subtitle2">Hold NFT</Typography> | ||
| <TextField | ||
| variant="standard" | ||
| autoFocus | ||
| sx={{ | ||
| minWidth: { md: '600px', xs: '110%' }, | ||
| maxWidth: { xs: '100%', md: '110%' }, | ||
| }} | ||
| InputProps={{ | ||
| style: { | ||
| fontSize: '20px', | ||
| fontWeight: 'bolder', | ||
| }, | ||
| disableUnderline: true, | ||
| sx: { | ||
| '&.Mui-focused': { | ||
| borderBottom: '2px solid #9A53FF', | ||
| }, | ||
| }, | ||
| }} | ||
| id="task-title" | ||
| {...register(`tasks.data.${taskId}.title`)} | ||
| error={!!errors.tasks?.data[taskId]?.title} | ||
| helperText={errors.tasks?.data[taskId]?.title?.message} | ||
| /> | ||
| </Stack> | ||
| </Stack> | ||
| <Box sx={{ display: 'flex', alignItems: 'center' }}> | ||
| <IconButton | ||
| onClick={() => deleteTask(taskId)} | ||
| sx={(theme) => ({ | ||
| color: theme.palette.text.secondary, | ||
| cursor: 'pointer', | ||
| marginRight: '20px', | ||
| '&:hover': { | ||
| color: theme.palette.text.primary, | ||
| }, | ||
| })} | ||
| > | ||
| <DeleteIcon fontSize="medium" /> | ||
| </IconButton> | ||
| {taskVisible ? ( | ||
| <IconButton | ||
| onClick={() => setTaskVisible(false)} | ||
| sx={(theme) => ({ | ||
| color: theme.palette.text.secondary, | ||
| cursor: 'pointer', | ||
| '&:hover': { | ||
| color: theme.palette.text.primary, | ||
| }, | ||
| })} | ||
| > | ||
| <ExpandMore fontSize="medium" /> | ||
| </IconButton> | ||
| ) : ( | ||
| <IconButton | ||
| onClick={() => setTaskVisible(true)} | ||
| sx={(theme) => ({ | ||
| color: theme.palette.text.secondary, | ||
| cursor: 'pointer', | ||
| '&:hover': { | ||
| color: theme.palette.text.primary, | ||
| }, | ||
| })} | ||
| > | ||
| <ExpandLess fontSize="medium" /> | ||
| </IconButton> | ||
| )} | ||
| </Box> | ||
| </Stack> | ||
| <FormControl style={!taskVisible ? {} : { display: 'none' }}> | ||
| <TextField | ||
| required | ||
| multiline | ||
| minRows={3} | ||
| label="Task Requirement" | ||
| id="task-description" | ||
| {...register(`tasks.data.${taskId}.description`)} | ||
| error={!!errors.tasks?.data[taskId]?.description} | ||
| helperText={errors.tasks?.data[taskId]?.description?.message} | ||
| sx={{ | ||
| marginBottom: '60px', | ||
| '& fieldset legend span': { | ||
| marginRight: '10px', | ||
| }, | ||
| }} | ||
| /> | ||
| <FormControl> | ||
| <InputLabel htmlFor="chains">Chain</InputLabel> | ||
| <Select | ||
| id="chains" | ||
| sx={{ maxWidth: { md: '50%', xs: '100%' } }} | ||
| {...register(`tasks.data.${taskId}.task_data.chain`)} | ||
| > | ||
| <MenuItem value=""> | ||
| <em>None</em> | ||
| </MenuItem> | ||
| {mockChains.map((chain) => ( | ||
| <MenuItem key={chain.value} value={chain.value}> | ||
| {chain.label} | ||
| </MenuItem> | ||
| ))} | ||
| </Select> | ||
| </FormControl> | ||
| <TextField | ||
| required | ||
| label="NFT Contract Address" | ||
| sx={{ marginTop: '15px', maxWidth: { md: '50%', xs: '100%' } }} | ||
| {...register(`tasks.data.${taskId}.task_data.nft_address`)} | ||
| error={ | ||
| !!(errors.tasks?.data[taskId]?.task_data as HoldNFTDataError) | ||
| ?.nft_address | ||
| } | ||
| helperText={ | ||
| (errors.tasks?.data[taskId]?.task_data as HoldNFTDataError) | ||
| ?.nft_address?.message | ||
| } | ||
| /> | ||
| </FormControl> | ||
| </Stack> | ||
| ); | ||
| }; | ||
|
|
||
| export default HoldNFTTask; |
20 changes: 4 additions & 16 deletions
20
apps/website/components/molecules/add-task/hold-token-task/__mock__.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
950a42cThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
gateway-website – ./
gateway-website-git-main-gateway-dao.vercel.app
gateway-website-gateway-dao.vercel.app
www.mygateway.xyz
mygateway.xyz
poc.mygateway.xyz