Merge pull request #5167 from MetaMask/fix-watcAsset-images

Fix images for watched tokens

development/states/send-edit.json

@@ -22,6 +22,7 @@
         "name": "Send Account 4"
       }
     },
+    "assetImages": {},
     "unapprovedTxs": {},
     "currentCurrency": "USD",
     "conversionRate": 1200.88200327,

development/states/send-new-ui.json

@@ -61,6 +61,7 @@
         "name": "Address Book Account 1"
       }
     ],
+    "assetImages": {},
     "tokens": [],
     "transactions": {},
     "selectedAddressTxList": [],

development/states/send.json

@@ -21,6 +21,7 @@
         "name": "Account 4"
       }
     },
+    "assetImages": {},
     "unapprovedTxs": {},
     "currentCurrency": "USD",
     "conversionRate": 16.88200327,

ui/app/components/balance-component.js

@@ -5,6 +5,7 @@ const inherits = require('util').inherits
 const TokenBalance = require('./token-balance')
 const Identicon = require('./identicon')
 import CurrencyDisplay from './currency-display'
+const { getAssetImages, conversionRateSelector, getCurrentCurrency} = require('../selectors')
 
 const { formatBalance, generateBalanceObject } = require('../util')
 
@@ -19,9 +20,9 @@ function mapStateToProps (state) {
   return {
     account,
     network,
-    conversionRate: state.metamask.conversionRate,
+    conversionRate: conversionRateSelector(state),
-    currentCurrency: state.metamask.currentCurrency,
+    currentCurrency: getCurrentCurrency(state),
-    assetImages: state.metamask.assetImages,
+    assetImages: getAssetImages(state),
   }
 }
 

ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js

