Merge commit 'e562d00b252c5aa1767c3d18ed3faf229422bf43' into 349-gene…

…rate-activity-from-transactions

packages/desktop/components/NetworkCard.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-    import { Button, CopyableButton, FlatIconName } from '@bloomwalletio/ui'
+    import { Button, CopyableButton, IconName } from '@bloomwalletio/ui'
     import { selectedAccount } from '@core/account/stores'
     import { localize } from '@core/i18n'
-    import { generateAndStoreEvmAddressForAccount } from '@core/layer-2'
+    import { generateAndStoreEvmAddressForAccount } from '@core/layer-2/actions'
     import { LedgerAppName } from '@core/ledger'
     import {
         IChain,
@@ -111,7 +111,7 @@
                 {/if}
             </div>
             {#if address}
-                <Button variant="text" icon={FlatIconName.Qrcode} on:click={onQrCodeIconClick} />
+                <Button variant="text" icon={IconName.QrCode} on:click={onQrCodeIconClick} />
             {/if}
         </div>
     </div>

packages/desktop/components/ProposalsDetails.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { type IItem, Table } from '@bloomwalletio/ui'
     import { IProposalsDetails } from '@contexts/governance/interfaces'
     import {
         participationOverviewForSelectedAccount,
@@ -15,7 +16,7 @@
     import { localize } from '@core/i18n'
     import { activeProfileId } from '@core/profile/stores'
     import { PopupId, openPopup } from '@desktop/auxiliary/popup'
-    import { Button, KeyValueBox, ProposalsDetailsButton, Text } from '@ui'
+    import { Button, ProposalsDetailsButton, Text } from '@ui'
     import { ButtonSize, FontWeight } from '@ui/enums'
     import { onMount } from 'svelte'
 
@@ -26,9 +27,21 @@
         votedProposals: null,
     }
 
+    let items: IItem[] = []
+
     $: isOverviewLoaded = !!$participationOverviewForSelectedAccount
     $: $registeredProposalsForSelectedAccount, $participationOverviewForSelectedAccount, updateProposalsDetails()
     $: $selectedAccount, void setParticipationOverview()
+    $: items = getProposalDetailValues(details)
+
+    function getProposalDetailValues(_details: IProposalsDetails): IItem[] {
+        return Object.keys(_details).map((key) => {
+            return {
+                key: localize(`views.governance.proposalsDetails.${key}`),
+                value: details[key] ?? 0,
+            }
+        })
+    }
 
     function updateProposalsDetails(): void {
         if ($activeProfileId) {
@@ -64,17 +77,7 @@
         </Text>
         <ProposalsDetailsButton modalPosition={{ right: '0px', top: '34px' }} />
     </header-container>
-    <ul class="space-y-2">
-        {#each Object.keys(details) as detailKey}
-            <li>
-                <KeyValueBox
-                    keyText={localize(`views.governance.proposalsDetails.${detailKey}`)}
-                    valueText={details[detailKey]?.toString() ?? '-'}
-                    isLoading={details[detailKey] === undefined}
-                />
-            </li>
-        {/each}
-    </ul>
+    <Table {items} />
     <Button size={ButtonSize.Medium} outline onClick={onAddProposalClick} classes="w-full">
         {localize('actions.addProposal')}
     </Button>

packages/desktop/components/modals/AccountSwitcherModal.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Button, FlatIconName } from '@bloomwalletio/ui'
+    import { Button, IconName } from '@bloomwalletio/ui'
     import { sumBalanceForAccounts } from '@core/account'
     import { selectedAccount } from '@core/account/stores'
     import { formatCurrency, localize } from '@core/i18n'
@@ -49,7 +49,7 @@
         class=" flex flex-row justify-between w-full p-8 hover:bg-gray-50 dark:hover:bg-gray-800"
         on:click={onCreateAccountClick}
     >
-        <Button icon={FlatIconName.Plus} variant="text" text={localize('general.addAWallet')} />
+        <Button icon={IconName.Plus} variant="text" text={localize('general.addAWallet')} />
         <div class="flex flex-col items-end text-right space-y-1">
             <Text type={TextType.h5}>
                 {formatTokenAmountBestMatch(totalBalance, getBaseToken())}

packages/desktop/components/panes/ProposalInformationPane.svelte

@@ -1,10 +1,13 @@
 <script lang="ts">
-    import { KeyValueBox, Pane, Text } from '@ui'
+    import { type IItem, Table } from '@bloomwalletio/ui'
+    import { Pane, Text } from '@ui'
     import { formatDate, localize } from '@core/i18n'
-    import { DATE_FORMAT, IKeyValueBoxList, milestoneToDate, truncateString } from '@core/utils'
+    import { DATE_FORMAT, milestoneToDate, truncateString } from '@core/utils'
     import { networkStatus } from '@core/network/stores'
     import { ProposalStatus } from '@contexts/governance/enums'
     import { selectedProposal } from '@contexts/governance/stores'
+    import { IProposal } from '@contexts/governance'
+    import { INetworkStatus } from '@core/network/interfaces'
 
     export let classes: string = ''
 
@@ -42,39 +45,37 @@
         }
     }
 
-    let proposalInformation: IKeyValueBoxList
-    $: proposalInformation = {
-        ...(proposalDateData?.propertyKey && {
-            [proposalDateData.propertyKey]: {
-                data: formatDate(
-                    milestoneToDate($networkStatus.currentMilestone, proposalDateData.milestone),
+    let items: IItem[] = []
+
+    $: setItems($selectedProposal, $networkStatus)
+
+    function setItems(proposal: IProposal, networkStatus: INetworkStatus): void {
+        items = []
+        if (proposalDateData?.propertyKey) {
+            items.push({
+                key: localize(`views.governance.details.proposalInformation.${proposalDateData.propertyKey}`),
+                value: formatDate(
+                    milestoneToDate(networkStatus.currentMilestone, proposalDateData.milestone),
                     DATE_FORMAT
                 ),
-            },
-        }),
-        eventId: {
-            data: truncateString($selectedProposal?.id, 9, 9),
-            isCopyable: true,
-            copyValue: $selectedProposal?.id,
-        },
-        nodeUrl: { data: $selectedProposal?.nodeUrl, isCopyable: true },
+            })
+        }
+        items.push({
+            key: localize('views.governance.details.proposalInformation.eventId'),
+            value: truncateString(proposal?.id, 9, 9),
+            copyable: true,
+        })
+        items.push({
+            key: localize('views.governance.details.proposalInformation.nodeUrl'),
+            value: proposal?.nodeUrl,
+            copyable: true,
+        })
     }
 </script>
 
 <Pane classes="p-6 h-fit {classes}">
     <Text smaller classes="mb-5">
         {localize('views.governance.details.proposalInformation.title')}
     </Text>
-    <ul class="space-y-2">
-        {#each Object.keys(proposalInformation) as counterKey}
-            <li>
-                <KeyValueBox
-                    keyText={localize(`views.governance.details.proposalInformation.${counterKey}`)}
-                    valueText={proposalInformation[counterKey]?.data}
-                    isCopyable={proposalInformation[counterKey].isCopyable}
-                    copyValue={proposalInformation[counterKey].copyValue}
-                />
-            </li>
-        {/each}
-    </ul>
+    <Table {items} />
 </Pane>

packages/desktop/components/popups/AliasConfirmationPopup.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { Table } from '@bloomwalletio/ui'
     import { getSelectedAccount, selectedAccount, updateSelectedAccount } from '@core/account/stores'
     import { processAndAddToActivities } from '@core/activity/utils'
     import { handleError } from '@core/error/handlers/handleError'
@@ -11,7 +12,7 @@
         convertBech32ToHexAddress,
     } from '@core/wallet'
     import { closePopup } from '@desktop/auxiliary/popup'
-    import { Button, FontWeight, KeyValueBox, Text, TextType } from '@ui'
+    import { Button, FontWeight, Text, TextType } from '@ui'
     import { onMount } from 'svelte'
     import { formatTokenAmountPrecise } from '@core/token'
     import { getActiveNetworkId } from '@core/network'
@@ -89,20 +90,26 @@
     <Text type={TextType.h3} fontWeight={FontWeight.semibold} classes="text-left">{localize('popups.alias.title')}</Text
     >
     <div class="w-full flex-col space-y-2">
-        <KeyValueBox
-            keyText={localize('general.storageDeposit')}
-            valueText={storageDeposit}
-            tooltipText={localize('tooltips.transactionDetails.incoming.storageDeposit')}
-        />
-        <KeyValueBox
-            keyText={localize('general.governorAddress')}
-            valueText={$selectedAccount.depositAddress}
-            isCopyable
-        />
-        <KeyValueBox
-            keyText={localize('general.stateControllerAddress')}
-            valueText={$selectedAccount.depositAddress}
-            isCopyable
+        <Table
+            items={[
+                {
+                    key: localize('general.storageDeposit'),
+                    value: storageDeposit,
+                    tooltip: localize('tooltips.transactionDetails.incoming.storageDeposit'),
+                },
+                {
+                    key: localize('general.governorAddress'),
+                    value: $selectedAccount.depositAddress,
+                    truncate: { firstCharCount: 10, endCharCount: 10 },
+                    copyable: true,
+                },
+                {
+                    key: localize('popups.walletFinder.totalWalletBalance'),
+                    value: $selectedAccount.depositAddress,
+                    truncate: { firstCharCount: 10, endCharCount: 10 },
+                    copyable: true,
+                },
+            ]}
         />
     </div>
     <popup-buttons class="flex flex-row flex-nowrap w-full space-x-4">

packages/desktop/components/popups/BurnNativeTokensConfirmationPopup.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
+    import { Table } from '@bloomwalletio/ui'
     import { selectedAccount } from '@core/account/stores'
     import { handleError } from '@core/error/handlers'
     import { localize } from '@core/i18n'
     import { checkActiveProfileAuth } from '@core/profile/actions'
     import { IToken, formatTokenAmountBestMatch } from '@core/token'
     import { burnToken } from '@core/wallet'
     import { PopupId, closePopup, openPopup } from '@desktop/auxiliary/popup'
-    import { Button, ButtonVariant, FontWeight, KeyValueBox, Text, TextHint, TextType } from '@ui'
+    import { Button, ButtonVariant, FontWeight, Text, TextHint, TextType } from '@ui'
     import { onMount } from 'svelte'
 
     export let token: IToken
@@ -54,8 +55,19 @@
         })}
     </Text>
     <div class="space-y-4">
-        <KeyValueBox keyText={localize('popups.nativeToken.property.tokenId')} valueText={token.id} isCopyable />
-        <KeyValueBox keyText={localize('general.amount')} valueText={formattedAmount} />
+        <Table
+            items={[
+                {
+                    key: localize('popups.nativeToken.property.tokenId'),
+                    value: token.id,
+                    copyable: true,
+                },
+                {
+                    key: localize('general.amount'),
+                    value: formattedAmount,
+                },
+            ]}
+        />
         <TextHint warning text={localize('actions.confirmTokenBurn.hint')} />
     </div>
     <popup-buttons class="flex flex-row flex-nowrap w-full space-x-4">

packages/desktop/components/popups/CheckForUpdatesPopup.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
+    import { Table } from '@bloomwalletio/ui'
     import { APP_STAGE, OS, checkForAppUpdate, openUrlInBrowser } from '@core/app'
     import { downloadAppUpdate } from '@core/app/actions'
     import { appUpdateState, appVersionDetails } from '@core/app/stores'
     import { formatDate, localize } from '@core/i18n'
     import { closePopup } from '@desktop/auxiliary/popup'
     import features from '@features/features'
-    import { Button, KeyValueBox, Text, TextHint, TextType } from '@ui'
+    import { Button, Text, TextHint, TextType } from '@ui'
     import { onMount } from 'svelte'
 
     let hasAutoUpdate = false
@@ -34,24 +35,35 @@
 <Text type={TextType.h5} classes="mb-5">{localize('popups.appUpdate.title')}</Text>
 <div class="flex w-full flex-col space-y-6">
     <div class="flex w-full flex-col space-y-2">
-        <KeyValueBox
-            keyText={localize('popups.appUpdate.installedVersion')}
-            valueText={$appVersionDetails.currentVersion}
-        />
-        <KeyValueBox
-            keyText={localize('popups.appUpdate.stage')}
-            valueText={localize(`popups.appUpdate.${APP_STAGE}`)}
+        <Table
+            items={[
+                {
+                    key: localize('popups.appUpdate.installedVersion'),
+                    value: $appVersionDetails.currentVersion,
+                },
+                {
+                    key: localize('popups.appUpdate.stage'),
+                    value: localize(`popups.appUpdate.${APP_STAGE}`),
+                },
+            ]}
         />
         {#if $appVersionDetails.upToDate}
             <TextHint success classes="w-full" text={localize('popups.appUpdate.latestInstalled')} />
         {:else}
-            <KeyValueBox keyText={localize('popups.appUpdate.newVerion')} valueText={$appVersionDetails.newVersion} />
-            <KeyValueBox
-                keyText={localize('popups.appUpdate.releasedAt')}
-                valueText={formatDate($appVersionDetails.newVersionReleaseDate, {
-                    dateStyle: 'long',
-                    timeStyle: 'medium',
-                })}
+            <Table
+                items={[
+                    {
+                        key: localize('popups.appUpdate.newVerion'),
+                        value: $appVersionDetails.newVersion,
+                    },
+                    {
+                        key: localize('popups.appUpdate.releasedAt'),
+                        value: formatDate($appVersionDetails.newVersionReleaseDate, {
+                            dateStyle: 'long',
+                            timeStyle: 'medium',
+                        }),
+                    },
+                ]}
             />
             <TextHint
                 info
@@ -62,9 +74,9 @@
     </div>
 
     <div class="flex flex-row justify-center w-full space-x-4">
-        <Button classes={$appVersionDetails.upToDate ? 'w-full' : 'w-1/2'} outline onClick={onCloseClick}
-            >{localize('actions.cancel')}</Button
-        >
+        <Button classes={$appVersionDetails.upToDate ? 'w-full' : 'w-1/2'} outline onClick={onCloseClick}>
+            {localize('actions.cancel')}
+        </Button>
         {#if hasAutoUpdate && !$appVersionDetails.upToDate}
             <Button classes="w-1/2" onClick={onDownloadClick} disabled={$appUpdateState.busy}>
                 {localize('actions.updateFirefly')}