feat(wallet): Add dismiss option for dapp connections

Agoric · Sep 16, 2021 · 83340e2 · 83340e2
1 parent b03c7a5
commit 83340e2
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 12 deletions.
diff --git a/packages/dapp-svelte-wallet/ui/src/DappV2.svelte b/packages/dapp-svelte-wallet/ui/src/DappV2.svelte
@@ -3,22 +3,27 @@
   import TextField from 'smelte/src/components/TextField';
   import Chip from '../lib/Chip.svelte';
   import Request from './Request.svelte';
+
+  import { dismissedDapps, setDismissedDapps } from './store.js';
   
   export let item;
 
   $: ({ 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 dismiss = () => {
+    localStorage.setItem(
+        'DismissedDapps',
+        JSON.stringify([...$dismissedDapps, dappOrigin || origin]),
+      );
+    setDismissedDapps([...$dismissedDapps, dappOrigin || origin]);
+  }
 
-  const enableDapp = () => E(E(actions).setPetname(petname)).enable();
+  const enableDapp = () => {
+    E(E(actions).setPetname(petname)).enable();
+    dismiss();
+  }
 
   const keydown = ev => {
     if (ev.key === 'Escape') {
@@ -65,6 +70,9 @@
     bind:value={petname}
   /></div>
   <div class="enable">
+    <Chip on:click={dismiss} icon="cancel" selected color="error">
+      Dismiss
+    </Chip>
     <Chip on:click={enableDapp} icon="check" selected color="success">
       Enable
     </Chip>

diff --git 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, dismissedDapps } from './store';
 
     export let classes = '';
 
@@ -13,9 +13,12 @@
             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);
+    $: incomingPayments = ($payments || []).filter((i) => 
+        i.status !== 'deposited' && !hasAutoDeposit(i));
+    $: offers = ($inbox || []).filter(({ status }) => 
+        status === undefined || status === 'pending');
+    $: dappConnections = ($dapps || []).filter(({ enable, dappOrigin, origin }) => 
+        !enable && !$dismissedDapps.includes(dappOrigin || origin))
 
     $: mappedPayments = incomingPayments.map((i) => {
         return {

diff --git 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 [dismissedDapps, setDismissedDapps] = makeReadable(
+  JSON.parse(localStorage.getItem('DismissedDapps') || '[]'),
+);
 
 export {
   ready,
@@ -121,6 +124,8 @@ export {
   issuers,
   contacts,
   selfContact,
+  dismissedDapps,
+  setDismissedDapps,
 };
 
 function cmp(a, b) {