wallet-ext: disconnect dapp popup

wallet/package.json

@@ -77,6 +77,7 @@
     },
     "dependencies": {
         "@mysten/sui.js": "workspace:*",
+        "@popperjs/core": "^2.11.6",
         "@reduxjs/toolkit": "^1.8.3",
         "@scure/bip32": "^1.1.0",
         "bip39-light": "^1.0.7",
@@ -89,6 +90,7 @@
         "react-dom": "^18.2.0",
         "react-intl": "^6.0.5",
         "react-number-format": "^4.9.3",
+        "react-popper": "^2.3.0",
         "react-redux": "^8.0.2",
         "react-router-dom": "^6.3.0",
         "react-textarea-autosize": "^8.3.4",

wallet/src/background/Permissions.ts

@@ -224,6 +224,16 @@ class Permissions {
         );
     }
 
+    public async delete(origin: string) {
+        const allPermissions = await this.getPermissions();
+        if (origin in allPermissions) {
+            delete allPermissions[origin];
+            await Browser.storage.local.set({
+                [PERMISSIONS_STORAGE_KEY]: allPermissions,
+            });
+        }
+    }
+
     private async createPermissionRequest(
         origin: string,
         permissionTypes: readonly PermissionType[],

wallet/src/background/connections/UiConnection.ts

@@ -14,6 +14,7 @@ import { isTransactionRequestResponse } from '_payloads/transactions/ui/Transact
 import Permissions from '_src/background/Permissions';
 import Tabs from '_src/background/Tabs';
 import Transactions from '_src/background/Transactions';
+import { isDisconnectApp } from '_src/shared/messaging/messages/payloads/permissions/DisconnectApp';
 
 import type { Message } from '_messages';
 import type { PortChannelName } from '_messaging/PortChannelName';
@@ -68,6 +69,9 @@ export class UiConnection extends Connection {
                 Object.values(await Transactions.getTransactionRequests()),
                 id
             );
+        } else if (isDisconnectApp(payload)) {
+            await Permissions.delete(payload.origin);
+            this.send(createMessage({ type: 'done' }, id));
         }
     }
 

wallet/src/shared/messaging/messages/payloads/BasePayload.ts

@@ -18,7 +18,9 @@ export type PayloadType =
     | 'get-transaction-requests'
     | 'get-transaction-requests-response'
     | 'transaction-request-response'
-    | 'update-active-origin';
+    | 'update-active-origin'
+    | 'disconnect-app'
+    | 'done';
 
 export interface BasePayload {
     type: PayloadType;

wallet/src/shared/messaging/messages/payloads/permissions/DisconnectApp.ts

@@ -0,0 +1,15 @@
+// Copyright (c) 2022, Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { isBasePayload } from '_payloads';
+
+import type { BasePayload, Payload } from '_payloads';
+
+export interface DisconnectApp extends BasePayload {
+    type: 'disconnect-app';
+    origin: string;
+}
+
+export function isDisconnectApp(payload: Payload): payload is DisconnectApp {
+    return isBasePayload(payload) && payload.type === 'disconnect-app';
+}

wallet/src/ui/app/background-client/index.ts

@@ -18,6 +18,7 @@ import type {
     GetPermissionRequests,
     PermissionResponse,
 } from '_payloads/permissions';
+import type { DisconnectApp } from '_payloads/permissions/DisconnectApp';
 import type { GetTransactionRequests } from '_payloads/transactions/ui/GetTransactionRequests';
 import type { TransactionRequestResponse } from '_payloads/transactions/ui/TransactionRequestResponse';
 import type { AppDispatch } from '_store';
@@ -94,6 +95,14 @@ export class BackgroundClient {
         );
     }
 
+    public async disconnectApp(origin: string) {
+        await lastValueFrom(
+            this.sendMessage(
+                createMessage<DisconnectApp>({ type: 'disconnect-app', origin })
+            ).pipe(take(1))
+        );
+    }
+
     private handleIncomingMessage(msg: Message) {
         if (!this._initialized || !this._dispatch) {
             throw new Error(

wallet/src/ui/app/hooks/useOnClickOutside.ts

@@ -14,19 +14,19 @@ const useOnClickOutside = <T extends HTMLElement = HTMLElement>(
     useEffect(() => {
         const listener = (event: Event) => {
             const el = ref?.current;
-            if (!el || el.contains((event?.target as Node) || null)) {
+            if (!el || el.contains(event?.target as Node)) {
                 return;
             }
 
             handler(event); // Call the handler only if the click is outside of the element passed.
         };
 
-        document.addEventListener('mousedown', listener);
-        document.addEventListener('touchstart', listener);
+        document.addEventListener('click', listener, true);
+        document.addEventListener('touchstart', listener, true);
 
         return () => {
-            document.removeEventListener('mousedown', listener);
-            document.removeEventListener('touchstart', listener);
+            document.removeEventListener('click', listener, true);
+            document.removeEventListener('touchstart', listener, true);
         };
     }, [ref, handler]); // Reload only if ref or handler changes
 };

wallet/src/ui/app/shared/dapp-status/DappStatus.module.scss

@@ -1,6 +1,10 @@
 @use '_values/colors';
 @use '_utils';
 
+.wrapper {
+    display: contents;
+}
+
 .container {
     display: flex;
     flex-flow: row;
@@ -30,7 +34,7 @@
         }
 
         &:active,
-        &.acive {
+        &.active {
             color: colors.$sui-blue;
             border: none;
         }
@@ -56,3 +60,76 @@
     margin-left: 6px;
     font-size: 11px;
 }
+
+.popup {
+    position: absolute;
+    background: colors.$gray-100;
+    border-radius: 6px;
+    padding: 10px 12px;
+    z-index: 999;
+    max-width: 55%;
+}
+
+.popup-content {
+    display: flex;
+    flex-flow: column nowrap;
+    align-items: center;
+}
+
+.popup-arrow {
+    position: absolute;
+    z-index: -1;
+    top: -5px;
+
+    &::before {
+        content: '';
+        background: colors.$gray-100;
+        transform: rotate(45deg);
+        height: 12px;
+        width: 12px;
+        display: block;
+    }
+}
+
+.origin-container {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+}
+
+.favicon {
+    width: 22px;
+    height: 22px;
+    border-radius: 6px;
+    background-color: colors.$gray-85;
+    margin-right: 8px;
+    padding: 2px;
+}
+
+.origin-text {
+    @include utils.overflow-ellipsis;
+    @include utils.typography('Primary/SubtitleSmall-M');
+
+    color: colors.$success;
+}
+
+.origin-url {
+    @include utils.typography('Primary/BodySmall-SB');
+}
+
+.divider {
+    height: 1px;
+    background-color: colors.$gray-90;
+    margin: 8px 0;
+    align-self: stretch;
+}
+
+.disconnect {
+    background: none;
+    outline: none;
+    border: none;
+    color: colors.$issue;
+    cursor: pointer;
+
+    @include utils.typography('Primary/BodySmall-M');
+}

wallet/src/ui/app/shared/dapp-status/actions/index.ts

@@ -0,0 +1,18 @@
+// Copyright (c) 2022, Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { createAsyncThunk } from '@reduxjs/toolkit';
+
+import type { AppThunkConfig } from '_redux/store/thunk-extras';
+
+export const appDisconnect = createAsyncThunk<
+    void,
+    { origin: string },
+    AppThunkConfig
+>(
+    'dapp-status-app-disconnect',
+    async ({ origin }, { extra: { background } }) => {
+        await background.disconnectApp(origin);
+        await background.sendGetPermissionRequests();
+    }
+);