128 lines
4.6 KiB
TypeScript
128 lines
4.6 KiB
TypeScript
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<CoinBalanceProps> {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
}
|
|
|
|
render() {
|
|
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"}>
|
|
{this.props.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.short}
|
|
</div>
|
|
</div>
|
|
<div className="w-1/2 px-4 align-middle">
|
|
<div className="text-right text-gray-400">
|
|
{this.props.quote_symbol} {this.props.quote_equivalent}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
export type WalletCardProps = {
|
|
quote: string,
|
|
}
|
|
|
|
export class WalletCard extends Component<{}, { balances: Array<Balance> }> {
|
|
constructor(props) {
|
|
super(props);
|
|
}
|
|
|
|
state = {
|
|
balances: []
|
|
}
|
|
|
|
renderCoinBalances() {
|
|
return (
|
|
this.state.balances.map((balance: Balance) => {
|
|
return (
|
|
<CoinBalance key={balance.currency.concat(balance.kind)} icon={null} name={balance.currency}
|
|
amount={balance.amount} short={""}
|
|
quote_equivalent={0} percentage={0}
|
|
quote_symbol={"$"}/>
|
|
)
|
|
})
|
|
)
|
|
}
|
|
|
|
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 flex-col bg-white border-t border-b sm:rounded sm:border shadow overflow-hidden">
|
|
<div className="border-b">
|
|
<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">
|
|
List
|
|
</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 ≈ {this.props}{this.state.total_balance.toFixed(2)}*/}
|
|
{/*</div>*/}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
} |