simple-wallet: show availableBalance instead of balance

apps/simple-wallet/client/src/actions/transactions.ts

@@ -63,17 +63,17 @@ export const transactionConfirmed = (transactionHash: string): TxsTransactionCon
   transactionHash,
 });
 
-export const watchPendingTransaction = (web3: Web3, dispatch: Dispatch, walletAddress: string | undefined, transactionHash: string) => {
+export const watchPendingTransaction = (web3: Web3, dispatch: Dispatch, walletAddress: string | undefined, wallet: Contract, transactionHash: string) => {
   web3.eth.getTransactionReceipt(transactionHash).then((tx: TransactionReceipt) => {
     if (tx.status) {
       dispatch(transactionConfirmed(transactionHash));
       if (walletAddress !== undefined) {
-        loadBalance(web3, dispatch, walletAddress);
+        dispatch<any>(loadBalance(web3, walletAddress, wallet));
       }
       return;
     }
 
-    window.setTimeout(() => watchPendingTransaction(web3, dispatch, walletAddress, transactionHash), 5000)
+    window.setTimeout(() => watchPendingTransaction(web3, dispatch, walletAddress, wallet, transactionHash), 5000)
   }).catch((error: string) => {
     //FIXME: handle error
     console.log("error", error)
@@ -118,13 +118,13 @@ export const loadTransactions = (web3: Web3, dispatch: Dispatch, getState: () =>
     wallet.events.TopUp({fromBlock: blockNumber}).on('data', (event: any) => {
       const values = event.returnValues;
       dispatch(transactionDiscovered("TopUp", event.id, event.transactionHash, true, values.from, walletAddress, values.value));
-      watchPendingTransaction(web3, dispatch, walletAddress, event.transactionHash);
+      watchPendingTransaction(web3, dispatch, walletAddress, wallet, event.transactionHash);
     })
 
     wallet.events.NewPaymentRequest({fromBlock: blockNumber}).on('data', (event: any) => {
       const values = event.returnValues;
       dispatch(transactionDiscovered("NewPaymentRequest", event.id, event.transactionHash, true, walletAddress, values.to, values.amount));
-      watchPendingTransaction(web3, dispatch, walletAddress, event.transactionHash);
+      watchPendingTransaction(web3, dispatch, walletAddress, wallet, event.transactionHash);
     })
   });
 }

apps/simple-wallet/client/src/actions/wallet.ts

@@ -5,8 +5,13 @@ import { abi as keycardWalletFactoryABI } from '../contracts/KeycardWalletFactor
 import { abi as keycardWalletABI } from '../contracts/KeycardWallet';
 import { isEmptyAddress } from '../utils';
 import { loadTransactions } from './transactions';
+import { Contract } from 'web3-eth-contract';
 
-const walletFactoryAddress = "0x43069D770a44352c94E043aE3F815BfeAfE5b279";
+// const walletFactoryAddress = "0x43069D770a44352c94E043aE3F815BfeAfE5b279";
+// const walletFactoryAddress = "0x8C9437F77103E6aC431Af3e9D45cD3D8A972047e";
+
+// Ropsten
+const walletFactoryAddress = "0x0062A04FD283e6E5C4C4c5e355b2c1A3781813C3";
 //FIXME: remove test address
 // const testKeycardAddress = "0x13F1e02E78A0636420cDc1BDaE343aDbBfF308F0";
 
@@ -49,6 +54,7 @@ export const WALLET_BALANCE_LOADED = "WALLET_BALANCE_LOADED";
 export interface WalletBalanceLoadedAction {
   type: typeof WALLET_BALANCE_LOADED
   balance: string
+  availableBalance: string
 }
 
 export const WALLET_TOGGLE_QRCODE = "WALLET_TOGGLE_QRCODE";
@@ -96,9 +102,10 @@ export const loadingWalletBalance = (address: string): WalletLoadingBalanceActio
   address,
 });
 
