feat(wallet): Fix icons and list rendering bugs (#3827)

Agoric · Sep 15, 2021 · 02b7554 · 02b7554
1 parent b5ee2ab
commit 02b7554
Show file tree

Hide file tree

Showing 7 changed files with 97 additions and 28 deletions.
diff --git a/packages/dapp-svelte-wallet/ui/lib/List.svelte b/packages/dapp-svelte-wallet/ui/lib/List.svelte
@@ -0,0 +1,72 @@
+<script>
+    import { ClassBuilder } from "smelte/src/utils/classes.js";
+    import ListItem from "smelte/src/components/List/ListItem.svelte";
+  
+    export let items = [];
+    export let value = "";
+    export let dense = false;
+    export let select = false;
+  
+    export const level = null;
+    export const text = "";
+    export const item = {};
+    export const to = null;
+    export const selectedClasses = i => i;
+    export const itemClasses = i => i;
+  
+    const classesDefault = "py-2 rounded";
+  
+    export let classes = classesDefault;
+  
+    function id(i) {
+      if (i.id !== undefined) return i.id;
+      if (i.value !== undefined) return i.value;
+      if (i.to !== undefined) return i.to;
+      if (i.text !== undefined) return i.text;
+      return i;
+    }
+  
+    function getText(i) {
+      if (i.text !== undefined) return i.text;
+      if (i.value !== undefined) return i.value;
+      return i;
+    }
+  
+    const cb = new ClassBuilder($$props.class);
+  
+    $: c = cb
+      .flush()
+      .add(classes, true, classesDefault)
+      .add($$props.class)
+      .get();
+  </script>
+
+  <ul class={c} class:rounded-t-none={select}>
+    {#each items as item, i (id(item))}
+      {#if item.to !== undefined}
+        <slot name="item" {item} {dense} {value}>
+          <a tabindex={i + 1} href={item.to}>
+            <ListItem bind:value {...item} id={id(item)} {dense} on:change>
+              {item.text}
+            </ListItem>
+          </a>
+        </slot>
+      {:else}
+        <slot name="item" {item} {dense} {value}>
+          <ListItem
+            bind:value
+            {selectedClasses}
+            {itemClasses}
+            {...item}
+            tabindex={i + 1}
+            id={id(item)}
+            selected={value === id(item)}
+            {dense}
+            on:change
+            on:click>
+            {getText(item)}
+          </ListItem>
+        </slot>
+      {/if}
+    {/each}
+  </ul>
diff --git a/packages/dapp-svelte-wallet/ui/lib/ListCard.svelte b/packages/dapp-svelte-wallet/ui/lib/ListCard.svelte
@@ -1,10 +1,8 @@
 <script>
   import { slide } from 'svelte/transition';
 
-  import List from 'smelte/src/components/List';
-
+  import List from './List.svelte';
   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 = [];

diff --git a/packages/dapp-svelte-wallet/ui/public/wallet/favicon.ico b/packages/dapp-svelte-wallet/ui/public/wallet/favicon.ico
diff --git a/packages/dapp-svelte-wallet/ui/src/Dapp.svelte b/packages/dapp-svelte-wallet/ui/src/Dapp.svelte
@@ -2,7 +2,6 @@
   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;

diff --git a/packages/dapp-svelte-wallet/ui/src/DappsV2.svelte b/packages/dapp-svelte-wallet/ui/src/DappsV2.svelte
@@ -1,6 +1,5 @@
 <script>
     import ListCard from "../lib/ListCard.svelte";
-    import Card from 'smelte/src/components/Card';
     import Dapp from "./Dapp.svelte";
 
     import { dapps } from './store';

diff --git a/packages/dapp-svelte-wallet/ui/src/Requests.svelte b/packages/dapp-svelte-wallet/ui/src/Requests.svelte
@@ -1,10 +1,8 @@
 
 <script>
-    import CardV2 from '../lib/CardV2.svelte';
     import TransactionV2 from './TransactionV2.svelte';
     import DappV2 from './DappV2.svelte';
     import PaymentV2 from './PaymentV2.svelte';
-    import ProgressCircular from 'smelte/src/components/ProgressCircular';
 
     import { inbox, dapps, payments } from './store';
 
@@ -14,22 +12,25 @@
     $: offers = ($inbox || []).filter(({ status }) => status === undefined || status === 'pending');
     $: dappConnections = ($dapps || []).filter(({ enable }) => !enable);
 
-    $: mappedPayments = incomingPayments.map((i) => { 
+    $: mappedPayments = incomingPayments.map((i) => {
         return {
-            'type': 'payment',
-            'data': i
+            type: 'payment',
+            data: i,
+            id: i,
         };
     });
     $: mappedOffers = offers.map((i) => { 
         return {
-            'type': 'transaction',
-            'data': i
+            type: 'transaction',
+            data: i,
+            id: i.id,
         };
     });
     $: mappedDapps = dappConnections.map((i) => { 
         return {
-            'type': 'dapp',
-            'data': i
+            type: 'dapp',
+            data: i,
+            id: i.dappOrigin || i.origin,
         };
     });
 
@@ -54,17 +55,8 @@
 </style>
 
 <div class={`content ${classes}`}>
-    {#if !items.length}
-        <img class="splash-image"
-            src="generic-agoric.svg"
-            alt="Empty Inbox"
-            width="320"
-            height="320" />
-        <p class="text-gray-700">
-            No requests.
-        </p>
-    {:else}
-        {#each items as item}
+    {#if items.length}
+        {#each items as item (item.id)}
             {#if item.type === "transaction"}
                 <TransactionV2 item={item.data} />
             {:else if item.type === "payment"}
@@ -73,5 +65,14 @@
                 <DappV2 item={item.data} />
             {/if}
         {/each}
+    {:else}
+        <img class="splash-image"
+            src="generic-agoric.svg"
+            alt="Empty Inbox"
+            width="320"
+            height="320" />
+        <p class="text-gray-700">
+            No requests.
+        </p>
     {/if}
 </div>
diff --git a/packages/dapp-svelte-wallet/ui/src/TransactionV2.svelte b/packages/dapp-svelte-wallet/ui/src/TransactionV2.svelte
@@ -139,7 +139,7 @@
         <h6>Give {role}</h6>
         <div class="token">
           <img alt="icon"
-            src={icons[item.brandPetname] ?? defaultIcon}
+            src={icons[amount.brand.petname] ?? defaultIcon}
             height="28px"
             width="28px" />
             <div>
@@ -154,7 +154,7 @@
         <h6>Want {role}</h6>
         <div class="token">
           <img alt="icon"
-            src={icons[item.brandPetname] ?? defaultIcon}
+            src={icons[amount.brand.petname] ?? defaultIcon}
             height="28px"
             width="28px" />
             <div>
@@ -170,7 +170,7 @@
         <div class="token">
           {#if feePursePetname}
             <img alt="icon"
-              src={icons[item.brandPetname] ?? defaultIcon}
+              src={icons[fee.brand.petname] ?? defaultIcon}
               height="28px"
               width="28px" />
           {/if}