Refactor send component

[danjm]

• Split into smaller components: generic row component; split out components for rows, headers, footers;
• move promise resolution to actions
• send its own part of state
• stricter division between controller (container) and view (component); decisions about token vs. eth presentation in container
• data modification logic in controller to selectors
• unit tests for all pieces

[danjm]

Here is an outline of the send state after the refactor:

📂 send
📄 send.container.js
- import * from './send.selectors.js'
- mapStateToProps(state),
- returns { amount, amountConversionRate, conversionRate, convertedCurrency, data, editingTransactionId, errors, forceGasMin, from, fromAccounts, gasLimit, gasPrice, gasTotal, maxModeOn, memo, network, primaryCurrency, selectedAddress, selectedToken, to, toAccounts, tokenBalance, tokenContract, toNickname, unapprovedTxs }
- mapDispatchToProps(dispatch),
- returns { addToAddressBook, clearSend, estimateGas, getGasPrice, goHome, setMaxModeTo, setSelectedAddress, showCustomizeGasModal, signTokenTx, signTx, updateAndApproveTx, updateSend (replaces all of updateGasLimit, updateGasPrice, updateGasTotal, updateSendAmount, updateSendErrors, updateSendFrom, updateSendMemo, updateSendTo), updateSendTokenBalance, updateTokenExchangeRate, updateTx }
📄 send.component.js
- imports: page-container, send-header, send-content, send-footer
📄 send.selectors.js
- exports: getAccountsWithSendEtherInfo(state), getAddressBook(state), getConversionRate(state), getCurrentAccountWithSendEtherInfo(state), getCurrentCurrency(state), getCurrentNetwork(state), getPrimaryCurrency(state), getSelectedAddress(state), getSelectedToken(state), getSelectedTokenContract(state), getSelectedTokenToFiatRate(state), getSend(state), getSendFrom(state), getUnapprovedTxs(state), getConvertedCurrency(state), getGasTotal(state)
📄 send.utils.js
- exports: getTokenData(selectedAddress), getParamsForGasEstimate(selectedAddress, symbol, data), getTokenBalance(usersToken, selectedToken), isBalanceSufficient(obj) isTokenBalanceSufficient(obj) getGasTotal(gasLimit, gasPrice)
📄 send.scss
📄 send-README.md
📂 tests
📄 send-container.test.js
📄 send-component.test.js
📄 send-selectors.test.js
📄 send-utils.test.js
📂 send-header
📄 send-header.container.js
- import { getSendTokens } from '../send.selectors.js'
- mapStateToProps(state)
- returns { titleTranslationKey }
- mapDispatchToProps(dispatch)
- returns { titleTranslationKey }
📄 send-header.component.js
- imports: page-container-header
📄 send-header-README.md
📂 tests
📄 send-header-container.test.js
📄 send-header-component.test.js
📂 send-content
📄 send-content.component.js
- imports: page-container-content, send-from-row, send-to-row, send-amount-row, send-gas-row
📄 send-content.scss
📄 send-content-README.md
📂 tests
📄 send-content-component.test.js
📂 generic-send-row
📄 generic-send-row.component.js
- imports: send-row-error-message
- ownProps: label, errorMessage, showError, children
📄 generic-send-row.scss
📄 generic-send-row-README.md
📂 tests
📄 generic-send-row-component.test.js
📂 send-row-error-message
📄 send-row-error-message.container.js
- import { getSendErrors } from '../../../send.selectors.js'
- mapStateToProps(state, ownProps)
- returns { errors, errorType: ownProps.errorType }
📄 send-row-error-message.component.js
📄 send-row-error-message.scss
📄 send-row-error-message-README.md
📂 tests
📄 send-row-error-message-container.test.js
📄 send-row-error-message-component.test.js
📂 send-from-row
📄 send-from-row.container.js
- import { getSendFrom, getFromAccounts, getConversionRate, getSelectedTokenContract } from '../../send.selectors.test.js'
- import { getFromDropdownOpen } from './send-from-row.selectors.js'
- mapStateToProps(state, ownProps)
- returns { from, fromAccounts, conversionRate, fromDropdownOpen, tokenContract }
- mapDispatchToProps(state)
- returns { openFromDropdown, closeFromDropdown, updateSendFrom, updateSendTokenBalance }
📄 send-from-row.component.js
- imports: generic-send-row, from-dropdown
- methods: handleFromChange,
📄 send-from-row.selectors.js
- getFromDropdownOpen
📄 send-from-row.utils.js
📄 send-from-row-README.md
📂 tests
📄 send-from-row-container.test.js
📄 send-from-row-component.test.js
📄 send-from-row-selectors.test.js
📂 from-dropdown
📄 from-dropdown.component.js
- ownProps: dropdownOpen, accounts, selectedAccount, onSelect, openDropdown, closeDropdown, conversionRate,
📄 from-dropdown.scss
📄 from-dropdown-README.md
📂 tests
📄 from-dropdown-component.test.js
📂 send-to-row
📄 send-to-row.container.js
- import { getSendTo, getToAccounts, getCurrentNetwork } from '../../send.selectors.test.js'
- import { getToAccounts, getToDropdownOpen } from './send-to-row.selectors.js'
- mapStateToProps(state, ownProps)
- returns { to, toAccounts, toDropdownOpen }
- mapDispatchToProps(state)
- returns { openToDropdown, closeToDropdown, updateSendTo, updateSendErrors }
📄 send-to-row.component.js
- imports: generic-send-row, ens-input
- methods: handleToChange,
📄 send-to-row.selectors.js
- getToAccounts(state), getToDropdownOpen(state),
📄 send-to-row-README.md
📂 tests
📄 send-to-row-container.test.js
📄 send-to-row-component.test.js
📄 send-to-row-selectors.test.js
📂 send-amount-row
📄 send-amount-row.container.js
- import { getSelectedToken, getPrimaryCurrency, getAmountConversionRate, getConvertedCurrency,
getSendAmount, getMaxModeOn, getGasTotal, getSelectedBalance, getTokenBalance, } from '../../send.selectors.js'
- import { getMaxModeOn, getSendAmountError } from './send-amount-row.selectors.js'
- mapStateToProps(state, ownProps)
- returns { selectedToken, primaryCurrency = 'ETH', convertedCurrency, amountConversionRate,
errors, amount, maxModeOn, gasTotal, tokenBalance, }
- mapDispatchToProps(state)
- returns { updateSendErrors, setMaxModeTo, updateSendAmount }
📄 send-amount-row.component.js
- imports: generic-send-row, amount-max-button, currency-display, multiplyCurrencies, addHexPrefix,
isBalanceSufficient, isTokenBalanceSufficient, conversionGreaterThan
- methods: validateAmount, handleAmountChange
📄 send-amount-row.selectors.js
- getMaxModeOn, getSendAmountError
📄 send-amount-row.utils.js
- getErrorKey
📄 send-amount-row.scss
📄 README.md
📂 tests
📄 send-amount-row-container.test.js
📄 send-amount-row-component.test.js
📄 send-amount-row-selectors.test.js
📄 send-amount-row-utils.test.js
📂 amount-max-button
📄 amount-max-button.container.js
- import { getSelectedToken, getPrimaryCurrency, getAmountConversionRate, getConvertedCurrency,
getSendAmount, getMaxModeOn, getGasTotal, getSelectedBalance, getTokenBalance, } from '../../../amount-max-button.selectors.js'
- import { getMaxModeOn, getSendAmountError } from './amount-max-button.selectors.js'
- mapStateToProps(state, ownProps)
- returns { getMaxModeOn }
- mapDispatchToProps(state)
- returns { updateSendErrors, setMaxModeTo, updateSendAmount }
📄 amount-max-button.component.js
- imports: generic-send-row, amount-max-button, currency-display, multiplyCurrencies, addHexPrefix,
isBalanceSufficient, isTokenBalanceSufficient, conversionGreaterThan
- methods: setAmountToMax
📄 amount-max-button.selectors.js
- getMaxModeOn, getSendAmountError
📄 amount-max-button.utils.js
- calcMaxAmount, getErrorKey
📂 tests
📄 amount-max-button-container.test.js
📄 amount-max-button-component.test.js
📄 amount-max-button-selectors.test.js
📄 amount-max-button-utils.test.js
📂 send-gas-row
📄 send-gas-row.container.js
- import { getGasTotal, getConvertedCurrency, getConversionRate } from '../../send.selectors.test.js'
- import { getGasLoadingError } from './send-gas-row.selectors.js'
- mapStateToProps(state, ownProps)
- returns { conversionRate, convertedCurrency, gasTotal, gasLoadingError }
- mapDispatchToProps(state)
- returns { showCustomizeGasModal }
📄 send-gas-row.component.js
- imports: generic-send-row, GasFeeDisplay
📄 send-gas-row.selectors.js
- getGasLoadingError
📄 send-gas-row.scss
📄 README.md
📂 tests
📄 send-gas-row-container.test.js
📄 send-gas-row-component.test.js
📄 send-gas-row-selectors.test.js
📁 send-footer
📄 send-footer.container.js
- import { getGasTotal, getTokenBalance, getSelectedToken } from '../send.selectors.js'
- mapStateToProps(state, ownProps)
- returns { gasTotal, tokenBalance, selectedToken, getSendErrors }
- mapDispatchToProps(state)
- returns { updateSendErrors, setMaxModeTo, updateSendAmount, goHome, clearSend,
amountError, toError }
📄 send-footer.component.js
- imports: page-container-footer, disableSubmit
- methods: onSubmit (send-footer incomplete, needs changes to support this)
📄 send-footer.selectors.js
📄 send-footer.utils.js
- disableSubmit
📄 send-footer.scss
📄 send-footer-README.md
📂 tests
📄 send-footer-container.test.js
📄 send-footer-component.test.js
📄 send-footer-selectors.test.js
📄 send-footer-utils.test.js
- Additional notes about changes to send
- move to actions:
- tokenBalancePromise -> updateSendTokenBalance
- Promise.all([getGasPrice(),estimateGas(estimateGasParams)]) -> updateGasTotal(newGasTotal)
- move to send state:
- gasLoadingError
- fromDropdownOpen
- don't store translated errorMessages in state, just error message keys
- store a transactionType prop in state that tells what type of send is occuring (eth or token), so that it accessible in send and all of its subcomponents without additional data manipulation

[danjm]

Blocks #3914

[danjm]

@kumavis @tmashuang This is ready to merge, but I want to make sure it goes out as part of the next full release. So let's wait to merge it until we resolve current P0 bugs.