1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-05 15:35:46 +01:00
metamask-extension/ui/components/app/deposit-popover/deposit-popover.js
Garrett Bear 47f7096d35
16083: Fix deposit eth popover layout (#16100)
* 16083: Fix deposit eth popover layout

* adding responsive padding updates

* classname fix

* Add custom classname option
2022-10-12 16:07:28 -07:00

242 lines
7.6 KiB
JavaScript

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,
getIsBuyableWyreToken,
} 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 isTokenBuyableWyre = useSelector((state) =>
getIsBuyableWyreToken(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, symbol: token?.symbol }));
};
const toFaucet = () => dispatch(buy({ chainId }));
const goToAccountDetailsModal = () => {
hideWarningMessage();
showAccountDetailModal();
onClose();
};
return (
<Popover
title={t('depositCrypto', [symbol])}
subtitle={isTokenDeposit ? '' : t('needCryptoInWallet', [symbol])}
onClose={onClose}
className="deposit-popover"
>
<ul>
<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 || !isTokenBuyableWyre
: !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}
/>
)}
</ul>
</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;