ui: separate required and optional permissionsnetworks on connectionf…

…low (#2004) * split required and optional permission selection * update locales for permissions * update network selection + extract selection enum * fix: locales --------- Co-authored-by: Nicole O'Brien <[email protected]>
bloomwalletio · Feb 28, 2024 · d63f7fb · d63f7fb
1 parent 482db21
commit d63f7fb
Show file tree

Hide file tree

Showing 7 changed files with 73 additions and 33 deletions.
diff --git a/packages/desktop/views/dashboard/drawers/dapp-config/components/NetworkSelection.svelte b/packages/desktop/views/dashboard/drawers/dapp-config/components/NetworkSelection.svelte
@@ -6,6 +6,7 @@
     import { localize } from '@core/i18n'
     import { SupportedNamespaces } from '@auxiliary/wallet-connect/types'
     import { NetworkId, getChainConfiguration } from '@core/network'
+    import { SelectionOption } from '@core/utils/interfaces'
 
     export let checkedNetworks: string[]
     export let requiredNamespaces: ProposalTypes.RequiredNamespaces
@@ -14,9 +15,10 @@
 
     const localeKey = 'views.dashboard.drawers.dapps.confirmConnection.networks'
 
-    let networkSelections: { label: string; value: string; checked: boolean; required: boolean }[] = []
+    let requiredNetworks: SelectionOption[] = []
+    let optionalNetworks: SelectionOption[] = []
     function setNetworkSelections(): void {
-        const networks = {}
+        const networks: Record<string, SelectionOption> = {}
         for (const namespace of Object.values(requiredNamespaces)) {
             for (const chain of namespace.chains) {
                 const chainName = getChainConfiguration(chain as NetworkId)?.name ?? chain
@@ -34,18 +36,32 @@
                 }
             }
         }
-        networkSelections = Object.values(networks)
+        requiredNetworks = Object.values(networks).filter((network) => network.required)
+        optionalNetworks = Object.values(networks).filter((network) => !network.required)
     }
 
-    $: checkedNetworks = networkSelections.filter((selection) => selection.checked).map((selection) => selection.value)
+    $: checkedNetworks = [...requiredNetworks, ...optionalNetworks]
+        .filter((selection) => selection.checked)
+        .map((selection) => selection.value)
 
     onMount(() => {
         setNetworkSelections()
     })
 </script>
 
-<Selection
-    bind:selectionOptions={networkSelections}
-    title={localize(`${localeKey}.title`)}
-    error={checkedNetworks.length ? undefined : localize(`${localeKey}.empty`)}
-/>
+<div class="h-full flex flex-col gap-8">
+    {#if requiredNetworks.length}
+        <Selection
+            bind:selectionOptions={requiredNetworks}
+            disableSelectAll
+            title={localize(`${localeKey}.requiredTitle`)}
+        />
+    {/if}
+    {#if optionalNetworks.length}
+        <Selection
+            bind:selectionOptions={optionalNetworks}
+            title={localize(`${localeKey}.optionalTitle`)}
+            error={checkedNetworks.length ? undefined : localize(`${localeKey}.empty`)}
+        />
+    {/if}
+</div>
diff --git a/packages/desktop/views/dashboard/drawers/dapp-config/components/PermissionSelection.svelte b/packages/desktop/views/dashboard/drawers/dapp-config/components/PermissionSelection.svelte
@@ -7,18 +7,18 @@
     import { SupportedNamespaces } from '@auxiliary/wallet-connect/types'
     import { Text } from '@bloomwalletio/ui'
     import { getPermissionForMethod } from '@auxiliary/wallet-connect/utils'
+    import { SelectionOption } from '@core/utils/interfaces'
 
     export let checkedMethods: string[]
     export let requiredNamespaces: ProposalTypes.RequiredNamespaces
     export let optionalNamespaces: ProposalTypes.RequiredNamespaces
     export let persistedNamespaces: SupportedNamespaces | undefined = undefined
-    export let permissionSelections: { label: string; value: string; checked: boolean; required: boolean }[] = []
 
     const localeKey = 'views.dashboard.drawers.dapps.confirmConnection.permissions'
+    let requiredPermissions: SelectionOption[] = []
+    let optionalPermissions: SelectionOption[] = []
 
     function setPermissionSelections(): void {
-        const permissions: { label: string; value: string; checked: boolean; required: boolean }[] = []
-
         const checkedMethods: { [method: string]: boolean } = {}
         const addedPermission: { [permission: string]: boolean } = {}
 
@@ -47,21 +47,24 @@
                 ? Object.values(persistedNamespaces).some((namespace) => namespace.methods.includes(method.method))
                 : true
 
-            permissions.push({
+            const option = {
                 label: localize(`views.dashboard.drawers.dapps.confirmConnection.permissions.${String(permission)}`),
                 value: permission,
                 checked: isChecked,
                 required: method.required,
-            })
+            }
+            if (method.required) {
+                requiredPermissions = [...requiredPermissions, option]
+            } else {
+                optionalPermissions = [...optionalPermissions, option]
+            }
         }
-
-        permissionSelections = permissions
     }
 
-    $: permissionSelections, (checkedMethods = getMethodsFromCheckedPermissions())
+    $: requiredPermissions, optionalPermissions, (checkedMethods = getMethodsFromCheckedPermissions())
 
     function getMethodsFromCheckedPermissions(): string[] {
-        return permissionSelections
+        return [...requiredPermissions, ...optionalPermissions]
             .filter((selection) => selection.checked)
             .flatMap((selection) => METHODS_FOR_PERMISSION[selection.value])
     }
@@ -71,12 +74,23 @@
     })
 </script>
 
