feat: vault history page

src/constants/analytics.ts

@@ -128,6 +128,9 @@ export const AnalyticsEvents = unionize(
     ExportTransfersCheckboxClick: ofType<{
       value: boolean;
     }>(),
+    ExportVaultTransfersCheckboxClick: ofType<{
+      value: boolean;
+    }>(),
 
     // Navigation
     NavigatePage: ofType<{

src/constants/routes.ts

@@ -29,6 +29,7 @@ export enum PortfolioRoute {
 export enum HistoryRoute {
   Trades = 'trades',
   Transfers = 'transfers',
+  VaultTransfers = 'vault-transfers',
   Payments = 'payments',
 }
 

src/pages/portfolio/History.tsx

@@ -13,9 +13,13 @@ import { AttachedExpandingSection } from '@/components/ContentSection';
 import { NavigationMenu } from '@/components/NavigationMenu';
 import { ExportHistoryDropdown } from '@/views/ExportHistoryDropdown';
 
+import { isTruthy } from '@/lib/isTruthy';
+import { testFlags } from '@/lib/testFlags';
+
 export const History = () => {
   const stringGetter = useStringGetter();
   const { isNotTablet } = useBreakpoints();
+  const { enableVaults } = testFlags;
 
   return (
     <AttachedExpandingSection>
@@ -38,13 +42,19 @@ export const History = () => {
                   href: HistoryRoute.Transfers,
                   tag: 'USDC',
                 },
+                enableVaults && {
+                  value: HistoryRoute.VaultTransfers,
+                  label: <h3>{stringGetter({ key: STRING_KEYS.MEGAVAULT_TRANSFERS })}</h3>,
+                  href: HistoryRoute.VaultTransfers,
+                  tag: 'USDC',
+                },
                 // TODO - TRCL-1693 -
                 // {
                 //   value: HistoryRoute.Payments,
                 //   label: <h3>{stringGetter({ key: STRING_KEYS.PAYMENTS })}</h3>,
                 //   href: HistoryRoute.Payments,
                 // },
-              ],
+              ].filter(isTruthy),
             },
           ]}
         />

src/pages/portfolio/Portfolio.tsx

@@ -34,6 +34,7 @@ import { openDialog } from '@/state/dialogs';
 
 import { shortenNumberForDisplay } from '@/lib/numbers';
 
+import { VaultTransactionsTable } from '../vaults/VaultTransactions';
 import { PortfolioNavMobile } from './PortfolioNavMobile';
 
 const Overview = lazy(() => import('./Overview').then((module) => ({ default: module.Overview })));
@@ -114,6 +115,15 @@ const PortfolioPage = () => {
               />
             }
           />
