1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-05 15:35:46 +01:00
metamask-extension/ui/pages/token-allowance/token-allowance.js
ryanml c88efadf1e
Remove ETH badge from NetworkAccountBalanceHeader when on non-ETH net… (#16102)
* Remove ETH badge from NetworkAccountBalanceHeader when on non-ETH networks

* Network specific icons, or fallback, in the network-account-balance-header

* Update snapshots

* Code cleanup

Co-authored-by: Dan Miller <danjm.com@gmail.com>
2022-10-25 17:03:45 +02:00

439 lines
13 KiB
JavaScript

import React, { useState, useContext } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useHistory } from 'react-router-dom';
import PropTypes from 'prop-types';
import Box from '../../components/ui/box/box';
import NetworkAccountBalanceHeader from '../../components/app/network-account-balance-header/network-account-balance-header';
import UrlIcon from '../../components/ui/url-icon/url-icon';
import Typography from '../../components/ui/typography/typography';
import {
ALIGN_ITEMS,
BORDER_STYLE,
COLORS,
DISPLAY,
FLEX_DIRECTION,
FONT_WEIGHT,
JUSTIFY_CONTENT,
TEXT_ALIGN,
TYPOGRAPHY,
} from '../../helpers/constants/design-system';
import { I18nContext } from '../../contexts/i18n';
import ContractTokenValues from '../../components/ui/contract-token-values/contract-token-values';
import Button from '../../components/ui/button';
import ReviewSpendingCap from '../../components/ui/review-spending-cap/review-spending-cap';
import { PageContainerFooter } from '../../components/ui/page-container';
import ContractDetailsModal from '../../components/app/modals/contract-details-modal/contract-details-modal';
import {
getCurrentAccountWithSendEtherInfo,
getNetworkIdentifier,
transactionFeeSelector,
getKnownMethodData,
getRpcPrefsForCurrentProvider,
} from '../../selectors';
import { NETWORK_TO_NAME_MAP } from '../../../shared/constants/network';
import {
cancelTx,
updateAndApproveTx,
updateCustomNonce,
} from '../../store/actions';
import { clearConfirmTransaction } from '../../ducks/confirm-transaction/confirm-transaction.duck';
import { getMostRecentOverviewPage } from '../../ducks/history/history';
import ApproveContentCard from '../../components/app/approve-content-card/approve-content-card';
export default function TokenAllowance({
origin,
siteImage,
showCustomizeGasModal,
useNonceField,
currentCurrency,
nativeCurrency,
ethTransactionTotal,
fiatTransactionTotal,
hexTransactionTotal,
txData,
isMultiLayerFeeNetwork,
supportsEIP1559V2,
userAddress,
tokenAddress,
data,
isSetApproveForAll,
isApprovalOrRejection,
customTxParamsData,
dappProposedTokenAmount,
currentTokenBalance,
toAddress,
tokenSymbol,
}) {
const t = useContext(I18nContext);
const dispatch = useDispatch();
const history = useHistory();
const mostRecentOverviewPage = useSelector(getMostRecentOverviewPage);
const [showContractDetails, setShowContractDetails] = useState(false);
const [showFullTxDetails, setShowFullTxDetails] = useState(false);
const [isFirstPage, setIsFirstPage] = useState(false);
const currentAccount = useSelector(getCurrentAccountWithSendEtherInfo);
const networkIdentifier = useSelector(getNetworkIdentifier);
const rpcPrefs = useSelector(getRpcPrefsForCurrentProvider);
let fullTxData = { ...txData };
if (customTxParamsData) {
fullTxData = {
...fullTxData,
txParams: {
...fullTxData.txParams,
data: customTxParamsData,
},
};
}
const fee = useSelector((state) => transactionFeeSelector(state, fullTxData));
const methodData = useSelector((state) => getKnownMethodData(state, data));
const networkName =
NETWORK_TO_NAME_MAP[fullTxData.chainId] || networkIdentifier;
const customNonceValue = '';
const customNonceMerge = (transactionData) =>
customNonceValue
? {
...transactionData,
customNonceValue,
}
: transactionData;
const handleReject = () => {
dispatch(cancelTx(fullTxData)).then(() => {
dispatch(clearConfirmTransaction());
dispatch(updateCustomNonce(''));
history.push(mostRecentOverviewPage);
});
};
const handleApprove = () => {
const { name } = methodData;
if (fee.gasEstimationObject.baseFeePerGas) {
fullTxData.estimatedBaseFee = fee.gasEstimationObject.baseFeePerGas;
}
if (name) {
fullTxData.contractMethodName = name;
}
if (dappProposedTokenAmount) {
fullTxData.dappProposedTokenAmount = dappProposedTokenAmount;
fullTxData.originalApprovalAmount = dappProposedTokenAmount;
}
if (currentTokenBalance) {
fullTxData.currentTokenBalance = currentTokenBalance;
}
dispatch(updateAndApproveTx(customNonceMerge(fullTxData))).then(() => {
dispatch(clearConfirmTransaction());
dispatch(updateCustomNonce(''));
history.push(mostRecentOverviewPage);
});
};
return (
<Box className="token-allowance-container page-container">
<Box
paddingLeft={4}
paddingRight={4}
alignItems={ALIGN_ITEMS.CENTER}
display={DISPLAY.FLEX}
flexDirection={FLEX_DIRECTION.ROW}
justifyContent={JUSTIFY_CONTENT.SPACE_BETWEEN}
>
<Box>
{!isFirstPage && (
<Button type="inline" onClick={() => setIsFirstPage(true)}>
<Typography
variant={TYPOGRAPHY.H6}
color={COLORS.TEXT_MUTED}
fontWeight={FONT_WEIGHT.BOLD}
>
{'<'} {t('back')}
</Typography>
</Button>
)}
</Box>
<Box textAlign={TEXT_ALIGN.END}>
<Typography
variant={TYPOGRAPHY.H7}
color={COLORS.TEXT_MUTED}
fontWeight={FONT_WEIGHT.BOLD}
>
{isFirstPage ? 1 : 2} {t('ofTextNofM')} 2
</Typography>
</Box>
</Box>
<NetworkAccountBalanceHeader
networkName={networkName}
accountName={currentAccount.name}
accountBalance={currentTokenBalance}
tokenName={tokenSymbol}
accountAddress={userAddress}
chainId={fullTxData.chainId}
/>
<Box
display={DISPLAY.FLEX}
flexDirection={FLEX_DIRECTION.ROW}
justifyContent={JUSTIFY_CONTENT.CENTER}
>
<Box
display={DISPLAY.FLEX}
alignItems={ALIGN_ITEMS.CENTER}
marginTop={6}
marginRight={12}
marginBottom={8}
marginLeft={12}
paddingTop={2}
paddingRight={4}
paddingBottom={2}
paddingLeft={2}
borderColor={COLORS.BORDER_MUTED}
borderStyle={BORDER_STYLE.SOLID}
borderWidth={1}
className="token-allowance-container__icon-display-content"
>
<UrlIcon
className="token-allowance-container__icon-display-content__siteimage-identicon"
fallbackClassName="token-allowance-container__icon-display-content__siteimage-identicon"
name={origin}
url={siteImage}
/>
<Typography
variant={TYPOGRAPHY.H6}
fontWeight={FONT_WEIGHT.NORMAL}
color={COLORS.TEXT_ALTERNATIVE}
boxProps={{ marginLeft: 1, marginTop: 2 }}
>
{origin}
</Typography>
</Box>
</Box>
<Box marginBottom={5}>
<Typography
variant={TYPOGRAPHY.H3}
fontWeight={FONT_WEIGHT.BOLD}
align={TEXT_ALIGN.CENTER}
>
{isFirstPage ? t('setSpendingCap') : t('reviewSpendingCap')}
</Typography>
</Box>
<Box>
<ContractTokenValues
tokenName={tokenSymbol}
address={tokenAddress}
chainId={fullTxData.chainId}
rpcPrefs={rpcPrefs}
/>
</Box>
<Box
marginTop={1}
display={DISPLAY.FLEX}
flexDirection={FLEX_DIRECTION.ROW}
justifyContent={JUSTIFY_CONTENT.CENTER}
>
<Button
type="link"
onClick={() => setShowContractDetails(true)}
className="token-allowance-container__verify-link"
>
<Typography variant={TYPOGRAPHY.H6} color={COLORS.PRIMARY_DEFAULT}>
{t('verifyContractDetails')}
</Typography>
</Button>
</Box>
<Box margin={[4, 4, 3, 4]}>
<ReviewSpendingCap
tokenName={tokenSymbol}
currentTokenBalance={parseFloat(currentTokenBalance)}
tokenValue={10}
onEdit={() => setIsFirstPage(true)}
/>
</Box>
{!isFirstPage && (
<Box className="token-allowance-container__card-wrapper">
<ApproveContentCard
symbol={<i className="fa fa-tag" />}
title={t('transactionFee')}
showEdit
showAdvanceGasFeeOptions
onEditClick={showCustomizeGasModal}
renderTransactionDetailsContent
noBorder={useNonceField || !showFullTxDetails}
supportsEIP1559V2={supportsEIP1559V2}
isMultiLayerFeeNetwork={isMultiLayerFeeNetwork}
ethTransactionTotal={ethTransactionTotal}
nativeCurrency={nativeCurrency}
fullTxData={fullTxData}
hexTransactionTotal={hexTransactionTotal}
fiatTransactionTotal={fiatTransactionTotal}
currentCurrency={currentCurrency}
/>
</Box>
)}
<Box
display={DISPLAY.FLEX}
flexDirection={FLEX_DIRECTION.ROW}
justifyContent={JUSTIFY_CONTENT.CENTER}
>
<Button
type="link"
onClick={() => setShowFullTxDetails(!showFullTxDetails)}
className="token-allowance-container__view-details"
>
<Typography
variant={TYPOGRAPHY.H6}
color={COLORS.PRIMARY_DEFAULT}
marginRight={1}
>
{t('viewDetails')}
</Typography>
{showFullTxDetails ? (
<i className="fa fa-sm fa-angle-up" />
) : (
<i className="fa fa-sm fa-angle-down" />
)}
</Button>
</Box>
{showFullTxDetails ? (
<Box
display={DISPLAY.FLEX}
flexDirection={FLEX_DIRECTION.COLUMN}
alignItems={ALIGN_ITEMS.CENTER}
className="token-allowance-container__full-tx-content"
>
<Box className="token-allowance-container__data">
<ApproveContentCard
symbol={<i className="fa fa-file" />}
title={t('data')}
renderDataContent
noBorder
supportsEIP1559V2={supportsEIP1559V2}
isSetApproveForAll={isSetApproveForAll}
isApprovalOrRejection={isApprovalOrRejection}
data={data}
/>
</Box>
</Box>
) : null}
<PageContainerFooter
cancelText={t('reject')}
submitText={isFirstPage ? t('next') : t('approveButtonText')}
onCancel={() => handleReject()}
onSubmit={() => (isFirstPage ? setIsFirstPage(false) : handleApprove())}
/>
{showContractDetails && (
<ContractDetailsModal
tokenName={tokenSymbol}
onClose={() => setShowContractDetails(false)}
tokenAddress={tokenAddress}
toAddress={toAddress}
chainId={fullTxData.chainId}
rpcPrefs={rpcPrefs}
origin={origin}
siteImage={siteImage}
/>
)}
</Box>
);
}
TokenAllowance.propTypes = {
/**
* Dapp URL
*/
origin: PropTypes.string,
/**
* Dapp image
*/
siteImage: PropTypes.string,
/**
* Function that is supposed to open the customized gas modal
*/
showCustomizeGasModal: PropTypes.func,
/**
* Whether nonce field should be used or not
*/
useNonceField: PropTypes.bool,
/**
* Current fiat currency (e.g. USD)
*/
currentCurrency: PropTypes.string,
/**
* Current native currency (e.g. RopstenETH)
*/
nativeCurrency: PropTypes.string,
/**
* Total sum of the transaction in native currency
*/
ethTransactionTotal: PropTypes.string,
/**
* Total sum of the transaction in fiat currency
*/
fiatTransactionTotal: PropTypes.string,
/**
* Total sum of the transaction converted to hex value
*/
hexTransactionTotal: PropTypes.string,
/**
* Current transaction
*/
txData: PropTypes.object,
/**
* Is multi-layer fee network or not
*/
isMultiLayerFeeNetwork: PropTypes.bool,
/**
* Is the enhanced gas fee enabled or not
*/
supportsEIP1559V2: PropTypes.bool,
/**
* User's address
*/
userAddress: PropTypes.string,
/**
* Address of the token that is waiting to be allowed
*/
tokenAddress: PropTypes.string,
/**
* Current transaction data
*/
data: PropTypes.string,
/**
* Is set approve for all or not
*/
isSetApproveForAll: PropTypes.bool,
/**
* Whether a current set approval for all transaction will approve or revoke access
*/
isApprovalOrRejection: PropTypes.bool,
/**
* Custom transaction parameters data made by the user (fees)
*/
customTxParamsData: PropTypes.object,
/**
* Token amount proposed by the Dapp
*/
dappProposedTokenAmount: PropTypes.string,
/**
* Token balance of the current account
*/
currentTokenBalance: PropTypes.string,
/**
* Contract address requesting spending cap
*/
toAddress: PropTypes.string,
/**
* Symbol of the token that is waiting to be allowed
*/
tokenSymbol: PropTypes.string,
};