ui: use table in dapp details (#1587)

bloomwalletio · Dec 8, 2023 · 2a5178e · 2a5178e
1 parent bc45c32
commit 2a5178e
Showing 1 changed file with 12 additions and 30 deletions.
diff --git a/packages/desktop/views/dashboard/drawers/dapp-config/components/ConnectionSummary.svelte b/packages/desktop/views/dashboard/drawers/dapp-config/components/ConnectionSummary.svelte
@@ -2,7 +2,7 @@
     import { METHODS_FOR_PERMISSION } from '@auxiliary/wallet-connect/constants'
     import { DappPermission } from '@auxiliary/wallet-connect/enums'
     import { onMount } from 'svelte'
-    import { IconButton, IconName, Text } from '@bloomwalletio/ui'
+    import { IconButton, IconName, Table, TableRow, Text } from '@bloomwalletio/ui'
     import { localize } from '@core/i18n'
     import { SupportedNamespaces } from '@auxiliary/wallet-connect/types'
     import { findActiveAccountWithAddress } from '@core/profile/actions'
@@ -95,53 +95,35 @@
             <IconButton icon={IconName.SettingsSliders} size="xs" on:click={onEditPermissionsClick} />
         {/if}
     </div>
-    <table>
+    <Table>
         {#each permissionPreferences as permission}
-            <div class="w-full flex flex-row justify-between p-4">
-                <Text>{permission.label}</Text>
-                <Text textColor={permission.required || permission.enabled ? 'success' : 'warning'}>
+            <TableRow item={{ key: permission.label }}>
+                <Text textColor={permission.required || permission.enabled ? 'success' : 'warning'} slot="boundValue">
                     {localize(`general.${permission.required ? 'required' : permission.enabled ? 'yes' : 'no'}`)}
                 </Text>
-            </div>
+            </TableRow>
         {/each}
-    </table>
+    </Table>
 
     <div class="flex flex-row justify-between">
         <Text textColor="secondary">{localize(`${localeKey}.networks.step`)}</Text>
         {#if editable}
             <IconButton icon={IconName.SettingsSliders} size="xs" on:click={onEditNetworksClick} />
         {/if}
     </div>
-    <table>
+    <Table>
         {#each networkPreferences as network}
-            <div class="w-full flex flex-row justify-between p-4">
-                <Text>{network}</Text>
-                <Text textColor="success">{localize('general.connected')}</Text>
-            </div>
+            <TableRow item={{ key: network }}>
+                <Text textColor="success" slot="boundValue">{localize('general.connected')}</Text>
+            </TableRow>
         {/each}
-    </table>
+    </Table>
 
     <div class="flex flex-row justify-between">
         <Text textColor="secondary">{localize(`${localeKey}.accounts.step`)}</Text>
         {#if editable}
             <IconButton icon={IconName.SettingsSliders} size="xs" on:click={onEditAccountsClick} />
         {/if}
     </div>
-    <table>
-        {#each accountPreferences as account}
-            <div class="w-full flex flex-row justify-between p-4">
-                <Text>{account.name}</Text>
-                <div />
-            </div>
-        {/each}
-    </table>
+    <Table items={accountPreferences.map((account) => ({ key: account.name, value: '' }))} />
 </selection-component>
-
-<style lang="postcss">
-    table {
-        @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>