-{#if permissionSelections.length}
-    <Selection
-        bind:selectionOptions={permissionSelections}
-        title={localize(`${localeKey}.title`)}
-        error={checkedMethods.length ? undefined : localize(`${localeKey}.empty`)}
-    />
+{#if requiredPermissions.length || optionalPermissions.length}
+    <div class="h-full flex flex-col gap-8">
+        {#if requiredPermissions.length}
+            <Selection
+                bind:selectionOptions={requiredPermissions}
+                disableSelectAll
+                title={localize(`${localeKey}.requiredTitle`)}
+            />
+        {/if}
+        {#if optionalPermissions.length}
+            <Selection
+                bind:selectionOptions={optionalPermissions}
+                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>

diff --git a/packages/desktop/views/dashboard/drawers/dapp-config/components/Selection.svelte b/packages/desktop/views/dashboard/drawers/dapp-config/components/Selection.svelte
@@ -10,6 +10,7 @@
     }[]
     export let showPrimary: boolean = false
     export let title: string
+    export let disableSelectAll: boolean = false
     export let error: string | undefined = undefined
 
     $: indexOfPrimary = selectionOptions.findIndex((option) => option.checked)
@@ -29,10 +30,12 @@
 <selection-component class="flex flex-col gap-4">
     <div class="flex flex-row justify-between items-center px-4">
         <Text textColor="secondary">{title}</Text>
-        <div class="flex flex-row items-center gap-3">
-            <Text textColor="secondary">{localize('general.all')}</Text>
-            <Checkbox size="md" on:click={onAllClick} bind:checked={allChecked} />
-        </div>
+        {#if !disableSelectAll}
+            <div class="flex flex-row items-center gap-3">
+                <Text textColor="secondary">{localize('general.all')}</Text>
+                <Checkbox size="md" on:click={onAllClick} bind:checked={allChecked} />
+            </div>
+        {/if}
     </div>
     <selection-options>
         {#each selectionOptions as option, index}

diff --git a/packages/desktop/views/dashboard/drawers/dapp-config/views/ConfirmConnectionDrawer.svelte b/packages/desktop/views/dashboard/drawers/dapp-config/views/ConfirmConnectionDrawer.svelte
@@ -35,7 +35,6 @@
         localize(`${localeKey}.accounts.step`),
     ]
 
-    let permissionSelections: { label: string; value: string; checked: boolean; required: boolean }[] = []
     let checkedAccounts: IAccountState[] = []
     let checkedNetworks: string[] = []
     let checkedMethods: string[] = []
@@ -48,7 +47,7 @@
 
     $: isButtonDisabled =
         loading ||
-        (!persistedNamespaces && currentStep === 0 && permissionSelections.length && checkedMethods.length === 0) ||
+        (!persistedNamespaces && currentStep === 0 && checkedMethods.length === 0) ||
         (currentStep === 1 && checkedNetworks.length === 0) ||
         (currentStep === 2 && checkedAccounts.length === 0)
 
@@ -129,7 +128,6 @@
                                 <div class="flex-grow {currentStep === 0 ? 'visible' : 'hidden'}">
                                     <PermissionSelection
                                         bind:checkedMethods
-                                        bind:permissionSelections
                                         requiredNamespaces={$sessionProposal.params.requiredNamespaces}
                                         optionalNamespaces={$sessionProposal.params.optionalNamespaces}
                                     />

diff --git a/packages/shared/src/lib/core/utils/interfaces/index.ts b/packages/shared/src/lib/core/utils/interfaces/index.ts
@@ -1,3 +1,4 @@
 export * from './date-difference.interface'
 export * from './dropdown-item.interface'
+export * from './selection-option.interface'
 export * from './validation-options.interface'
diff --git a/packages/shared/src/lib/core/utils/interfaces/selection-option.interface.ts b/packages/shared/src/lib/core/utils/interfaces/selection-option.interface.ts
@@ -0,0 +1,6 @@
+export interface SelectionOption {
+    label: string
+    value: string
+    checked: boolean
+    required: boolean
+}
diff --git a/packages/shared/src/locales/en.json b/packages/shared/src/locales/en.json
@@ -524,7 +524,8 @@
                         "permissions": {
                             "step": "Permission",
                             "tip": "These are limited permissions for the dApp to send an interaction request for your approval. Only approve apps you know and trust.",
-                            "title": "Select permissions",
+                            "requiredTitle": "Required permissions",
+                            "optionalTitle": "Optional permissions",
                             "signData": "Request to sign data",
                             "signTransaction": "Request to sign a transaction",
                             "sendTransaction": "Request to send a transaction",
@@ -533,7 +534,8 @@
                         },
                         "networks": {
                             "step": "Networks",
-                            "title": "Select networks",
+                            "requiredTitle": "Required networks",
+                            "optionalTitle": "Optional networks",
                             "tip": "The required networks are pre-selected for you by the dApp and can also be reconfigured later.",
                             "empty": "You have to select at least one network"
                         },