MyCrypto/common/components/BalanceSidebar/TokenRow.jsx

59 lines
1.3 KiB
JavaScript

// @flow
import React from 'react';
import Big from 'big.js';
import { formatNumber } from 'utils/formatters';
import removeIcon from 'assets/images/icon-remove.svg';
export default class TokenRow extends React.Component {
props: {
balance: Big,
symbol: string,
custom?: boolean,
onRemove: (symbol: string) => void
};
state = {
showLongBalance: false
};
render() {
const { balance, symbol, custom } = this.props;
const { showLongBalance } = this.state;
return (
<tr>
<td
className="mono wrap point"
title={`${balance.toString()} (Double-Click)`}
onDoubleClick={this.toggleShowLongBalance}
>
{!!custom &&
<img
src={removeIcon}
className="token-remove"
title="Remove Token"
onClick={this.onRemove}
/>}
<span>
{showLongBalance ? balance.toString() : formatNumber(balance)}
</span>
</td>
<td>
{symbol}
</td>
</tr>
);
}
toggleShowLongBalance = (e: SyntheticInputEvent) => {
e.preventDefault();
this.setState(state => {
return {
showLongBalance: !state.showLongBalance
};
});
};
onRemove = () => {
this.props.onRemove(this.props.symbol);
};
}