feat: add button to open pop up for managing activities export (#2200)

* add export activities popup * improve popup types * implement activity action menu * update popup * add exportCsv feature flag * fix: code review --------- Co-authored-by: Jean Ribeiro <[email protected]>
bloomwalletio · Mar 25, 2024 · 678d271 · 678d271
1 parent bb0d607
commit 678d271
Show file tree

Hide file tree

Showing 10 changed files with 80 additions and 3 deletions.
diff --git a/packages/desktop/components/menus/ActivityListMenu.svelte b/packages/desktop/components/menus/ActivityListMenu.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+    import { IconName, Menu } from '@bloomwalletio/ui'
+    import { localize } from '@core/i18n'
+    import { PopupId, openPopup } from '@desktop/auxiliary/popup'
+    import features from '@features/features'
+
+    let menu: Menu | undefined = undefined
+
+    function onExportActivitiesClick(): void {
+        openPopup({
+            id: PopupId.ExportActivities,
+        })
+        menu?.close()
+    }
+
+    const items = [
+        ...(features.wallet.activityHistory.exportCsv.enabled
+            ? [
+                  {
+                      icon: IconName.Download,
+                      title: localize('actions.export'),
+                      onClick: onExportActivitiesClick,
+                  },
+              ]
+            : []),
+    ]
+</script>
+
+{#if items.length}
+    <activity-list-menu>
+        <Menu bind:this={menu} {items} />
+    </activity-list-menu>
+{/if}
diff --git a/packages/desktop/components/menus/index.ts b/packages/desktop/components/menus/index.ts
@@ -1,4 +1,5 @@
 export { default as AccountActionsMenu } from './AccountActionsMenu.svelte'
+export { default as ActivityListMenu } from './ActivityListMenu.svelte'
 export { default as CollectibleDetailsMenu } from './CollectibleDetailsMenu.svelte'
 export { default as CollectiblesListMenu } from './CollectiblesListMenu.svelte'
 export { default as ContactActionsMenu } from './ContactActionsMenu.svelte'

diff --git a/packages/desktop/components/popup/Popup.svelte b/packages/desktop/components/popup/Popup.svelte
@@ -34,6 +34,7 @@
     import DiagnosticsPopup from './popups/DiagnosticsPopup.svelte'
     import ErrorLogPopup from './popups/ErrorLogPopup.svelte'
     import EvmTransactionFromDappPopup from './popups/EvmTransactionFromDappPopup.svelte'
+    import ExportActivitiesPopup from './popups/ExportActivitiesPopup.svelte'
     import FaucetRequestPopup from './popups/FaucetRequestPopup.svelte'
     import ImportErc20TokenFormPopup from './popups/ImportErc20TokenFormPopup.svelte'
     import ImportErc721TokenFormPopup from './popups/ImportErc721TokenFormPopup.svelte'
@@ -113,6 +114,7 @@
         [PopupId.Diagnostics]: DiagnosticsPopup,
         [PopupId.ErrorLog]: ErrorLogPopup,
         [PopupId.EvmTransactionFromDapp]: EvmTransactionFromDappPopup,
+        [PopupId.ExportActivities]: ExportActivitiesPopup,
         [PopupId.FaucetRequest]: FaucetRequestPopup,
         [PopupId.ImportErc20Token]: ImportErc20TokenFormPopup,
         [PopupId.ImportErc721Token]: ImportErc721TokenFormPopup,

diff --git a/packages/desktop/components/popup/popups/ExportActivitiesPopup.svelte b/packages/desktop/components/popup/popups/ExportActivitiesPopup.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+    import { localize } from '@core/i18n'
+    import { closePopup } from '@desktop/auxiliary/popup'
+    import PopupTemplate from '../PopupTemplate.svelte'
+
+    const busy = false
+
+    function onCancelClick(): void {
+        closePopup()
+    }
+
+    function onExportClick(): void {
+        // TODO: implement CSV export
+    }
+</script>
+
+<PopupTemplate
+    title={localize('popups.exportActivities.title')}
+    description={localize('popups.exportActivities.body')}
+    backButton={{
+        text: localize('actions.cancel'),
+        onClick: onCancelClick,
+        disabled: busy,
+    }}
+    continueButton={{
+        text: localize('actions.export'),
+        onClick: onExportClick,
+        disabled: busy,
+    }}
+    {busy}
+></PopupTemplate>
diff --git a/packages/desktop/features/wallet.features.ts b/packages/desktop/features/wallet.features.ts
@@ -28,6 +28,9 @@ const walletFeatures: IWalletFeatures = {
         search: {
             enabled: true,
         },
+        exportCsv: {
+            enabled: false,
+        },
     },
     portfolio: {
         filter: {

diff --git a/packages/desktop/lib/auxiliary/popup/enums/popup-id.enum.ts b/packages/desktop/lib/auxiliary/popup/enums/popup-id.enum.ts
@@ -17,6 +17,7 @@ export enum PopupId {
     Diagnostics = 'diagnostics',
     ErrorLog = 'errorLog',
     EvmTransactionFromDapp = 'EvmTransactionFromDapp',
+    ExportActivities = 'ExportActivities',
     FaucetRequest = 'faucetRequest',
     ImportErc20Token = 'importErc20Token',
     ImportErc721Token = 'importErc721Token',
@@ -45,7 +46,6 @@ export enum PopupId {
     TestDeepLinkForm = 'testDeepLinkForm',
     TokenInformation = 'tokenInformation',
     UnlockStronghold = 'unlockStronghold',
-    VerifyLedgerTransaction = 'verifyLedgerTransaction',
     VoteForProposal = 'voteForProposal',
     VotingPowerToZero = 'votingPowerToZero',
 }
diff --git a/packages/desktop/lib/auxiliary/popup/types/popup-component-map.type.ts b/packages/desktop/lib/auxiliary/popup/types/popup-component-map.type.ts
@@ -1,3 +1,4 @@
+import { SvelteComponent } from 'svelte'
 import { PopupId } from '../enums'
 
-export type PopupComponentMap = { [key in PopupId]: unknown }
+export type PopupComponentMap = { [key in PopupId]: typeof SvelteComponent }
diff --git a/packages/desktop/views/dashboard/wallet/tab-section/TabSection.svelte b/packages/desktop/views/dashboard/wallet/tab-section/TabSection.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { Tabs } from '@bloomwalletio/ui'
-    import { Filter, TokenListMenu } from '@components'
+    import { ActivityListMenu, Filter, TokenListMenu } from '@components'
     import { activityFilter, activitySearchTerm } from '@core/activity'
     import { localize } from '@core/i18n'
     import { tokenFilter, tokenSearchTerm } from '@core/token/stores'
@@ -26,6 +26,7 @@
         {#if selectedTab.key === 'activity'}
             <SearchInput bind:value={$activitySearchTerm} />
             <Filter filterStore={activityFilter} />
+            <ActivityListMenu />
         {:else if selectedTab.key === 'portfolio'}
             <SearchInput bind:value={$tokenSearchTerm} />
             {#if features.wallet.portfolio.filter.enabled}

diff --git a/packages/shared/src/lib/features/interfaces/wallet-features.interface.ts b/packages/shared/src/lib/features/interfaces/wallet-features.interface.ts
@@ -12,6 +12,7 @@ export interface IWalletFeatures extends IFeatureFlag {
     activityHistory: IFeatureFlag & {
         sync: IFeatureFlag
         search: IFeatureFlag
+        exportCsv: IFeatureFlag
     }
     portfolio: {
         filter: IFeatureFlag

diff --git a/packages/shared/src/locales/en.json b/packages/shared/src/locales/en.json
@@ -985,6 +985,10 @@
             "body": "Help the developers improve Bloom by automatically sending diagnostic data when an error or crash occurs. If selected, this will take effect after restarting Bloom.",
             "checkbox": "Send crash reports to the IOTA Foundation"
         },
+        "exportActivities": {
+            "title": "Export activities",
+            "body": "Export your activities as a CSV."
+        },
         "signMessage": {
             "title": "Sign message",
             "hint": "No balance will be sent to {dappName} in the process of signing this message.",