diff --git a/packages/desktop/views/dashboard/drawers/dapp-config/components/NetworkSelection.svelte b/packages/desktop/views/dashboard/drawers/dapp-config/components/NetworkSelection.svelte index 7b8b1c2904..4f25837a45 100644 --- 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 = {} 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() }) - +
+ {#if requiredNetworks.length} + + {/if} + {#if optionalNetworks.length} + + {/if} +
diff --git a/packages/desktop/views/dashboard/drawers/dapp-config/components/PermissionSelection.svelte b/packages/desktop/views/dashboard/drawers/dapp-config/components/PermissionSelection.svelte index f1060f250c..133f5df4f7 100644 --- 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 @@ }) -{#if permissionSelections.length} - +{#if requiredPermissions.length || optionalPermissions.length} +
+ {#if requiredPermissions.length} + + {/if} + {#if optionalPermissions.length} + + {/if} +
{:else} {localize(`${localeKey}.title`)} diff --git a/packages/desktop/views/dashboard/drawers/dapp-config/components/Selection.svelte b/packages/desktop/views/dashboard/drawers/dapp-config/components/Selection.svelte index 9519843067..1533e3b390 100644 --- 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 @@
{title} -
- {localize('general.all')} - -
+ {#if !disableSelectAll} +
+ {localize('general.all')} + +
+ {/if}
{#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 index c5ed33213a..1fb918bda7 100644 --- 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 @@
diff --git a/packages/shared/src/lib/core/utils/interfaces/index.ts b/packages/shared/src/lib/core/utils/interfaces/index.ts index 87db7cb7fa..1b86c04430 100644 --- 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 new file mode 100644 index 0000000000..d30557ed48 --- /dev/null +++ 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 index ec696f6156..2889f1cb43 100644 --- 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" },