ui: add account label shimmer amount to account selection (#2157)

* decouple account selection with generic selection * use slot for account selection * add generic type * add network icon to network selection * use generic type --------- Co-authored-by: Tuditi <[email protected]>
bloomwalletio · Mar 18, 2024 · 8a945f4 · 8a945f4
1 parent 891ec7f
commit 8a945f4
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 34 deletions.
diff --git a/packages/desktop/views/dashboard/drawers/dapp-config/components/AccountSelection.svelte b/packages/desktop/views/dashboard/drawers/dapp-config/components/AccountSelection.svelte
@@ -2,11 +2,14 @@
     import { IAccountState, getAddressFromAccountForNetwork } from '@core/account'
     import { visibleActiveAccounts } from '@core/profile/stores'
     import Selection from './Selection.svelte'
-    import { localize } from '@core/i18n'
+    import { formatCurrency, localize } from '@core/i18n'
     import { ISupportedNamespace, SupportedNamespaces } from '@auxiliary/wallet-connect/types'
     import { findActiveAccountWithAddress } from '@core/profile/actions'
     import { NetworkId } from '@core/network'
     import { Alert } from '@bloomwalletio/ui'
+    import { allAccountFiatBalances } from '@core/token/stores'
+    import { Indicator, Pill, Text } from '@bloomwalletio/ui'
+    import { SelectionOption } from '@core/utils/interfaces'
 
     export let checkedAccounts: IAccountState[]
     export let persistedNamespaces: SupportedNamespaces | undefined = undefined
@@ -18,7 +21,7 @@
     $: _chainIds, setAccountSelections()
     $: checkedAccounts = accountSelections.filter((selection) => selection.checked).map((selection) => selection.value)
 
-    let accountSelections: { label: string; value: IAccountState; checked: boolean; required: boolean }[] = []
+    let accountSelections: SelectionOption<IAccountState>[] = []
     function setAccountSelections(): void {
         if (!_chainIds || _chainIds.length === 0) {
             accountSelections = []
@@ -60,15 +63,42 @@
             return accounts
         })
     }
