wallet-ext: disconnect dapp popup

wallet/font-icons/output/sui-icons.scss

@@ -27,23 +27,24 @@
 .sui-icons-arrow-left:before { content: "\ea0a"; }
 .sui-icons-arrow-right:before { content: "\ea0b"; }
 .sui-icons-checkmark:before { content: "\ea0c"; }
-.sui-icons-clipboard:before { content: "\ea0d"; }
-.sui-icons-close:before { content: "\ea0e"; }
-.sui-icons-coins:before { content: "\ea0f"; }
-.sui-icons-globe:before { content: "\ea10"; }
-.sui-icons-hand-coins:before { content: "\ea11"; }
-.sui-icons-history:before { content: "\ea12"; }
-.sui-icons-logout:before { content: "\ea13"; }
-.sui-icons-nfts:before { content: "\ea14"; }
-.sui-icons-percentage-polygon:before { content: "\ea15"; }
-.sui-icons-person:before { content: "\ea16"; }
-.sui-icons-search:before { content: "\ea17"; }
-.sui-icons-sui-chevron-right:before { content: "\ea18"; }
-.sui-icons-sui-logo-icon:before { content: "\ea19"; }
-.sui-icons-sui-logo-txt:before { content: "\ea1a"; }
-.sui-icons-swap:before { content: "\ea1b"; }
-.sui-icons-tokens:before { content: "\ea1c"; }
-.sui-icons-version-icon:before { content: "\ea1d"; }
+.sui-icons-chevron-down:before { content: "\ea0d"; }
+.sui-icons-clipboard:before { content: "\ea0e"; }
+.sui-icons-close:before { content: "\ea0f"; }
+.sui-icons-coins:before { content: "\ea10"; }
+.sui-icons-globe:before { content: "\ea11"; }
+.sui-icons-hand-coins:before { content: "\ea12"; }
+.sui-icons-history:before { content: "\ea13"; }
+.sui-icons-logout:before { content: "\ea14"; }
+.sui-icons-nfts:before { content: "\ea15"; }
+.sui-icons-percentage-polygon:before { content: "\ea16"; }
+.sui-icons-person:before { content: "\ea17"; }
+.sui-icons-search:before { content: "\ea18"; }
+.sui-icons-sui-chevron-right:before { content: "\ea19"; }
+.sui-icons-sui-logo-icon:before { content: "\ea1a"; }
+.sui-icons-sui-logo-txt:before { content: "\ea1b"; }
+.sui-icons-swap:before { content: "\ea1c"; }
+.sui-icons-tokens:before { content: "\ea1d"; }
+.sui-icons-version-icon:before { content: "\ea1e"; }
 
 $sui-icons-Buy: "\ea01";
 $sui-icons-Download: "\ea02";
@@ -57,21 +58,22 @@ $sui-icons-apps: "\ea09";
 $sui-icons-arrow-left: "\ea0a";
 $sui-icons-arrow-right: "\ea0b";
 $sui-icons-checkmark: "\ea0c";
-$sui-icons-clipboard: "\ea0d";
-$sui-icons-close: "\ea0e";
-$sui-icons-coins: "\ea0f";
-$sui-icons-globe: "\ea10";
-$sui-icons-hand-coins: "\ea11";
-$sui-icons-history: "\ea12";
-$sui-icons-logout: "\ea13";
-$sui-icons-nfts: "\ea14";
-$sui-icons-percentage-polygon: "\ea15";
-$sui-icons-person: "\ea16";
-$sui-icons-search: "\ea17";
-$sui-icons-sui-chevron-right: "\ea18";
-$sui-icons-sui-logo-icon: "\ea19";
-$sui-icons-sui-logo-txt: "\ea1a";
-$sui-icons-swap: "\ea1b";
-$sui-icons-tokens: "\ea1c";
-$sui-icons-version-icon: "\ea1d";
+$sui-icons-chevron-down: "\ea0d";
+$sui-icons-clipboard: "\ea0e";
+$sui-icons-close: "\ea0f";
+$sui-icons-coins: "\ea10";
+$sui-icons-globe: "\ea11";
+$sui-icons-hand-coins: "\ea12";
+$sui-icons-history: "\ea13";
+$sui-icons-logout: "\ea14";
+$sui-icons-nfts: "\ea15";
+$sui-icons-percentage-polygon: "\ea16";
+$sui-icons-person: "\ea17";
+$sui-icons-search: "\ea18";
+$sui-icons-sui-chevron-right: "\ea19";
+$sui-icons-sui-logo-icon: "\ea1a";
+$sui-icons-sui-logo-txt: "\ea1b";
+$sui-icons-swap: "\ea1c";
+$sui-icons-tokens: "\ea1d";
+$sui-icons-version-icon: "\ea1e";
 

