From b03c7a5d44093c356d29e807a93041a760b1a029 Mon Sep 17 00:00:00 2001
From: Samuel Siegart <samsiegart@gmail.com>
Date: Wed, 15 Sep 2021 21:34:12 -0700
Subject: [PATCH] feat(wallet): Don't show autodeposit payments in requests,
 smooth out rendering animations (#3832)

---
 .../dapp-svelte-wallet/ui/src/Payments.svelte |  6 +--
 .../dapp-svelte-wallet/ui/src/Requests.svelte | 40 ++++++++++++++-----
 .../ui/src/TransactionV2.svelte               |  5 +--
 3 files changed, 33 insertions(+), 18 deletions(-)

diff --git a/packages/dapp-svelte-wallet/ui/src/Payments.svelte b/packages/dapp-svelte-wallet/ui/src/Payments.svelte
index 706bb4bdfde..f8a97212f32 100644
--- 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
index f2976d4d8fa..92337a450cf 100644
--- a/packages/dapp-svelte-wallet/ui/src/Requests.svelte
+++ b/packages/dapp-svelte-wallet/ui/src/Requests.svelte
@@ -4,11 +4,16 @@
     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);
 
@@ -16,7 +21,7 @@
         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
index 99686e81bf8..fb9a48084c7 100644
--- 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>