feat: introduce a $ready store for when captp is initialised

Also clean up the state resetting.

Author: michaelfig

packages/dapp-svelte-wallet/ui/src/App.svelte

@@ -10,7 +10,7 @@
   import Purses from './Purses.svelte';
   import Config from './Config.svelte';
   import Transactions from './Transactions.svelte';
-  import { connected } from './store';
+  import { connected, ready } from './store';
 
   import ListItems from '../lib/ListItems.svelte';
   import MenuButton from '../lib/MenuButton.svelte';
@@ -195,7 +195,7 @@
       </nav>
     </header>
   </div>
-  {#if !$connected}
+  {#if !$ready}
     <div
       class="disconnected-background"
       on:click|preventDefault|stopPropagation={() => {}} />

packages/dapp-svelte-wallet/ui/src/Payment.svelte

@@ -20,9 +20,10 @@ import Select from "smelte/src/components/Select/Select.svelte";
     return E(item.actions).deposit(destination ? destination.purse : undefined);
   };
 
-  $: purseItems = [{ value: null, text: 'Automatic' }, ...(
-    $purses ? $purses.filter(({ brand }) => brand === item.brand).map(p => ({ value: p, text: p.text })) : []
-  )];
+  $: purseItems = [
+    { value: null, text: 'Automatic' },
+    ...$purses.filter(({ brand }) => brand === item.brand).map(p => ({ value: p, text: p.text }))
+  ];
   // $: console.log('purseItems', purseItems);
 </script>
 

packages/dapp-svelte-wallet/ui/src/Payments.svelte

@@ -7,7 +7,7 @@
 import ListCard from "../lib/ListCard.svelte";
 import Card from "smelte/src/components/Card";
 
-$: paymentItems = $payments && $payments.filter(pmt => pmt.status !== 'deposited');
+$: paymentItems = $payments.filter(pmt => pmt.status !== 'deposited');
 </script>
 
 <ListCard items={paymentItems}>

packages/dapp-svelte-wallet/ui/src/Transfer.svelte

@@ -37,8 +37,8 @@
     }
   };
 
-  $: contactItems = $contacts ? $contacts.map(({ value, text }) => ({ value, text })) : [];
-  $: purseItems = $purses ? $purses.filter(({ brand }) => brand === source.brand).map(p => ({ value: p, text: p.text })) : [];
+  $: contactItems = $contacts.map(({ value, text }) => ({ value, text }));
+  $: purseItems = $purses.filter(({ brand }) => brand === source.brand).map(p => ({ value: p, text: p.text }));
 </script>
 
 <div>

packages/dapp-svelte-wallet/ui/src/captp.js

@@ -35,10 +35,8 @@ export function makeCapTPConnection(makeConnection, { onReset }) {
     await E.G(getBootstrap()).LOADING;
 
     // Begin the flow of messages to our wallet, which
-    // we refetch from the new, loaded, bootstrap object.
-    const bootPresence = getBootstrap();
-    
-    bootPK.resolve(bootPresence);
+    // we refetch from the new, loaded, bootstrap promise.
+    bootPK.resolve(getBootstrap());
   }
 
   // This is the public state, a promise that never resolves,
@@ -61,7 +59,7 @@ export function makeCapTPConnection(makeConnection, { onReset }) {
 
   // Prepare the first reset, delayed so that our caller
   // can use makePermanentPresence.
-  setTimeout(() => onReset(Promise.resolve(true)), 1);
+  setTimeout(() => onReset(bootPK.promise), 1);
 
   return { makeStableForwarder, ...props };
 }

packages/dapp-svelte-wallet/ui/src/store.js

@@ -18,6 +18,9 @@ export const walletP = makeStableForwarder(bootP => E.G(bootP).wallet);
 export const boardP = makeStableForwarder(bootP => E.G(bootP).board);
 
 const resetAlls = [];
+
+// We initialize as false, but reset to true on disconnects.
+const [ready, setReady] = makeReadable(false, true);
 const [inbox, setInbox] = makeReadable([]);
 const [purses, setPurses] = makeReadable([]);
 const [dapps, setDapps] = makeReadable([]);
@@ -26,7 +29,7 @@ const [contacts, setContacts] = makeReadable([]);
 const [selfContact, setSelfContact] = makeReadable();
 const [issuers, setIssuers] = makeReadable([]);
 
-export { inbox, purses, dapps, payments, issuers, contacts, selfContact };
+export { ready, inbox, purses, dapps, payments, issuers, contacts, selfContact };
 
 function cmp(a, b) {
   return a < b ? -1 : a === b ? 0 : 1;
@@ -39,6 +42,10 @@ function kv(keyObj, val) {
 }
 
 function onReset(readyP) {
+  // Reset is beginning, set unready.
+  setReady(false);
+
+  // When the ready promise fires, reset to ready.
   readyP.then(() => resetAlls.forEach(fn => fn()));
   E(walletP).getSelfContact().then(sc => setSelfContact({ contactPetname: 'Self', ...kv('Self', sc) }));
   // Set up our subscriptions.
@@ -77,8 +84,8 @@ function onReset(readyP) {
 }
 
 // like React useHook, return a store and a setter for it
-function makeReadable(value, start = undefined) {
-  const store = writable(value, start);
-  resetAlls.push(() => store.set(start));
+function makeReadable(value, reset = value) {
+  const store = writable(value);
+  resetAlls.push(() => store.set(reset));
   return [{ subscribe: store.subscribe }, store.set];
 }