Use bigint exclusively to represent balances.

clients/IntermediaryClient.ts

@@ -59,7 +59,7 @@ export class IntermediaryCoordinator {
     }
 
     const fee = 0; // for example
-    const updatedState = targetClient.addHTLC(
+    const updatedState = await targetClient.addHTLC(
       htlc.amount - BigInt(fee),
       htlc.hashLock,
     );

clients/OwnerClient.ts

@@ -154,7 +154,7 @@ export class OwnerClient extends StateChannelWallet {
     console.log("received invoice: ", invoice);
 
     // create a state update with the hashlock
-    const signedUpdate = this.addHTLC(amount, invoice.hashLock);
+    const signedUpdate = await this.addHTLC(amount, invoice.hashLock);
 
     // send the state update to the intermediary
     const intermediaryAck = await this.sendPeerMessage({

clients/StateChannelWallet.ts

@@ -276,18 +276,18 @@ export class StateChannelWallet {
   }
 
   // Craft an HTLC struct, put it inside a state, hash the state, sign and return it
-  addHTLC(amount: bigint, hash: string): SignedState {
+  async addHTLC(amount: bigint, hash: string): Promise<SignedState> {
     const currentTimestamp: number = Math.floor(Date.now() / 1000); // Unix timestamp in seconds
 
     if (this.myRole() === Participant.Intermediary) {
-      if (Number(this.currentState().intermediaryBalance) < BigInt(amount)) {
+      if (BigInt(this.currentState().intermediaryBalance) < BigInt(amount)) {
         throw new Error("Insufficient balance");
       }
     }
 
     if (
       this.myRole() === Participant.Owner &&
-      Number(this.getOwnerBalance()) < BigInt(amount)
+      (await this.getOwnerBalance()) < amount
     ) {
       throw new Error("Insufficient balance");
     }
@@ -307,7 +307,7 @@ export class StateChannelWallet {
     const updated: StateStruct = {
       owner: this.ownerAddress,
       intermediary: this.intermediaryAddress,
-      turnNum: Number(this.currentState().turnNum) + 1,
+      turnNum: BigInt(this.currentState().turnNum) + 1n,
       intermediaryBalance: BigInt(updatedIntermediaryBalance),
       htlcs: [...this.currentState().htlcs, htlc],
     };
@@ -347,7 +347,7 @@ export class StateChannelWallet {
     const updated: StateStruct = {
       intermediary: this.intermediaryAddress,
       owner: this.ownerAddress,
-      turnNum: Number(this.currentState().turnNum) + 1,
+      turnNum: BigInt(this.currentState().turnNum) + 1n,
       intermediaryBalance: newintermediaryBalance,
       htlcs: this.currentState().htlcs.filter((h) => h !== unlockTarget),
     };

src/Intermediary.tsx

@@ -126,9 +126,7 @@ export const Intermediary: React.FunctionComponent<{
             sx={{ width: 24, height: 24 }}
           />
         </Tooltip>
-        <Typography>
-          Owner balance: {formatEther(BigInt(ownerBalance))}
-        </Typography>
+        <Typography>Owner balance: {formatEther(ownerBalance)}</Typography>
       </Stack>
       <Stack
         direction="row"
@@ -143,7 +141,7 @@ export const Intermediary: React.FunctionComponent<{
           />
         </Tooltip>
         <Typography>
-          IntermediaryBalance: {formatEther(BigInt(intermediaryBalance))}
+          IntermediaryBalance: {formatEther(intermediaryBalance)}
         </Typography>
       </Stack>
     </>

src/Wallet.tsx

@@ -191,11 +191,11 @@ const Wallet: React.FunctionComponent<{ role: Role }> = (props: {
           </Typography>
           <Typography>
             {" "}
-            <b> Balance:</b> {formatEther(BigInt(ownerBalance))}{" "}
+            <b> Balance:</b> {formatEther(ownerBalance)}{" "}
           </Typography>
           <Typography>
             {" "}
-            <b> Inbound Capacity:</b> {formatEther(BigInt(intermediaryBalance))}{" "}
+            <b> Inbound Capacity:</b> {formatEther(intermediaryBalance)}{" "}
           </Typography>
         </Stack>
         <br />

src/useBalances.tsx

@@ -2,20 +2,20 @@ import { useState, useEffect } from "react";
 import { type StateChannelWallet } from "../clients/StateChannelWallet";
 import { UI_UPDATE_PERIOD } from "./constants";
 
-export function useBalances(client: StateChannelWallet): [number, number] {
-  const [ownerBalance, setOwnerBalance] = useState(0);
-  const [intermediaryBalance, setIntermediaryBalance] = useState(0);
+export function useBalances(client: StateChannelWallet): [bigint, bigint] {
+  const [ownerBalance, setOwnerBalance] = useState(0n);
+  const [intermediaryBalance, setIntermediaryBalance] = useState(0n);
   useEffect(() => {
     const interval = setInterval(() => {
       client
         .getOwnerBalance()
         .then((b) => {
-          setOwnerBalance(Number(b));
+          setOwnerBalance(b);
         })
         .catch((e) => {
           console.error(e);
         });
-      setIntermediaryBalance(Number(client.intermediaryBalance));
+      setIntermediaryBalance(client.intermediaryBalance);
     }, UI_UPDATE_PERIOD);
     return () => {
       clearInterval(interval);