+
+    function getAccountBalance(accountIndex: number): string {
+        return formatCurrency($allAccountFiatBalances[accountIndex])
+    }
+
+    $: indexOfPrimary = accountSelections.findIndex((option) => option.checked)
 </script>
 
 {#if accountSelections.length}
     <Selection
         bind:selectionOptions={accountSelections}
         title={localize(`${localeKey}.title`)}
         error={checkedAccounts.length ? undefined : localize(`${localeKey}.empty`)}
-        showPrimary
-    />
+        let:option
+        let:index
+    >
+        <div class="w-full flex items-center justify-between gap-2">
+            <div class="flex flex-row items-center gap-3">
+                <Indicator color={option.value.color} />
+                <Text>{option.value.name}</Text>
+            </div>
+            {#if indexOfPrimary === index}
+                <Pill color="info">{localize('general.primary')}</Pill>
+            {/if}
+            <Text>{getAccountBalance(option.value.index)}</Text>
+        </div>
+    </Selection>
 {:else}
     <Alert variant="danger" text="No valid accounts" />
 {/if}
+
+<style lang="postcss">
+    selection-options {
+        @apply bg-surface-0 dark:bg-surface-0-dark;
+        @apply border border-solid border-stroke dark:border-stroke-dark;
+        @apply divide-y divide-solid divide-stroke dark:divide-stroke-dark;
+        @apply rounded-xl;
+    }
+</style>
diff --git a/packages/desktop/views/dashboard/drawers/dapp-config/components/NetworkSelection.svelte b/packages/desktop/views/dashboard/drawers/dapp-config/components/NetworkSelection.svelte
@@ -15,24 +15,29 @@
 
     const localeKey = 'views.dashboard.drawers.dapps.confirmConnection.networks'
 
-    let requiredNetworks: SelectionOption[] = []
-    let optionalNetworks: SelectionOption[] = []
+    let requiredNetworks: SelectionOption<NetworkId>[] = []
+    let optionalNetworks: SelectionOption<NetworkId>[] = []
     function setNetworkSelections(): void {
-        const networks: Record<string, SelectionOption> = {}
+        const networks: Record<string, SelectionOption<NetworkId>> = {}
         for (const namespace of Object.values(requiredNamespaces)) {
-            for (const chain of namespace.chains) {
-                const chainName = getChainConfiguration(chain as NetworkId)?.name ?? chain
-                networks[chain] = { label: chainName, value: chain, checked: true, required: true }
+            for (const chainId of namespace.chains) {
+                const chainName = getChainConfiguration(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 = persistedNamespaces?.[namespaceId]
-            for (const chain of namespace.chains) {
-                if (!networks[chain] && supportedNetworks.includes(chain)) {
-                    const isChecked = persistedNamespace?.chains?.includes(chain) ?? true
-                    const chainName = getChainConfiguration(chain as NetworkId)?.name ?? chain
-                    networks[chain] = { label: chainName, value: chain, checked: isChecked, required: false }
+            for (const chainId of namespace.chains) {
+                if (!networks[chainId] && supportedNetworks.includes(chainId)) {
+                    const isChecked = persistedNamespace?.chains?.includes(chainId) ?? true
+                    const chainName = getChainConfiguration(chainId as NetworkId)?.name ?? chainId
+                    networks[chainId] = {
+                        label: chainName,
+                        value: chainId as NetworkId,
+                        checked: isChecked,
+                        required: false,
+                    }
                 }
             }
         }

diff --git a/packages/desktop/views/dashboard/drawers/dapp-config/components/PermissionSelection.svelte b/packages/desktop/views/dashboard/drawers/dapp-config/components/PermissionSelection.svelte
@@ -16,8 +16,8 @@
     export let persistedNamespaces: SupportedNamespaces | undefined = undefined
 
     const localeKey = 'views.dashboard.drawers.dapps.confirmConnection.permissions'
-    let requiredPermissions: SelectionOption[] = []
-    let optionalPermissions: SelectionOption[] = []
+    let requiredPermissions: SelectionOption<string>[] = []
+    let optionalPermissions: SelectionOption<string>[] = []
 
     function setPermissionSelections(): void {
         const checkedMethods: { [method: string]: boolean } = {}

diff --git a/packages/desktop/views/dashboard/drawers/dapp-config/components/Selection.svelte b/packages/desktop/views/dashboard/drawers/dapp-config/components/Selection.svelte
@@ -1,20 +1,15 @@
 <script lang="ts">
-    import { Checkbox, Error, Pill, Text } from '@bloomwalletio/ui'
+    import { Checkbox, Error, Text } from '@bloomwalletio/ui'
     import { localize } from '@core/i18n'
+    import { SelectionOption } from '@core/utils'
 
-    export let selectionOptions: {
-        label: string
-        value: unknown
-        checked: boolean
-        required: boolean
-    }[]
-    export let showPrimary: boolean = false
+    type T = $$Generic
+
+    export let selectionOptions: SelectionOption<T>[]
     export let title: string
     export let disableSelectAll: boolean = false
     export let error: string | undefined = undefined
 
-    $: indexOfPrimary = selectionOptions.findIndex((option) => option.checked)
-
     let allChecked = true
     function onAllClick() {
         if (allChecked) {
@@ -39,11 +34,12 @@
     </div>
     <selection-options>
         {#each selectionOptions as option, index}
-            <div class="w-full flex flex-row items-center justify-between p-4">
-                <div class="flex items-center gap-2">
-                    <Text>{option.label}</Text>
-                    {#if showPrimary && indexOfPrimary === index}
-                        <Pill color="info">{localize('general.primary')}</Pill>
+            <div class="w-full flex flex-row items-center justify-between p-4 gap-3">
+                <div class="flex-grow flex items-center gap-2">
+                    {#if $$slots.default}
+                        <slot {option} {index} />
+                    {:else}
+                        <Text>{option.label}</Text>
                     {/if}
                 </div>
                 {#if option.required}

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
@@ -1,6 +1,6 @@
-export interface SelectionOption {
+export interface SelectionOption<P> {
     label: string
-    value: string
+    value: P
     checked: boolean
     required: boolean
 }