From b2cff30167f4646ae3ff3aa47afcc5534ae03155 Mon Sep 17 00:00:00 2001
From: Michael FIG <mfig@agoric.com>
Date: Thu, 6 Aug 2020 00:23:54 -0600
Subject: [PATCH] fix: more cleanups

---
 packages/dapp-svelte-wallet/ui/src/App.svelte |  8 +--
 .../dapp-svelte-wallet/ui/src/Contact.svelte  | 20 +++----
 .../dapp-svelte-wallet/ui/src/Contacts.svelte | 54 +++++++++----------
 .../dapp-svelte-wallet/ui/src/Dapp.svelte     | 19 ++++---
 .../dapp-svelte-wallet/ui/src/Issuers.svelte  |  2 +-
 .../dapp-svelte-wallet/ui/src/Transfer.svelte | 12 +++--
 packages/dapp-svelte-wallet/ui/src/store.js   | 16 ++++--
 7 files changed, 71 insertions(+), 60 deletions(-)

diff --git a/packages/dapp-svelte-wallet/ui/src/App.svelte b/packages/dapp-svelte-wallet/ui/src/App.svelte
index 79ec7447a72..eea7f850f50 100644
--- a/packages/dapp-svelte-wallet/ui/src/App.svelte
+++ b/packages/dapp-svelte-wallet/ui/src/App.svelte
@@ -9,11 +9,7 @@
   import Contacts from "./Contacts.svelte";
   import Purses from "./Purses.svelte";
   import Transactions from "./Transactions.svelte";
-  import {
-    dapps,
-    connected,
-    contacts,
-  } from "./store";
+  import { connected } from "./store";
 
   import { ThemeWrapper, ThemeToggle } from "svelte-themer";
 
@@ -187,7 +183,7 @@
         <Issuers />
       </div>
       <div class="contacts">
-        <Contacts {contacts} />
+        <Contacts />
       </div>
       <!-- <div class="history">
         <History />
diff --git a/packages/dapp-svelte-wallet/ui/src/Contact.svelte b/packages/dapp-svelte-wallet/ui/src/Contact.svelte
index 933c2579d2a..49058b9961e 100644
--- a/packages/dapp-svelte-wallet/ui/src/Contact.svelte
+++ b/packages/dapp-svelte-wallet/ui/src/Contact.svelte
@@ -2,16 +2,18 @@
   import BoardId from "./BoardId.svelte";
   import Petname from './Petname.svelte';
 
-  export let contact;
-</script>
+  export let item;
+
+  export let summary = true;
+  export let details = true;
 
-<style>
-  section {
-    padding: 10px;
-    box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.5);
-  }
-</style>
+</script>
 
 <section>
