fix: more UI cleanups

Agoric · Aug 7, 2020 · ac1d2f7 · ac1d2f7
1 parent b2cff30
commit ac1d2f7
Show file tree

Hide file tree

Showing 10 changed files with 34 additions and 33 deletions.
diff --git a/packages/dapp-svelte-wallet/ui/lib/ListCard.svelte b/packages/dapp-svelte-wallet/ui/lib/ListCard.svelte
@@ -14,7 +14,7 @@
   let expanded = [];
 
   const toggle = item => {
-    // console.log('toggle', item,)
+    // console.log('toggle', item);
     if (expanded.includes(item)) {
       expanded = expanded.filter(it => item !== it);
     } else {

diff --git a/packages/dapp-svelte-wallet/ui/package.json b/packages/dapp-svelte-wallet/ui/package.json
@@ -19,13 +19,11 @@
     "rollup-plugin-livereload": "^1.0.0",
     "rollup-plugin-svelte": "^5.0.3",
     "rollup-plugin-terser": "^6.1.0",
-    "svelte": "^3.0.0",
-    "svelte-themer": "^0.1.4",
+    "sirv-cli": "^1.0.0",
     "smelte": "^1.0.15",
-    "svelte-awesome": "^2.3.0"
-  },
-  "dependencies": {
-    "sirv-cli": "^1.0.0"
+    "svelte": "^3.0.0",
+    "svelte-awesome": "^2.3.0",
+    "svelte-themer": "^0.1.4"
   },
   "files": [
     "public"

diff --git a/packages/dapp-svelte-wallet/ui/public/wallet/index.html b/packages/dapp-svelte-wallet/ui/public/wallet/index.html
@@ -13,9 +13,9 @@
     rel="stylesheet"
   />
   <!-- <link rel='stylesheet' href='reset.css'> -->
-  <link rel='stylesheet' href='global.css'>
+  <!-- <link rel='stylesheet' href='global.css'> -->
   <link rel='stylesheet' href='build/smelte.css'>
-  <link rel='stylesheet' href='override.css'>
+  <!-- <link rel='stylesheet' href='override.css'> -->
   <link rel='stylesheet' href='build/bundle.css'>
 
 	<script defer src='build/bundle.js'></script>

diff --git a/packages/dapp-svelte-wallet/ui/rollup.config.js b/packages/dapp-svelte-wallet/ui/rollup.config.js
@@ -71,11 +71,14 @@ export default {
     production && terser(),
 
     smelte({
-      purge: false && production, // FIXME: with purging, we lose a bunch of styles
+      purge: production,
       output: 'public/wallet/build/smelte.css', // it defaults to static/global.css which is probably what you expect in Sapper
       postcss: [], // Your PostCSS plugins
       whitelist: [], // Array of classnames whitelisted from purging
-      whitelistPatterns: [], // Same as above, but list of regexes
+      whitelistPatterns: [
+        // FIXME: with purging, we lose a bunch of styles, so whitelist them all.
+        /^/,
+      ],
       tailwind: {
         theme: {
           extend: {

diff --git a/packages/dapp-svelte-wallet/ui/src/App.svelte b/packages/dapp-svelte-wallet/ui/src/App.svelte
@@ -1,5 +1,4 @@
 <script>
-  import "smelte/src/tailwind.css";
   import { E } from "@agoric/eventual-send";
 
   import Button from "smelte/src/components/Button";

diff --git a/packages/dapp-svelte-wallet/ui/src/Dapp.svelte b/packages/dapp-svelte-wallet/ui/src/Dapp.svelte
@@ -34,11 +34,11 @@ import { strikethrough } from "svelte-awesome/icons";
 <div>
 {#if summary}{origPetname}{/if}
 {#if details}
-  <div>Web:
+  <div>
     {#if enable}
-    <a target="_blank" href={dappOrigin || origin}>{dappOrigin || origin}</a>
+    User interface: <a target="_blank" href={dappOrigin || origin}>{dappOrigin || origin}</a>
     {:else}
-    <strikethrough>{dappOrigin || origin}</strikethrough>
+    Alleged user interface: <strikethrough>{dappOrigin || origin}</strikethrough>
     {/if}
   </div>
   <div on:keydown|capture={keydown}><TextField

diff --git a/packages/dapp-svelte-wallet/ui/src/Payment.svelte b/packages/dapp-svelte-wallet/ui/src/Payment.svelte
@@ -10,37 +10,36 @@
   export let summary = true;
   export let details = true;
 
-  const payment = item;
   let destination;
 
   $: deposit = () => {
     // console.log('deposit to', destination);
-    return E(payment.actions).deposit(destination);
+    return E(item.actions).deposit(destination);
   };
 </script>
 
 <section>
   <div>
-    {#if payment.status === 'deposited'}
+    {#if item.status === 'deposited'}
       {#if summary}
-        Deposited <Amount amount={payment.displayPayment.depositedAmount} />
+        Deposited <Amount amount={item.displayPayment.depositedAmount} />
       {/if}
-    {:else if payment.issuer}
+    {:else if item.issuer}
       {#if summary}
         Payment amount
-        {#if payment.lastAmount}
-          <Amount amount={payment.displayPayment.lastAmount} />
+        {#if item.lastAmount}
+          <Amount amount={item.displayPayment.lastAmount} />
         {/if}
       {/if}
 
       {#if details}
-      <button on:click={() => E(payment.actions).getAmountOf()}>Refresh Amount</button>
+      <button on:click={() => E(item.actions).getAmountOf()}>Refresh Amount</button>
       <button on:click={deposit}>Deposit to</button>
       {#if $purses}
         <select bind:value={destination}>
           <option value={undefined}>Automatic</option>
           {#each $purses as p}
-            {#if p.brand === payment.brand}
+            {#if p.brand === item.brand}
               <option>{p.pursePetname}</option>
             {/if}
           {/each}
@@ -53,7 +52,7 @@
       {/if}
     {/if}
     {#if details}
-      <Debug title="Payment Detail" target={payment} />
+      <Debug title="Payment Detail" target={item} />
     {/if}
   </div>
 </section>
diff --git a/packages/dapp-svelte-wallet/ui/src/Transfer.svelte b/packages/dapp-svelte-wallet/ui/src/Transfer.svelte
@@ -25,13 +25,13 @@
   let ownPurse = true;
   let valueJSON = "0";
   let toPurse = source;
-  let toContact = $selfContact;
+  let toContact = undefined;
 
   const send = async destination => {
     try {
       const value = JSON.parse(valueJSON);
-      await E(source.actions).send(destination.actions, value);
       showModal = false;
+      await E(source.actions).send(destination.actions, value);
     } catch (e) {
       alert(`Cannot send: ${e}`);
     }

diff --git a/packages/dapp-svelte-wallet/ui/src/main.js b/packages/dapp-svelte-wallet/ui/src/main.js
@@ -1,4 +1,5 @@
 import './install-ersatz-harden';
+import './tailwind.css';
 import App from './App.svelte';
 
 const app = new App({

diff --git a/packages/dapp-svelte-wallet/ui/src/store.js b/packages/dapp-svelte-wallet/ui/src/store.js
@@ -32,14 +32,15 @@ function cmp(a, b) {
   return a < b ? -1 : a === b ? 0 : 1;
 }
 
-function kv(key, val) {
+function kv(keyObj, val) {
+  const key = Object.values(keyObj)[0];
   const text = Array.isArray(key) ? key.join('.') : key;
-  return { ...val, id: key, text, value: val };
+  return { ...val, ...keyObj, id: text, text, value: val };;
 }
 
 function onReset(readyP) {
   readyP.then(() => resetAlls.forEach(fn => fn()));
-  E(walletP).getSelfContact().then(setSelfContact);
+  E(walletP).getSelfContact().then(sc => setSelfContact({ contactPetname: 'Self', ...kv('Self', sc) }));
   // Set up our subscriptions.
   updateFromNotifier({
     updateState(ijs) {
@@ -50,7 +51,7 @@ function onReset(readyP) {
   }, E(walletP).getInboxJSONNotifier());
   updateFromNotifier({
     updateState(state) {
-      setPurses(state.map(purse => ({ ...kv(purse.pursePetname, purse) }))
+      setPurses(state.map(purse => kv({ pursePetname: purse.pursePetname }, purse))
         .sort((a, b) => cmp(a.brandPetname, b.brandPetname) || cmp(a.pursePetname, b.pursePetname)));
     },
   }, E(walletP).getPursesNotifier());
@@ -62,14 +63,14 @@ function onReset(readyP) {
   }, E(walletP).getDappsNotifier());
   updateFromNotifier({
     updateState(state) {
-      setContacts(state.map(([contactPetname, contact]) => ({ contactPetname, ...kv(contactPetname, contact) }))
+      setContacts(state.map(([contactPetname, contact]) => 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]) => ({ issuerPetname, ...kv(issuerPetname, issuer) }))
+      setIssuers(state.map(([issuerPetname, issuer]) => kv({ issuerPetname }, issuer))
         .sort((a, b) => cmp(a.id, b.id)));
     },
   }, E(walletP).getIssuersNotifier());