MyCrypto/common/components/BalanceSidebar/TokenBalances/TokenRow.tsx

72 lines
1.6 KiB
TypeScript

import removeIcon from 'assets/images/icon-remove.svg';
import React from 'react';
import { TokenValue } from 'libs/units';
import { UnitDisplay } from 'components/ui';
import './TokenRow.scss';
interface Props {
balance: TokenValue;
symbol: string;
custom?: boolean;
decimal: number;
onRemove(symbol: string): void;
}
interface State {
showLongBalance: boolean;
}
export default class TokenRow extends React.Component<Props, State> {
public state = {
showLongBalance: false
};
public render() {
const { balance, symbol, custom, decimal } = this.props;
const { showLongBalance } = this.state;
return (
<tr className="TokenRow">
<td
className="TokenRow-balance"
title={`${balance.toString()} (Double-Click)`}
onDoubleClick={this.toggleShowLongBalance}
>
{!!custom && (
<img
src={removeIcon}
className="TokenRow-balance-remove"
title="Remove Token"
onClick={this.onRemove}
tabIndex={0}
/>
)}
<span>
<UnitDisplay
value={balance}
decimal={decimal}
displayShortBalance={!showLongBalance}
/>
</span>
</td>
<td className="TokenRow-symbol">{symbol}</td>
</tr>
);
}
public toggleShowLongBalance = (
// TODO: don't use any
e: any
) => {
e.preventDefault();
this.setState(state => {
return {
showLongBalance: !state.showLongBalance
};
});
};
public onRemove = () => {
this.props.onRemove(this.props.symbol);
};
}