From 236694742efcb16d0522aada5ffde8c91285b638 Mon Sep 17 00:00:00 2001
From: Nicole O'Brien <nicole@bloomwallet.io>
Date: Tue, 14 May 2024 17:57:48 +0100
Subject: [PATCH] ui: show account balances table on sync accounts

---
 .../popup/popups/SyncAccountsPopup.svelte     | 57 ++++++++++---------
 1 file changed, 29 insertions(+), 28 deletions(-)

diff --git a/packages/desktop/components/popup/popups/SyncAccountsPopup.svelte b/packages/desktop/components/popup/popups/SyncAccountsPopup.svelte
index 1c370bd5e1..7d31a28d16 100644
--- a/packages/desktop/components/popup/popups/SyncAccountsPopup.svelte
+++ b/packages/desktop/components/popup/popups/SyncAccountsPopup.svelte
@@ -1,24 +1,24 @@
 <script lang="ts">
     import { showNotification } from '@auxiliary/notification'
-    import { Alert, Table, Text, Toggle } from '@bloomwalletio/ui'
-    import { sumBalanceForAccounts } from '@core/account'
+    import { Alert, Indicator, Text, Toggle } from '@bloomwalletio/ui'
     import { DEFAULT_SYNC_OPTIONS } from '@core/account/constants'
+    import { selectedAccountIndex } from '@core/account/stores'
     import { generateAndStoreActivitiesForAllAccounts } from '@core/activity/actions'
     import { localize } from '@core/i18n'
+    import { ledgerRaceConditionProtectionWrapper } from '@core/ledger'
+    import { SupportedStardustNetworkId } from '@core/network/constants'
+    import { StardustNetworkId } from '@core/network/types'
     import { loadNftsForActiveProfile } from '@core/nfts/actions'
     import { DEFAULT_ACCOUNT_RECOVERY_CONFIGURATION } from '@core/profile'
     import { RecoverAccountsPayload, recoverAccounts } from '@core/profile-manager'
-    import { checkActiveProfileAuth, getBaseToken, loadAccounts } from '@core/profile/actions'
+    import { checkActiveProfileAuth, loadAccounts } from '@core/profile/actions'
     import { activeAccounts, activeProfile, getActiveProfileId, visibleActiveAccounts } from '@core/profile/stores'
     import { formatTokenAmount } from '@core/token'
     import { loadTokensForAllAccountBalances } from '@core/token/actions'
+    import { allAccountTokens } from '@core/token/stores'
     import { closePopup } from '@desktop/auxiliary/popup'
     import { onDestroy } from 'svelte'
     import PopupTemplate from '../PopupTemplate.svelte'
-    import { SupportedStardustNetworkId } from '@core/network/constants'
-    import { ledgerRaceConditionProtectionWrapper } from '@core/ledger'
-    import { StardustNetworkId } from '@core/network/types'
-    import { selectedAccountIndex } from '@core/account/stores'
 
     const { network, type } = $activeProfile
 
@@ -26,7 +26,6 @@
 
     let accountStartIndex = 0
     let accountGapLimit = DEFAULT_CONFIG.initialAccountRange
-    let previousAccountGapLimit = 0
 
     let addressStartIndex = 0
     const addressGapLimit = DEFAULT_CONFIG.addressGapLimit
@@ -37,8 +36,6 @@
 
     let previousAccountsLength = 0
 
-    $: totalBalance = sumBalanceForAccounts($visibleActiveAccounts)
-
     const networkSearchMethod: { [key in StardustNetworkId]?: () => Promise<void> } = {
         [SupportedStardustNetworkId.Iota]: multiAddressSearch,
         [SupportedStardustNetworkId.Shimmer]: singleAddressSearch,
@@ -126,7 +123,6 @@
             await ledgerRaceConditionProtectionWrapper(_function)
             await loadAccounts()
             previousAccountsLength = $visibleActiveAccounts.length
-            previousAccountGapLimit = accountGapLimit
             hasUsedWalletFinder = true
         } catch (err) {
             error = localize(err.error)
@@ -166,7 +162,7 @@
         onClick: onFindBalancesClick,
     }}
 >
-    <div class="space-y-5">
+    <div class="flex flex-col overflow-hidden gap-5">
         {#if network?.id === SupportedStardustNetworkId.Iota}
             <div class="flex gap-2">
                 <Toggle
@@ -176,24 +172,29 @@
                 <Text>{localize('popups.walletFinder.singleAccountSearch')}</Text>
             </div>
         {/if}
-        <Table
-            items={[
-                {
-                    key: localize('popups.walletFinder.accountsSearched'),
-                    value: previousAccountGapLimit.toString() || '-',
-                },
-                {
-                    key: localize('popups.walletFinder.accountsFound'),
-                    value: $activeAccounts.length.toString() || '0',
-                },
-                {
-                    key: localize('popups.walletFinder.totalWalletBalance'),
-                    value: formatTokenAmount(totalBalance, getBaseToken()),
-                },
-            ]}
-        />
+        <account-balance-list class="overflow-y-scroll h-0 flex-1 flex flex-col">
+            {#each $activeAccounts as account}
+                {@const baseCoin = $allAccountTokens[account.index]?.[network.id]?.baseCoin}
+                <div class="w-full flex flex-row items-center justify-between items-center justify-between p-4 gap-3">
+                    <div class="flex flex-row items-center gap-3">
+                        <Indicator color={account.color} />
+                        <Text>{account.name}</Text>
+                    </div>
+                    <Text>{formatTokenAmount(baseCoin?.balance?.total, baseCoin?.metadata)}</Text>
+                </div>
+            {/each}
+        </account-balance-list>
         {#if hasUsedWalletFinder}
             <Alert variant="info" text={localize('popups.walletFinder.searchAgainHint')} />
         {/if}
     </div>
 </PopupTemplate>
+
+<style lang="postcss">
+    account-balance-list {
+        @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>