import React from 'react' import { Card } from 'lib/components/Card' import { InputLabel } from 'lib/components/InputLabel' import { TextInputGroup, TextInputGroupType } from 'lib/components/TextInputGroup' import { DropdownInputGroup } from 'lib/components/DropdownInputGroup' import useCounter from 'lib/hooks/useCounter' import { constants } from 'ethers' import { Button } from './Button' export const PrizeSplitCard = (props) => { const { prizePool1Target, prizePool1Percentage, prizePool2Target, prizePool2Percentage, setPrizePool1Target, setPrizePool1TokenType, setPrizePool1Percentage, setPrizePool2Target, setPrizePool2Percentage, setPrizePool2TokenType } = props const counter = useCounter(1, { min: 0, max: 2 }) const handleRemovePrizeSplit = (index) => { if (index == 1) { setPrizePool1Target(constants.AddressZero) setPrizePool1Percentage(undefined) setPrizePool1TokenType(undefined) } else { setPrizePool2Target(constants.AddressZero) setPrizePool2Percentage(undefined) setPrizePool2TokenType(undefined) } counter.decr(1) } return ( <Card> <InputLabel primary='Prize Split' description='Distribute a percentage of prize (before awarding winners) on every draw to static address.' > {(counter.value == 1 || counter.value == 2) && ( <PrizeSplitPosition index={1} target={prizePool1Target} percentage={prizePool1Percentage} setTarget={setPrizePool1Target} setPercentage={setPrizePool1Percentage} setTokenType={setPrizePool1TokenType} /> )} {counter.value == 2 && ( <PrizeSplitPosition index={2} target={prizePool2Target} percentage={prizePool2Percentage} setTarget={setPrizePool2Target} setPercentage={setPrizePool2Percentage} setTokenType={setPrizePool2TokenType} /> )} </InputLabel> <div className='flex items-center mt-4'> <Button disabled={counter.value == 2} color='primary' size='sm' paddingClasses='p-2' onClick={() => counter.incr(1)} > Add prize split </Button> <Button disabled={counter.value == 0} color='warning' size='sm' className='ml-2' paddingClasses='p-2' onClick={() => handleRemovePrizeSplit(counter.value)} > Remove prize split </Button> </div> </Card> ) } const PrizeSplitPosition = (props) => { const { target, percentage, tokenType, setTarget, setPercentage, setTokenType, index } = props const tokenTypeOptions = { 0: { value: 0, label: 'Ticket' }, 1: { value: 1, label: 'Sponsorship' } } const formatValue = (key) => tokenTypeOptions[key].label return ( <> <h3 className='font-normal mt-10 mb-5 ml-0 text-xl'>Additional Prize Split {index}</h3> <div className='grid grid-cols-5'> <TextInputGroup id='_prizeSplitRecipient' containerClassName='col-span-3 sm:mr-2' label='Recipient' required type={TextInputGroupType.text} onChange={(e) => { setTarget(e.target.value) }} value={target} unit='Ξ Address' /> <TextInputGroup id='_prizeSplitPercentage' containerClassName='col-span-2 sm:ml-2' label='Interest to be deducted for an award' required type={TextInputGroupType.number} max={100} min={1} step={1} onChange={(e) => { setPercentage(e.target.value) }} value={percentage} unit='% percent' /> </div> <div className=''> <DropdownInputGroup id='tokenType' placeHolder='Token Type' label={'Select token type the recipient will receive upon prize split distribution.'} formatValue={formatValue} onValueSet={setTokenType} current={tokenType} values={tokenTypeOptions} /> </div> </> ) }