import React, {Component} from 'react'; import {Balance, EventName, FirstConnectMessage, NewTickMessage} from "../types"; import {socket} from "../index"; export type CoinBalanceProps = { name: string, amount: number, short: string, percentage?: number, quote_equivalent: number, quote_symbol: string, icon: JSX.Element, } class CoinBalance extends Component { constructor(props) { super(props); } render() { return (
{this.props.icon}
{this.props.name}
{Math.trunc(this.props.percentage)}%
{this.props.amount.toFixed(5)} {this.props.short}
{this.props.quote_symbol} {this.props.quote_equivalent}
) } } export type WalletCardProps = { quote: string, } export class WalletCard extends Component<{}, { balances: Array }> { constructor(props) { super(props); } state = { balances: [] } renderCoinBalances() { return ( this.state.balances.map((balance: Balance) => { return ( ) }) ) } componentDidMount() { socket.on(EventName.NewTick, (data: NewTickMessage) => { this.setState({ balances: data.balances }) }) socket.on(EventName.FirstConnect, (data: FirstConnectMessage) => { this.setState({ balances: data.balances }) }) } render() { return (

Your Wallets

{this.renderCoinBalances()}
{/*
*/} {/* Total Balance ≈ {this.props}{this.state.total_balance.toFixed(2)}*/} {/*
*/}
) } }