@@ -18,6 +18,7 @@ export default class ConfirmPageContainerContent extends Component {
     hideSubtitle: PropTypes.bool,
     identiconAddress: PropTypes.string,
     nonce: PropTypes.string,
+    assetImage: PropTypes.string,
     subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     summaryComponent: PropTypes.node,
     title: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
@@ -60,6 +61,7 @@ export default class ConfirmPageContainerContent extends Component {
       hideSubtitle,
       identiconAddress,
       nonce,
+      assetImage,
       summaryComponent,
       detailsComponent,
       dataComponent,
@@ -85,6 +87,7 @@ export default class ConfirmPageContainerContent extends Component {
               hideSubtitle={hideSubtitle}
               identiconAddress={identiconAddress}
               nonce={nonce}
+              assetImage={assetImage}
             />
           )
         }

ui/app/components/confirm-page-container/confirm-page-container-content/confirm-page-container-summary/confirm-page-container-summary.component.js

@@ -4,7 +4,7 @@ import classnames from 'classnames'
 import Identicon from '../../../identicon'
 
 const ConfirmPageContainerSummary = props => {
-  const { action, title, subtitle, hideSubtitle, className, identiconAddress, nonce } = props
+  const { action, title, subtitle, hideSubtitle, className, identiconAddress, nonce, assetImage } = props
 
   return (
     <div className={classnames('confirm-page-container-summary', className)}>
@@ -27,6 +27,7 @@ const ConfirmPageContainerSummary = props => {
               className="confirm-page-container-summary__identicon"
               diameter={36}
               address={identiconAddress}
+              image={assetImage}
             />
           )
         }
@@ -51,6 +52,7 @@ ConfirmPageContainerSummary.propTypes = {
   className: PropTypes.string,
   identiconAddress: PropTypes.string,
   nonce: PropTypes.string,
+  assetImage: PropTypes.string,
 }
 
 export default ConfirmPageContainerSummary

ui/app/components/confirm-page-container/confirm-page-container.component.js

@@ -38,6 +38,7 @@ export default class ConfirmPageContainer extends Component {
     detailsComponent: PropTypes.node,
     identiconAddress: PropTypes.string,
     nonce: PropTypes.string,
+    assetImage: PropTypes.string,
     summaryComponent: PropTypes.node,
     warning: PropTypes.string,
     // Footer
@@ -70,8 +71,10 @@ export default class ConfirmPageContainer extends Component {
       onSubmit,
       identiconAddress,
       nonce,
+      assetImage,
       warning,
     } = this.props
+    const renderAssetImage = contentComponent || (!contentComponent && !identiconAddress)
 
     return (
       <div className="page-container">
@@ -84,6 +87,7 @@ export default class ConfirmPageContainer extends Component {
             senderAddress={fromAddress}
             recipientName={toName}
             recipientAddress={toAddress}
+            assetImage={renderAssetImage ? assetImage : undefined}
           />
         </ConfirmPageContainerHeader>
         {
@@ -101,6 +105,7 @@ export default class ConfirmPageContainer extends Component {
               errorKey={errorKey}
               identiconAddress={identiconAddress}
               nonce={nonce}
+              assetImage={assetImage}
               warning={warning}
             />
           )

ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js

@@ -38,6 +38,7 @@ export default class ConfirmTransactionBase extends Component {
     isTxReprice: PropTypes.bool,
     methodData: PropTypes.object,
     nonce: PropTypes.string,
+    assetImage: PropTypes.string,
     sendTransaction: PropTypes.func,
     showCustomizeGasModal: PropTypes.func,
     showTransactionConfirmedModal: PropTypes.func,
@@ -310,6 +311,7 @@ export default class ConfirmTransactionBase extends Component {
       contentComponent,
       onEdit,
       nonce,
+      assetImage,
       warning,
     } = this.props
     const { submitting, submitError } = this.state
@@ -334,6 +336,7 @@ export default class ConfirmTransactionBase extends Component {
         dataComponent={this.renderData()}
         contentComponent={contentComponent}
         nonce={nonce}
+        assetImage={assetImage}
         identiconAddress={identiconAddress}
         errorMessage={errorMessage || submitError}
         errorKey={propsErrorKey || errorKey}

ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js

@@ -52,8 +52,9 @@ const mapStateToProps = (state, props) => {
     accounts,
     selectedAddress,
     selectedAddressTxList,
+    assetImages,
   } = metamask
-
+  const assetImage = assetImages[txParamsToAddress]
   const { balance } = accounts[selectedAddress]
   const { name: fromName } = identities[selectedAddress]
   const toAddress = propsToAddress || txParamsToAddress
@@ -88,6 +89,7 @@ const mapStateToProps = (state, props) => {
     conversionRate,
     transactionStatus,
     nonce,
+    assetImage,
   }
 }
 

ui/app/components/sender-to-recipient/sender-to-recipient.component.js

@@ -20,6 +20,7 @@ export default class SenderToRecipient extends PureComponent {
     t: PropTypes.func,
     variant: PropTypes.oneOf([DEFAULT_VARIANT, CARDS_VARIANT]),
     addressOnly: PropTypes.bool,
+    assetImage: PropTypes.string,
   }
 
   static defaultProps = {
@@ -66,13 +67,14 @@ export default class SenderToRecipient extends PureComponent {
   }
 
   renderRecipientIdenticon () {
-    const { recipientAddress } = this.props
+    const { recipientAddress, assetImage } = this.props
 
     return !this.props.addressOnly && (
       <div className="sender-to-recipient__sender-icon">
         <Identicon
           address={recipientAddress}
           diameter={24}
+          image={assetImage}
         />
       </div>
     )

ui/app/components/transaction-list-item/transaction-list-item.component.js

@@ -21,6 +21,7 @@ export default class TransactionListItem extends PureComponent {
     setSelectedToken: PropTypes.func,
     nonceAndDate: PropTypes.string,
     token: PropTypes.object,
+    assetImages: PropTypes.object,
   }
 
   handleClick = () => {
@@ -100,6 +101,7 @@ export default class TransactionListItem extends PureComponent {
       methodData,
       showRetry,
       nonceAndDate,
+      assetImages,
     } = this.props
     const { txParams = {} } = transaction
 
@@ -113,6 +115,7 @@ export default class TransactionListItem extends PureComponent {
             className="transaction-list-item__identicon"
             address={txParams.to}
             diameter={34}
+            image={assetImages[txParams.to]}
           />
           <TransactionAction
             transaction={transaction}

ui/app/components/transaction-list/transaction-list.component.js

@@ -21,6 +21,7 @@ export default class TransactionList extends PureComponent {
     transactionToRetry: PropTypes.object,
     selectedToken: PropTypes.object,
     updateNetworkNonce: PropTypes.func,
+    assetImages: PropTypes.object,
   }
 
   componentDidMount () {
@@ -45,7 +46,6 @@ export default class TransactionList extends PureComponent {
   renderTransactions () {
     const { t } = this.context
     const { pendingTransactions = [], completedTransactions = [] } = this.props
-
     return (
       <div className="transaction-list__transactions">
         {
@@ -79,7 +79,7 @@ export default class TransactionList extends PureComponent {
   }
 
   renderTransaction (transaction, index) {
-    const { selectedToken } = this.props
+    const { selectedToken, assetImages } = this.props
 
     return transaction.key === TRANSACTION_TYPE_SHAPESHIFT
       ? (
@@ -93,6 +93,7 @@ export default class TransactionList extends PureComponent {
           key={transaction.id}
           showRetry={this.shouldShowRetry(transaction)}
           token={selectedToken}
+          assetImages={assetImages}
         />
       )
   }

ui/app/components/transaction-list/transaction-list.container.js

@@ -7,7 +7,7 @@ import {
   submittedPendingTransactionsSelector,
   completedTransactionsSelector,
 } from '../../selectors/transactions'
-import { getSelectedAddress } from '../../selectors'
+import { getSelectedAddress, getAssetImages } from '../../selectors'
 import { selectedTokenSelector } from '../../selectors/tokens'
 import { getLatestSubmittedTxWithNonce } from '../../helpers/transactions.util'
 import { updateNetworkNonce } from '../../actions'
@@ -23,6 +23,7 @@ const mapStateToProps = state => {
     transactionToRetry: getLatestSubmittedTxWithNonce(submittedPendingTransactions, networkNonce),
     selectedToken: selectedTokenSelector(state),
     selectedAddress: getSelectedAddress(state),
+    assetImages: getAssetImages(state),
   }
 }
 

ui/app/components/transaction-view-balance/transaction-view-balance.component.js

@@ -18,6 +18,7 @@ export default class TransactionViewBalance extends PureComponent {
     history: PropTypes.object,
     network: PropTypes.string,
     balance: PropTypes.string,
+    assetImage: PropTypes.string,
   }
 
   renderBalance () {
@@ -75,7 +76,7 @@ export default class TransactionViewBalance extends PureComponent {
   }
 
   render () {
-    const { network, selectedToken } = this.props
+    const { network, selectedToken, assetImage } = this.props
 
     return (
       <div className="transaction-view-balance">
@@ -84,6 +85,7 @@ export default class TransactionViewBalance extends PureComponent {
             diameter={50}
             address={selectedToken && selectedToken.address}
             network={network}
+            image={assetImage}
           />
           { this.renderBalance() }
         </div>

ui/app/components/transaction-view-balance/transaction-view-balance.container.js

@@ -2,7 +2,7 @@ import { connect } from 'react-redux'
 import { withRouter } from 'react-router-dom'
 import { compose } from 'recompose'
 import TransactionViewBalance from './transaction-view-balance.component'
-import { getSelectedToken, getSelectedAddress } from '../../selectors'
+import { getSelectedToken, getSelectedAddress, getSelectedTokenAssetImage } from '../../selectors'
 import { showModal } from '../../actions'
 
 const mapStateToProps = state => {
@@ -15,6 +15,7 @@ const mapStateToProps = state => {
     selectedToken: getSelectedToken(state),
     network,
     balance,
+    assetImage: getSelectedTokenAssetImage(state),
   }
 }
 

ui/app/selectors.js

@@ -14,6 +14,8 @@ const selectors = {
   getSelectedAccount,
   getSelectedToken,
   getSelectedTokenExchangeRate,
+  getSelectedTokenAssetImage,
+  getAssetImages,
   getTokenExchangeRate,
   conversionRateSelector,
   transactionsSelector,
@@ -71,6 +73,18 @@ function getSelectedTokenExchangeRate (state) {
   return contractExchangeRates[address] || 0
 }
 
+function getSelectedTokenAssetImage (state) {
+  const assetImages = state.metamask.assetImages || {}
+  const selectedToken = getSelectedToken(state) || {}
+  const { address } = selectedToken
+  return assetImages[address]
+}
+
+function getAssetImages (state) {
+  const assetImages = state.metamask.assetImages || {}
+  return assetImages
+}
+
 function getTokenExchangeRate (state, address) {
   const contractExchangeRates = state.metamask.contractExchangeRates
   return contractExchangeRates[address] || 0