-  <Petname name={contact[0]} /> <BoardId id={contact[1].depositBoardId} />
+  {#if summary}
+  <Petname name={item.contactPetname} />
+  {/if}
+  {#if details}
+  <BoardId id={item.depositBoardId} />
+  {/if}
 </section>
diff --git a/packages/dapp-svelte-wallet/ui/src/Contacts.svelte b/packages/dapp-svelte-wallet/ui/src/Contacts.svelte
index 8bb028df469..b4f1e44f26f 100644
--- a/packages/dapp-svelte-wallet/ui/src/Contacts.svelte
+++ b/packages/dapp-svelte-wallet/ui/src/Contacts.svelte
@@ -1,39 +1,37 @@
 <script>
   import { E } from '@agoric/eventual-send';
+  import Card from 'smelte/src/components/Card';
+  import ListCard from '../lib/ListCard.svelte';
 
-  import ListItems from "../lib/ListItems.svelte";
-  import BoardId from "./BoardId.svelte";
   import Import from "./Import.svelte";
   import Contact from "./Contact.svelte";
 
-  import { walletP } from './store';
-
-  export let contacts;
+  import { contacts, walletP } from './store';
 </script>
 
-<style>
-  div {
-    margin: 1rem;
-    /* border: 1px solid grey; */
-  }
-  .float {
-    float: right;
-    margin: 0 1rem;
-  }
-</style>
+<ListCard items={$contacts}>
+  <div slot="title">
+    <Card.Title
+      title="Contacts"
+    />
+  </div>
+
+  <div slot="empty">
+    No contacts.
+  </div>
+
+  <div slot="item-header" let:item>
+    <Contact {item} details={false} />
+  </div>
+
+  <div slot="item-details" let:item>
+    <Contact {item} summary={false} />
+  </div>
 
-<section>
-  <h2>Contacts
-  <div class="float"><Import
-    name="Contact"
+  <div slot="actions">
+    <Import name="Contact"
     adder={(petname, obj) => E(walletP).addContact(petname, obj)}>
     Import
-  </Import>
-  </div></h2>
-  <ListItems items={$contacts}>
-    <div slot="item" let:item>
-      <Contact contact={item} />
-    </div>
-    <p slot="empty">No contacts.</p>
-  </ListItems>
-</section>
+    </Import>
+  </div>
+</ListCard>
diff --git a/packages/dapp-svelte-wallet/ui/src/Dapp.svelte b/packages/dapp-svelte-wallet/ui/src/Dapp.svelte
index 51ec69b86d9..67904bf1768 100644
--- a/packages/dapp-svelte-wallet/ui/src/Dapp.svelte
+++ b/packages/dapp-svelte-wallet/ui/src/Dapp.svelte
@@ -2,6 +2,7 @@
   import { E } from "@agoric/eventual-send";
   import TextField from 'smelte/src/components/TextField';
   import Switch from 'smelte/src/components/Switch';
+import { strikethrough } from "svelte-awesome/icons";
 
   export let item;
   export let details = true;
@@ -19,12 +20,11 @@
     }
   };
 
