From f193fa225c6e2e88b067d43e22b1fcc1230ebb98 Mon Sep 17 00:00:00 2001
From: Samuel Siegart <samsiegart@gmail.com>
Date: Thu, 16 Sep 2021 13:20:54 -0700
Subject: [PATCH] feat(wallet): Add dismiss option for dapp connections (#3836)

* feat(wallet): Add dismiss option for dapp connections

* feat(wallet): animate incoming requests

* feat(wallet): Persist requests until manually closed
---
 .../dapp-svelte-wallet/ui/src/Balance.svelte  |  4 +-
 .../dapp-svelte-wallet/ui/src/DappV2.svelte   | 39 +++++----
 .../ui/src/PaymentV2.svelte                   | 87 ++++++++++---------
 .../dapp-svelte-wallet/ui/src/Request.svelte  | 61 ++++++++++++-
 .../dapp-svelte-wallet/ui/src/Requests.svelte | 24 +++--
 .../ui/src/TransactionV2.svelte               | 18 ++--
 packages/dapp-svelte-wallet/ui/src/store.js   |  5 ++
 7 files changed, 158 insertions(+), 80 deletions(-)

diff --git a/packages/dapp-svelte-wallet/ui/src/Balance.svelte b/packages/dapp-svelte-wallet/ui/src/Balance.svelte
index 8b853a36653..0de4944ef89 100644
--- a/packages/dapp-svelte-wallet/ui/src/Balance.svelte
+++ b/packages/dapp-svelte-wallet/ui/src/Balance.svelte
@@ -21,8 +21,8 @@
 <div class="balance">
     <img alt="icon"
         src={icons[item.brandPetname] ?? defaultIcon}
-        height="28px"
-        width="28px" />
+        height="32px"
+        width="32px" />
     <div>
         <Purse {item}
             details={false}
diff --git a/packages/dapp-svelte-wallet/ui/src/DappV2.svelte b/packages/dapp-svelte-wallet/ui/src/DappV2.svelte
index 7f649e9f96f..8c9d002a841 100644
--- a/packages/dapp-svelte-wallet/ui/src/DappV2.svelte
+++ b/packages/dapp-svelte-wallet/ui/src/DappV2.svelte
@@ -5,20 +5,15 @@
   import Request from './Request.svelte';
   
   export let item;
+  export let dismiss;
 
   $: ({ enable, actions, suggestedPetname,
     petname: origPetname, dappOrigin, origin } = item);
   let petname = item.petname || item.suggestedPetname;
 
-  const toggleDappEnabled = () => {
-    if (enable) {
-      E(E(actions).setPetname(petname)).disable();
-    } else {
-      E(E(actions).setPetname(petname)).enable();
-    }
-  };
-
-  const enableDapp = () => E(E(actions).setPetname(petname)).enable();
+  const enableDapp = () => {
+    E(E(actions).setPetname(petname)).enable();
+  }
 
   const keydown = ev => {
     if (ev.key === 'Escape') {
@@ -45,7 +40,7 @@
   }
 </style>
 
-<Request>
+<Request dismiss={dismiss} completed={enable}>
   <span slot="header">
     Incoming Dapp Connection
   </span>
@@ -59,14 +54,22 @@
     Alleged user interface: <strikethrough class="blue">{dappOrigin || origin}</strikethrough>
     {/if}
   </div>
-  <div on:keydown|capture={keydown}><TextField
-    hint="Alleged name: {JSON.stringify(suggestedPetname)}"
-    label="Dapp petname"
-    bind:value={petname}
-  /></div>
+  {#if !enable}
+    <div on:keydown|capture={keydown}><TextField
+      hint="Alleged name: {JSON.stringify(suggestedPetname)}"
+      label="Dapp petname"
+      bind:value={petname}
+    /></div>
+  {/if}
   <div class="enable">
-    <Chip on:click={enableDapp} icon="check" selected color="success">
-      Enable
-    </Chip>
+    {#if enable}
+      <Chip selected color="success">
+        Enabled
+      </Chip>
+    {:else}
+      <Chip on:click={enableDapp} icon="check" selected color="success">
+        Enable
+      </Chip>
+    {/if}
   </div>
 </Request>
diff --git a/packages/dapp-svelte-wallet/ui/src/PaymentV2.svelte b/packages/dapp-svelte-wallet/ui/src/PaymentV2.svelte
index 2328f5109cb..7d177fbb0df 100644
--- a/packages/dapp-svelte-wallet/ui/src/PaymentV2.svelte
+++ b/packages/dapp-svelte-wallet/ui/src/PaymentV2.svelte
@@ -11,6 +11,7 @@
   import Tooltip from 'smelte/src/components/Tooltip';
 
   export let item;
+  export let dismiss;
 
   let destination = null;
 
@@ -56,53 +57,53 @@
   }
 </style>
 
-<Request>
+<Request dismiss={dismiss} completed={item.status === 'deposited'}>
   <span slot="header">
-    {#if item.status === 'deposited'}
-      Deposited <Amount amount={item.displayPayment.depositedAmount}
-                  displayInfo={item.displayPayment.displayInfo} />
-    {:else if item.issuer}
-      Incoming Payment
-    {/if}
+    Incoming Payment
   </span>
   
-  <span class="amount">
-    {#if item.lastAmount}
-      <Amount amount={item.displayPayment.lastAmount}
-        displayInfo={item.displayPayment.displayInfo}  />
+  {#if item.status === 'deposited'}
+    Deposited <Amount amount={item.displayPayment.depositedAmount}
+                displayInfo={item.displayPayment.displayInfo} />
+  {:else}
+    <span class="amount">
+      {#if item.lastAmount}
+        <Amount amount={item.displayPayment.lastAmount}
+          displayInfo={item.displayPayment.displayInfo}  />
+      {:else}
+        <ProgressCircular size={24}></ProgressCircular>
+      {/if}
+    </span>
+
+    {#if $purses}
+      <span class="select-purse">
+        <Select bind:value={destination}
+          items={purseItems}
+          label="Deposit to" />
+      </span>
+      <span class="bottom">
+        <Debug title="Payment Detail" target={item} />
+        <div class="actions">
+          <span class="deposit-button">
+            <Chip selected icon="check" color="success" on:click={deposit}>
+              Deposit
+            </Chip>
+          </span>
+          <span class="refresh-button">
+            <Tooltip>
+              <span slot="activator">
+                <Button icon={"refresh"}
+                  on:click={() => E(item.actions).getAmountOf()}
+                  color="error"
+                  text flat />
+              </span>
+              Refresh
+            </Tooltip>
+          </span>
+        </div>
+      </span>
     {:else}
-      <ProgressCircular size={24}></ProgressCircular>
+      Unknown brand.  This payment cannot be verified.
     {/if}
-  </span>
-
-  {#if $purses}
-    <span class="select-purse">
-      <Select bind:value={destination}
-        items={purseItems}
-        label="Deposit to" />
-    </span>
-    <span class="bottom">
-      <Debug title="Payment Detail" target={item} />
-      <div class="actions">
-        <span class="deposit-button">
-          <Chip selected icon="check" color="success" on:click={deposit}>
-            Deposit
-          </Chip>
-        </span>
-        <span class="refresh-button">
-          <Tooltip>
-            <span slot="activator">
-              <Button icon={"refresh"}
-                on:click={() => E(item.actions).getAmountOf()}
-                color="error"
-                text flat />
-            </span>
-            Refresh
-          </Tooltip>
-        </span>
-      </div>
-    </span>
-  {:else}
-    Unknown brand.  This payment cannot be verified.
   {/if}
 </Request>
diff --git a/packages/dapp-svelte-wallet/ui/src/Request.svelte b/packages/dapp-svelte-wallet/ui/src/Request.svelte
index df139df0fa1..da2808fb02a 100644
--- a/packages/dapp-svelte-wallet/ui/src/Request.svelte
+++ b/packages/dapp-svelte-wallet/ui/src/Request.svelte
@@ -1,4 +1,8 @@
 <script>
+    import Button from 'smelte/src/components/Button';
+
+    export let dismiss;
+    export let completed;
 </script>
 
 <style>
@@ -12,9 +16,15 @@
     border: 1px solid #e0e0e0;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
     margin-bottom: 16px;
+    animation: expand 0.4s;
+    position: relative;
 }
 
-.summary {
+.request-summary {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
     border-radius: 16px 16px 0 0;
     width: 100%;
     font-size: 18px;
@@ -24,14 +34,61 @@
     padding: 8px 0;
     border-bottom: 1px solid #eeeeee;
 }
+
+.overlay {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    border-radius: 16px;
+    top: 0;
+    left: 0;
+    background-color:rgb(40, 34, 48, 0.1);
+    animation: fade-in 2.0s;
+}
+
+:global(.request-summary button) {
+    padding: 4px;
+    margin: 0;
+    z-index: 1;
+}
+
+:global(.request-summary i) {
+    font-size: 24px;
+}
+
+@keyframes expand {
+    0% { 
+        transform: scale(0.0);
+    }
+    100% {
+        transform: scale(1.0)
+    }
+}
+
+@keyframes fade-in {
+    0% { 
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
 </style>
   
 <div class="container">
-    <div class="summary">
+    <div class="request-summary">
         <slot name="header"></slot>
+        <Button
+            on:click={dismiss}
+            color="dark"
+            icon="close" text light flat />
     </div>
 
     <div class="body">
         <slot></slot>
     </div>
+
+    {#if completed}
+        <div class="overlay" />
+    {/if}
 </div>
\ No newline at end of file
diff --git a/packages/dapp-svelte-wallet/ui/src/Requests.svelte b/packages/dapp-svelte-wallet/ui/src/Requests.svelte
index 92337a450cf..0a88496be6b 100644
--- a/packages/dapp-svelte-wallet/ui/src/Requests.svelte
+++ b/packages/dapp-svelte-wallet/ui/src/Requests.svelte
@@ -4,7 +4,7 @@
     import DappV2 from './DappV2.svelte';
     import PaymentV2 from './PaymentV2.svelte';
 
-    import { inbox, dapps, payments, purses } from './store';
+    import { inbox, dapps, payments, purses, dismissedRequests, setDismissedRequests } from './store';
 
     export let classes = '';
 
@@ -13,9 +13,16 @@
             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);
+    const dismiss = (id) => {
+        localStorage.setItem(
+            'DismissedRequests',
+            JSON.stringify([...$dismissedRequests, id]));
+        setDismissedRequests([...$dismissedRequests, id]);
+    }
+
+    $: incomingPayments = ($payments || []).filter((i) => !hasAutoDeposit(i));
+    $: offers = ($inbox || []);
+    $: dappConnections = ($dapps || []);
 
     $: mappedPayments = incomingPayments.map((i) => {
         return {
@@ -39,7 +46,8 @@
         };
     });
 
-    $: items = [...mappedPayments, ...mappedOffers, ...mappedDapps];
+    $: items = [...mappedPayments, ...mappedOffers, ...mappedDapps]
+        .filter(({ id }) => !$dismissedRequests.includes(id));
 </script>
 
 <style>
@@ -74,11 +82,11 @@
     {#if items.length}
         {#each items as item (item.id)}
             {#if item.type === "transaction"}
-                <TransactionV2 item={item.data} />
+                <TransactionV2 dismiss={() => dismiss(item.id)} item={item.data} />
             {:else if item.type === "payment"}
-                <PaymentV2 item={item.data} />
+                <PaymentV2 dismiss={() => dismiss(item.id)} item={item.data} />
             {:else}
-                <DappV2 item={item.data} />
+                <DappV2 dismiss={() => dismiss(item.id)} item={item.data} />
             {/if}
         {/each}
     {:else}
diff --git a/packages/dapp-svelte-wallet/ui/src/TransactionV2.svelte b/packages/dapp-svelte-wallet/ui/src/TransactionV2.svelte
index fb9a48084c7..29d98e78019 100644
--- a/packages/dapp-svelte-wallet/ui/src/TransactionV2.svelte
+++ b/packages/dapp-svelte-wallet/ui/src/TransactionV2.svelte
@@ -10,6 +10,7 @@
   import Chip from "../lib/Chip.svelte";
 
   export let item;
+  export let dismiss;
 
   function formatDateNow(stamp) {
     if (!stamp) {
@@ -43,6 +44,7 @@
     decline: "Declined",
     rejected: "Rejected",
     accept: "Accepted",
+    complete: "Accepted",
     pending: "Pending",
     proposed: "Proposed",
   };
@@ -53,6 +55,7 @@
     decline: "error",
     pending: "alert",
     proposed: "grey",
+    complete: "success",
   };
 
   $: ({
@@ -106,7 +109,8 @@
   }
 </style>
 
-<Request>
+<Request dismiss={dismiss}
+  completed={status === 'accept' || status === 'decline' || status === 'complete'}>
   <span slot="header">
     Incoming Offer
   </span>
@@ -137,8 +141,8 @@
         <div class="token">
           <img alt="icon"
             src={icons[amount.brand.petname] ?? defaultIcon}
-            height="28px"
-            width="28px" />
+            height="32px"
+            width="32px" />
             <div>
               <Amount {amount} displayInfo={amount.displayInfo} /> from
               <Petname name={pursePetname} />
@@ -152,8 +156,8 @@
         <div class="token">
           <img alt="icon"
             src={icons[amount.brand.petname] ?? defaultIcon}
-            height="28px"
-            width="28px" />
+            height="32px"
+            width="32px" />
             <div>
               <Amount {amount} displayInfo={amount.displayInfo} /> into
               <Petname name={pursePetname} />
@@ -168,8 +172,8 @@
           {#if feePursePetname}
             <img alt="icon"
               src={icons[fee.brand.petname] ?? defaultIcon}
-              height="28px"
-              width="28px" />
+              height="32px"
+              width="32px" />
           {/if}
           <div>
             <Amount amount={fee} displayInfo={fee.displayInfo} />
diff --git a/packages/dapp-svelte-wallet/ui/src/store.js b/packages/dapp-svelte-wallet/ui/src/store.js
index 6d540390104..e41b6deba9d 100644
--- a/packages/dapp-svelte-wallet/ui/src/store.js
+++ b/packages/dapp-svelte-wallet/ui/src/store.js
@@ -111,6 +111,9 @@ const [payments, setPayments] = makeReadable([]);
 const [contacts, setContacts] = makeReadable([]);
 const [selfContact, setSelfContact] = makeReadable(undefined);
 const [issuers, setIssuers] = makeReadable([]);
+const [dismissedRequests, setDismissedRequests] = makeReadable(
+  JSON.parse(localStorage.getItem('DismissedRequests') || '[]'),
+);
 
 export {
   ready,
@@ -121,6 +124,8 @@ export {
   issuers,
   contacts,
   selfContact,
+  dismissedRequests,
+  setDismissedRequests,
 };
 
 function cmp(a, b) {