1  import { CreditCardIcon } from '@heroicons/react/outline';
 2  import { Trans } from '@lingui/macro';
 3  import { Button, SvgIcon } from '@mui/material';
 4  import { useState } from 'react';
 5  import { useCryptoBuyAvailable } from 'src/hooks/useCryptoBuyAvailable';
 6  import { useRootStore } from 'src/store/root';
 7  import { GENERAL } from 'src/utils/mixPanelEvents';
 8  
 9  import { BuyWithFiatModal } from './BuyWithFiatModal';
10  
11  type BuyWithFiatProps = {
12    cryptoSymbol: string;
13    networkMarketName: string;
14    funnel?: string;
15  };
16  
17  export const BuyWithFiat = ({ cryptoSymbol, networkMarketName, funnel }: BuyWithFiatProps) => {
18    const { isAvailable } = useCryptoBuyAvailable(cryptoSymbol, networkMarketName);
19    const [anchorEl, setAnchorEl] = useState<Element | null>(null);
20    const open = Boolean(anchorEl);
21    const trackEvent = useRootStore((store) => store.trackEvent);
22    const handleClick = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
23      trackEvent(GENERAL.OPEN_MODAL, {
24        modal: 'Buy crypto with fiat',
25        assetName: cryptoSymbol,
26        funnel: funnel,
27      });
28      setAnchorEl(event.currentTarget);
29    };
30  
31    const handleClose = () => {
32      setAnchorEl(null);
33    };
34    return isAvailable ? (
35      <>
36        <Button
37          variant="outlined"
38          size="small"
39          onClick={handleClick}
40          startIcon={
41            <SvgIcon sx={{ mr: -1 }}>
42              <CreditCardIcon />
43            </SvgIcon>
44          }
45        >
46          <Trans>Buy {cryptoSymbol} with Fiat</Trans>
47        </Button>
48        <BuyWithFiatModal cryptoSymbol={cryptoSymbol} open={open} close={handleClose} />
49      </>
50    ) : null;
51  };