-  const keydown = e => {
-    // console.log('have', e.key);
-    if (e.key === 'Escape') {
+  const keydown = ev => {
+    if (ev.key === 'Escape') {
       petname = origPetname;
       ev.stopPropagation();
-    } else if (e.key === 'Enter') {
+    } else if (ev.key === 'Enter') {
       E(actions).setPetname(petname);
       ev.stopPropagation();
     }
@@ -32,9 +32,16 @@
 </script>
 
 <div>
-{#if summary}{dappOrigin || origin}{/if}
+{#if summary}{origPetname}{/if}
 {#if details}
-  <div on:keydown|capture><TextField
+  <div>Web:
+    {#if enable}
+    <a target="_blank" href={dappOrigin || origin}>{dappOrigin || origin}</a>
+    {:else}
+    <strikethrough>{dappOrigin || origin}</strikethrough>
+    {/if}
+  </div>
+  <div on:keydown|capture={keydown}><TextField
     hint="Alleged name: {JSON.stringify(suggestedPetname)}"
     label="Dapp petname"
     bind:value={petname}
diff --git a/packages/dapp-svelte-wallet/ui/src/Issuers.svelte b/packages/dapp-svelte-wallet/ui/src/Issuers.svelte
index eee47f787aa..568144040cc 100644
--- a/packages/dapp-svelte-wallet/ui/src/Issuers.svelte
+++ b/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 ListCard from '../lib/ListCard.svelte';
   
   import Issuer from './Issuer.svelte';
   import Import from './Import.svelte';
 
   import { issuers, walletP } from './store';
-  import ListCard from '../lib/ListCard.svelte';
 </script>
 
 <ListCard items={$issuers}>
diff --git a/packages/dapp-svelte-wallet/ui/src/Transfer.svelte b/packages/dapp-svelte-wallet/ui/src/Transfer.svelte
index 3d4d3ec9478..419f43aed9f 100644
--- a/packages/dapp-svelte-wallet/ui/src/Transfer.svelte
+++ b/packages/dapp-svelte-wallet/ui/src/Transfer.svelte
@@ -15,6 +15,8 @@
   import { RadioButton } from "smelte/src/components/RadioButton";
   import Select from 'smelte/src/components/Select';
 
+  import { selfContact } from './store';
+
   export let source;
 
   const name = `xfer-${Math.random()}`;
@@ -23,20 +25,20 @@
   let ownPurse = true;
   let valueJSON = "0";
   let toPurse = source;
-  let toContact = $contacts && $contacts[0] && $contacts[0][1];
+  let toContact = $selfContact;
 
   const send = async destination => {
     try {
       const value = JSON.parse(valueJSON);
-      await E(source.actions).send(destination, value);
+      await E(source.actions).send(destination.actions, value);
       showModal = false;
     } catch (e) {
       alert(`Cannot send: ${e}`);
     }
   };
 
-  $: contactItems = $contacts ? $contacts.map(([text, value]) => ({ value, text })) : [];
-  $: purseItems = $purses ? $purses.filter(({ brand }) => brand === source.brand).map(p => ({ value: p, text: p.pursePetname })) : [];
+  $: contactItems = $contacts ? $contacts.map(({ value, text }) => ({ value, text })) : [];
+  $: purseItems = $purses ? $purses.filter(({ brand }) => brand === source.brand).map(p => ({ value: p, text: p.text })) : [];
 </script>
 
 <div>
@@ -76,7 +78,7 @@
   </RadioButton>
 
   <div slot="actions">
-    <DefaultButton on:click={() => send(ownPurse ? toPurse.actions : toContact.actions)}>Send</DefaultButton>
+    <DefaultButton on:click={() => send(ownPurse ? toPurse : toContact)}>Send</DefaultButton>
     <CancelButton on:click={() => showModal = false} />
   </div>
 </Dialog>
diff --git a/packages/dapp-svelte-wallet/ui/src/store.js b/packages/dapp-svelte-wallet/ui/src/store.js
index 22ee20c77e8..fbd4caec576 100644
--- a/packages/dapp-svelte-wallet/ui/src/store.js
+++ b/packages/dapp-svelte-wallet/ui/src/store.js
@@ -32,8 +32,9 @@ function cmp(a, b) {
   return a < b ? -1 : a === b ? 0 : 1;
 }
 
-function comparable(x) {
-  return JSON.stringify(x);
+function kv(key, val) {
+  const text = Array.isArray(key) ? key.join('.') : key;
+  return { ...val, id: key, text, value: val };
 }
 
 function onReset(readyP) {
@@ -49,7 +50,7 @@ function onReset(readyP) {
   }, E(walletP).getInboxJSONNotifier());
   updateFromNotifier({
     updateState(state) {
-      setPurses(state.map(purse => ({ ...purse, id: comparable(purse.pursePetname) }))
+      setPurses(state.map(purse => ({ ...kv(purse.pursePetname, purse) }))
         .sort((a, b) => cmp(a.brandPetname, b.brandPetname) || cmp(a.pursePetname, b.pursePetname)));
     },
   }, E(walletP).getPursesNotifier());
@@ -59,11 +60,16 @@ function onReset(readyP) {
         .sort((a, b) => cmp(a.dappPetname, b.dappPetname) || cmp(a.id, b.id)));
     },
   }, E(walletP).getDappsNotifier());
-  updateFromNotifier({ updateState: setContacts }, E(walletP).getContactsNotifier());
+  updateFromNotifier({
+    updateState(state) {
+      setContacts(state.map(([contactPetname, contact]) => ({ contactPetname, ...kv(contactPetname, contact) }))
+        .sort((a, b) => cmp(a.contactPetname, b.contactPetname) || cmp(a.id, b.id)));
+    },
+  }, E(walletP).getContactsNotifier());
   updateFromNotifier({ updateState: setPayments }, E(walletP).getPaymentsNotifier());
   updateFromNotifier({
     updateState(state) {
-      setIssuers(state.map(([issuerPetname, issuer]) => ({ ...issuer, issuerPetname, id: comparable(issuerPetname), text: issuerPetname }))
+      setIssuers(state.map(([issuerPetname, issuer]) => ({ issuerPetname, ...kv(issuerPetname, issuer) }))
         .sort((a, b) => cmp(a.id, b.id)));
     },
   }, E(walletP).getIssuersNotifier());