feat: support one click dapp connection and sign in

packages/desktop/components/menus/DappActionsMenu.svelte

@@ -35,7 +35,7 @@
     ]
 
     $: dappName = dapp.metadata?.name ?? localize('general.unknown')
-    $: hasActiveSession = !!dapp.session
+    $: hasActiveSession = !!dapp.sessionTopic
 
     function onRemoveClick(): void {
         openPopup({

packages/desktop/views/dashboard/drawers/dapp-config/components/DappCard.svelte

@@ -12,7 +12,7 @@
     export let onClick: (() => unknown) | undefined = undefined
 
     $: networkIds = Object.values(
-        dapp.session?.namespaces ?? getPersistedDappNamespacesForDapp(dapp.metadata?.url ?? '')?.supported ?? {}
+        dapp.namespaces ?? getPersistedDappNamespacesForDapp(dapp.metadata?.url ?? '')?.supported ?? {}
     ).flatMap((namespace) => namespace.chains as NetworkId[])
 
     $: verifiedState = $activeProfileId

packages/desktop/views/dashboard/drawers/dapp-config/components/EditSelectionDrawer.svelte

@@ -8,35 +8,115 @@
         selectedDapp,
         sessionInitiationRequest,
         getPersistedDapp,
+        SessionInitiationRequest,
     } from '@auxiliary/wallet-connect/stores'
     import { onMount } from 'svelte'
     import { buildSupportedNamespacesFromSelections } from '@auxiliary/wallet-connect/actions'
-    import { updateSession } from '@auxiliary/wallet-connect/utils'
-    import { IDappMetadata, ISelections } from '@auxiliary/wallet-connect/interface'
+    import { getNetworksAndMethodsFromNamespaces, updateSession } from '@auxiliary/wallet-connect/utils'
+    import { IConnectedDapp, IDappMetadata, ISelections } from '@auxiliary/wallet-connect/interface'
     import { DappInfo } from '@ui'
+    import { ALL_EVM_METHODS } from '@auxiliary/wallet-connect/constants'
 
     export let drawerRouter: Router<unknown>
     export let selections: ISelections
     export let titleLocale: string
     export let disableContinue: boolean
 
-    $: dappMetadata = $selectedDapp?.metadata ?? ($sessionInitiationRequest?.params.proposer.metadata as IDappMetadata)
+    const dappMetadata = getDappMetadata($selectedDapp, $sessionInitiationRequest)
+    const { requiredMethods, optionalMethods } = getMethodsForNamespaces($selectedDapp, $sessionInitiationRequest)
+    const { requiredNetworks, optionalNetworks } = getNetworksForNamespaces($selectedDapp, $sessionInitiationRequest)
+
     $: persistedDapp = dappMetadata ? getPersistedDapp(dappMetadata.url) : undefined
-    $: requiredNamespaces =
-        $selectedDapp?.session?.requiredNamespaces ?? $sessionInitiationRequest?.params.requiredNamespaces ?? {}
-    $: optionalNamespaces =
-        $selectedDapp?.session?.optionalNamespaces ?? $sessionInitiationRequest?.params.optionalNamespaces ?? {}
+
+    function getDappMetadata(
+        selectedDapp: IConnectedDapp | undefined,
+        sessionInitiationRequest: SessionInitiationRequest | undefined
+    ): IDappMetadata | undefined {
+        if (selectedDapp) {
+            return selectedDapp?.metadata
+        } else if (sessionInitiationRequest?.type === 'session_proposal') {
+            return sessionInitiationRequest?.payload.params.proposer.metadata as IDappMetadata
+        } else if (sessionInitiationRequest?.type === 'session_authenticate') {
+            return sessionInitiationRequest?.payload.params.requester.metadata as IDappMetadata
+        } else {
+            return undefined
+        }
+    }
+
+    function getMethodsForNamespaces(
+        selectedDapp: IConnectedDapp | undefined,
+        sessionInitiationRequest: SessionInitiationRequest | undefined
+    ): { requiredMethods: string[]; optionalMethods: string[] } {
+        if (selectedDapp) {
+            const { requiredNamespaces, optionalNamespaces } = selectedDapp ?? {}
+
+            const { requiredMethods, optionalMethods } = getNetworksAndMethodsFromNamespaces(
+                requiredNamespaces ?? {},
+                optionalNamespaces ?? {}
+            )
+            return { requiredMethods, optionalMethods }
+        } else if (sessionInitiationRequest?.type === 'session_proposal') {
+            const { requiredNamespaces, optionalNamespaces } = sessionInitiationRequest.payload?.params ?? {}
+            const { requiredMethods, optionalMethods } = getNetworksAndMethodsFromNamespaces(
+                requiredNamespaces ?? {},
+                optionalNamespaces ?? {}
+            )
+            return { requiredMethods, optionalMethods }
+        } else if (sessionInitiationRequest?.type === 'session_authenticate') {
+            return { requiredMethods: [], optionalMethods: ALL_EVM_METHODS }
+        } else {
+            return { requiredMethods: [], optionalMethods: [] }
+        }
+    }
+
+    function getNetworksForNamespaces(
+        selectedDapp: IConnectedDapp | undefined,
+        sessionInitiationRequest: SessionInitiationRequest | undefined
+    ): { requiredNetworks: string[]; optionalNetworks: string[] } {
+        if (selectedDapp) {
+            const { requiredNamespaces, optionalNamespaces } = selectedDapp ?? {}
+            const { requiredNetworks, optionalNetworks } = getNetworksAndMethodsFromNamespaces(
+                requiredNamespaces ?? {},
+                optionalNamespaces ?? {}
+            )
+            return { requiredNetworks, optionalNetworks }
+        } else if (sessionInitiationRequest?.type === 'session_proposal') {
+            const { requiredNamespaces, optionalNamespaces } = sessionInitiationRequest.payload?.params ?? {}
+            const { requiredNetworks, optionalNetworks } = getNetworksAndMethodsFromNamespaces(
+                requiredNamespaces ?? {},
+                optionalNamespaces ?? {}
+            )
+            return { requiredNetworks, optionalNetworks }
+        } else if (sessionInitiationRequest?.type === 'session_authenticate') {
+            // TODO: Implement this
+            return { requiredNetworks: [], optionalNetworks: [] }
+        } else {
+            return { requiredNetworks: [], optionalNetworks: [] }
+        }
+    }
 
     function onConfirmClick(): void {
+        // TODO: Implement this
+        if ($sessionInitiationRequest?.type === 'session_authenticate') {
+            return
+        }
+
+        const requiredNamespaces =
+            $selectedDapp?.requiredNamespaces ?? $sessionInitiationRequest?.payload?.params.requiredNamespaces ?? {}
+        const optionalNamespaces =
+            $selectedDapp?.optionalNamespaces ?? $sessionInitiationRequest?.payload?.params.optionalNamespaces ?? {}
+
         const updatedNamespace = buildSupportedNamespacesFromSelections(
             selections,
             requiredNamespaces,
             optionalNamespaces,
             persistedDapp?.namespaces.supported
         )
-        updateSupportedDappNamespacesForDapp(dappMetadata.url, updatedNamespace)
-        if ($selectedDapp?.session) {
-            updateSession($selectedDapp.session.topic, updatedNamespace)
+        if (dappMetadata) {
+            updateSupportedDappNamespacesForDapp(dappMetadata.url, updatedNamespace)
+        }
+        if ($selectedDapp?.sessionTopic) {
+            updateSession($selectedDapp.sessionTopic, updatedNamespace)
         }
         drawerRouter.previous()
     }
@@ -60,8 +140,10 @@
             <div class="h-full flex flex-col gap-8 overflow-scroll">
                 <slot
                     persistedSupportedNamespaces={persistedDapp?.namespaces.supported}
-                    {requiredNamespaces}
-                    {optionalNamespaces}
+                    {requiredMethods}
+                    {optionalMethods}
+                    {requiredNetworks}
+                    {optionalNetworks}
                 />
             </div>
         </div>

packages/desktop/views/dashboard/drawers/dapp-config/components/NetworkSelection.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-    import { ProposalTypes } from '@walletconnect/types'
     import { getAllNetworkIds } from '@core/network/utils'
     import { onMount } from 'svelte'
     import { Selection } from '@ui'
@@ -9,43 +8,41 @@
     import { SelectionOption } from '@core/utils/interfaces'
 
     export let checkedNetworks: string[]
-    export let requiredNamespaces: ProposalTypes.RequiredNamespaces
-    export let optionalNamespaces: ProposalTypes.RequiredNamespaces
+    export let requiredNetworks: string[]
+    export let optionalNetworks: string[]
     export let supportedNamespaces: SupportedNamespaces | undefined = undefined
 
     const localeKey = 'views.dashboard.drawers.dapps.confirmConnection.networks'
 
-    let requiredNetworks: SelectionOption<NetworkId>[] = []
-    let optionalNetworks: SelectionOption<NetworkId>[] = []
+    let requiredNetworksOptions: SelectionOption<NetworkId>[] = []
+    let optionalNetworksOptions: SelectionOption<NetworkId>[] = []
     function setNetworkSelections(): void {
         const networks: Record<string, SelectionOption<NetworkId>> = {}
-        for (const namespace of Object.values(requiredNamespaces)) {
-            for (const chainId of namespace.chains ?? []) {
-                const chainName = getEvmNetwork(chainId as NetworkId)?.name ?? chainId
-                networks[chainId] = { label: chainName, value: chainId as NetworkId, checked: true, required: true }
-            }
+        for (const chainId of requiredNetworks) {
+            const chainName = getEvmNetwork(chainId as NetworkId)?.name ?? chainId
+            networks[chainId] = { label: chainName, value: chainId as NetworkId, checked: true, required: true }
         }
         const supportedNetworks = getAllNetworkIds()
-        for (const [namespaceId, namespace] of Object.entries(optionalNamespaces)) {
-            const persistedNamespace = supportedNamespaces?.[namespaceId]
-            for (const chainId of namespace.chains ?? []) {
-                if (!networks[chainId] && supportedNetworks.includes(chainId)) {
-                    const isChecked = persistedNamespace?.chains?.includes(chainId) ?? true
-                    const chainName = getEvmNetwork(chainId as NetworkId)?.name ?? chainId
-                    networks[chainId] = {
-                        label: chainName,
-                        value: chainId as NetworkId,
-                        checked: isChecked,
-                        required: false,
-                    }
+
+        const persistedChains = Object.values(supportedNamespaces ?? {}).flatMap(({ chains }) => chains)
+        for (const chainId of optionalNetworks) {
+            if (!networks[chainId] && supportedNetworks.includes(chainId)) {
+                const isChecked = persistedChains?.includes(chainId) ?? true
+                const chainName = getEvmNetwork(chainId as NetworkId)?.name ?? chainId
+                networks[chainId] = {
+                    label: chainName,
+                    value: chainId as NetworkId,
+                    checked: isChecked,
+                    required: false,
                 }
             }
         }
-        requiredNetworks = Object.values(networks).filter((network) => network.required)
-        optionalNetworks = Object.values(networks).filter((network) => !network.required)
+
+        requiredNetworksOptions = Object.values(networks).filter((network) => network.required)
+        optionalNetworksOptions = Object.values(networks).filter((network) => !network.required)
     }
 
-    $: checkedNetworks = [...requiredNetworks, ...optionalNetworks]
+    $: checkedNetworks = [...requiredNetworksOptions, ...optionalNetworksOptions]
         .filter((selection) => selection.checked)
         .map((selection) => selection.value)
 
@@ -55,16 +52,16 @@
 </script>
 
 <div class="h-full flex flex-col gap-8">
-    {#if requiredNetworks.length}
+    {#if requiredNetworksOptions.length}
         <Selection
-            bind:selectionOptions={requiredNetworks}
+            bind:selectionOptions={requiredNetworksOptions}
             disableSelectAll
             title={localize(`${localeKey}.requiredTitle`)}
         />
     {/if}
-    {#if optionalNetworks.length}
+    {#if optionalNetworksOptions.length}
         <Selection
-            bind:selectionOptions={optionalNetworks}
+            bind:selectionOptions={optionalNetworksOptions}
             title={localize(`${localeKey}.optionalTitle`)}
             error={checkedNetworks.length ? undefined : localize(`${localeKey}.empty`)}
         />

packages/desktop/views/dashboard/drawers/dapp-config/components/PermissionSelection.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-    import { ProposalTypes } from '@walletconnect/types'
     import { METHODS_FOR_PERMISSION } from '@auxiliary/wallet-connect/constants'
     import { onMount } from 'svelte'
     import { Selection } from '@ui'
@@ -11,25 +10,21 @@
     import { SelectionOption } from '@core/utils/interfaces'
 
     export let checkedMethods: string[]
-    export let requiredNamespaces: ProposalTypes.RequiredNamespaces
-    export let optionalNamespaces: ProposalTypes.RequiredNamespaces
+    export let requiredMethods: string[]
+    export let optionalMethods: string[]
     export let supportedNamespaces: SupportedNamespaces | undefined = undefined
 
     const localeKey = 'views.dashboard.drawers.dapps.confirmConnection.permissions'
-    let requiredPermissions: SelectionOption<string>[] = []
-    let optionalPermissions: SelectionOption<string>[] = []
+    let requiredPermissionsOptions: SelectionOption<string>[] = []
+    let optionalPermissionsOptions: SelectionOption<string>[] = []
 
     function setPermissionSelections(): void {
         const checkedMethods: { [method: string]: boolean } = {}
         const addedPermission: { [permission: string]: boolean } = {}
 
         const methods = [
-            ...Object.values(requiredNamespaces).flatMap((namespace) =>
-                namespace.methods.map((method) => ({ method, required: true }))
-            ),
-            ...Object.values(optionalNamespaces).flatMap((namespace) =>
-                namespace.methods.map((method) => ({ method, required: false }))
-            ),
+            ...requiredMethods.map((method) => ({ method, required: true })),
+            ...optionalMethods.map((method) => ({ method, required: false })),
         ]
 
         for (const method of methods) {
@@ -55,17 +50,17 @@
                 required: method.required,
             }
             if (method.required) {
-                requiredPermissions = [...requiredPermissions, option]
+                requiredPermissionsOptions = [...requiredPermissionsOptions, option]
             } else {
-                optionalPermissions = [...optionalPermissions, option]
+                optionalPermissionsOptions = [...optionalPermissionsOptions, option]
             }
         }
     }
 
-    $: requiredPermissions, optionalPermissions, (checkedMethods = getMethodsFromCheckedPermissions())
+    $: requiredPermissionsOptions, optionalPermissionsOptions, (checkedMethods = getMethodsFromCheckedPermissions())
 
     function getMethodsFromCheckedPermissions(): string[] {
-        return [...requiredPermissions, ...optionalPermissions]
+        return [...requiredPermissionsOptions, ...optionalPermissionsOptions]
             .filter((selection) => selection.checked)
             .flatMap((selection) => METHODS_FOR_PERMISSION[selection.value])
     }
@@ -75,26 +70,26 @@
     })
 </script>
 
-{#if requiredPermissions.length || optionalPermissions.length}
+{#if requiredPermissionsOptions.length || optionalPermissionsOptions.length}
     <div class="h-full flex flex-col gap-8">
-        {#if requiredPermissions.length}
+        {#if requiredPermissionsOptions.length}
             <Selection
-                bind:selectionOptions={requiredPermissions}
+                bind:selectionOptions={requiredPermissionsOptions}
                 disableSelectAll
                 title={localize(`${localeKey}.requiredTitle`)}
             />
         {/if}
-        {#if optionalPermissions.length}
+        {#if optionalPermissionsOptions.length}
             <Selection
-                bind:selectionOptions={optionalPermissions}
+                bind:selectionOptions={optionalPermissionsOptions}
                 title={localize(`${localeKey}.optionalTitle`)}
                 error={checkedMethods.length ? undefined : localize(`${localeKey}.empty`)}
             />
         {/if}
     </div>
 {:else}
     <selection-component class="h-full flex flex-col gap-4">
-        <Text textColor="secondary">{localize(`${localeKey}.title`)}</Text>
+        <Text textColor="secondary">{localize(`${localeKey}.step`)}</Text>
 
         <div class="w-full flex-grow flex justify-center items-center">
             <Text type="body2">{localize(`${localeKey}.noPermissionsRequired`)}</Text>