mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-11-24 11:01:41 +01:00
2673eef3c4
* Redesign approve screen * Add translations to approve screen components * Show account in header of approve screen * Use state prop bool for unlimited vs custom check in edit-approval-permission * Set option to custom on input change in edit-approval-permission * Allow setting of approval amount to unlimited in edit-approval-permission * Fix height of confirm-approval popup * Ensure decimals prop passted to confirm-approve.component is correct type * Ensure first param passed to calcTokenValue in confirm-approve.util is the correct type * Fix e2e test of permission editing * Remove unused code from edit-approval-permission.container
103 lines
3.0 KiB
JavaScript
103 lines
3.0 KiB
JavaScript
import { connect } from 'react-redux'
|
|
import { compose } from 'recompose'
|
|
import { withRouter } from 'react-router-dom'
|
|
import {
|
|
contractExchangeRateSelector,
|
|
transactionFeeSelector,
|
|
} from '../../selectors/confirm-transaction'
|
|
import { showModal } from '../../store/actions'
|
|
import { tokenSelector } from '../../selectors/tokens'
|
|
import {
|
|
getTokenData,
|
|
} from '../../helpers/utils/transactions.util'
|
|
import withTokenTracker from '../../helpers/higher-order-components/with-token-tracker'
|
|
import {
|
|
calcTokenAmount,
|
|
getTokenToAddress,
|
|
getTokenValue,
|
|
} from '../../helpers/utils/token-util'
|
|
import ConfirmApprove from './confirm-approve.component'
|
|
|
|
const mapStateToProps = (state, ownProps) => {
|
|
const { match: { params = {} } } = ownProps
|
|
const { id: paramsTransactionId } = params
|
|
const {
|
|
confirmTransaction,
|
|
metamask: { currentCurrency, conversionRate, selectedAddressTxList, approvedOrigins, selectedAddress },
|
|
} = state
|
|
|
|
const {
|
|
txData: { id: transactionId, txParams: { to: tokenAddress, data } = {} } = {},
|
|
} = confirmTransaction
|
|
|
|
const transaction = selectedAddressTxList.find(({ id }) => id === (Number(paramsTransactionId) || transactionId)) || {}
|
|
|
|
const {
|
|
ethTransactionTotal,
|
|
fiatTransactionTotal,
|
|
} = transactionFeeSelector(state, transaction)
|
|
const tokens = tokenSelector(state)
|
|
const currentToken = tokens && tokens.find(({ address }) => tokenAddress === address)
|
|
const { decimals, symbol: tokenSymbol } = currentToken || {}
|
|
|
|
const tokenData = getTokenData(data)
|
|
const tokenValue = tokenData && getTokenValue(tokenData.params)
|
|
const toAddress = tokenData && getTokenToAddress(tokenData.params)
|
|
const tokenAmount = tokenData && calcTokenAmount(tokenValue, decimals).toNumber()
|
|
const contractExchangeRate = contractExchangeRateSelector(state)
|
|
|
|
const { origin } = transaction
|
|
const formattedOrigin = origin
|
|
? origin[0].toUpperCase() + origin.slice(1)
|
|
: ''
|
|
|
|
const { siteImage } = approvedOrigins[origin] || {}
|
|
return {
|
|
toAddress,
|
|
tokenAddress,
|
|
tokenAmount,
|
|
currentCurrency,
|
|
conversionRate,
|
|
contractExchangeRate,
|
|
fiatTransactionTotal,
|
|
ethTransactionTotal,
|
|
tokenSymbol,
|
|
siteImage,
|
|
token: { address: tokenAddress },
|
|
userAddress: selectedAddress,
|
|
origin: formattedOrigin,
|
|
data,
|
|
decimals: Number(decimals),
|
|
txData: transaction,
|
|
}
|
|
}
|
|
|
|
const mapDispatchToProps = (dispatch) => {
|
|
return {
|
|
showCustomizeGasModal: (txData) => dispatch(showModal({ name: 'CUSTOMIZE_GAS', txData })),
|
|
showEditApprovalPermissionModal: ({
|
|
tokenAmount,
|
|
customTokenAmount,
|
|
tokenSymbol,
|
|
tokenBalance,
|
|
setCustomAmount,
|
|
origin,
|
|
}) => dispatch(showModal({
|
|
name: 'EDIT_APPROVAL_PERMISSION',
|
|
tokenAmount,
|
|
customTokenAmount,
|
|
tokenSymbol,
|
|
tokenBalance,
|
|
setCustomAmount,
|
|
origin,
|
|
})),
|
|
}
|
|
}
|
|
|
|
export default compose(
|
|
withRouter,
|
|
connect(mapStateToProps, mapDispatchToProps),
|
|
withTokenTracker,
|
|
)(ConfirmApprove)
|
|
|