enhancement: improve connected disconnected state (#1323)

* remove/disconnect dapp * handle session deletion * display different conenction states * remove and disconnect * reset router on confirm --------- Co-authored-by: Nicole O'Brien <[email protected]>
bloomwalletio · Nov 15, 2023 · 1407d42 · 1407d42
1 parent f9ad9f1
commit 1407d42
Show file tree

Hide file tree

Showing 13 changed files with 165 additions and 39 deletions.
diff --git a/packages/desktop/components/menus/DappActionsMenu.svelte b/packages/desktop/components/menus/DappActionsMenu.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-    import { IconName, Menu } from '@bloomwalletio/ui'
+    import { IconName, Menu, IMenuItem } from '@bloomwalletio/ui'
     import { localize } from '@core/i18n'
     import { Router } from '@core/router'
     import { PopupId, closePopup, openPopup } from '@desktop/auxiliary/popup'
-    import { disconnectDapp } from '@auxiliary/wallet-connect/actions/disconnectDapp'
     import { showNotification } from '@auxiliary/notification'
     import { IConnectedDapp } from '@auxiliary/wallet-connect/interface'
+    import { disconnectDapp, removeDapp } from '@auxiliary/wallet-connect/actions'
     import { handleError } from '@core/error/handlers'
 
     export let drawerRouter: Router<unknown>
@@ -14,19 +14,65 @@
     const localeKey = 'views.dashboard.drawers.dapps.details'
 
     let menu: Menu | undefined = undefined
+
+    $: menuItems = [
+        ...(hasActiveSession
+            ? [
+                  {
+                      icon: IconName.Trash,
+                      title: localize(`${localeKey}.actions.disconnect`),
+                      variant: 'danger',
+                      onClick: onDisconnectClick,
+                  } as IMenuItem,
+              ]
+            : []),
+        {
+            icon: IconName.Trash,
+            title: localize(`${localeKey}.actions.remove`),
+            variant: 'danger',
+            onClick: onRemoveClick,
+        } as IMenuItem,
+    ]
+
     $: dappName = dapp.metadata?.name ?? localize(`${localeKey}.fallbackName`)
+    $: hasActiveSession = !!dapp.session
+
+    function onRemoveClick(): void {
+        openPopup({
+            id: PopupId.Confirmation,
+            props: {
+                title: localize(`${localeKey}.remove.title`),
+                description: localize(`${localeKey}.remove.description`, { dappName }),
+                variant: 'danger',
+                confirmText: localize(`${localeKey}.actions.remove`),
+                onConfirm: async () => {
+                    try {
+                        await removeDapp(dapp)
+                        showNotification({
+                            variant: 'success',
+                            text: localize('notifications.removeDapp.success', { dappName }),
+                        })
+                        closePopup()
+                        drawerRouter.previous()
+                    } catch (error) {
+                        handleError(error)
+                    }
+                },
+            },
+        })
+    }
 
     function onDisconnectClick(): void {
         openPopup({
             id: PopupId.Confirmation,
             props: {
-                title: localize(`${localeKey}.disconnectTitle`),
-                description: localize(`${localeKey}.disconnectDescription`, { dappName }),
+                title: localize(`${localeKey}.disconnect.title`),
+                description: localize(`${localeKey}.disconnect.description`, { dappName }),
                 variant: 'danger',
                 confirmText: localize(`${localeKey}.actions.disconnect`),
                 onConfirm: async () => {
                     try {
-                        await disconnectDapp(dapp.topic)
+                        await disconnectDapp(dapp)
                         showNotification({
                             variant: 'success',
                             text: localize('notifications.disconnectDapp.success', { dappName }),
@@ -42,14 +88,4 @@
     }
 </script>
 
-<Menu
-    bind:this={menu}
-    items={[
-        {
-            icon: IconName.Trash,
-            title: localize(`${localeKey}.actions.disconnect`),
-            variant: 'danger',
-            onClick: onDisconnectClick,
-        },
-    ]}
-/>
+<Menu bind:this={menu} items={menuItems} />
diff --git a/packages/desktop/views/dashboard/drawers/dapp-config/components/DappCard.svelte b/packages/desktop/views/dashboard/drawers/dapp-config/components/DappCard.svelte
@@ -20,7 +20,7 @@
             </Text>
         </div>
 
-        <DappStatusPill active={connectedDapp.active} />
+        <DappStatusPill active={!!connectedDapp.session} />
     </div>
 </ClickableTile>
 

diff --git a/packages/desktop/views/dashboard/drawers/dapp-config/views/ConfirmConnectionDrawer.svelte b/packages/desktop/views/dashboard/drawers/dapp-config/views/ConfirmConnectionDrawer.svelte
@@ -48,7 +48,7 @@
                 variant: 'success',
                 text: localize('notifications.newDappConnection.success'),
             })
-            closeDrawer()
+            drawerRouter.reset()
         } catch (error) {
             handleError(error)
         } finally {

diff --git a/packages/shared/src/lib/auxiliary/wallet-connect/actions/disconnectDapp.ts b/packages/shared/src/lib/auxiliary/wallet-connect/actions/disconnectDapp.ts
@@ -1,24 +1,21 @@
 import { logAndNotifyError } from '@core/error/actions'
 import { getWalletClient, setConnectedDapps } from '../stores'
 import { getSdkError } from '@walletconnect/utils'
+import { IConnectedDapp } from '../interface'
 
-export async function disconnectDapp(topic: string): Promise<void> {
+export async function disconnectDapp(dapp: IConnectedDapp): Promise<void> {
     const client = getWalletClient()
     if (!client) {
         return
     }
 
     try {
-        const sessionIdForPairing = Object.values(client.getActiveSessions()).find(
-            (session) => session.pairingTopic === topic
-        )?.topic
-        if (sessionIdForPairing) {
+        if (dapp.session) {
             await client.disconnectSession({
-                topic: sessionIdForPairing,
+                topic: dapp.session.topic,
                 reason: getSdkError('USER_DISCONNECTED'),
             })
         }
-        await client.core.pairing.disconnect({ topic })
         setConnectedDapps()
     } catch (err) {
         logAndNotifyError({

diff --git a/packages/shared/src/lib/auxiliary/wallet-connect/actions/index.ts b/packages/shared/src/lib/auxiliary/wallet-connect/actions/index.ts
@@ -1,2 +1,4 @@
+export * from './disconnectDapp'
 export * from './initializeWalletConnect'
 export * from './pairWithNewDapp'
+export * from './removeDapp'
diff --git a/packages/shared/src/lib/auxiliary/wallet-connect/actions/initializeWalletConnect.ts b/packages/shared/src/lib/auxiliary/wallet-connect/actions/initializeWalletConnect.ts
@@ -1,6 +1,6 @@
 import features from '@features/features'
 import { WALLET_METADATA } from '../constants'
-import { onSessionProposal, onSessionRequest } from '../handlers'
+import { onSessionDelete, onSessionProposal, onSessionRequest } from '../handlers'
 import { walletClient } from '../stores'
 import { Web3Wallet } from '@walletconnect/web3wallet'
 import { Core } from '@walletconnect/core'
@@ -27,6 +27,7 @@ export async function initializeWalletConnect(): Promise<void> {
 
         client.on('session_proposal', (sessionProposal) => void onSessionProposal(sessionProposal))
         client.on('session_request', (event) => onSessionRequest(event))
+        client.on('session_delete', (event) => onSessionDelete(event))
     } else {
         try {
             await updateActiveSessionsToActiveProfile()

diff --git a/packages/shared/src/lib/auxiliary/wallet-connect/actions/removeDapp.ts b/packages/shared/src/lib/auxiliary/wallet-connect/actions/removeDapp.ts
@@ -0,0 +1,30 @@
+import { logAndNotifyError } from '@core/error/actions'
+import { getWalletClient, setConnectedDapps } from '../stores'
+import { getSdkError } from '@walletconnect/utils'
+import { IConnectedDapp } from '../interface'
+
+export async function removeDapp(dapp: IConnectedDapp): Promise<void> {
+    const client = getWalletClient()
+    if (!client) {
+        return
+    }
+
+    try {
+        if (dapp.session) {
+            await client.disconnectSession({
+                topic: dapp.session.topic,
+                reason: getSdkError('USER_DISCONNECTED'),
+            })
+        }
+        await client.core.pairing.disconnect({ topic: dapp.topic })
+        setConnectedDapps()
+    } catch (err) {
+        logAndNotifyError({
+            type: 'walletConnect',
+            message: String(err),
+            logToConsole: true,
+            saveToErrorLog: true,
+            showNotification: false,
+        })
+    }
+}
diff --git a/packages/shared/src/lib/auxiliary/wallet-connect/handlers/index.ts b/packages/shared/src/lib/auxiliary/wallet-connect/handlers/index.ts
@@ -1,6 +1,7 @@
 export * from './eth_sendTransaction.handler'
 export * from './eth_signTransaction.handler'
 export * from './eth_signTypedData.handler'
+export * from './onSessionDelete.handler'
 export * from './onSessionProposal.handler'
 export * from './onSessionRequest.handler'
 export * from './sign_message.handler'
diff --git a/packages/shared/src/lib/auxiliary/wallet-connect/handlers/onSessionDelete.handler.ts b/packages/shared/src/lib/auxiliary/wallet-connect/handlers/onSessionDelete.handler.ts
@@ -0,0 +1,15 @@
+import { showNotification } from '@auxiliary/notification'
+import { Web3WalletTypes } from '@walletconnect/web3wallet'
+import { getConnectedDapps, setConnectedDapps } from '../stores'
+
+export function onSessionDelete(event: Web3WalletTypes.SessionDelete): void {
+    const { topic } = event
+
+    const dapp = getConnectedDapps().find((_dapp) => _dapp.session?.topic === topic)
+
+    showNotification({
+        variant: 'warning',
+        text: 'Disconnected from ' + dapp?.metadata?.name,
+    })
+    setConnectedDapps()
+}
diff --git a/packages/shared/src/lib/auxiliary/wallet-connect/interface/connected-dapp.interface.ts b/packages/shared/src/lib/auxiliary/wallet-connect/interface/connected-dapp.interface.ts
@@ -1,6 +1,8 @@
 import { IDappMetadata } from './dapp-metadata.interface'
 import { IPairing } from './pairing.interface'
+import { ISession } from './session.interface'
 
 export interface IConnectedDapp extends Omit<IPairing, 'peerMetadata'> {
     metadata?: IDappMetadata
+    session?: ISession
 }
diff --git a/packages/shared/src/lib/auxiliary/wallet-connect/interface/session.interface.ts b/packages/shared/src/lib/auxiliary/wallet-connect/interface/session.interface.ts
@@ -0,0 +1,30 @@
+import type { ProposalTypes, RelayerTypes, SignClientTypes } from '@walletconnect/types'
+
+export interface ISession {
+    topic: string
+    pairingTopic: string
+    relay: RelayerTypes.ProtocolOptions
+    expiry: number
+    acknowledged: boolean
+    controller: string
+    namespaces: Record<
+        string,
+        {
+            chains?: string[]
+            accounts: string[]
+            methods: string[]
+            events: string[]
+        }
+    >
+    requiredNamespaces: ProposalTypes.RequiredNamespaces
+    optionalNamespaces: ProposalTypes.OptionalNamespaces
+    sessionProperties?: ProposalTypes.SessionProperties
+    self: {
+        publicKey: string
+        metadata: SignClientTypes.Metadata
+    }
+    peer: {
+        publicKey: string
+        metadata: SignClientTypes.Metadata
+    }
+}
diff --git a/packages/shared/src/lib/auxiliary/wallet-connect/stores/connected-dapps.store.ts b/packages/shared/src/lib/auxiliary/wallet-connect/stores/connected-dapps.store.ts
@@ -5,15 +5,17 @@ import { IConnectedDapp } from '../interface/connected-dapp.interface'
 export const connectedDapps: Writable<IConnectedDapp[]> = writable([])
 
 export function setConnectedDapps(): void {
-    const pairings = getWalletClient()?.core.pairing.getPairings()
-    const dapps: IConnectedDapp[] =
-        pairings?.map((pairing) => ({
-            topic: pairing.topic,
-            expiry: pairing.expiry,
-            relay: pairing.relay,
-            active: pairing.active,
-            metadata: pairing.peerMetadata,
-        })) ?? []
+    const pairings = getWalletClient()?.core.pairing.getPairings() ?? []
+    const sessions = getWalletClient()?.getActiveSessions() ?? {}
+
+    const dapps: IConnectedDapp[] = pairings.map((pairing) => ({
+        topic: pairing.topic,
+        expiry: pairing.expiry,
+        relay: pairing.relay,
+        active: pairing.active,
+        metadata: pairing.peerMetadata,
+        session: Object.values(sessions).find((session) => session.pairingTopic === pairing.topic),
+    }))
     connectedDapps.set(dapps)
 }
 

diff --git a/packages/shared/src/locales/en.json b/packages/shared/src/locales/en.json
@@ -479,10 +479,17 @@
                         "description": "Description",
                         "url": "URL",
                         "verifyUrl": "Verify URL",
-                        "disconnectTitle": "Disconnect",
-                        "disconnectDescription": "Do you want to disconnect from {dappName}",
+                        "disconnect": {
+                            "title": "Disconnect",
+                            "description": "Do you want to disconnect from {dappName}?"
+                        },
+                        "remove": {
+                            "title": "Remove",
+                            "description": "Do you want to disconnect from {dappName} and remove it from here?"
+                        },
                         "actions": {
-                            "disconnect": "Disconnect"
+                            "disconnect": "Disconnect",
+                            "remove": "Remove"
                         }
                     }
                 }
@@ -1542,7 +1549,10 @@
             }
         },
         "disconnectDapp": {
-            "success": "Disconnected from dApp"
+            "success": "Disconnected from {dappName}"
+        },
+        "removeDapp": {
+            "success": "{dappName} removed"
         },
         "claimed": {
             "success": "Transaction claimed",
-Original file line number
+Diff line change
@@ Expand Up / @@ -20,7 +20,7 @@ @@
                 </Text>
             </div>
-            <DappStatusPill active={connectedDapp.active} />
+            <DappStatusPill active={!!connectedDapp.session} />
         </div>
     </ClickableTile>
@@ Expand Down @@