+          <Route
+            path={HistoryRoute.VaultTransfers}
+            element={
+              <VaultTransactionsTable
+                withOuterBorders
+                emptyString={stringGetter({ key: STRING_KEYS.YOU_HAVE_NO_VAULT_DEPOSITS })}
+              />
+            }
+          />
           {/* TODO - TRCL-1693
           <Route
             path={HistoryRoute.Payments}

src/pages/portfolio/PortfolioNavMobile.tsx

@@ -10,10 +10,14 @@ import { layoutMixins } from '@/styles/layoutMixins';
 
 import { DropdownHeaderMenu } from '@/components/DropdownHeaderMenu';
 
+import { isTruthy } from '@/lib/isTruthy';
+import { testFlags } from '@/lib/testFlags';
+
 export const PortfolioNavMobile = () => {
   const stringGetter = useStringGetter();
   const { pathname } = useLocation();
   const navigate = useNavigate();
+  const { enableVaults } = testFlags;
 
   const portfolioRouteItems = [
     {
@@ -51,13 +55,18 @@ export const PortfolioNavMobile = () => {
       label: stringGetter({ key: STRING_KEYS.TRANSFERS }),
       description: stringGetter({ key: STRING_KEYS.TRANSFERS_DESCRIPTION }),
     },
+    enableVaults && {
+      value: `${AppRoute.Portfolio}/${PortfolioRoute.History}/${HistoryRoute.VaultTransfers}`,
+      label: stringGetter({ key: STRING_KEYS.MEGAVAULT_TRANSFERS }),
+      description: stringGetter({ key: STRING_KEYS.MEGAVAULT_TRANSFERS_DESCRIPTION }),
+    },
     // TODO: TRCL-1693 - re-enable when Payments are ready
     // {
     //   value: `${AppRoute.Portfolio}/${PortfolioRoute.History}/${HistoryRoute.Payments}`,
     //   label: stringGetter({ key: STRING_KEYS.PAYMENTS }),
     //   description: stringGetter({ key: STRING_KEYS.PAYMENTS_DESCRIPTION }),
     // },
-  ];
+  ].filter(isTruthy);
 
   const routeMap = Object.fromEntries(
     portfolioRouteItems.map(({ value, label }) => [value, { value, label }])

src/pages/vaults/VaultTransactions.tsx

@@ -55,7 +55,15 @@ export const VaultTransactionsCard = ({ className }: { className?: string }) =>
   );
 };
 const $ShowHideHistoryButton = styled(Button)``;
-const VaultTransactionsTable = ({ className }: { className?: string }) => {
+export const VaultTransactionsTable = ({
+  className,
+  withOuterBorders,
+  emptyString,
+}: {
+  className?: string;
+  withOuterBorders?: boolean;
+  emptyString?: string;
+}) => {
   const stringGetter = useStringGetter();
   const transactions = useLoadedVaultAccountTransfers() ?? EMPTY_ARR;
 
@@ -117,7 +125,8 @@ const VaultTransactionsTable = ({ className }: { className?: string }) => {
       }}
       columns={columns}
       className={className}
-      withOuterBorder={transactions.length === 0}
+      withOuterBorder={transactions.length === 0 || withOuterBorders}
+      slotEmpty={emptyString}
     />
   );
 };

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';
@@ -24,7 +25,9 @@ import { getSelectedLocale } from '@/state/localizationSelectors';
 
 import { track } from '@/lib/analytics/analytics';
 import { exportCSV } from '@/lib/csv';
+import { isTruthy } from '@/lib/isTruthy';
 import { MustBigNumber } from '@/lib/numbers';
+import { testFlags } from '@/lib/testFlags';
 
 interface ExportHistoryDropdownProps {
   className?: string;
@@ -39,6 +42,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 +214,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 +279,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 +296,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 (
@@ -261,7 +338,7 @@ export const ExportHistoryDropdown = (props: ExportHistoryDropdownProps) => {
             />
           ),
           value: 'trades',
-          onSelect: (e) => e.preventDefault(),
+          onSelect: (e: Event) => e.preventDefault(),
         },
         {
           label: (
@@ -276,14 +353,41 @@ export const ExportHistoryDropdown = (props: ExportHistoryDropdownProps) => {
             />
           ),
           value: 'transfers',
-          onSelect: (e) => e.preventDefault(),
+          onSelect: (e: Event) => e.preventDefault(),
+        },
+        testFlags.enableVaults && {
+          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: Event) => e.preventDefault(),
         },
         {
           label: (
             <Button
               state={{
-                isDisabled: !checkedTrades && !checkedTransfers,
-                isLoading: isPendingExportTrades || isPendingExportTransfers,
+                isDisabled:
+                  // disable if the hook data is still loading
+                  (checkedVaultTransfers && allVaultTransfers == null) ||
+                  // or you selected nothing
+                  (!checkedTrades && !checkedTransfers && !checkedVaultTransfers),
+                isLoading:
+                  isPendingExportTrades ||
+                  isPendingExportTransfers ||
+                  isPendingExportVaultTransfers,
               }}
               action={ButtonAction.Primary}
               size={ButtonSize.XSmall}
@@ -295,7 +399,7 @@ export const ExportHistoryDropdown = (props: ExportHistoryDropdownProps) => {
           value: 'download',
           onSelect: exportData,
         },
-      ]}
+      ].filter(isTruthy)}
       triggerOptions={{
         disabled: !isAccountConnected,
       }}