Fix and string get

dydxprotocol · Sep 26, 2024 · 06e65ba · 06e65ba
1 parent 91584aa
commit 06e65ba
Show file tree

Hide file tree

Showing 6 changed files with 112 additions and 11 deletions.
diff --git a/package.json b/package.json
@@ -58,7 +58,7 @@
     "@datadog/browser-logs": "^5.23.3",
     "@dydxprotocol/v4-abacus": "1.12.2",
     "@dydxprotocol/v4-client-js": "1.6.1",
-    "@dydxprotocol/v4-localization": "^1.1.203",
+    "@dydxprotocol/v4-localization": "^1.1.205",
     "@dydxprotocol/v4-proto": "^6.0.1",
     "@emotion/is-prop-valid": "^1.3.0",
     "@ethersproject/providers": "^5.7.2",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/constants/analytics.ts b/src/constants/analytics.ts
@@ -128,6 +128,9 @@ export const AnalyticsEvents = unionize(
     ExportTransfersCheckboxClick: ofType<{
       value: boolean;
     }>(),
+    ExportVaultTransfersCheckboxClick: ofType<{
+      value: boolean;
+    }>(),
 
     // Navigation
     NavigatePage: ofType<{

diff --git a/src/pages/portfolio/History.tsx b/src/pages/portfolio/History.tsx
@@ -40,7 +40,7 @@ export const History = () => {
                 },
                 {
                   value: HistoryRoute.VaultTransfers,
-                  label: <h3>MegaVault Transfers</h3>,
+                  label: <h3>{stringGetter({ key: STRING_KEYS.MEGAVAULT_TRANSFERS })}</h3>,
                   href: HistoryRoute.VaultTransfers,
                   tag: 'USDC',
                 },

diff --git a/src/pages/portfolio/PortfolioNavMobile.tsx b/src/pages/portfolio/PortfolioNavMobile.tsx
@@ -53,8 +53,8 @@ export const PortfolioNavMobile = () => {
     },
     {
       value: `${AppRoute.Portfolio}/${PortfolioRoute.History}/${HistoryRoute.VaultTransfers}`,
-      label: 'Vault Transfers',
-      description: 'Transfers to and from the MegaVault',
+      label: stringGetter({ key: STRING_KEYS.MEGAVAULT_TRANSFERS }),
+      description: stringGetter({ key: STRING_KEYS.MEGAVAULT_TRANSFERS_DESCRIPTION }),
     },
     // TODO: TRCL-1693 - re-enable when Payments are ready
     // {

diff --git a/src/views/ExportHistoryDropdown.tsx b/src/views/ExportHistoryDropdown.tsx
@@ -11,6 +11,7 @@ import { useAccounts } from '@/hooks/useAccounts';
 import { useDydxClient } from '@/hooks/useDydxClient';
 import { useLocaleSeparators } from '@/hooks/useLocaleSeparators';
 import { useStringGetter } from '@/hooks/useStringGetter';
+import { useLoadedVaultAccountTransfers } from '@/hooks/vaultsHooks';
 
 import { Button } from '@/components/Button';
 import { Checkbox } from '@/components/Checkbox';
@@ -39,6 +40,7 @@ export const ExportHistoryDropdown = (props: ExportHistoryDropdownProps) => {
   const { requestAllAccountFills, requestAllAccountTransfers } = useDydxClient();
   const [checkedTrades, setCheckedTrades] = useState(true);
   const [checkedTransfers, setCheckedTransfers] = useState(true);
+  const [checkedVaultTransfers, setCheckedVaultTransfers] = useState(false);
   const { decimal: LOCALE_DECIMAL_SEPARATOR, group: LOCALE_GROUP_SEPARATOR } =
     useLocaleSeparators();
 
@@ -210,6 +212,63 @@ export const ExportHistoryDropdown = (props: ExportHistoryDropdownProps) => {
     selectedLocale,
   ]);
 
+  const allVaultTransfers = useLoadedVaultAccountTransfers();
+  const exportVaultTransfers = useCallback(async () => {
+    if (dydxAddress && subaccountNumber !== undefined && allVaultTransfers != null) {
+      const transfers = allVaultTransfers;
+      const csvTransfers = transfers.map((transfer) => {
+        const amount = formatNumberOutput(transfer.amountUsdc, OutputType.Fiat, {
+          decimalSeparator: LOCALE_DECIMAL_SEPARATOR,
+          groupSeparator: LOCALE_GROUP_SEPARATOR,
+          selectedLocale,
+        });
+
+        return {
+          time:
+            transfer.timestampMs == null
+              ? ''
+              : new Date(transfer.timestampMs).toLocaleString(selectedLocale, {
+                  dateStyle: 'short',
+                  timeStyle: 'short',
+                }),
+          action: transfer.type?.name ?? '',
+          amount,
+          id: transfer.id,
+        };
+      });
+
+      exportCSV(csvTransfers, {
+        filename: 'vault-transfers',
+        columnHeaders: [
+          {
+            key: 'time',
+            displayLabel: stringGetter({ key: STRING_KEYS.TIME }),
+          },
+          {
+            key: 'action',
+            displayLabel: stringGetter({ key: STRING_KEYS.ACTION }),
+          },
+          {
+            key: 'amount',
+            displayLabel: stringGetter({ key: STRING_KEYS.AMOUNT }),
+          },
+          {
+            key: 'id',
+            displayLabel: stringGetter({ key: STRING_KEYS.TRANSACTION }),
+          },
+        ],
+      });
+    }
+  }, [
+    dydxAddress,
+    subaccountNumber,
+    allVaultTransfers,
+    stringGetter,
+    LOCALE_DECIMAL_SEPARATOR,
+    LOCALE_GROUP_SEPARATOR,
+    selectedLocale,
+  ]);
+
   const { mutate: mutateExportTrades, isPending: isPendingExportTrades } = useMutation({
     mutationFn: exportTrades,
   });
@@ -218,6 +277,11 @@ export const ExportHistoryDropdown = (props: ExportHistoryDropdownProps) => {
     mutationFn: exportTransfers,
   });
 
+  const { mutate: mutateExportVaultTransfers, isPending: isPendingExportVaultTransfers } =
+    useMutation({
+      mutationFn: exportVaultTransfers,
+    });
+
   const exportData = useCallback(
     (e: Event) => {
       e.preventDefault();
@@ -230,14 +294,25 @@ export const ExportHistoryDropdown = (props: ExportHistoryDropdownProps) => {
         mutateExportTransfers();
       }
 
+      if (checkedVaultTransfers) {
+        mutateExportVaultTransfers();
+      }
+
       track(
         AnalyticsEvents.ExportDownloadClick({
           trades: checkedTrades,
           transfers: checkedTransfers,
         })
       );
     },
-    [checkedTrades, checkedTransfers, mutateExportTrades, mutateExportTransfers]
+    [
+      checkedTrades,
+      checkedTransfers,
+      checkedVaultTransfers,
+      mutateExportTrades,
+      mutateExportTransfers,
+      mutateExportVaultTransfers,
+    ]
   );
 
   return (
@@ -278,12 +353,35 @@ export const ExportHistoryDropdown = (props: ExportHistoryDropdownProps) => {
           value: 'transfers',
           onSelect: (e) => e.preventDefault(),
         },
+        {
+          label: (
+            <Checkbox
+              label={stringGetter({ key: STRING_KEYS.MEGAVAULT_TRANSFERS })}
+              checked={checkedVaultTransfers}
+              disabled={allVaultTransfers == null || allVaultTransfers.length === 0}
+              onCheckedChange={() => {
+                setCheckedVaultTransfers(!checkedVaultTransfers);
+
+                track(
+                  AnalyticsEvents.ExportVaultTransfersCheckboxClick({
+                    value: !checkedVaultTransfers,
+                  })
+                );
+              }}
+            />
+          ),
+          value: 'vault-transfers',
+          onSelect: (e) => e.preventDefault(),
+        },
         {
           label: (
             <Button
               state={{
-                isDisabled: !checkedTrades && !checkedTransfers,
-                isLoading: isPendingExportTrades || isPendingExportTransfers,
+                isDisabled: !checkedTrades && !checkedTransfers && !checkedVaultTransfers,
+                isLoading:
+                  isPendingExportTrades ||
+                  isPendingExportTransfers ||
+                  isPendingExportVaultTransfers,
               }}
               action={ButtonAction.Primary}
               size={ButtonSize.XSmall}