Review spending cap screen (#15919)
Filip Sekulic
2 years ago
committed by
GitHub
parent
d97b9c7eef
commit
a993509afc
@ -0,0 +1,241 @@ |
||||
import React, { useContext } from 'react'; |
||||
import PropTypes from 'prop-types'; |
||||
import classnames from 'classnames'; |
||||
import Box from '../../ui/box/box'; |
||||
import Button from '../../ui/button'; |
||||
import EditGasFeeButton from '../edit-gas-fee-button/edit-gas-fee-button'; |
||||
import Typography from '../../ui/typography/typography'; |
||||
import { |
||||
ALIGN_ITEMS, |
||||
BLOCK_SIZES, |
||||
COLORS, |
||||
DISPLAY, |
||||
FLEX_DIRECTION, |
||||
FONT_WEIGHT, |
||||
JUSTIFY_CONTENT, |
||||
TEXT_ALIGN, |
||||
TYPOGRAPHY, |
||||
} from '../../../helpers/constants/design-system'; |
||||
import { I18nContext } from '../../../../.storybook/i18n'; |
||||
import GasDetailsItem from '../gas-details-item/gas-details-item'; |
||||
import MultiLayerFeeMessage from '../multilayer-fee-message/multi-layer-fee-message'; |
||||
import { formatCurrency } from '../../../helpers/utils/confirm-tx.util'; |
||||
|
||||
export default function ApproveContentCard({ |
||||
showHeader = true, |
||||
symbol, |
||||
title, |
||||
showEdit, |
||||
showAdvanceGasFeeOptions = false, |
||||
onEditClick, |
||||
footer, |
||||
noBorder, |
||||
supportsEIP1559V2, |
||||
renderTransactionDetailsContent, |
||||
renderDataContent, |
||||
isMultiLayerFeeNetwork, |
||||
ethTransactionTotal, |
||||
nativeCurrency, |
||||
fullTxData, |
||||
hexTransactionTotal, |
||||
fiatTransactionTotal, |
||||
currentCurrency, |
||||
isSetApproveForAll, |
||||
isApprovalOrRejection, |
||||
data, |
||||
}) { |
||||
const t = useContext(I18nContext); |
||||
|
||||
return ( |
||||
<Box |
||||
className={classnames({ |
||||
'approve-content-card-container__card': !noBorder, |
||||
'approve-content-card-container__card--no-border': noBorder, |
||||
})} |
||||
> |
||||
{showHeader && ( |
||||
<Box |
||||
display={DISPLAY.FLEX} |
||||
flexDirection={FLEX_DIRECTION.ROW} |
||||
alignItems={ALIGN_ITEMS.CENTER} |
||||
justifyContent={JUSTIFY_CONTENT.FLEX_END} |
||||
className="approve-content-card-container__card-header" |
||||
> |
||||
{supportsEIP1559V2 && title === t('transactionFee') ? null : ( |
||||
<> |
||||
<Box className="approve-content-card-container__card-header__symbol"> |
||||
{symbol} |
||||
</Box> |
||||
<Box |
||||
marginLeft={4} |
||||
className="approve-content-card-container__card-header__title" |
||||
> |
||||
<Typography |
||||
variant={TYPOGRAPHY.H6} |
||||
fontWeight={FONT_WEIGHT.BOLD} |
||||
> |
||||
{title} |
||||
</Typography> |
||||
</Box> |
||||
</> |
||||
)} |
||||
{showEdit && (!showAdvanceGasFeeOptions || !supportsEIP1559V2) && ( |
||||
<Box width={BLOCK_SIZES.ONE_SIXTH}> |
||||
<Button type="link" onClick={() => onEditClick()}> |
||||
<Typography |
||||
variant={TYPOGRAPHY.H7} |
||||
color={COLORS.PRIMARY_DEFAULT} |
||||
> |
||||
{t('edit')} |
||||
</Typography> |
||||
</Button> |
||||
</Box> |
||||
)} |
||||
{showEdit && showAdvanceGasFeeOptions && supportsEIP1559V2 && ( |
||||
<EditGasFeeButton /> |
||||
)} |
||||
</Box> |
||||
)} |
||||
<Box |
||||
marginTop={1} |
||||
marginBottom={3} |
||||
className="approve-content-card-container__card-content" |
||||
> |
||||
{renderTransactionDetailsContent && |
||||
(!isMultiLayerFeeNetwork && supportsEIP1559V2 ? ( |
||||
<GasDetailsItem /> |
||||
) : ( |
||||
<Box |
||||
display={DISPLAY.FLEX} |
||||
flexDirection={FLEX_DIRECTION.ROW} |
||||
justifyContent={JUSTIFY_CONTENT.SPACE_BETWEEN} |
||||
> |
||||
{isMultiLayerFeeNetwork ? ( |
||||
<Box |
||||
display={DISPLAY.FLEX} |
||||
flexDirection={FLEX_DIRECTION.COLUMN} |
||||
className="approve-content-card-container__transaction-details-extra-content" |
||||
> |
||||
<Box |
||||
display={DISPLAY.FLEX} |
||||
justifyContent={JUSTIFY_CONTENT.SPACE_BETWEEN} |
||||
> |
||||
<Typography |
||||
variant={TYPOGRAPHY.H6} |
||||
fontWeight={FONT_WEIGHT.NORMAL} |
||||
color={COLORS.TEXT_MUTED} |
||||
> |
||||
<span>{t('transactionDetailLayer2GasHeading')}</span> |
||||
{`${ethTransactionTotal} ${nativeCurrency}`} |
||||
</Typography> |
||||
</Box> |
||||
<MultiLayerFeeMessage |
||||
transaction={fullTxData} |
||||
layer2fee={hexTransactionTotal} |
||||
nativeCurrency={nativeCurrency} |
||||
plainStyle |
||||
/> |
||||
</Box> |
||||
) : ( |
||||
<> |
||||
<Box> |
||||
<Typography |
||||
variant={TYPOGRAPHY.H7} |
||||
color={COLORS.TEXT_ALTERNATIVE} |
||||
> |
||||
{t('feeAssociatedRequest')} |
||||
</Typography> |
||||
</Box> |
||||
<Box |
||||
display={DISPLAY.FLEX} |
||||
flexDirection={FLEX_DIRECTION.COLUMN} |
||||
alignItems={ALIGN_ITEMS.FLEX_END} |
||||
textAlign={TEXT_ALIGN.RIGHT} |
||||
> |
||||
<Box> |
||||
<Typography |
||||
variant={TYPOGRAPHY.H4} |
||||
fontWeight={FONT_WEIGHT.BOLD} |
||||
color={COLORS.TEXT_DEFAULT} |
||||
> |
||||
{formatCurrency(fiatTransactionTotal, currentCurrency)} |
||||
</Typography> |
||||
</Box> |
||||
<Box> |
||||
<Typography |
||||
variant={TYPOGRAPHY.H6} |
||||
fontWeight={FONT_WEIGHT.NORMAL} |
||||
color={COLORS.TEXT_MUTED} |
||||
> |
||||
{`${ethTransactionTotal} ${nativeCurrency}`} |
||||
</Typography> |
||||
</Box> |
||||
</Box> |
||||
</> |
||||
)} |
||||
</Box> |
||||
))} |
||||
{renderDataContent && ( |
||||
<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN}> |
||||
<Box> |
||||
<Typography |
||||
variant={TYPOGRAPHY.H7} |
||||
color={COLORS.TEXT_ALTERNATIVE} |
||||
> |
||||
{isSetApproveForAll |
||||
? t('functionSetApprovalForAll') |
||||
: t('functionApprove')} |
||||
</Typography> |
||||
</Box> |
||||
{isSetApproveForAll && isApprovalOrRejection !== undefined ? ( |
||||
<Box> |
||||
<Typography |
||||
variant={TYPOGRAPHY.H7} |
||||
color={COLORS.TEXT_ALTERNATIVE} |
||||
> |
||||
{`${t('parameters')}: ${isApprovalOrRejection}`} |
||||
</Typography> |
||||
</Box> |
||||
) : null} |
||||
<Box |
||||
marginRight={4} |
||||
className="approve-content-card-container__data__data-block" |
||||
> |
||||
<Typography |
||||
variant={TYPOGRAPHY.H7} |
||||
color={COLORS.TEXT_ALTERNATIVE} |
||||
> |
||||
{data} |
||||
</Typography> |
||||
</Box> |
||||
</Box> |
||||
)} |
||||
</Box> |
||||
{footer} |
||||
</Box> |
||||
); |
||||
} |
||||
|
||||
ApproveContentCard.propTypes = { |
||||
showHeader: PropTypes.bool, |
||||
symbol: PropTypes.node, |
||||
title: PropTypes.string, |
||||
showEdit: PropTypes.bool, |
||||
showAdvanceGasFeeOptions: PropTypes.bool, |
||||
onEditClick: PropTypes.func, |
||||
footer: PropTypes.node, |
||||
noBorder: PropTypes.bool, |
||||
supportsEIP1559V2: PropTypes.bool, |
||||
renderTransactionDetailsContent: PropTypes.bool, |
||||
renderDataContent: PropTypes.bool, |
||||
isMultiLayerFeeNetwork: PropTypes.bool, |
||||
ethTransactionTotal: PropTypes.string, |
||||
nativeCurrency: PropTypes.string, |
||||
fullTxData: PropTypes.object, |
||||
hexTransactionTotal: PropTypes.string, |
||||
fiatTransactionTotal: PropTypes.string, |
||||
currentCurrency: PropTypes.string, |
||||
isSetApproveForAll: PropTypes.bool, |
||||
isApprovalOrRejection: PropTypes.bool, |
||||
data: PropTypes.string, |
||||
}; |
||||
@ -0,0 +1 @@ |
||||
export { default } from './approve-content-card'; |
||||
@ -0,0 +1,51 @@ |
||||
.approve-content-card-container { |
||||
&__card, |
||||
&__card--no-border { |
||||
border-bottom: 1px solid var(--color-border-default); |
||||
position: relative; |
||||
padding-inline-start: 24px; |
||||
padding-inline-end: 24px; |
||||
} |
||||
|
||||
&__card--no-border { |
||||
border-bottom: none; |
||||
} |
||||
|
||||
&__card-header { |
||||
position: relative; |
||||
|
||||
&__symbol { |
||||
width: auto; |
||||
} |
||||
|
||||
&__symbol--aligned { |
||||
width: 100%; |
||||
} |
||||
|
||||
&__title { |
||||
width: 100%; |
||||
} |
||||
|
||||
&__title--aligned { |
||||
margin-inline-start: 27px; |
||||
position: absolute; |
||||
width: auto; |
||||
} |
||||
} |
||||
|
||||
&__card-content--aligned { |
||||
margin-inline-start: 42px; |
||||
} |
||||
|
||||
&__transaction-details-extra-content { |
||||
width: 100%; |
||||
} |
||||
|
||||
&__data { |
||||
width: 100%; |
||||
|
||||
&__data-block { |
||||
overflow-wrap: break-word; |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1 @@ |
||||
export { default } from './token-allowance'; |
||||
@ -0,0 +1,41 @@ |
||||
.token-allowance-container { |
||||
&__icon-display-content { |
||||
width: fit-content; |
||||
height: 40px; |
||||
box-sizing: border-box; |
||||
border-radius: 100px; |
||||
position: relative; |
||||
|
||||
&__siteimage-identicon { |
||||
width: 24px; |
||||
height: 24px; |
||||
box-shadow: none; |
||||
background: none; |
||||
} |
||||
} |
||||
|
||||
a.token-allowance-container__verify-link { |
||||
width: fit-content; |
||||
margin-inline-start: 96px; |
||||
margin-inline-end: 96px; |
||||
padding: 0; |
||||
} |
||||
|
||||
a.token-allowance-container__view-details { |
||||
width: fit-content; |
||||
margin-inline-start: 108px; |
||||
margin-inline-end: 108px; |
||||
} |
||||
|
||||
&__card-wrapper { |
||||
width: 100%; |
||||
} |
||||
|
||||
&__data { |
||||
width: 100%; |
||||
} |
||||
|
||||
&__full-tx-content { |
||||
max-width: 100%; |
||||
} |
||||
} |
||||
@ -0,0 +1,437 @@ |
||||
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} |
||||
/> |
||||
<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, |
||||
}; |
||||
@ -0,0 +1,201 @@ |
||||
import React from 'react'; |
||||
import TokenAllowance from './token-allowance'; |
||||
|
||||
export default { |
||||
title: 'Pages/TokenAllowance', |
||||
id: __filename, |
||||
argTypes: { |
||||
origin: { |
||||
control: 'text', |
||||
}, |
||||
siteImage: { |
||||
control: 'text', |
||||
}, |
||||
showCustomizeGasModal: { |
||||
action: 'showCustomizeGasModal', |
||||
}, |
||||
useNonceField: { |
||||
control: 'boolean', |
||||
}, |
||||
currentCurrency: { |
||||
control: 'text', |
||||
}, |
||||
nativeCurrency: { |
||||
control: 'text', |
||||
}, |
||||
ethTransactionTotal: { |
||||
control: 'text', |
||||
}, |
||||
fiatTransactionTotal: { |
||||
control: 'text', |
||||
}, |
||||
hexTransactionTotal: { |
||||
control: 'text', |
||||
}, |
||||
isMultiLayerFeeNetwork: { |
||||
control: 'text', |
||||
}, |
||||
supportsEIP1559V2: { |
||||
control: 'boolean', |
||||
}, |
||||
userAddress: { |
||||
control: 'text', |
||||
}, |
||||
tokenAddress: { |
||||
control: 'text', |
||||
}, |
||||
data: { |
||||
control: 'text', |
||||
}, |
||||
isSetApproveForAll: { |
||||
control: 'boolean', |
||||
}, |
||||
setApproveForAllArg: { |
||||
control: 'boolean', |
||||
}, |
||||
customTxParamsData: { |
||||
control: 'object', |
||||
}, |
||||
dappProposedTokenAmount: { |
||||
control: 'text', |
||||
}, |
||||
currentTokenBalance: { |
||||
control: 'text', |
||||
}, |
||||
toAddress: { |
||||
control: 'text', |
||||
}, |
||||
tokenSymbol: { |
||||
control: 'text', |
||||
}, |
||||
txData: { |
||||
control: 'object', |
||||
}, |
||||
}, |
||||
args: { |
||||
origin: 'https://metamask.github.io', |
||||
siteImage: 'https://metamask.github.io/test-dapp/metamask-fox.svg', |
||||
useNonceField: false, |
||||
currentCurrency: 'usd', |
||||
nativeCurrency: 'RopstenETH', |
||||
ethTransactionTotal: '0.0012', |
||||
fiatTransactionTotal: '1.6', |
||||
hexTransactionTotal: '0x44364c5bb0000', |
||||
isMultiLayerFeeNetwork: false, |
||||
supportsEIP1559V2: false, |
||||
userAddress: '0xdd34b35ca1de17dfcdc07f79ff1f8f94868c40a1', |
||||
tokenAddress: '0x55797717b9947b31306f4aac7ad1365c6e3923bd', |
||||
data: '0x095ea7b30000000000000000000000009bc5baf874d2da8d216ae9f137804184ee5afef40000000000000000000000000000000000000000000000000000000000011170', |
||||
isSetApproveForAll: false, |
||||
setApproveForAllArg: false, |
||||
customTxParamsData: {}, |
||||
dappProposedTokenAmount: '7', |
||||
currentTokenBalance: '10', |
||||
toAddress: '0x9bc5baf874d2da8d216ae9f137804184ee5afef4', |
||||
tokenSymbol: 'TST', |
||||
txData: { |
||||
id: 3049568294499567, |
||||
time: 1664449552289, |
||||
status: 'unapproved', |
||||
metamaskNetworkId: '3', |
||||
originalGasEstimate: '0xea60', |
||||
userEditedGasLimit: false, |
||||
chainId: '0x3', |
||||
loadingDefaults: false, |
||||
dappSuggestedGasFees: { |
||||
gasPrice: '0x4a817c800', |
||||
gas: '0xea60', |
||||
}, |
||||
sendFlowHistory: [], |
||||
txParams: { |
||||
from: '0xdd34b35ca1de17dfcdc07f79ff1f8f94868c40a1', |
||||
to: '0x55797717b9947b31306f4aac7ad1365c6e3923bd', |
||||
value: '0x0', |
||||
data: '0x095ea7b30000000000000000000000009bc5baf874d2da8d216ae9f137804184ee5afef40000000000000000000000000000000000000000000000000000000000011170', |
||||
gas: '0xea60', |
||||
maxFeePerGas: '0x4a817c800', |
||||
maxPriorityFeePerGas: '0x4a817c800', |
||||
}, |
||||
origin: 'https://metamask.github.io', |
||||
type: 'approve', |
||||
history: [ |
||||
{ |
||||
id: 3049568294499567, |
||||
time: 1664449552289, |
||||
status: 'unapproved', |
||||
metamaskNetworkId: '3', |
||||
originalGasEstimate: '0xea60', |
||||
userEditedGasLimit: false, |
||||
chainId: '0x3', |
||||
loadingDefaults: true, |
||||
dappSuggestedGasFees: { |
||||
gasPrice: '0x4a817c800', |
||||
gas: '0xea60', |
||||
}, |
||||
sendFlowHistory: [], |
||||
txParams: { |
||||
from: '0xdd34b35ca1de17dfcdc07f79ff1f8f94868c40a1', |
||||
to: '0x55797717b9947b31306f4aac7ad1365c6e3923bd', |
||||
value: '0x0', |
||||
data: '0x095ea7b30000000000000000000000009bc5baf874d2da8d216ae9f137804184ee5afef40000000000000000000000000000000000000000000000000000000000011170', |
||||
gas: '0xea60', |
||||
gasPrice: '0x4a817c800', |
||||
}, |
||||
origin: 'https://metamask.github.io', |
||||
type: 'approve', |
||||
}, |
||||
[ |
||||
{ |
||||
op: 'remove', |
||||
path: '/txParams/gasPrice', |
||||
note: 'Added new unapproved transaction.', |
||||
timestamp: 1664449553939, |
||||
}, |
||||
{ |
||||
op: 'add', |
||||
path: '/txParams/maxFeePerGas', |
||||
value: '0x4a817c800', |
||||
}, |
||||
{ |
||||
op: 'add', |
||||
path: '/txParams/maxPriorityFeePerGas', |
||||
value: '0x4a817c800', |
||||
}, |
||||
{ |
||||
op: 'replace', |
||||
path: '/loadingDefaults', |
||||
value: false, |
||||
}, |
||||
{ |
||||
op: 'add', |
||||
path: '/userFeeLevel', |
||||
value: 'custom', |
||||
}, |
||||
{ |
||||
op: 'add', |
||||
path: '/defaultGasEstimates', |
||||
value: { |
||||
estimateType: 'custom', |
||||
gas: '0xea60', |
||||
maxFeePerGas: '0x4a817c800', |
||||
maxPriorityFeePerGas: '0x4a817c800', |
||||
}, |
||||
}, |
||||
], |
||||
], |
||||
userFeeLevel: 'custom', |
||||
defaultGasEstimates: { |
||||
estimateType: 'custom', |
||||
gas: '0xea60', |
||||
maxFeePerGas: '0x4a817c800', |
||||
maxPriorityFeePerGas: '0x4a817c800', |
||||
}, |
||||
}, |
||||
}, |
||||
}; |
||||
|
||||
export const DefaultStory = (args) => { |
||||
return <TokenAllowance {...args} />; |
||||
}; |
||||
|
||||
DefaultStory.storyName = 'Default'; |
||||
Loading…
Reference in new issue