preliminary, rough support to balances
This commit is contained in:
parent
ec35fb1366
commit
c4014bc48b
@ -1,11 +1,6 @@
|
|||||||
import React, {Component} from 'react';
|
import React, {Component} from 'react';
|
||||||
import {Currency} from "../types";
|
import {Balance, EventName, FirstConnectMessage, NewTickMessage} from "../types";
|
||||||
|
import {socket} from "../index";
|
||||||
type CardProps = {
|
|
||||||
title: string,
|
|
||||||
content: string,
|
|
||||||
logo?: JSX.Element,
|
|
||||||
}
|
|
||||||
|
|
||||||
export type CoinBalanceProps = {
|
export type CoinBalanceProps = {
|
||||||
name: string,
|
name: string,
|
||||||
@ -58,52 +53,46 @@ class CoinBalance extends Component<CoinBalanceProps> {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export class SidebarCard extends Component<CardProps> {
|
export type WalletCardProps = {
|
||||||
constructor(props: CardProps) {
|
quote: string,
|
||||||
super(props)
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<div className="bg-gray-300 mt-2 mx-2 rounded p-2 flex flex-col items-center">
|
|
||||||
<div className="text-gray-600">{this.props.logo} {this.props.title}</div>
|
|
||||||
<div className="mt-1 mx-auto text-center text-3xl font-semibold">{this.props.content}</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export type WalletCardState = {
|
export class WalletCard extends Component<{}, { balances: Array<Balance> }> {
|
||||||
balances: Array<CoinBalanceProps>,
|
|
||||||
total_balance: number,
|
|
||||||
quote: Currency,
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
export class WalletCard extends Component<{}, WalletCardState> {
|
|
||||||
state = {
|
|
||||||
balances: [],
|
|
||||||
total_balance: 0,
|
|
||||||
quote: {name: "USD", short_name: "$"}
|
|
||||||
}
|
|
||||||
|
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
state = {
|
||||||
|
balances: []
|
||||||
|
}
|
||||||
|
|
||||||
renderCoinBalances() {
|
renderCoinBalances() {
|
||||||
return (
|
return (
|
||||||
this.state.balances.map((balance) => {
|
this.state.balances.map((balance: Balance) => {
|
||||||
return (
|
return (
|
||||||
<CoinBalance icon={balance.icon} name={balance.name} amount={balance.amount} short={balance.short}
|
<CoinBalance key={balance.currency.concat(balance.kind)} icon={null} name={balance.currency}
|
||||||
quote_equivalent={balance.quote_equivalent} percentage={balance.percentage}
|
amount={balance.amount} short={""}
|
||||||
quote_symbol={balance.quote_symbol}/>
|
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() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div className="w-full mb-6 lg:mb-0 px-4 flex flex-col">
|
<div className="w-full mb-6 lg:mb-0 px-4 flex flex-col">
|
||||||
@ -128,9 +117,9 @@ export class WalletCard extends Component<{}, WalletCardState> {
|
|||||||
{this.renderCoinBalances()}
|
{this.renderCoinBalances()}
|
||||||
|
|
||||||
<div className="px-6 py-4">
|
<div className="px-6 py-4">
|
||||||
<div className="text-center text-gray-400">
|
{/*<div className="text-center text-gray-400">*/}
|
||||||
Total Balance ≈ {this.state.quote_symbol}{this.props.total_balance.toFixed(2)}
|
{/* Total Balance ≈ {this.props}{this.state.total_balance.toFixed(2)}*/}
|
||||||
</div>
|
{/*</div>*/}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -1,4 +1,5 @@
|
|||||||
import React, {Component} from "react";
|
import React, {Component} from "react";
|
||||||
|
import {WalletCard} from "./Cards";
|
||||||
|
|
||||||
export class Navbar extends Component<any, any> {
|
export class Navbar extends Component<any, any> {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
@ -25,8 +26,10 @@ export class Navbar extends Component<any, any> {
|
|||||||
</li>
|
</li>
|
||||||
<li className="mt-3 p-2 text-gray-400 dark:text-blue-300 rounded-lg">
|
<li className="mt-3 p-2 text-gray-400 dark:text-blue-300 rounded-lg">
|
||||||
<a href="#" className=" flex flex-col items-center">
|
<a href="#" className=" flex flex-col items-center">
|
||||||
<svg className="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
<svg className="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
|
stroke="currentColor">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
|
||||||
|
d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/>
|
||||||
</svg>
|
</svg>
|
||||||
<span className="text-xs mt-2 text-gray-300">Reports</span>
|
<span className="text-xs mt-2 text-gray-300">Reports</span>
|
||||||
</a>
|
</a>
|
||||||
@ -35,9 +38,12 @@ export class Navbar extends Component<any, any> {
|
|||||||
<ul className="text-gray-700 dark:text-gray-400 capitalize">
|
<ul className="text-gray-700 dark:text-gray-400 capitalize">
|
||||||
<li className="mt-auto p-2 text-gray-400 dark:text-blue-300 rounded-lg">
|
<li className="mt-auto p-2 text-gray-400 dark:text-blue-300 rounded-lg">
|
||||||
<a href="#" className=" flex flex-col items-center">
|
<a href="#" className=" flex flex-col items-center">
|
||||||
<svg className="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
<svg className="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
stroke="currentColor">
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
|
||||||
|
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
|
||||||
|
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
|
||||||
</svg>
|
</svg>
|
||||||
<span className="text-xs mt-2 text-gray-300">Settings</span>
|
<span className="text-xs mt-2 text-gray-300">Settings</span>
|
||||||
</a>
|
</a>
|
||||||
@ -58,7 +64,7 @@ export class Sidebar extends Component {
|
|||||||
<aside
|
<aside
|
||||||
className="w-1/4 my-1 mr-1 pr-2 py-4 flex flex-col bg-gray-200 dark:bg-black
|
className="w-1/4 my-1 mr-1 pr-2 py-4 flex flex-col bg-gray-200 dark:bg-black
|
||||||
dark:text-gray-400 rounded-r-lg overflow-y-auto">
|
dark:text-gray-400 rounded-r-lg overflow-y-auto">
|
||||||
{/*<WalletCard/>*/}
|
<WalletCard/>
|
||||||
</aside>
|
</aside>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user