From 91584aaea7e247545b1c658db494f0498c103c61 Mon Sep 17 00:00:00 2001
From: Tyler <tyler@dydx.exchange>
Date: Thu, 26 Sep 2024 17:21:58 -0400
Subject: [PATCH] vault history page

---
 src/constants/routes.ts                    |  1 +
 src/pages/portfolio/History.tsx            |  6 ++++++
 src/pages/portfolio/Portfolio.tsx          |  5 +++++
 src/pages/portfolio/PortfolioNavMobile.tsx |  5 +++++
 src/pages/vaults/VaultTransactions.tsx     | 10 ++++++++--
 5 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/constants/routes.ts b/src/constants/routes.ts
index d1c8abdaa7..585308516a 100644
--- a/src/constants/routes.ts
+++ b/src/constants/routes.ts
@@ -29,6 +29,7 @@ export enum PortfolioRoute {
 export enum HistoryRoute {
   Trades = 'trades',
   Transfers = 'transfers',
+  VaultTransfers = 'vault-transfers',
   Payments = 'payments',
 }
 
diff --git a/src/pages/portfolio/History.tsx b/src/pages/portfolio/History.tsx
index 248a4cb5cf..9fd6f36ba7 100644
--- a/src/pages/portfolio/History.tsx
+++ b/src/pages/portfolio/History.tsx
@@ -38,6 +38,12 @@ export const History = () => {
                   href: HistoryRoute.Transfers,
                   tag: 'USDC',
                 },
+                {
+                  value: HistoryRoute.VaultTransfers,
+                  label: <h3>MegaVault Transfers</h3>,
+                  href: HistoryRoute.VaultTransfers,
+                  tag: 'USDC',
+                },
                 // TODO - TRCL-1693 -
                 // {
                 //   value: HistoryRoute.Payments,
diff --git a/src/pages/portfolio/Portfolio.tsx b/src/pages/portfolio/Portfolio.tsx
index a03af93050..069a5f4443 100644
--- a/src/pages/portfolio/Portfolio.tsx
+++ b/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,10 @@ const PortfolioPage = () => {
               />
             }
           />
+          <Route
+            path={HistoryRoute.VaultTransfers}
+            element={<VaultTransactionsTable withOuterBorders />}
+          />
           {/* TODO - TRCL-1693
           <Route
             path={HistoryRoute.Payments}
diff --git a/src/pages/portfolio/PortfolioNavMobile.tsx b/src/pages/portfolio/PortfolioNavMobile.tsx
index 4e95cd6576..54f3a1cf97 100644
--- a/src/pages/portfolio/PortfolioNavMobile.tsx
+++ b/src/pages/portfolio/PortfolioNavMobile.tsx
@@ -51,6 +51,11 @@ export const PortfolioNavMobile = () => {
       label: stringGetter({ key: STRING_KEYS.TRANSFERS }),
       description: stringGetter({ key: STRING_KEYS.TRANSFERS_DESCRIPTION }),
     },
+    {
+      value: `${AppRoute.Portfolio}/${PortfolioRoute.History}/${HistoryRoute.VaultTransfers}`,
+      label: 'Vault Transfers',
+      description: 'Transfers to and from the MegaVault',
+    },
     // TODO: TRCL-1693 - re-enable when Payments are ready
     // {
     //   value: `${AppRoute.Portfolio}/${PortfolioRoute.History}/${HistoryRoute.Payments}`,
diff --git a/src/pages/vaults/VaultTransactions.tsx b/src/pages/vaults/VaultTransactions.tsx
index 18e920d755..24954988dd 100644
--- a/src/pages/vaults/VaultTransactions.tsx
+++ b/src/pages/vaults/VaultTransactions.tsx
@@ -55,7 +55,13 @@ export const VaultTransactionsCard = ({ className }: { className?: string }) =>
   );
 };
 const $ShowHideHistoryButton = styled(Button)``;
-const VaultTransactionsTable = ({ className }: { className?: string }) => {
+export const VaultTransactionsTable = ({
+  className,
+  withOuterBorders,
+}: {
+  className?: string;
+  withOuterBorders?: boolean;
+}) => {
   const stringGetter = useStringGetter();
   const transactions = useLoadedVaultAccountTransfers() ?? EMPTY_ARR;
 
@@ -117,7 +123,7 @@ const VaultTransactionsTable = ({ className }: { className?: string }) => {
       }}
       columns={columns}
       className={className}
-      withOuterBorder={transactions.length === 0}
+      withOuterBorder={transactions.length === 0 || withOuterBorders}
     />
   );
 };