-export const balanceLoaded = (balance: string): WalletBalanceLoadedAction => ({
+export const balanceLoaded = (balance: string, availableBalance: string): WalletBalanceLoadedAction => ({
   type: WALLET_BALANCE_LOADED,
   balance,
+  availableBalance,
 });
 
 export const showWalletQRCode = (): WalletToggleQRCodeAction => ({
@@ -134,10 +141,10 @@ export const loadWallet = (web3: Web3, dispatch: Dispatch, getState: () => RootS
       return;
     }
 
-    dispatch(walletAddressLoaded(keycardAddress, walletAddress));
-    loadBalance(web3, dispatch, walletAddress);
-
     const wallet = new web3.eth.Contract(keycardWalletABI, walletAddress);
+
+    dispatch(walletAddressLoaded(keycardAddress, walletAddress));
+    dispatch<any>(loadBalance(web3, walletAddress, wallet));
     loadTransactions(web3, dispatch, getState, wallet);
   }).catch((error: string) => {
     //FIXME: manage error
@@ -146,12 +153,16 @@ export const loadWallet = (web3: Web3, dispatch: Dispatch, getState: () => RootS
 }
 
 
-export const loadBalance = (web3: Web3, dispatch: Dispatch, walletAddress: string) => {
-  dispatch(loadingWalletBalance(walletAddress));
-  web3.eth.getBalance(walletAddress).then((balance: string) => {
-    dispatch(balanceLoaded(balance));
-  }).catch((error: string) => {
-    //FIXME: manage error
-    console.log("error", error)
-  })
+export const loadBalance = (web3: Web3, walletAddress: string, wallet: Contract) => {
+  return async (dispatch: Dispatch) => {
+    dispatch(loadingWalletBalance(walletAddress));
+    try {
+      const balance = await web3.eth.getBalance(walletAddress);
+      const availableBalance = await wallet.methods.availableBalance().call();
+      dispatch(balanceLoaded(balance, availableBalance));
+    } catch (err) {
+      //FIXME: manage error
+      console.error(err)
+    }
+  }
 }

apps/simple-wallet/client/src/components/TopPanel.tsx

@@ -3,6 +3,7 @@ import Button from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography';
 import { makeStyles } from '@material-ui/core/styles';
 import { Props } from '../containers/TopPanel';
+import { config } from '../global';
 
 const useStyles = makeStyles(theme => ({
   container: {
@@ -30,16 +31,32 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
+const roundEther = (wei: string | undefined) => {
+  const fullTotal = wei ? config.web3!.utils.fromWei(wei) : "0";
+  const parts = fullTotal.split(".");
+  let roundedBalance = parts[0];
+  const decimals = (parts[1] || "").slice(0, 4)
+  if (decimals.length > 0) {
+    roundedBalance = `${roundedBalance}.${decimals}`;
+  }
+
+  return [fullTotal, roundedBalance];
+}
+
+
 const TopPanel = (props: Props) => {
   const classes = useStyles();
 
+  const [balance, roundedBalance] = roundEther(props.balance);
+  const [availableBalance, roundedAvailableBalance] = roundEther(props.availableBalance);
+
   return <div className={classes.container}>
     <div>
       <Typography variant="h2" color="inherit">
-        {props.roundedBalance} Ξ
+        {roundedAvailableBalance} Ξ
       </Typography>
       <Typography variant="body1" color="inherit" style={{textAlign: "center"}}>
-        {props.balance}
+        {availableBalance}
       </Typography>
       <div className={classes.actions}>
         <Button

apps/simple-wallet/client/src/containers/TopPanel.ts

@@ -4,11 +4,10 @@ import { MouseEvent } from 'react';
 import { Dispatch } from 'redux';
 import TopPanel from '../components/TopPanel';
 import { showWalletQRCode } from '../actions/wallet';
-import { config } from '../global';
 
 export interface StateProps {
-  balance: string
-  roundedBalance: string
+  balance: string | undefined
+  availableBalance: string | undefined
 }
 
 export interface DispatchProps {
@@ -18,17 +17,9 @@ export interface DispatchProps {
 export type Props = StateProps & DispatchProps;
 
 const mapStateToProps = (state: RootState): StateProps => {
-  const fullTotal = state.wallet.balance ? config.web3!.utils.fromWei(state.wallet.balance) : "0";
-  const parts = fullTotal.split(".");
-  let roundedBalance = parts[0];
-  let decimals = (parts[1] || "").slice(0, 4)
-  if (decimals.length > 0) {
-    roundedBalance = `${roundedBalance}.${decimals}`;
-  }
-
   return {
-    balance: fullTotal,
-    roundedBalance: roundedBalance,
+    balance: state.wallet.balance,
+    availableBalance: state.wallet.availableBalance,
   }
 }
 

apps/simple-wallet/client/src/reducers/wallet.ts

@@ -16,7 +16,8 @@ export interface WalletState {
   keycardAddress: string | undefined
   walletAddress: string | undefined
   walletFound: boolean
-  balance: string
+  balance: string | undefined
+  availableBalance: string | undefined
   error: string | undefined
   showWalletQRCode: boolean
 }
@@ -27,7 +28,8 @@ const initialState = {
   keycardAddress: undefined,
   walletAddress: undefined,
   walletFound: false,
-  balance: "",
+  balance: undefined,
+  availableBalance: undefined,
   error: undefined,
   showWalletQRCode: false,
 };
@@ -93,6 +95,7 @@ export const walletReducer = (state: WalletState = initialState, action: WalletA
         ready: true,
         loading: false,
         balance: action.balance,
+        availableBalance: action.availableBalance,
       }
     }
   }