feat(ui): show actual free balance on wallet screens (#715)

* Show balance on profile wallet
* Show balance on org wallet

ui/Screen/Org/Fund.svelte

@@ -1,16 +1,20 @@
 <script>
+  import { updateBalance, balance as balanceStore } from "../../src/account.ts";
   import { transactions as txStore } from "../../src/transaction.ts";
   import { org, orgTransactions } from "../../src/org.ts";
   import { Wallet, Remote } from "../../DesignSystem/Component";
 
   export let params = null;
   const accountId = $org.data.accountId;
+  $: updateBalance(accountId);
 </script>
 
 <Remote store={txStore} let:data={transactions}>
-  <Wallet
-    dataCy="org-wallet"
-    transactions={orgTransactions(transactions, params.id)}
-    balance={3484}
-    {accountId} />
+  <Remote store={balanceStore} let:data={balance}>
+    <Wallet
+      dataCy="org-wallet"
+      transactions={orgTransactions(transactions, params.id)}
+      {balance}
+      {accountId} />
+  </Remote>
 </Remote>

ui/Screen/Profile/Wallet.svelte

@@ -1,5 +1,6 @@
 <script>
   import { getContext } from "svelte";
+  import { updateBalance, balance as balanceStore } from "../../src/account.ts";
   import { transactions as store } from "../../src/transaction.ts";
   import { Wallet, Remote } from "../../DesignSystem/Component";
 
@@ -11,12 +12,15 @@
 
   const session = getContext("session");
   $: accountId = session.identity ? session.identity.accountId : null;
+  $: updateBalance(accountId);
 </script>
 
 <Remote {store} let:data={transactions}>
-  <Wallet
-    dataCy="user-wallet"
-    transactions={userTransactions(transactions)}
-    balance={342}
-    {accountId} />
+  <Remote store={balanceStore} let:data={balance}>
+    <Wallet
+      dataCy="user-wallet"
+      transactions={userTransactions(transactions)}
+      {balance}
+      {accountId} />
+  </Remote>
 </Remote>

ui/src/account.ts

@@ -1,11 +1,21 @@
 import * as api from "./api";
+import * as remote from "./remote";
 
 /* Offers commodities to query useful information regarding accounts on chain. */
 
 // Get the balance of the account with the given id
-export const balance = (id: string): Promise<number> =>
+export const getBalance = (id: string): Promise<number> =>
   api.get<number>(`accounts/${id}/balance`);
 
 // Check whether an account with the given id exists on chain
 export const exists = (id: string): Promise<boolean> =>
   api.get<boolean>(`accounts/${id}/exists`);
+
+// State
+const balanceStore = remote.createStore<number>();
+export const balance = balanceStore.readable;
+
+export const updateBalance = (id: string) => {
+  balanceStore.loading();
+  getBalance(id).then(balanceStore.success).catch(balanceStore.error);
+};