feat: use ListCard for Issuers

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

@@ -0,0 +1,53 @@
+<script>
+  import { slide } from 'svelte/transition';
+
+  import List from 'smelte/src/components/List';
+
+  import Icon from "smelte/src/components/Icon";
+  import Card from "smelte/src/components/Card";
+  import ListItem from 'smelte/src/components/List/ListItem.svelte';
+
+  export let items = [];
+
+  export let expandIcon = 'arrow_right';
+
+  let expanded = [];
+
+  const toggle = item => {
+    if (expanded.includes(item)) {
+      expanded = expanded.filter(it => item !== it);
+    } else {
+      expanded = [...expanded, item];
+    }
+  };
+</script>
+
+<Card.Card class="fullwidth px-2 py-2">
+  <slot name="title"></slot>
+
+  <!-- All {JSON.stringify($issuers)} -->
+  {#if !Array.isArray(items) || items.length === 0}
+    <slot name="none">No items.</slot>
+  {:else}
+    <List {items}>
+      <div slot="item" class="px-1" let:item>
+        <div class="fullwidth px-1">
+          <ListItem dense selectedClasses="bg-primary-trans" {item} {...item} on:click={() => toggle(item)}>
+            <div class="flex items-center">
+              <Icon tip={expanded.includes(item)}>{expandIcon}</Icon>
+              <slot name="item-header" {item}><span>{item.text}</span></slot>
+            </div>
+          </ListItem>
+
+          {#if expanded.includes(item)}
+            <div in:slide class="ml-10">
+              <slot name="item-details" {item}></slot>
+            </div>
+          {/if}
+        </div>
+      </div>
+    </List>
+  {/if}
+
+  <slot name="actions"></slot>
+</Card.Card>

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

@@ -1,58 +1,32 @@
 <script>
-  import BoardId from "./BoardId.svelte";
   import Petname from "./Petname.svelte";
+  import BoardId from "./BoardId.svelte";
   import MakePurse from "./MakePurse.svelte";
   import { walletP } from "./store";
 
   import { E } from "@agoric/captp";
-  import Card from "smelte/src/components/Card";
-  import Dialog from "smelte/src/components/Dialog";
-  import CancelButton from "../lib/CancelButton.svelte";
-  import Contact from "./Contact.svelte";
 
-  export let issuer;
+  export let item;
 
-  let selected = false;
-  const onClick = ev => {
-    ev.stopPropagation();
-    selected = !selected;
-  };
+  export let summary = false;
+  export let details = false;
+  if (!summary && !details) {
+    summary = true;
+  }
 </script>
 
-{#if selected}
-  <Card.Card class="fullwidth px-1 py-1">
-    <div on:click={onClick}>
-      <Card.Title title="Issuer Details" />
-    </div>
-
-    <Petname name={issuer[0]} />
-
-    <!-- <Dialog bind:value={selected}>
-    <h5 slot="title">{issuer[0]} Issuer Details</h5> -->
-
-    <div class="px-2">
+<div>
+  {#if summary}
+    <Petname name={item[0]} />
+  {/if}
+  {#if details}
+    <div>
       Board ID:
       <BoardId
-        onPublish={() => E(walletP).publishIssuer(issuer[1].brand)}
-        id={issuer[1].issuerBoardId} />
+        onPublish={() => E(walletP).publishIssuer(item[1].brand)}
+        id={item[1].issuerBoardId} />
     </div>
 
-    <!-- </Dialog> -->
-    <div slot="actions">
-      {#if selected}
-        <MakePurse issuerPetname={issuer[0]}>Make Purse</MakePurse>
-        <CancelButton
-          on:click={ev => {
-            ev.stopPropagation();
-            selected = false;
-          }} />
-      {/if}
-    </div>
-  </Card.Card>
-{:else}
-  <div on:click={onClick}>
-    <Card.Card class="fullwidth px-1 py-1">
-      <Petname name={issuer[0]} />
-    </Card.Card>
-  </div>
-{/if}
+    <MakePurse issuerPetname={item[0]}>Make Purse</MakePurse>
+  {/if}
+</div>

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

@@ -1,12 +1,12 @@
 <script>
   import { E } from '@agoric/eventual-send';
   import Card from 'smelte/src/components/Card';
-  import List from 'smelte/src/components/List';
-
+  
+  import Issuer from './Issuer.svelte';
   import Import from './Import.svelte';
-  import Issuer from "./Issuer.svelte";
 
   import { issuers, walletP } from './store';
+  import ListCard from '../lib/ListCard.svelte';
 
   function cmp(a, b) {
     return a < b ? -1 : a === b ? 0 : 1;
@@ -15,27 +15,27 @@
   $: issuerItems = $issuers ? [...$issuers].sort((a, b) => cmp(a[0], b[0])) : [];
 </script>
 
-<Card.Card class="fullwidth px-2 py-2">
+<ListCard items={issuerItems}>
   <div slot="title">
     <Card.Title
       title="Issuers"
-      subheader="Verifiers of digital assets"
     />
   </div>
 
-  <!-- All {JSON.stringify($issuers)} -->
-  {#if !Array.isArray($issuers) || $issuers.length === 0}
+  <div slot="none">
     No issuers.
-  {:else}
-    <List items={issuerItems}>
-      <div slot="item" class="px-1" let:item={item}>
-        <Issuer issuer={item} />
-      </div>
-    </List>
-  {/if}
+  </div>
+
+  <div slot="item-header" let:item>
+    <Issuer {item} summary={true} />
+  </div>
+
+  <div slot="item-details" let:item>
+    <Issuer {item} details={true} />
+  </div>
 
   <div slot="actions">
     <Import name="Issuer"
       adder={(petname, obj) => E(walletP).addIssuer(petname, obj, true)}>Import</Import>
   </div>
-</Card.Card>
+</ListCard>