diff options
author | Whymarrh Whitby <whymarrh.whitby@gmail.com> | 2019-06-18 20:17:14 +0800 |
---|---|---|
committer | Dan J Miller <danjm.com@gmail.com> | 2019-06-18 20:17:14 +0800 |
commit | 748801f4179d353959f40049cf6ca27851eebd0e (patch) | |
tree | 5aa626393b14156281a1468d8dc0dfb135746517 /ui/app/pages/confirm-transaction | |
parent | 2ff184d77ee33dc1c06256f160c97be714feec62 (diff) | |
download | tangerine-wallet-browser-748801f4179d353959f40049cf6ca27851eebd0e.tar.gz tangerine-wallet-browser-748801f4179d353959f40049cf6ca27851eebd0e.tar.zst tangerine-wallet-browser-748801f4179d353959f40049cf6ca27851eebd0e.zip |
4byte fallback (#6551)
* Adds 4byte registry fallback to getMethodData() (#6435)
* Adds fetchWithCache to guard against unnecessary API calls
* Add custom fetch wrapper with abort on timeout
* Use opts and cacheRefreshTime in fetch-with-cache util
* Use custom fetch wrapper with timeout for fetch-with-cache
* Improve contract method data fetching (#6623)
* Remove async call from getTransactionActionKey()
* Stop blocking confirm screen rendering on method data loading, and base screen route on transactionCategory
* Remove use of withMethodData, fix use of knownMethodData, in relation to transaction-list-item.component
* Load data contract method data progressively, making it non-blocking; requires simplifying conf-tx-base lifecycle logic.
* Allow editing of gas price while loading on the confirm screen.
* Fix transactionAction component and its unit tests.
* Fix confirm transaction components for cases of route transitions within metamask.
* Only call toString on id if truthy in getNavigateTxData()
* Fix knownMethodData retrieval and data fetching from fourbyte
Diffstat (limited to 'ui/app/pages/confirm-transaction')
-rw-r--r-- | ui/app/pages/confirm-transaction/confirm-transaction.component.js | 74 | ||||
-rw-r--r-- | ui/app/pages/confirm-transaction/confirm-transaction.container.js | 31 |
2 files changed, 54 insertions, 51 deletions
diff --git a/ui/app/pages/confirm-transaction/confirm-transaction.component.js b/ui/app/pages/confirm-transaction/confirm-transaction.component.js index 35b8dc5aa..cca86fa9b 100644 --- a/ui/app/pages/confirm-transaction/confirm-transaction.component.js +++ b/ui/app/pages/confirm-transaction/confirm-transaction.component.js @@ -33,6 +33,10 @@ export default class ConfirmTransaction extends Component { confirmTransaction: PropTypes.object, clearConfirmTransaction: PropTypes.func, fetchBasicGasAndTimeEstimates: PropTypes.func, + transaction: PropTypes.object, + getContractMethodData: PropTypes.func, + transactionId: PropTypes.string, + paramsTransactionId: PropTypes.string, } getParamsTransactionId () { @@ -45,8 +49,11 @@ export default class ConfirmTransaction extends Component { totalUnapprovedCount = 0, send = {}, history, - confirmTransaction: { txData: { id: transactionId } = {} }, + transaction: { txParams: { data } = {} } = {}, fetchBasicGasAndTimeEstimates, + getContractMethodData, + transactionId, + paramsTransactionId, } = this.props if (!totalUnapprovedCount && !send.to) { @@ -54,67 +61,44 @@ export default class ConfirmTransaction extends Component { return } - if (!transactionId) { - fetchBasicGasAndTimeEstimates() - this.setTransactionToConfirm() - } + fetchBasicGasAndTimeEstimates() + getContractMethodData(data) + this.props.setTransactionToConfirm(transactionId || paramsTransactionId) } - componentDidUpdate () { + componentDidUpdate (prevProps) { const { setTransactionToConfirm, - confirmTransaction: { txData: { id: transactionId } = {} }, + transaction: { txData: { txParams: { data } = {} } = {} }, clearConfirmTransaction, + getContractMethodData, + paramsTransactionId, + transactionId, + history, + totalUnapprovedCount, } = this.props - const paramsTransactionId = this.getParamsTransactionId() - if (paramsTransactionId && transactionId && paramsTransactionId !== transactionId + '') { + if (paramsTransactionId && transactionId && prevProps.paramsTransactionId !== paramsTransactionId) { clearConfirmTransaction() + getContractMethodData(data) setTransactionToConfirm(paramsTransactionId) return - } - - if (!transactionId) { - this.setTransactionToConfirm() - } - } - - setTransactionToConfirm () { - const { - history, - unconfirmedTransactions, - setTransactionToConfirm, - } = this.props - const paramsTransactionId = this.getParamsTransactionId() - - if (paramsTransactionId) { - // Check to make sure params ID is valid - const tx = unconfirmedTransactions.find(({ id }) => id + '' === paramsTransactionId) - - if (!tx) { - history.replace(DEFAULT_ROUTE) - } else { - setTransactionToConfirm(paramsTransactionId) - } - } else if (unconfirmedTransactions.length) { - const totalUnconfirmed = unconfirmedTransactions.length - const transaction = unconfirmedTransactions[totalUnconfirmed - 1] - const { id: transactionId, loadingDefaults } = transaction - - if (!loadingDefaults) { - setTransactionToConfirm(transactionId) - } + } else if (prevProps.transactionId && !transactionId && !totalUnapprovedCount) { + history.replace(DEFAULT_ROUTE) + return + } else if (prevProps.transactionId && transactionId && prevProps.transactionId !== transactionId) { + history.replace(DEFAULT_ROUTE) + return } } render () { - const { confirmTransaction: { txData: { id } } = {} } = this.props - const paramsTransactionId = this.getParamsTransactionId() - + const { transactionId, paramsTransactionId } = this.props // Show routes when state.confirmTransaction has been set and when either the ID in the params // isn't specified or is specified and matches the ID in state.confirmTransaction in order to // support URLs of /confirm-transaction or /confirm-transaction/<transactionId> - return id && (!paramsTransactionId || paramsTransactionId === id + '') + + return transactionId && (!paramsTransactionId || paramsTransactionId === transactionId) ? ( <Switch> <Route diff --git a/ui/app/pages/confirm-transaction/confirm-transaction.container.js b/ui/app/pages/confirm-transaction/confirm-transaction.container.js index 2dd5e833e..993e880c2 100644 --- a/ui/app/pages/confirm-transaction/confirm-transaction.container.js +++ b/ui/app/pages/confirm-transaction/confirm-transaction.container.js @@ -8,26 +8,45 @@ import { import { fetchBasicGasAndTimeEstimates, } from '../../ducks/gas/gas.duck' + +import { + getContractMethodData, +} from '../../store/actions' import ConfirmTransaction from './confirm-transaction.component' -import { getTotalUnapprovedCount } from '../../selectors/selectors' import { unconfirmedTransactionsListSelector } from '../../selectors/confirm-transaction' -const mapStateToProps = state => { - const { metamask: { send }, confirmTransaction } = state +const mapStateToProps = (state, ownProps) => { + const { metamask: { send, unapprovedTxs }, confirmTransaction } = state + const { match: { params = {} } } = ownProps + const { id } = params + + const unconfirmedTransactions = unconfirmedTransactionsListSelector(state) + const totalUnconfirmed = unconfirmedTransactions.length + const transaction = totalUnconfirmed + ? unapprovedTxs[id] || unconfirmedTransactions[totalUnconfirmed - 1] + : {} return { - totalUnapprovedCount: getTotalUnapprovedCount(state), + totalUnapprovedCount: totalUnconfirmed, send, confirmTransaction, - unconfirmedTransactions: unconfirmedTransactionsListSelector(state), + unapprovedTxs, + id, + paramsTransactionId: id && String(id), + transactionId: transaction.id && String(transaction.id), + unconfirmedTransactions, + transaction, } } const mapDispatchToProps = dispatch => { return { - setTransactionToConfirm: transactionId => dispatch(setTransactionToConfirm(transactionId)), + setTransactionToConfirm: transactionId => { + dispatch(setTransactionToConfirm(transactionId)) + }, clearConfirmTransaction: () => dispatch(clearConfirmTransaction()), fetchBasicGasAndTimeEstimates: () => dispatch(fetchBasicGasAndTimeEstimates()), + getContractMethodData: (data) => dispatch(getContractMethodData(data)), } } |