feat(wallet): Don't show autodeposit payments in requests, smooth out…

… rendering animations (#3832)
Agoric · Sep 16, 2021 · b03c7a5 · b03c7a5
1 parent 71cbcfc
commit b03c7a5
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 18 deletions.
diff --git a/packages/dapp-svelte-wallet/ui/src/Payments.svelte b/packages/dapp-svelte-wallet/ui/src/Payments.svelte
@@ -4,10 +4,10 @@
   import Payment from './Payment.svelte';
 
   import { payments } from './store';
-import ListCard from "../lib/ListCard.svelte";
-import Card from "smelte/src/components/Card";
+  import ListCard from "../lib/ListCard.svelte";
+  import Card from "smelte/src/components/Card";
 
-$: paymentItems = $payments.filter(pmt => pmt.status !== 'deposited');
+  $: paymentItems = $payments.filter(pmt => pmt.status !== 'deposited');
 </script>
 
 <ListCard items={paymentItems} storeKey="payments.true" expandDefault={true}>

diff --git a/packages/dapp-svelte-wallet/ui/src/Requests.svelte b/packages/dapp-svelte-wallet/ui/src/Requests.svelte
@@ -4,19 +4,24 @@
     import DappV2 from './DappV2.svelte';
     import PaymentV2 from './PaymentV2.svelte';
 
-    import { inbox, dapps, payments } from './store';
+    import { inbox, dapps, payments, purses } from './store';
 
     export let classes = '';
 
-    $: incomingPayments = ($payments || []).filter(({ status }) => status === undefined || status === 'pending');
+    const hasAutoDeposit = (payment) =>
+        $purses.filter((p) =>
+            p.brand === payment.brand && (p.depositBoardId || '').length
+        ).length;
+
+    $: incomingPayments = ($payments || []).filter((i) => i.status !== 'deposited' && !hasAutoDeposit(i));
     $: offers = ($inbox || []).filter(({ status }) => status === undefined || status === 'pending');
     $: dappConnections = ($dapps || []).filter(({ enable }) => !enable);
 
     $: mappedPayments = incomingPayments.map((i) => {
         return {
             type: 'payment',
             data: i,
-            id: i,
+            id: i.displayPayment.payment.petname,
         };
     });
     $: mappedOffers = offers.map((i) => { 
@@ -52,6 +57,17 @@
     h6 {
         font-size: 18px;
     }
+
+    .empty {
+        animation: fadeIn 2s;
+        text-align: center;
+    }
+
+    @keyframes fadeIn {
+        0% { opacity: 0; }
+        5% { opacity: 0; }
+        100% { opacity: 1; }
+    }
 </style>
 
 <div class={`content ${classes}`}>
@@ -66,13 +82,15 @@
             {/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>
+        <div class="empty">
+            <img class="splash-image"
+                src="generic-agoric.svg"
+                alt="Empty Inbox"
+                width="320"
+                height="320" />
+            <p class="text-gray-700">
+                No requests.
+            </p>
+        </div>
     {/if}
 </div>
diff --git a/packages/dapp-svelte-wallet/ui/src/TransactionV2.svelte b/packages/dapp-svelte-wallet/ui/src/TransactionV2.svelte
@@ -10,9 +10,6 @@
   import Chip from "../lib/Chip.svelte";
 
   export let item;
-  export let summary = true;
-  export let summaryLine = 0;
-  export let details = true;
 
   function formatDateNow(stamp) {
     if (!stamp) {
@@ -126,7 +123,7 @@
 
   <div>
     <Petname name={instancePetname} board={instanceHandleBoardId} />
-    (via <span class="blue">{dappOrigin || origin}</span>)  
+    <i>via</i> <span class="blue">{dappOrigin || origin}</span> 
   </div>
 
   <div>