metamask-extension/ui/components/app/deposit-popover/deposit-popover.js

import PropTypes from 'prop-types';
import React, { useContext } from 'react';
import { useSelector, useDispatch } from 'react-redux';

import { I18nContext } from '../../../contexts/i18n';
import { MetaMetricsContext } from '../../../contexts/metametrics';
import {
  NETWORK_TO_NAME_MAP,
  BUYABLE_CHAINS_MAP,
} from '../../../../shared/constants/network';
import { EVENT, EVENT_NAMES } from '../../../../shared/constants/metametrics';

import LogoMoonPay from '../../ui/logo/logo-moonpay';
import LogoWyre from '../../ui/logo/logo-wyre';
import LogoTransak from '../../ui/logo/logo-transak';
import LogoCoinbasePay from '../../ui/logo/logo-coinbasepay';
import LogoDepositEth from '../../ui/logo/logo-deposit-eth';
import Popover from '../../ui/popover';

import { buy, showModal, hideWarning } from '../../../store/actions';
import {
  getIsTestnet,
  getCurrentChainId,
  getSelectedAddress,
  getIsBuyableTransakChain,
  getIsBuyableMoonPayChain,
  getIsBuyableWyreChain,
  getIsBuyableCoinbasePayChain,
  getIsBuyableCoinbasePayToken,
  getIsBuyableTransakToken,
  getIsBuyableMoonpayToken,
} from '../../../selectors/selectors';

import OnRampItem from './on-ramp-item';