wallet/font-icons/output/sui-icons.ts

@@ -14,6 +14,7 @@ export enum SuiIcons {
   ArrowLeft = "sui-icons-arrow-left",
   ArrowRight = "sui-icons-arrow-right",
   Checkmark = "sui-icons-checkmark",
+  ChevronDown = "sui-icons-chevron-down",
   Clipboard = "sui-icons-clipboard",
   Close = "sui-icons-close",
   Coins = "sui-icons-coins",
@@ -33,6 +34,6 @@ export enum SuiIcons {
   VersionIcon = "sui-icons-version-icon"
 }
 
-export type SuiIconsClassname = "sui-icons-Buy" | "sui-icons-Download" | "sui-icons-Info" | "sui-icons-Plus" | "sui-icons-Preview" | "sui-icons-ThumbsUp" | "sui-icons-Union" | "sui-icons-activity" | "sui-icons-apps" | "sui-icons-arrow-left" | "sui-icons-arrow-right" | "sui-icons-checkmark" | "sui-icons-clipboard" | "sui-icons-close" | "sui-icons-coins" | "sui-icons-globe" | "sui-icons-hand-coins" | "sui-icons-history" | "sui-icons-logout" | "sui-icons-nfts" | "sui-icons-percentage-polygon" | "sui-icons-person" | "sui-icons-search" | "sui-icons-sui-chevron-right" | "sui-icons-sui-logo-icon" | "sui-icons-sui-logo-txt" | "sui-icons-swap" | "sui-icons-tokens" | "sui-icons-version-icon"
-export type SuiIconsIcon = "Buy" | "Download" | "Info" | "Plus" | "Preview" | "ThumbsUp" | "Union" | "activity" | "apps" | "arrow-left" | "arrow-right" | "checkmark" | "clipboard" | "close" | "coins" | "globe" | "hand-coins" | "history" | "logout" | "nfts" | "percentage-polygon" | "person" | "search" | "sui-chevron-right" | "sui-logo-icon" | "sui-logo-txt" | "swap" | "tokens" | "version-icon"
-export const SuiIconsPrefix = "sui-icons-"
+export type SuiIconsClassname = "sui-icons-Buy" | "sui-icons-Download" | "sui-icons-Info" | "sui-icons-Plus" | "sui-icons-Preview" | "sui-icons-ThumbsUp" | "sui-icons-Union" | "sui-icons-activity" | "sui-icons-apps" | "sui-icons-arrow-left" | "sui-icons-arrow-right" | "sui-icons-checkmark" | "sui-icons-chevron-down" | "sui-icons-clipboard" | "sui-icons-close" | "sui-icons-coins" | "sui-icons-globe" | "sui-icons-hand-coins" | "sui-icons-history" | "sui-icons-logout" | "sui-icons-nfts" | "sui-icons-percentage-polygon" | "sui-icons-person" | "sui-icons-search" | "sui-icons-sui-chevron-right" | "sui-icons-sui-logo-icon" | "sui-icons-sui-logo-txt" | "sui-icons-swap" | "sui-icons-tokens" | "sui-icons-version-icon"
+export type SuiIconsIcon = "Buy" | "Download" | "Info" | "Plus" | "Preview" | "ThumbsUp" | "Union" | "activity" | "apps" | "arrow-left" | "arrow-right" | "checkmark" | "chevron-down" | "clipboard" | "close" | "coins" | "globe" | "hand-coins" | "history" | "logout" | "nfts" | "percentage-polygon" | "person" | "search" | "sui-chevron-right" | "sui-logo-icon" | "sui-logo-txt" | "swap" | "tokens" | "version-icon"
+export const SuiIconsPrefix = "sui-icons-"

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;
@@ -14,6 +18,7 @@
     cursor: default;
     overflow: hidden;
     flex: 0 1 auto;
+    transition: all 150ms ease-in-out;
 
     @include utils.typography('Primary/BodySmall-M');
 
@@ -29,7 +34,7 @@
         }
 
         &:active,
-        &.acive {
+        &.active {
             color: colors.$sui-blue;
             border: none;
         }
@@ -50,3 +55,81 @@
 
     @include utils.overflow-ellipsis;
 }
+
+.chevron {
+    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();
+    }
+);