feat: make wallet elements start out expanded

Agoric · Nov 12, 2020 · 40bfda1 · 40bfda1
1 parent 600ca67
commit 40bfda1
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 12 deletions.
diff --git a/packages/dapp-svelte-wallet/ui/lib/ListCard.svelte b/packages/dapp-svelte-wallet/ui/lib/ListCard.svelte
@@ -11,14 +11,19 @@
 
   export let expandIcon = 'arrow_right';
 
-  let expanded = [];
+  // true iff new items should start expanded
+  export let expandDefault = false;
 
-  const toggle = item => {
-    // console.log('toggle', item);
-    if (expanded.includes(item)) {
-      expanded = expanded.filter(it => item !== it);
+  let expandState = [];
+
+  $: isExpanded = id => expandState.includes(id) !== expandDefault;
+
+  const toggle = id => {
+    console.log('toggle', id, expandState.includes(id));
+    if (expandState.includes(id)) {
+      expandState = expandState.filter(it => id !== it);
     } else {
-      expanded = [...expanded, item];
+      expandState = [...expandState, id];
     }
   };
 </script>
@@ -43,7 +48,7 @@
         <div class="fullwidth px-1">
           <ListItem dense selectedClasses="bg-primary-trans" {item} {...item} on:click={() => toggle(item.id)}>
             <div class="flex items-center">
-              <Icon tip={expanded.includes(item.id)}>{expandIcon}</Icon>
+              <Icon tip={isExpanded(item.id)}>{expandIcon}</Icon>
               <slot name="item-header" {item}><span>{item.text}</span></slot>
             </div>
           </ListItem>
@@ -52,7 +57,7 @@
             <slot name="item-header-rest" {item}></slot>
           </div>
 
-          {#if expanded.includes(item.id)}
+          {#if isExpanded(item.id)}
             <div in:slide class="ml-10">
               <slot name="item-details" {item}></slot>
             </div>

diff --git a/packages/dapp-svelte-wallet/ui/src/Dapps.svelte b/packages/dapp-svelte-wallet/ui/src/Dapps.svelte
@@ -6,7 +6,7 @@
   import { dapps } from './store';
 </script>
 
-<ListCard items={$dapps}>
+<ListCard items={$dapps} expandDefault={true}>
   <div slot="title">
     <Card.Title title="Dapps" />
   </div>

diff --git a/packages/dapp-svelte-wallet/ui/src/Payments.svelte b/packages/dapp-svelte-wallet/ui/src/Payments.svelte
@@ -2,15 +2,15 @@
   import ListItems from "../lib/ListItems.svelte";
   import Amount from "./Amount.svelte";
   import Payment from './Payment.svelte';
-  
+
   import { payments } from './store';
 import ListCard from "../lib/ListCard.svelte";
 import Card from "smelte/src/components/Card";
 
 $: paymentItems = $payments.filter(pmt => pmt.status !== 'deposited');
 </script>
 
-<ListCard items={paymentItems}>
+<ListCard items={paymentItems} expandDefault={true}>
   <div slot="title">
     <Card.Title title="Incoming Payments" />
   </div>

diff --git a/packages/dapp-svelte-wallet/ui/src/Transactions.svelte b/packages/dapp-svelte-wallet/ui/src/Transactions.svelte
@@ -7,7 +7,7 @@
 </script>
 
 <!-- filter out the history -->
-<ListCard items={($inbox || []).filter(({ status }) => status === undefined || status === 'pending')}>
+<ListCard items={($inbox || []).filter(({ status }) => status === undefined || status === 'pending')} expandDefault={true}>
   <div slot="title">
     <Card.Title title="Offers" />
   </div>