94 lines
2.5 KiB
TypeScript
94 lines
2.5 KiB
TypeScript
import { Token } from 'config/data';
|
|
import React from 'react';
|
|
import { TokenBalance } from 'selectors/wallet';
|
|
import translate from 'translations';
|
|
import AddCustomTokenForm from './AddCustomTokenForm';
|
|
import './index.scss';
|
|
import TokenRow from './TokenRow';
|
|
|
|
interface Props {
|
|
tokens: TokenBalance[];
|
|
onAddCustomToken(token: Token): any;
|
|
onRemoveCustomToken(symbol: string): any;
|
|
}
|
|
|
|
interface State {
|
|
showAllTokens: boolean;
|
|
showCustomTokenForm: boolean;
|
|
}
|
|
export default class TokenBalances extends React.Component<Props, State> {
|
|
public state = {
|
|
showAllTokens: false,
|
|
showCustomTokenForm: false
|
|
};
|
|
|
|
public render() {
|
|
const { tokens } = this.props;
|
|
const shownTokens = tokens.filter(
|
|
token => !token.balance.eqn(0) || token.custom || this.state.showAllTokens
|
|
);
|
|
|
|
return (
|
|
<section className="TokenBalances">
|
|
<h5 className="TokenBalances-title">{translate('sidebar_TokenBal')}</h5>
|
|
<table className="TokenBalances-rows">
|
|
<tbody>
|
|
{shownTokens.map(token => (
|
|
<TokenRow
|
|
key={token.symbol}
|
|
balance={token.balance}
|
|
symbol={token.symbol}
|
|
custom={token.custom}
|
|
decimal={token.decimal}
|
|
onRemove={this.props.onRemoveCustomToken}
|
|
/>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
|
|
<div className="TokenBalances-buttons">
|
|
<button
|
|
className="btn btn-default btn-xs"
|
|
onClick={this.toggleShowAllTokens}
|
|
>
|
|
{!this.state.showAllTokens ? 'Show All Tokens' : 'Hide Tokens'}
|
|
</button>{' '}
|
|
<button
|
|
className="btn btn-default btn-xs"
|
|
onClick={this.toggleShowCustomTokenForm}
|
|
>
|
|
<span>{translate('SEND_custom')}</span>
|
|
</button>
|
|
</div>
|
|
|
|
{this.state.showCustomTokenForm && (
|
|
<div className="TokenBalances-form">
|
|
<AddCustomTokenForm onSave={this.addCustomToken} />
|
|
</div>
|
|
)}
|
|
</section>
|
|
);
|
|
}
|
|
|
|
public toggleShowAllTokens = () => {
|
|
this.setState(state => {
|
|
return {
|
|
showAllTokens: !state.showAllTokens
|
|
};
|
|
});
|
|
};
|
|
|
|
public toggleShowCustomTokenForm = () => {
|
|
this.setState(state => {
|
|
return {
|
|
showCustomTokenForm: !state.showCustomTokenForm
|
|
};
|
|
});
|
|
};
|
|
|
|
public addCustomToken = (token: Token) => {
|
|
this.props.onAddCustomToken(token);
|
|
this.setState({ showCustomTokenForm: false });
|
|
};
|
|
}
|