1  import { DelegationType } from '@aave/contract-helpers';
 2  import { Trans } from '@lingui/macro';
 3  import { Typography } from '@mui/material';
 4  import React, { useEffect } from 'react';
 5  import { StyledTxModalToggleButton } from 'src/components/StyledToggleButton';
 6  import { StyledTxModalToggleGroup } from 'src/components/StyledToggleButtonGroup';
 7  
 8  export type DelegationTypeSelectorProps = {
 9    delegationType: DelegationType;
10    setDelegationType: React.Dispatch<React.SetStateAction<DelegationType>>;
11  };
12  
13  export const DelegationTypeSelector = ({
14    delegationType,
15    setDelegationType,
16  }: DelegationTypeSelectorProps) => {
17    useEffect(() => {
18      setDelegationType(DelegationType.ALL);
19    }, [setDelegationType]);
20  
21    return (
22      <StyledTxModalToggleGroup
23        value={delegationType}
24        exclusive
25        onChange={(_, value) => setDelegationType(value)}
26      >
27        <StyledTxModalToggleButton
28          value={DelegationType.ALL}
29          disabled={delegationType === DelegationType.ALL}
30        >
31          <Typography variant="buttonM">
32            <Trans>Both</Trans>
33          </Typography>
34        </StyledTxModalToggleButton>
35  
36        <StyledTxModalToggleButton
37          value={DelegationType.VOTING}
38          disabled={delegationType === DelegationType.VOTING}
39        >
40          <Typography variant="buttonM">
41            <Trans>Voting</Trans>
42          </Typography>
43        </StyledTxModalToggleButton>
44  
45        <StyledTxModalToggleButton
46          value={DelegationType.PROPOSITION}
47          disabled={delegationType === DelegationType.PROPOSITION}
48        >
49          <Typography variant="buttonM">
50            <Trans>Proposition</Trans>
51          </Typography>
52        </StyledTxModalToggleButton>
53      </StyledTxModalToggleGroup>
54    );
55  };