diff --git a/websrc/components/Cards.tsx b/websrc/components/Cards.tsx index 444f3c5..a23cd2b 100644 --- a/websrc/components/Cards.tsx +++ b/websrc/components/Cards.tsx @@ -1,4 +1,5 @@ import React, {Component} from 'react'; +import * as Icon from 'react-cryptocoins'; type CardProps = { title: string, @@ -6,6 +7,56 @@ type CardProps = { logo?: JSX.Element, } +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 class SidebarCard extends Component { constructor(props: CardProps) { @@ -22,12 +73,31 @@ export class SidebarCard extends Component { } } -export class WalletCard extends Component{ +export type WalletCardProps = { + balances: Array, + total_balance: number, + quote_symbol: string +} + +export class WalletCard extends Component { constructor(props) { super(props); } - render(){ - return( + + renderCoinBalances() { + return ( + this.props.balances.map((balance) => { + return ( + + ) + }) + ) + } + + render() { + return (
@@ -46,100 +116,12 @@ export class WalletCard extends Component{
- -
-
-
- - - - - -
- Bitcoin -
-
-
- 100% -
-
-
-
- 0.0010 BTC -
-
-
-
- CA$21.28 -
-
-
-
-
-
-
- - - - - -
- Litecoin -
-
-
- 0% -
-
-
-
- 0.0000 LTC -
-
-
-
- CA$0.00 -
-
-
-
-
-
-
- - - - - -
- Ethereum -
-
-
- 0% -
-
-
-
- 0.0000 ETH -
-
-
-
- CA$0.00 -
-
-
-
+ + {this.renderCoinBalances()} +
- Total Balance ≈ CA$21.28 + Total Balance ≈ {this.props.quote_symbol}{this.props.total_balance.toFixed(2)}