1  import { ExternalLinkIcon } from '@heroicons/react/outline';
 2  import { Trans } from '@lingui/macro';
 3  import { Box, Button, SvgIcon, Typography } from '@mui/material';
 4  import { BasicModal } from 'src/components/primitives/BasicModal';
 5  import { useWeb3Context } from 'src/libs/hooks/useWeb3Context';
 6  import { useRootStore } from 'src/store/root';
 7  import { onRampServices } from 'src/ui-config/onRampServicesConfig';
 8  import { GENERAL } from 'src/utils/mixPanelEvents';
 9  import { useShallow } from 'zustand/shallow';
10  
11  type BuyWithFiatModalProps = {
12    cryptoSymbol: string;
13    open: boolean;
14    close: () => void;
15  };
16  
17  export const BuyWithFiatModal = ({ cryptoSymbol, open, close }: BuyWithFiatModalProps) => {
18    const { currentAccount: walletAddress } = useWeb3Context();
19    const [trackEvent, currentNetworkConfig] = useRootStore(
20      useShallow((store) => [store.trackEvent, store.currentNetworkConfig])
21    );
22    const network = currentNetworkConfig.name;
23  
24    return (
25      <BasicModal open={open} setOpen={close}>
26        <Typography variant="h2">
27          <Trans>Buy Crypto with Fiat</Trans>
28        </Typography>
29        <Typography sx={{ my: 6 }}>
30          {onRampServices.length && onRampServices.length === 1 ? (
31            <Trans>
32              {onRampServices[0].name} on-ramp service is provided by External Provider and by
33              selecting you agree to Terms of the Provider. Your access to the service might be
34              reliant on the External Provider being operational.
35            </Trans>
36          ) : (
37            <Trans>Choose one of the on-ramp services</Trans>
38          )}
39        </Typography>
40        <Box>
41          {onRampServices.map(({ name, makeLink, icon }) => (
42            <Button
43              key={name}
44              variant="outlined"
45              size="large"
46              endIcon={
47                <SvgIcon>
48                  <ExternalLinkIcon />
49                </SvgIcon>
50              }
51              fullWidth
52              sx={{ px: 4, '&:not(:first-of-type)': { mt: 4 } }}
53              href={makeLink({ cryptoSymbol, network, walletAddress })}
54              target="_blank"
55              rel="noopener"
56              onClick={() =>
57                trackEvent(GENERAL.BUY_WITH_FIAT, {
58                  token: cryptoSymbol,
59                  network: network,
60                  onrampname: onRampServices[0].name,
61                })
62              }
63            >
64              <Box sx={{ display: 'flex', flexGrow: 1 }}>
65                <SvgIcon sx={{ mr: 2 }}>{icon}</SvgIcon>
66                <Trans>
67                  {onRampServices.length === 1 ? 'Continue with ' : null}
68                  {name}
69                </Trans>
70              </Box>
71            </Button>
72          ))}
73        </Box>
74      </BasicModal>
75    );
76  };