fix: store the current state of the ListCard in localStorage

Author: michaelfig

packages/dapp-svelte-wallet/ui/lib/ListCard.svelte

@@ -14,7 +14,9 @@
   // true iff new items should start expanded
   export let expandDefault = false;
 
-  let expandState = [];
+  export let storeKey = '';
+
+  let expandState = storeKey ? JSON.parse(localStorage.getItem(`ListCard.${storeKey}`) || '[]') : [];
 
   $: isExpanded = id => expandState.includes(id) !== expandDefault;
 
@@ -25,6 +27,9 @@
     } else {
       expandState = [...expandState, id];
     }
+    if (storeKey) {
+      localStorage.setItem(`ListCard.${storeKey}`, JSON.stringify(expandState));
+    }
   };
 </script>
 

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

@@ -9,7 +9,7 @@
   import { contacts, walletP } from './store';
 </script>
 
-<ListCard items={$contacts}>
+<ListCard storeKey="contacts" items={$contacts}>
   <div slot="title">
     <Card.Title
       title="Contacts"

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

@@ -8,7 +8,7 @@
   export let expandDefault = true;
 </script>
 
-<ListCard items={$dapps} expandDefault={expandDefault}>
+<ListCard items={$dapps} storeKey="dapps-{expandDefault}" {expandDefault}>
   <div slot="title">
     <Card.Title title="Dapps" />
   </div>

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

@@ -9,7 +9,7 @@
   import { issuers, walletP } from './store';
 </script>
 
-<ListCard items={$issuers}>
+<ListCard items={$issuers} storeKey="issuers">
   <div slot="title">
     <Card.Title
       title="Issuers"

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

@@ -10,7 +10,7 @@ import Card from "smelte/src/components/Card";
 $: paymentItems = $payments.filter(pmt => pmt.status !== 'deposited');
 </script>
 
-<ListCard items={paymentItems} expandDefault={true}>
+<ListCard items={paymentItems} storeKey="payments.true" expandDefault={true}>
   <div slot="title">
     <Card.Title title="Incoming Payments" />
   </div>

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

@@ -6,7 +6,7 @@
   import { purses } from './store';
 </script>
 
-<ListCard items={$purses}>
+<ListCard items={$purses} storeKey="purses">
   <div slot="title">
     <Card.Title title="Purses" />
   </div>

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

@@ -7,7 +7,11 @@
 </script>
 
 <!-- filter out the history -->
-<ListCard items={($inbox || []).filter(({ status }) => status === undefined || status === 'pending')} expandDefault={true}>
+<ListCard
+  items={($inbox || []).filter(({ status }) => status === undefined || status === 'pending')}
+  storeKey="inbox"
+  expandDefault={true}
+>
   <div slot="title">
     <Card.Title title="Offers" />
   </div>

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

@@ -22,7 +22,7 @@ export function makeCapTPConnection(makeConnection, { onReset }) {
     // Throw away our state.
     bootPK = makePromiseKit();
     onReset(bootPK.promise.then(_ => true));
-    abort();
+    abort && abort();
   }
 
   // Stable identity for the connection handler.