import { Identicon, UnitDisplay } from 'components/ui'; import { IWallet, Balance, TrezorWallet, LedgerWallet } from 'libs/wallet'; import React from 'react'; import translate from 'translations'; import './AccountInfo.scss'; import Spinner from 'components/ui/Spinner'; import { getNetworkConfig, getOffline } from 'selectors/config'; import { AppState } from 'reducers'; import { connect } from 'react-redux'; import { NetworkConfig } from 'types/network'; import { TSetAccountBalance, setAccountBalance } from 'actions/wallet'; interface OwnProps { wallet: IWallet; } interface StateProps { balance: Balance; network: NetworkConfig; isOffline: boolean; } interface State { showLongBalance: boolean; address: string; confirmAddr: boolean; } interface DispatchProps { setAccountBalance: TSetAccountBalance; } type Props = OwnProps & StateProps & DispatchProps; class AccountInfo extends React.Component { public state = { showLongBalance: false, address: '', confirmAddr: false }; public async setAddressFromWallet() { const address = await this.props.wallet.getAddressString(); if (address !== this.state.address) { this.setState({ address }); } } public componentDidMount() { this.setAddressFromWallet(); } public componentDidUpdate() { this.setAddressFromWallet(); } public toggleConfirmAddr = () => { this.setState(state => { return { confirmAddr: !state.confirmAddr }; }); }; public toggleShowLongBalance = (e: React.FormEvent) => { e.preventDefault(); this.setState(state => { return { showLongBalance: !state.showLongBalance }; }); }; public render() { const { network, balance, isOffline } = this.props; const { address, showLongBalance, confirmAddr } = this.state; let blockExplorer; let tokenExplorer; if (!network.isCustom) { // this is kind of ugly but its the result of typeguards, maybe we can find a cleaner solution later on such as just dedicating it to a selector blockExplorer = network.blockExplorer; tokenExplorer = network.tokenExplorer; } const wallet = this.props.wallet as LedgerWallet | TrezorWallet; return (
{translate('sidebar_AccountAddr')}
{address}
{typeof wallet.displayAddress === 'function' && (
{ this.toggleConfirmAddr(); wallet .displayAddress() .then(() => this.toggleConfirmAddr()) .catch(e => { this.toggleConfirmAddr(); throw new Error(e); }); }} > {confirmAddr ? null : 'Display address on ' + wallet.getWalletType()} {confirmAddr ? ( Confirm address on {wallet.getWalletType()} ) : null}
)}
{translate('sidebar_AccountBal')}
  • {balance.wei && ( {balance.isPending ? ( ) : ( !isOffline && ( ) )} )}
{(!!blockExplorer || !!tokenExplorer) && (
{translate('sidebar_TransHistory')}
)}
); } } function mapStateToProps(state: AppState): StateProps { return { balance: state.wallet.balance, network: getNetworkConfig(state), isOffline: getOffline(state) }; } const mapDispatchToProps: DispatchProps = { setAccountBalance }; export default connect(mapStateToProps, mapDispatchToProps)(AccountInfo);