diff --git a/websrc/components/Cards.tsx b/websrc/components/Cards.tsx
index a23cd2b..25b82ba 100644
--- a/websrc/components/Cards.tsx
+++ b/websrc/components/Cards.tsx
@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import * as Icon from 'react-cryptocoins';
+import {Currency} from "../types";
 
 type CardProps = {
     title: string,
@@ -73,20 +73,28 @@ export class SidebarCard extends Component<CardProps> {
     }
 }
 
-export type WalletCardProps = {
+export type WalletCardState = {
     balances: Array<CoinBalanceProps>,
     total_balance: number,
-    quote_symbol: string
+    quote: Currency,
 }
 
-export class WalletCard extends Component<WalletCardProps> {
+
+export class WalletCard extends Component<{}, WalletCardState> {
+    state = {
+        balances: [],
+        total_balance: 0,
+        quote: {name: "USD", short_name: "$"}
+    }
+
     constructor(props) {
         super(props);
     }
 
+
     renderCoinBalances() {
         return (
-            this.props.balances.map((balance) => {
+            this.state.balances.map((balance) => {
                 return (
                     <CoinBalance icon={balance.icon} name={balance.name} amount={balance.amount} short={balance.short}
                                  quote_equivalent={balance.quote_equivalent} percentage={balance.percentage}
@@ -121,7 +129,7 @@ export class WalletCard extends Component<WalletCardProps> {
 
                     <div className="px-6 py-4">
                         <div className="text-center text-gray-400">
-                            Total Balance &asymp; {this.props.quote_symbol}{this.props.total_balance.toFixed(2)}
+                            Total Balance &asymp; {this.state.quote_symbol}{this.props.total_balance.toFixed(2)}
                         </div>
                     </div>
                 </div>