1  import { Trans } from '@lingui/macro';
 2  import { Box, Typography } from '@mui/material';
 3  import { StyledTxModalToggleButton } from 'src/components/StyledToggleButton';
 4  import { StyledTxModalToggleGroup } from 'src/components/StyledToggleButtonGroup';
 5  import { useRootStore } from 'src/store/root';
 6  import { REPAY_MODAL } from 'src/utils/mixPanelEvents';
 7  import { useShallow } from 'zustand/shallow';
 8  
 9  export enum RepayType {
10    BALANCE,
11    COLLATERAL,
12  }
13  export function RepayTypeSelector({
14    repayType,
15    setRepayType,
16  }: {
17    repayType: RepayType;
18    setRepayType: (type: RepayType) => void;
19  }) {
20    const [trackEvent, currentMarketData] = useRootStore(
21      useShallow((store) => [store.trackEvent, store.currentMarketData])
22    );
23  
24    if (!currentMarketData.enabledFeatures?.collateralRepay) return null;
25    return (
26      <Box sx={{ mb: 6 }}>
27        <Typography mb={1} color="text.secondary">
28          <Trans>Repay with</Trans>
29        </Typography>
30  
31        <StyledTxModalToggleGroup
32          color="primary"
33          value={repayType}
34          exclusive
35          onChange={(_, value) => setRepayType(value)}
36        >
37          <StyledTxModalToggleButton
38            value={RepayType.BALANCE}
39            disabled={repayType === RepayType.BALANCE}
40            onClick={() => trackEvent(REPAY_MODAL.SWITCH_REPAY_TYPE, { repayType: 'Wallet Balance' })}
41          >
42            <Typography variant="buttonM">
43              <Trans>Wallet balance</Trans>
44            </Typography>
45          </StyledTxModalToggleButton>
46  
47          <StyledTxModalToggleButton
48            value={RepayType.COLLATERAL}
49            disabled={repayType === RepayType.COLLATERAL}
50            onClick={() => trackEvent(REPAY_MODAL.SWITCH_REPAY_TYPE, { repayType: 'Collateral' })}
51          >
52            <Typography variant="buttonM">
53              <Trans>Collateral</Trans>
54            </Typography>
55          </StyledTxModalToggleButton>
56        </StyledTxModalToggleGroup>
57      </Box>
58    );
59  }