feat: much better formatting

Agoric · Aug 7, 2020 · f331df0 · f331df0
1 parent a7ec550
commit f331df0
Show file tree

Hide file tree

Showing 16 changed files with 284 additions and 241 deletions.
diff --git a/packages/dapp-svelte-wallet/ui/lib/ListCard.svelte b/packages/dapp-svelte-wallet/ui/lib/ListCard.svelte
@@ -14,6 +14,7 @@
   let expanded = [];
 
   const toggle = item => {
+    // console.log('toggle', item,)
     if (expanded.includes(item)) {
       expanded = expanded.filter(it => item !== it);
     } else {
@@ -25,27 +26,29 @@
 <Card.Card class="fullwidth px-2 py-2">
   <slot name="title"></slot>
 
+  <slot></slot>
+
   <!-- All {JSON.stringify($issuers)} -->
   {#if !Array.isArray(items) || items.length === 0}
-    <slot name="none">No items.</slot>
+    <div class="ml-8"><slot name="empty">No items.</slot></div>
   {:else}
     <List {items}>
-      <div slot="item" class="px-1" let:item>
+      <li slot="item" class="px-1" let:item>
         <div class="fullwidth px-1">
-          <ListItem dense selectedClasses="bg-primary-trans" {item} {...item} on:click={() => toggle(item)}>
+          <ListItem dense selectedClasses="bg-primary-trans" {item} {...item} on:click={() => toggle(item.id)}>
             <div class="flex items-center">
-              <Icon tip={expanded.includes(item)}>{expandIcon}</Icon>
+              <Icon tip={expanded.includes(item.id)}>{expandIcon}</Icon>
               <slot name="item-header" {item}><span>{item.text}</span></slot>
             </div>
           </ListItem>
 
-          {#if expanded.includes(item)}
+          {#if expanded.includes(item.id)}
             <div in:slide class="ml-10">
               <slot name="item-details" {item}></slot>
             </div>
           {/if}
         </div>
-      </div>
+      </li>
     </List>
   {/if}
 

diff --git a/packages/dapp-svelte-wallet/ui/src/Amount.svelte b/packages/dapp-svelte-wallet/ui/src/Amount.svelte
@@ -7,6 +7,7 @@
 
   // The amount gets updated. Make this dynamic
   $: ({ brand, value } = amount);
+  const cardinality = v => typeof v === 'number' ? v : v.length;
 </script>
 
 <style>
@@ -16,9 +17,9 @@
 </style>
 
 <section>
-  {#if Array.isArray(value)}
+  {#if Array.isArray(value) && value.length !== 0}
     <!-- amount is non-fungible -->
-    <Tooltip disable={value.length === 0}>
+    <Tooltip>
       <div slot="activator">
         <b>
           {value.length}
@@ -35,8 +36,8 @@
     </Tooltip>
   {:else}
     <b>
-      {value}
-      <Petname name={brand.petname} plural={value.length !== 1} />
+      {cardinality(value)}
+      <Petname name={brand.petname} plural={cardinality(value) !== 1} />
     </b>
   {/if}
 

diff --git a/packages/dapp-svelte-wallet/ui/src/App.svelte b/packages/dapp-svelte-wallet/ui/src/App.svelte
@@ -11,13 +11,8 @@
   import Transactions from "./Transactions.svelte";
   import {
     dapps,
-    payments,
-    purses,
-    inbox,
     connected,
     contacts,
-    boardP,
-    walletP
   } from "./store";
 
   import { ThemeWrapper, ThemeToggle } from "svelte-themer";
@@ -177,16 +172,16 @@
 
     <main>
       <div class="dapps">
-        <Dapps {dapps} />
+        <Dapps />
       </div>
       <div class="payments">
-        <Payments {payments} />
+        <Payments />
       </div>
       <div class="txns">
-        <Transactions {inbox} {walletP} />
+        <Transactions />
       </div>
       <div class="purses">
-        <Purses {purses} {walletP} />
+        <Purses />
       </div>
       <div class="issuers">
         <Issuers />

diff --git a/packages/dapp-svelte-wallet/ui/src/Dapp.svelte b/packages/dapp-svelte-wallet/ui/src/Dapp.svelte
@@ -1,43 +1,46 @@
 <script>
   import { E } from "@agoric/eventual-send";
-  import Card from 'smelte/src/components/Card';
+  import TextField from 'smelte/src/components/TextField';
+  import Switch from 'smelte/src/components/Switch';
 
-  export let dapp;
-  let petname = dapp.petname || dapp.suggestedPetname;
+  export let item;
+  export let details = true;
+  export let summary = true;
 
-  const onKeydown = e => {
-        if (e.key === 'Escape') {
-          petname = origPetname;
-        } else if (e.key === 'Enter') {
-          E(actions).setPetname(petname);
-        }
-      };
-</script>
+  $: ({ enable, actions, suggestedPetname,
+    petname: origPetname, dappOrigin, origin } = item);
+  let petname = item.petname || item.suggestedPetname;
+
+  const toggleDappEnabled = () => {
+    if (enable) {
+      E(E(actions).setPetname(petname)).disable();
+    } else {
+      E(E(actions).setPetname(petname)).enable();
+    }
+  };
 
-<style>
-  div {
-    padding: 10px;
-    box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.5);
-  }
-</style>
+  const keydown = e => {
+    // console.log('have', e.key);
+    if (e.key === 'Escape') {
+      petname = origPetname;
+      ev.stopPropagation();
+    } else if (e.key === 'Enter') {
+      E(actions).setPetname(petname);
+      ev.stopPropagation();
+    }
+  };
+</script>
 
 <div>
-{#each [dapp] as { actions, enable, petname: origPetname, suggestedPetname, dappOrigin, origin } (dappOrigin || origin)}
-  <p>{dappOrigin || origin} suggested: {JSON.stringify(suggestedPetname)}</p>
-  <dd>
-    <input
-      type="text"
-      on:keydown={onKeydown}
-      bind:value={petname} />
-    {#if enable}
-      <button on:click={() => E(E(actions).setPetname(petname)).disable()}>
-        Disable
-      </button>
-    {:else}
-      <button on:click={() => E(E(actions).setPetname(petname)).enable()}>
-        Enable
-      </button>
-    {/if}
-  </dd>
-{/each}
-</div>
+{#if summary}{dappOrigin || origin}{/if}
+{#if details}
+  <div on:keydown|capture><TextField
+    hint="Alleged name: {JSON.stringify(suggestedPetname)}"
+    label="Dapp petname"
+    bind:value={petname}
+  /></div>
+  <div on:click|capture|stopPropagation={toggleDappEnabled}>
+    <Switch value={enable} label="Enabled" />
+  </div>
+{/if}
+</div>
diff --git a/packages/dapp-svelte-wallet/ui/src/Dapps.svelte b/packages/dapp-svelte-wallet/ui/src/Dapps.svelte
@@ -1,24 +1,25 @@
 <script>
-  import { E } from "@agoric/eventual-send";
-  import ListItems from "../lib/ListItems.svelte";
+  import ListCard from "../lib/ListCard.svelte";
+  import Card from 'smelte/src/components/Card';
   import Dapp from "./Dapp.svelte";
 
-  export let dapps;
+  import { dapps } from './store';
 </script>
 
-<style>
-  div {
-    margin: 1rem;
-    /* border: 1px solid grey; */
-  }
-</style>
+<ListCard items={$dapps}>
+  <div slot="title">
+    <Card.Title title="Dapps" />
+  </div>
 
-<section>
-  <h2>Dapps</h2>
-  <ListItems items={$dapps} idFn={item => item.origin}>
-    <div slot="item" let:item>
-      <Dapp dapp={item} />
-    </div>
-    <p slot="empty">No dapps.</p>
-  </ListItems>
-</section>
+  <div slot="empty">
+    No Dapps.
+  </div>
+
+  <div slot="item-header" let:item>
+    <Dapp {item} details={false}/>
+  </div>
+
+  <div slot="item-details" let:item>
+    <Dapp {item} summary={false}/>
+  </div>
+</ListCard>
diff --git a/packages/dapp-svelte-wallet/ui/src/Issuer.svelte b/packages/dapp-svelte-wallet/ui/src/Issuer.svelte
@@ -8,25 +8,22 @@
 
   export let item;
 
-  export let summary = false;
-  export let details = false;
-  if (!summary && !details) {
-    summary = true;
-  }
+  export let summary = true;
+  export let details = true;
 </script>
 
-<div>
+<section>
   {#if summary}
-    <Petname name={item[0]} />
+    <Petname name={item.issuerPetname} />
   {/if}
   {#if details}
     <div>
       Board ID:
       <BoardId
-        onPublish={() => E(walletP).publishIssuer(item[1].brand)}
-        id={item[1].issuerBoardId} />
+        onPublish={() => E(walletP).publishIssuer(item.brand)}
+        id={item.issuerBoardId} />
     </div>
 
-    <MakePurse issuerPetname={item[0]}>Make Purse</MakePurse>
+    <MakePurse issuerPetname={item.issuerPetname}>Make Purse</MakePurse>
   {/if}
-</div>
+</section>
diff --git a/packages/dapp-svelte-wallet/ui/src/Issuers.svelte b/packages/dapp-svelte-wallet/ui/src/Issuers.svelte
@@ -7,31 +7,25 @@
 
   import { issuers, walletP } from './store';
   import ListCard from '../lib/ListCard.svelte';
-
-  function cmp(a, b) {
-    return a < b ? -1 : a === b ? 0 : 1;
-  }
-
-  $: issuerItems = $issuers ? [...$issuers].sort((a, b) => cmp(a[0], b[0])) : [];
 </script>
 
-<ListCard items={issuerItems}>
+<ListCard items={$issuers}>
   <div slot="title">
     <Card.Title
       title="Issuers"
     />
   </div>
 
-  <div slot="none">
+  <div slot="empty">
     No issuers.
   </div>
 
   <div slot="item-header" let:item>
-    <Issuer {item} summary={true} />
+    <Issuer {item} details={false} />
   </div>
 
   <div slot="item-details" let:item>
-    <Issuer {item} details={true} />
+    <Issuer {item} summary={false} />
   </div>
 
   <div slot="actions">

diff --git a/packages/dapp-svelte-wallet/ui/src/MakePurse.svelte b/packages/dapp-svelte-wallet/ui/src/MakePurse.svelte
@@ -20,15 +20,13 @@
   let showModal = false;
 
   const name = 'Purse';
-
-  $: issuerPetnames = $issuers ? [...$issuers].map(([petname]) => petname).sort().map(petname => ({ value: petname, text: petname })) : [];
 </script>
 
 <Button on:click={() => (showModal = true)}><slot /></Button>
 <Dialog bind:value={showModal}>
   <h5 slot="title">Create New Purse</h5>
   {#if !issuerPetname}
-  <Select label="Issuer" items={issuerPetnames} bind:value={issuer} />
+  <Select label="Issuer" items={$issuers} bind:value={issuer} />
   {/if}
 
   <TextField label="Purse petname" bind:value={petname} hint={`My ${issuer} Purse`} />

diff --git a/packages/dapp-svelte-wallet/ui/src/Payment.svelte b/packages/dapp-svelte-wallet/ui/src/Payment.svelte
@@ -4,9 +4,13 @@
   import Debug from "../lib/Debug.svelte";
   import { E } from "@agoric/eventual-send";
   import BoardId from "./BoardId.svelte";
-  import { selfContact, payments, purses } from './store';
+  import { purses } from './store';
 
-  export let payment;
+  export let item;
+  export let summary = true;
+  export let details = true;
+
+  const payment = item;
   let destination;
 
   $: deposit = () => {
@@ -15,22 +19,21 @@
   };
 </script>
 
-<style>
-  section {
-    padding: 10px;
-    box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.5);
-  }
-</style>
-
 <section>
   <div>
     {#if payment.status === 'deposited'}
-      Deposited <Amount amount={payment.displayPayment.depositedAmount} />
+      {#if summary}
+        Deposited <Amount amount={payment.displayPayment.depositedAmount} />
+      {/if}
     {:else if payment.issuer}
-      Payment last valued at
-      {#if payment.lastAmount}
-        <Amount amount={payment.displayPayment.lastAmount} />
+      {#if summary}
+        Payment amount
+        {#if payment.lastAmount}
+          <Amount amount={payment.displayPayment.lastAmount} />
+        {/if}
       {/if}
+
+      {#if details}
       <button on:click={() => E(payment.actions).getAmountOf()}>Refresh Amount</button>
       <button on:click={deposit}>Deposit to</button>
       {#if $purses}
@@ -43,9 +46,14 @@
           {/each}
         </select>
       {/if}
+      {/if}
     {:else}
+      {#if summary}
       Unknown brand.  This payment cannot be verified.
+      {/if}
+    {/if}
+    {#if details}
+      <Debug title="Payment Detail" target={payment} />
     {/if}
-    <Debug title="Payment Detail" target={payment} />
   </div>
 </section>