vault history page

dydxprotocol · Sep 26, 2024 · 91584aa · 91584aa
1 parent 7f49616
commit 91584aa
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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}
     />
   );
 };