const DepositPopover = ({ onClose, token }) => {
  const isTokenDeposit = Boolean(token);

  const t = useContext(I18nContext);
  const trackEvent = useContext(MetaMetricsContext);
  const dispatch = useDispatch();

  const chainId = useSelector(getCurrentChainId);
  const isTestnet = useSelector(getIsTestnet);
  const address = useSelector(getSelectedAddress);
  const isBuyableTransakChain = useSelector(getIsBuyableTransakChain);
  const isBuyableMoonPayChain = useSelector(getIsBuyableMoonPayChain);
  const isBuyableWyreChain = useSelector(getIsBuyableWyreChain);
  const isBuyableCoinbasePayChain = useSelector(getIsBuyableCoinbasePayChain);

  const isTokenBuyableCoinbasePay = useSelector((state) =>
    getIsBuyableCoinbasePayToken(state, token?.symbol),
  );
  const isTokenBuyableTransak = useSelector((state) =>
    getIsBuyableTransakToken(state, token?.symbol),
  );
  const isTokenBuyableMoonpay = useSelector((state) =>
    getIsBuyableMoonpayToken(state, token?.symbol),
  );

  const networkName = NETWORK_TO_NAME_MAP[chainId];
  const symbol = token
    ? token.symbol
    : BUYABLE_CHAINS_MAP[chainId].nativeCurrency;

  const showAccountDetailModal = () => {
    dispatch(showModal({ name: 'ACCOUNT_DETAILS' }));
  };
  const hideWarningMessage = () => {
    dispatch(hideWarning());
  };

  const toCoinbasePay = () => {
    dispatch(
      buy({ service: 'coinbase', address, chainId, symbol: token?.symbol }),
    );
  };
  const toTransak = () => {
    dispatch(
      buy({ service: 'transak', address, chainId, symbol: token?.symbol }),
    );
  };
  const toMoonPay = () => {
    dispatch(
      buy({ service: 'moonpay', address, chainId, symbol: token?.symbol }),
    );
  };
  const toWyre = () => {
    dispatch(buy({ service: 'wyre', address, chainId }));
  };
  const toFaucet = () => dispatch(buy({ chainId }));

  const goToAccountDetailsModal = () => {
    hideWarningMessage();
    showAccountDetailModal();
    onClose();
  };

  return (
    <Popover
      title={t('depositCrypto', [symbol])}
      subtitle={isTokenDeposit ? '' : t('needCryptoInWallet', [symbol])}
      onClose={onClose}
    >
      <OnRampItem
        logo={<LogoCoinbasePay />}
        title={t('buyCryptoWithCoinbasePay', [symbol])}
        text={t('buyCryptoWithCoinbasePayDescription', [symbol])}
        buttonLabel={t('continueToCoinbasePay')}
        onButtonClick={() => {
          trackEvent({
            category: EVENT.CATEGORIES.ACCOUNTS,
            event: EVENT_NAMES.ONRAMP_PROVIDER_SELECTED,
            properties: {
              onramp_provider_type: EVENT.ONRAMP_PROVIDER_TYPES.COINBASE,
            },
          });
          toCoinbasePay();
        }}
        hide={
          isTokenDeposit
            ? !isBuyableCoinbasePayChain || !isTokenBuyableCoinbasePay
            : !isBuyableCoinbasePayChain
        }
      />
      <OnRampItem
        logo={<LogoTransak />}
        title={t('buyCryptoWithTransak', [symbol])}
        text={t('buyCryptoWithTransakDescription', [symbol])}
        buttonLabel={t('continueToTransak')}
        onButtonClick={() => {
          trackEvent({
            category: EVENT.CATEGORIES.ACCOUNTS,
            event: EVENT_NAMES.ONRAMP_PROVIDER_SELECTED,
            properties: {
              onramp_provider_type: EVENT.ONRAMP_PROVIDER_TYPES.TRANSAK,
            },
          });
          toTransak();
        }}
        hide={
          isTokenDeposit
            ? !isBuyableTransakChain || !isTokenBuyableTransak
            : !isBuyableTransakChain
        }
      />
      <OnRampItem
        logo={<LogoMoonPay />}
        title={t('buyCryptoWithMoonPay', [symbol])}
        text={t('buyCryptoWithMoonPayDescription', [symbol])}
        buttonLabel={t('continueToMoonPay')}
        onButtonClick={() => {
          trackEvent({
            category: EVENT.CATEGORIES.ACCOUNTS,
            event: EVENT_NAMES.ONRAMP_PROVIDER_SELECTED,
            properties: {
              onramp_provider_type: EVENT.ONRAMP_PROVIDER_TYPES.MOONPAY,
            },
          });
          toMoonPay();
        }}
        hide={
          isTokenDeposit
            ? !isBuyableMoonPayChain || !isTokenBuyableMoonpay
            : !isBuyableMoonPayChain
        }
      />

      <OnRampItem
        logo={<LogoWyre />}
        title={t('buyWithWyre', [symbol])}
        text={t('buyWithWyreDescription', [symbol])}
        buttonLabel={t('continueToWyre')}
        onButtonClick={() => {
          trackEvent({
            category: EVENT.CATEGORIES.ACCOUNTS,
            event: EVENT_NAMES.ONRAMP_PROVIDER_SELECTED,
            properties: {
              onramp_provider_type: EVENT.ONRAMP_PROVIDER_TYPES.WYRE,
            },
          });
          toWyre();
        }}
        hide={isTokenDeposit || !isBuyableWyreChain}
      />

      <OnRampItem
        logo={<LogoDepositEth width="50px" />}
        title={t('directDepositCrypto', [symbol])}
        text={t('directDepositCryptoExplainer', [symbol])}
        buttonLabel={t('viewAccount')}
        onButtonClick={() => {
          trackEvent({
            category: EVENT.CATEGORIES.ACCOUNTS,
            event: EVENT_NAMES.ONRAMP_PROVIDER_SELECTED,
            properties: {
              onramp_provider_type: EVENT.ONRAMP_PROVIDER_TYPES.SELF_DEPOSIT,
            },
          });
          goToAccountDetailsModal();
        }}
        hide={isTokenDeposit || !isBuyableWyreChain}
      />

      {networkName && (
        <OnRampItem
          logo={<i className="fa fa-tint fa-2x" />}
          title={t('testFaucet')}
          text={t('getEtherFromFaucet', [networkName])}
          buttonLabel={t('getEther')}
          onButtonClick={() => toFaucet()}
          hide={!isTestnet}
        />
      )}
    </Popover>
  );
};

DepositPopover.propTypes = {
  onClose: PropTypes.func.isRequired,
  token: PropTypes.shape({
    address: PropTypes.string.isRequired,
    decimals: PropTypes.number,
    symbol: PropTypes.string,
    image: PropTypes.string,
    aggregators: PropTypes.array,
    isERC721: PropTypes.bool,
  }),
};

export default DepositPopover;