diff --git a/ui/components/app/token-cell/token-cell.js b/ui/components/app/token-cell/token-cell.js index 0acafc509e0c..1a18f9c838c7 100644 --- a/ui/components/app/token-cell/token-cell.js +++ b/ui/components/app/token-cell/token-cell.js @@ -11,6 +11,7 @@ export default function TokenCell({ address, decimals, balanceError, + image, symbol, string, onClick, @@ -45,6 +46,7 @@ export default function TokenCell({ tokenAddress={address} tokenSymbol={symbol} tokenDecimals={decimals} + tokenImage={image} warning={warning} primary={`${string || 0}`} secondary={formattedFiat} @@ -61,6 +63,7 @@ TokenCell.propTypes = { string: PropTypes.string, onClick: PropTypes.func.isRequired, isERC721: PropTypes.bool, + image: PropTypes.string, }; TokenCell.defaultProps = { diff --git a/ui/components/ui/identicon/identicon.component.js b/ui/components/ui/identicon/identicon.component.js index 0fd1c2c34b12..0ac4de40d2d2 100644 --- a/ui/components/ui/identicon/identicon.component.js +++ b/ui/components/ui/identicon/identicon.component.js @@ -59,6 +59,10 @@ export default class Identicon extends Component { ipfsGateway: PropTypes.string, }; + state = { + imageLoadingError: false, + }; + static defaultProps = { addBorder: false, address: undefined, @@ -93,6 +97,9 @@ export default class Identicon extends Component { src={image} style={getStyles(diameter)} alt={alt} + onError={() => { + this.setState({ imageLoadingError: true }); + }} /> ); } @@ -124,16 +131,25 @@ export default class Identicon extends Component { ); } - shouldComponentUpdate(nextProps) { + renderBlockieOrJazzIcon() { + const { useBlockie } = this.props; + return useBlockie ? this.renderBlockie() : this.renderJazzicon(); + } + + shouldComponentUpdate(nextProps, nextState) { // We only want to re-render if props are different. - return !isEqual(nextProps, this.props); + return !isEqual(nextProps, this.props) || !isEqual(nextState, this.state); } render() { - const { address, image, useBlockie, addBorder, diameter, tokenList } = - this.props; + const { address, image, addBorder, diameter, tokenList } = this.props; + const { imageLoadingError } = this.state; const size = diameter + 8; + if (imageLoadingError) { + return this.renderBlockieOrJazzIcon(); + } + if (image) { return this.renderImage(); } @@ -148,7 +164,7 @@ export default class Identicon extends Component { className={classnames({ 'identicon__address-wrapper': addBorder })} style={addBorder ? getStyles(size) : null} > - {useBlockie ? this.renderBlockie() : this.renderJazzicon()} + {this.renderBlockieOrJazzIcon()} ); }