import React, {Component} from 'react'; import {Balance, EventName, FirstConnectMessage, NewTickMessage} from "../types"; import {socket} from "../index"; export type CoinBalanceProps = { name: string, amount: number, percentage?: number, quote_equivalent: number, quote_symbol: string, } class CoinBalance extends Component<CoinBalanceProps> { constructor(props) { super(props); } render() { // do not print equivalent if this element is the quote itself const quoteBlock = this.props.name != this.props.quote_symbol ? this.props.quote_symbol.concat(" ").concat(this.props.quote_equivalent.toLocaleString()) : null // const accessory = SymbolAccessories.filter((accessory) => { // return accessory.name == this.props.name // }) // // const icon = accessory.length > 0 ? accessory.pop().icon : null return ( <div className="flex-grow flex px-6 py-3 text-gray-800 items-center border-b -mx-4 align-middle"> <div className={"w-1/8 bg-te"}> {/*{icon}*/} </div> <div className="w-2/5 xl:w-1/4 px-4 flex items-center"> <span className="text-lg">{this.props.name}</span> </div> <div className="hidden md:flex lg:hidden xl:flex w-1/4 px-1 flex-col"> <div className={"italic w-full text-center"}> {Math.trunc(this.props.percentage)}% </div> <div className="w-full bg-transparent mt-2"> <div className={"bg-blue-400 rounded-lg text-xs leading-none py-1 text-center text-white"} style={{width: this.props.percentage.toString().concat("%")}}/> </div> </div> <div className="flex w-3/5 md:w/12"> <div className="w-1/2 px-4"> <div className="text-right"> {this.props.amount.toFixed(5)} {this.props.name} </div> </div> <div className="w-1/2 px-4 my-auto"> <div className={"px-2 inline-flex text-center text-xs leading-5 font-semibold rounded-full bg-gray-200 text-gray-800"}> {quoteBlock} </div> </div> </div> </div> ) } } export type WalletCardProps = { quote: string, } export class WalletCard extends Component <{}, { balances: Array<Balance> }> { constructor(props) { super(props); } state = { balances: [] } totalQuoteBalance() { let total = 0 this.state.balances.forEach((balance: Balance) => { if (balance.currency == balance.quote) { total += balance.amount } else { total += balance.quote_equivalent } }) return total } renderCoinBalances() { return ( this.state.balances.map((balance: Balance) => { const percentage_amount = balance.quote == balance.currency ? balance.amount : balance.quote_equivalent; return ( <CoinBalance key={balance.currency.concat(balance.kind)} name={balance.currency} amount={balance.amount} quote_equivalent={balance.quote_equivalent} percentage={percentage_amount / this.totalQuoteBalance() * 100} quote_symbol={balance.quote}/> ) }) ) } 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 ( <div className="w-full mb-6 lg:mb-0 px-4 flex flex-col"> <div className="flex-grow flex bg-white flex-col border-t border-b sm:rounded-lg sm:border shadow overflow-hidden"> <div className="border-b bg-gray-50"> <div className="flex justify-between px-6 -mb-px"> <h3 className="text-blue-700 py-4 font-normal text-lg">Your Wallets</h3> <div className="flex"> <button type="button" className="appearance-none py-4 text-blue-700 border-b border-blue-dark mr-3"> Margin </button> <button type="button" className="appearance-none py-4 text-gray-600 border-b border-transparent hover:border-grey-dark"> Chart </button> </div> </div> </div> {this.renderCoinBalances()} <div className="px-6 py-4"> <div className="text-center text-gray-400"> Total Balance ≈ USD {this.totalQuoteBalance().toLocaleString()} </div> </div> </div> </div> ) } }