import React, { Component } from 'react' import PropTypes from 'prop-types' import SendRowWrapper from '../send-row-wrapper' import Identicon from '../../../../components/ui/identicon/identicon.component' import TokenBalance from '../../../../components/ui/token-balance' import UserPreferencedCurrencyDisplay from '../../../../components/app/user-preferenced-currency-display' import { PRIMARY } from '../../../../helpers/constants/common' export default class SendAssetRow extends Component { static propTypes = { tokens: PropTypes.arrayOf( PropTypes.shape({ address: PropTypes.string, decimals: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), symbol: PropTypes.string, }) ).isRequired, accounts: PropTypes.object.isRequired, selectedAddress: PropTypes.string.isRequired, selectedTokenAddress: PropTypes.string, setSelectedToken: PropTypes.func.isRequired, } static contextTypes = { t: PropTypes.func, metricsEvent: PropTypes.func, } state = { isShowingDropdown: false, } openDropdown = () => this.setState({ isShowingDropdown: true }) closeDropdown = () => this.setState({ isShowingDropdown: false }) selectToken = (address) => { this.setState({ isShowingDropdown: false, }, () => { this.context.metricsEvent({ eventOpts: { category: 'Transactions', action: 'Send Screen', name: 'User clicks "Assets" dropdown', }, customVariables: { assetSelected: address ? 'ERC20' : 'ETH', }, }) this.props.setSelectedToken(address) }) } render () { const { t } = this.context return (
{ this.renderSelectedToken() } { this.props.tokens.length > 0 ? this.renderAssetDropdown() : null }
) } renderSelectedToken () { const { selectedTokenAddress } = this.props const token = this.props.tokens.find(({ address }) => address === selectedTokenAddress) return (
{ token ? this.renderAsset(token) : this.renderEth() }
) } renderAssetDropdown () { return this.state.isShowingDropdown && (
{ this.renderEth(true) } { this.props.tokens.map((token) => this.renderAsset(token, true)) }
) } renderEth (insideDropdown = false) { const { t } = this.context const { accounts, selectedAddress } = this.props const balanceValue = accounts[selectedAddress] ? accounts[selectedAddress].balance : '' return (
0 ? 'send-v2__asset-dropdown__asset' : 'send-v2__asset-dropdown__single-asset' } onClick={() => this.selectToken()} >
ETH
{`${t('balance')}:`}
{ !insideDropdown && this.props.tokens.length > 0 && ( )}
) } renderAsset (token, insideDropdown = false) { const { address, symbol } = token const { t } = this.context return (
this.selectToken(address)} >
{ symbol }
{`${t('balance')}:`}
{ !insideDropdown && ( )}
) } }