import React from 'react' import { useFieldArray, useFormContext } from 'react-hook-form' import { useTranslation } from 'react-i18next' import { Button, Card } from '@pooltogether/react-components' import { useGovernorAlpha } from 'lib/hooks/useGovernorAlpha' import { usePrizePools } from 'lib/hooks/usePrizePools' import { EMPTY_ACTION } from 'lib/components/ProposalCreation/ProposalCreationForm' import { Action } from 'lib/components/ProposalCreation/Action' export const ActionsCard = (props) => { const { t } = useTranslation() const { isFetched: prizePoolsIsFetched } = usePrizePools() const { data: governorAlpha, isFetched: governorAlphaIsFetched } = useGovernorAlpha() const name = 'actions' const { control } = useFormContext() const { fields: actions, append, remove } = useFieldArray({ control, name }) if (!prizePoolsIsFetched || !governorAlphaIsFetched) return null const { proposalMaxOperations } = governorAlpha return ( <Card className='mb-6'> <h4 className='mb-6'>{t('actions')}</h4> <p className='mb-4'>{t('actionCardDescription')}</p> {actions.map((action, index) => { return ( <Action key={action.id} actionPath={`actions[${index}]`} index={index} deleteAction={() => remove(index)} hideRemoveButton={actions.length === 1 && index === 0} /> ) })} <Button className='mt-8' type='button' disabled={actions.length >= proposalMaxOperations} onClick={(e) => { e.preventDefault() append(EMPTY_ACTION) }} > {t('addAnotherAction')} </Button> </Card> ) }