enhancement: simplify pairing flow to one screen (#2627)

* cleanup confirmConnection drawer * init supported namespace if not persisted * show selections on edit click * update namespace on selection change * cleanup types * improve buttons on confirm connection * disable back * skip connectionrequest drawer * update type * cleanup confirmation buttons * fix: grammar --------- Co-authored-by: Nicole O'Brien <[email protected]>
bloomwalletio · Jun 19, 2024 · c33ee91 · c33ee91
1 parent 6c3163b
commit c33ee91
Show file tree

Hide file tree

Showing 13 changed files with 210 additions and 192 deletions.
diff --git a/packages/desktop/components/drawers/DrawerTemplate.svelte b/packages/desktop/components/drawers/DrawerTemplate.svelte
@@ -7,8 +7,9 @@
     export let title: string = ''
     export let drawerRouter: Router<unknown>
     export let onBack: () => void = () => {}
+    export let showBack: boolean | undefined = undefined
 
-    $: showBackButton = drawerRouter?.hasHistory()
+    $: showBackButton = showBack ?? drawerRouter?.hasHistory()
 
     function onBackClick(): void {
         if (drawerRouter) {

diff --git a/packages/desktop/views/dashboard/drawers/dapp-config/components/AccountSelection.svelte b/packages/desktop/views/dashboard/drawers/dapp-config/components/AccountSelection.svelte
@@ -10,28 +10,27 @@
     import { allAccountFiatBalances } from '@core/token/stores'
     import { Indicator, Pill, Text } from '@bloomwalletio/ui'
     import { SelectionOption } from '@core/utils/interfaces'
+    import { onMount } from 'svelte'
 
     export let checkedAccounts: IAccountState[]
-    export let persistedSupportedNamespaces: SupportedNamespaces | undefined = undefined
+    export let supportedNamespaces: SupportedNamespaces | undefined = undefined
     export let chainIds: string[] | undefined = undefined
 
     const localeKey = 'views.dashboard.drawers.dapps.confirmConnection.accounts'
 
-    $: _chainIds = chainIds ?? Object.values(persistedSupportedNamespaces ?? {}).flatMap((p) => p.chains)
-    $: _chainIds, setAccountSelections()
-    $: checkedAccounts = accountSelections.filter((selection) => selection.checked).map((selection) => selection.value)
-
     let accountSelections: SelectionOption<IAccountState>[] = []
     function setAccountSelections(): void {
+        const _chainIds = chainIds?.length
+            ? chainIds
+            : Object.values(supportedNamespaces ?? {}).flatMap((p) => p.chains)
         if (!_chainIds || _chainIds.length === 0) {
             accountSelections = []
             return
         }
 
-        const persistedAccountIndexes = persistedSupportedNamespaces
-            ? getAccountsFromPersistedNamespaces(Object.values(persistedSupportedNamespaces))
+        const persistedAccountIndexes = supportedNamespaces
+            ? getAccountsFromPersistedNamespaces(Object.values(supportedNamespaces))
             : undefined
-
         accountSelections = $visibleActiveAccounts
             .filter((account) => {
                 return hasAddressForAllChains(account, _chainIds)
@@ -69,6 +68,11 @@
     }
 
     $: indexOfPrimary = accountSelections.findIndex((option) => option.checked)
+    $: checkedAccounts = accountSelections.filter((selection) => selection.checked).map((selection) => selection.value)
+
+    onMount(() => {
+        setAccountSelections()
+    })
 </script>
 
 {#if accountSelections.length}

diff --git a/packages/desktop/views/dashboard/drawers/dapp-config/components/ConnectionSummary.svelte b/packages/desktop/views/dashboard/drawers/dapp-config/components/ConnectionSummary.svelte
@@ -9,13 +9,13 @@
     import { NetworkId, getEvmNetwork } from '@core/network'
     import { IAccountState } from '@core/account'
     import { ProposalTypes } from '@walletconnect/types'
-    import { DappConfigRoute } from '../dapp-config-route.enum'
-    import { Router } from '@core/router/classes'
 
     export let requiredNamespaces: ProposalTypes.RequiredNamespaces | undefined
     export let editable: boolean
-    export let persistedSupportedNamespaces: SupportedNamespaces
-    export let drawerRouter: Router<unknown>
+    export let supportedNamespaces: SupportedNamespaces
+    export let onEditPermissionsClick: () => void
+    export let onEditNetworksClick: () => void
+    export let onEditAccountsClick: () => void
 
     const localeKey = 'views.dashboard.drawers.dapps.confirmConnection'
 
@@ -27,7 +27,7 @@
 
     function getPermissionPreferences(): PermissionPreference[] {
         const namespaces = Object.values(requiredNamespaces ?? {})
-        const _persistedNamespaces = Object.values(persistedSupportedNamespaces)
+        const _supportedNamespaces = Object.values(supportedNamespaces)
 
         return Object.values(DappPermission)
             .map((permission) => {
@@ -37,7 +37,7 @@
                     supportedMethods.some((method) => namespace.methods.includes(method))
                 )
 
-                const isEnabled = _persistedNamespaces.some((namespace) =>
+                const isEnabled = _supportedNamespaces.some((namespace) =>
                     supportedMethods.some((method) => namespace.methods.includes(method))
                 )
 
@@ -53,7 +53,7 @@
     }
 
     function getNetworkPreferences(): string[] {
-        return Object.values(persistedSupportedNamespaces).flatMap((namespace) => {
+        return Object.values(supportedNamespaces).flatMap((namespace) => {
             return namespace.chains.map((chainId) => {
                 const evmNetwork = getEvmNetwork(chainId as NetworkId)
                 return evmNetwork?.name ?? chainId
@@ -62,29 +62,19 @@
     }
 
     function getAccountPreferences(): IAccountState[] {
-        const accounts = Object.values(persistedSupportedNamespaces)
+        const accounts = Object.values(supportedNamespaces)
             .flatMap((namespace) =>
                 namespace.accounts.map((accountWithNetworkId) => {
                     const [namespace, chainId, address] = accountWithNetworkId.split(':')
                     return findActiveAccountWithAddress(address, `${namespace}:${chainId}` as NetworkId)
                 })
             )
-            .filter(Boolean)
+            .filter(Boolean) as IAccountState[]
 
         const accountMap = accounts.reduce((acc, account) => ({ ...acc, [account.index]: account }), {})
         return Object.values(accountMap)
     }
 
-    function onEditPermissionsClick(): void {
-        drawerRouter.goTo(DappConfigRoute.EditPermissions)
-    }
-    function onEditNetworksClick(): void {
-        drawerRouter.goTo(DappConfigRoute.EditNetworks)
-    }
-    function onEditAccountsClick(): void {
-        drawerRouter.goTo(DappConfigRoute.EditAccounts)
-    }
-
     onMount(() => {
         permissionPreferences = getPermissionPreferences()
         networkPreferences = getNetworkPreferences()

diff --git a/packages/desktop/views/dashboard/drawers/dapp-config/components/NetworkSelection.svelte b/packages/desktop/views/dashboard/drawers/dapp-config/components/NetworkSelection.svelte
@@ -11,7 +11,7 @@
     export let checkedNetworks: string[]
     export let requiredNamespaces: ProposalTypes.RequiredNamespaces
     export let optionalNamespaces: ProposalTypes.RequiredNamespaces
-    export let persistedSupportedNamespaces: SupportedNamespaces | undefined = undefined
+    export let supportedNamespaces: SupportedNamespaces | undefined = undefined
 
     const localeKey = 'views.dashboard.drawers.dapps.confirmConnection.networks'
 
@@ -27,7 +27,7 @@
         }
         const supportedNetworks = getAllNetworkIds()
         for (const [namespaceId, namespace] of Object.entries(optionalNamespaces)) {
-            const persistedNamespace = persistedSupportedNamespaces?.[namespaceId]
+            const persistedNamespace = supportedNamespaces?.[namespaceId]
             for (const chainId of namespace.chains ?? []) {
                 if (!networks[chainId] && supportedNetworks.includes(chainId)) {
                     const isChecked = persistedNamespace?.chains?.includes(chainId) ?? true

diff --git a/packages/desktop/views/dashboard/drawers/dapp-config/components/PermissionSelection.svelte b/packages/desktop/views/dashboard/drawers/dapp-config/components/PermissionSelection.svelte
@@ -13,7 +13,7 @@
     export let checkedMethods: string[]
     export let requiredNamespaces: ProposalTypes.RequiredNamespaces
     export let optionalNamespaces: ProposalTypes.RequiredNamespaces
-    export let persistedSupportedNamespaces: SupportedNamespaces | undefined = undefined
+    export let supportedNamespaces: SupportedNamespaces | undefined = undefined
 
     const localeKey = 'views.dashboard.drawers.dapps.confirmConnection.permissions'
     let requiredPermissions: SelectionOption<string>[] = []
@@ -44,10 +44,8 @@
             }
             addedPermission[permission] = true
 
-            const isChecked = persistedSupportedNamespaces
-                ? Object.values(persistedSupportedNamespaces).some((namespace) =>
-                      namespace.methods.includes(method.method)
-                  )
+            const isChecked = supportedNamespaces
+                ? Object.values(supportedNamespaces).some((namespace) => namespace.methods.includes(method.method))
                 : true
 
             const option = {