Nabla/feat export csv fix

package.json

@@ -111,6 +111,7 @@
     "cosmjs-types": "^0.9.0",
     "crypto-js": "^4.1.1",
     "ethers": "^6.6.1",
+    "export-to-csv": "^1.2.3",
     "graz": "^0.0.43",
     "jsdom": "^24.1.0",
     "lodash": "^4.17.21",

src/components/DropdownMenu.tsx

@@ -1,6 +1,15 @@
 import { Fragment, type Ref } from 'react';
 
-import { Content, Item, Portal, Root, Separator, Trigger } from '@radix-ui/react-dropdown-menu';
+import {
+  Content,
+  Item,
+  Portal,
+  Root,
+  Separator,
+  Trigger,
+  type DropdownMenuProps as RadixDropdownMenuProps,
+  type DropdownMenuTriggerProps as RadixDropdownMenuTriggerProps,
+} from '@radix-ui/react-dropdown-menu';
 import styled from 'styled-components';
 
 import { popoverMixins } from '@/styles/popoverMixins';
@@ -13,7 +22,7 @@ export type DropdownMenuItem<T> = {
   value: T;
   icon?: React.ReactNode;
   label: React.ReactNode;
-  onSelect?: () => void;
+  onSelect?: (e: Event) => void;
   separator?: boolean;
   highlightColor?: 'accent' | 'create' | 'destroy';
 };
@@ -32,7 +41,11 @@ type ElementProps<T> = {
   slotTopContent?: React.ReactNode;
 };
 
-type DropdownMenuProps<T> = StyleProps & ElementProps<T>;
+export type DropdownMenuProps<T> = StyleProps &
+  ElementProps<T> &
+  RadixDropdownMenuProps & {
+    triggerOptions?: RadixDropdownMenuTriggerProps;
+  };
 
 export const DropdownMenu = forwardRefFn(
   <T extends string>(
@@ -45,12 +58,14 @@ export const DropdownMenu = forwardRefFn(
       slotTopContent,
       side = 'bottom',
       sideOffset = 8,
+      triggerOptions,
+      ...rest
     }: DropdownMenuProps<T>,
     ref: Ref<HTMLButtonElement>
   ) => {
     return (
-      <Root>
-        <$Trigger ref={ref} className={className}>
+      <Root {...rest}>
+        <$Trigger ref={ref} className={className} {...triggerOptions}>
           {children}
           <$DropdownIcon aria-hidden="true">
             <Icon iconName={IconName.Triangle} aria-hidden="true" />
@@ -79,6 +94,7 @@ export const DropdownMenu = forwardRefFn(
     );
   }
 );
+
 const $Separator = styled(Separator)`
   border-bottom: solid var(--border-width) var(--color-border);
   margin: 0.25rem 1rem;

src/components/Icon.tsx

@@ -117,6 +117,7 @@ export enum IconName {
   Deposit = 'Deposit',
   DepthChart = 'DepthChart',
   Discord = 'Discord',
+  Download = 'Download',
   Etherscan = 'Etherscan',
   ExportKeys = 'ExportKeys',
   Feedback = 'Feedback',
@@ -173,7 +174,6 @@ export enum IconName {
   Website = 'Website',
   Whitepaper = 'Whitepaper',
   Withdraw = 'Withdraw',
-  Download = 'Download',
   SocialX = 'SocialX',
 }
 
@@ -205,6 +205,7 @@ const icons = {
   [IconName.Deposit]: DepositIcon,
   [IconName.DepthChart]: DepthChartIcon,
   [IconName.Discord]: DiscordIcon,
+  [IconName.Download]: DownloadIcon,
   [IconName.Etherscan]: EtherscanIcon,
   [IconName.ExportKeys]: ExportKeysIcon,
   [IconName.Feedback]: FeedbackIcon,
@@ -260,7 +261,6 @@ const icons = {
   [IconName.Website]: WebsiteIcon,
   [IconName.Whitepaper]: WhitepaperIcon,
   [IconName.Withdraw]: WithdrawIcon,
-  [IconName.Download]: DownloadIcon,
   [IconName.SocialX]: SocialXIcon,
 } as Record<IconName, ElementType>;
 

src/components/NavigationMenu.tsx

@@ -27,6 +27,15 @@ import { Tag } from './Tag';
 type ElementProps<MenuItemValue extends string, MenuGroupValue extends string> = {
   items: MenuConfig<MenuItemValue, MenuGroupValue>;
   onSelectItem?: (value: MenuItemValue) => void;
+  onSelectGroup?: (value: MenuGroupValue) => void;
+  /**
+   * Optional slot to add content before the menu item rendering area
+   */
+  slotBefore?: React.ReactNode;
+  /**
+   * Optional slot to add content after the menu item rendering area
+   */
+  slotAfter?: React.ReactNode;
 };
 
 type StyleProps = {
@@ -104,6 +113,8 @@ export const NavigationMenu = <MenuItemValue extends string, MenuGroupValue exte
   itemOrientation = 'horizontal',
   submenuPlacement = 'inline', // orientation === 'horizontal' ? 'viewport' : 'inline',
   dir = 'ltr',
+  slotAfter,
+  slotBefore,
   className,
 }: ElementProps<MenuItemValue, MenuGroupValue> & StyleProps) => {
   const renderSubitems = ({
@@ -148,6 +159,8 @@ export const NavigationMenu = <MenuItemValue extends string, MenuGroupValue exte
 
   return (
     <$Root orientation={orientation} dir={dir} className={className}>
+      {slotBefore}
+
       {items.map((group) => (
         <$Group key={group.group}>
           {group.groupLabel && (
@@ -171,6 +184,8 @@ export const NavigationMenu = <MenuItemValue extends string, MenuGroupValue exte
       ))}
 
       {submenuPlacement === 'viewport' && <$Viewport data-orientation={orientation} />}
+
+      {slotAfter}
     </$Root>
   );
 };

src/constants/account.ts

@@ -58,3 +58,37 @@ export const AMOUNT_RESERVED_FOR_GAS_DYDX = 0.1;
  * @description The number of parentSubaccounts: 0 - 127, 128 is the first childSubaccount
  */
 export const NUM_PARENT_SUBACCOUNTS = 128;
+
+export type RawSubaccountFill = {
+  clientMetadata: string;
+  createdAt: string;
+  createdAtHeight: string;
+  fee: string;
+  id: string;
+  liquidity: string;
+  market: string;
+  marketType: string;
+  orderId: string;
+  price: string;
+  side: string;
+  size: string;
+  subaccountNumber: number;
+  type: string;
+};
+
+export type RawSubaccountTransfer = {
+  id: string;
+  sender: RawAccount;
+  recipient: RawAccount;
+  size: string;
+  createdAt: string;
+  createdAtHeight: string;
+  symbol: string;
+  type: string;
+  transactionHash: string;
+};
+
+export type RawAccount = {
+  address: string;
+  subaccountNumber: number;
+};

src/constants/analytics.ts

@@ -97,6 +97,19 @@ export const AnalyticsEvents = unionize(
       trailingBlocks?: number;
     }>(),
 
+    // Export CSV
+    ExportCsvClick: ofType<{}>(),
+    ExportDownloadClick: ofType<{
+      trades: boolean;
+      transfers: boolean;
+    }>(),
+    ExportTradesCheckboxClick: ofType<{
+      value: boolean;
+    }>(),
+    ExportTransfersCheckboxClick: ofType<{
+      value: boolean;
+    }>(),
+
     // Navigation
     NavigatePage: ofType<{
       path: string;

src/hooks/useDydxClient.tsx

@@ -16,6 +16,7 @@ import {
 import type { ResolutionString } from 'public/tradingview/charting_library';
 
 import type { ConnectNetworkEvent, NetworkConfig } from '@/constants/abacus';
+import { RawSubaccountFill, RawSubaccountTransfer } from '@/constants/account';
 import { DEFAULT_TRANSACTION_MEMO } from '@/constants/analytics';
 import { RESOLUTION_MAP, type Candle } from '@/constants/candles';
 import { LocalStorageKey } from '@/constants/localStorage';
@@ -166,6 +167,109 @@ const useDydxClientContext = () => {
     }
   };
 
+  const requestAllAccountFills = async (address: string, subaccountNumber: number) => {
+    try {
+      const {
+        fills = [],
+        totalResults,
+        pageSize,
+      } = await indexerClient.account.getParentSubaccountNumberFills(
+        address,
+        subaccountNumber,
+        undefined,
+        undefined,
+        100,
+        undefined,
+        undefined,
+        1
+      );
+
+      // We get all the pages but we should exclude the first one, we already have this data
+      const pages = Array.from(
+        {
+          length: Math.ceil(totalResults / pageSize) - 1,
+        },
+        (_, index) => index + 2
+      );
+
+      const results = await Promise.all(
+        pages.map((page) =>
+          indexerClient.account.getParentSubaccountNumberFills(
+            address,
+            subaccountNumber,
+            undefined,
+            undefined,
+            100,
+            undefined,
+            undefined,
+            page
+          )
+        )
+      );
+
+      const allFills: RawSubaccountFill[] = [...fills, ...results.map((data) => data.fills).flat()];
+
+      // sorts the data in descending order
+      return allFills.sort((fillA, fillB) => {
+        return new Date(fillB.createdAt).getTime() - new Date(fillA.createdAt).getTime();
+      });
+    } catch (error) {
+      log('useDydxClient/requestAllAccountFills', error);
+      return [];
+    }
+  };
+
+  const requestAllAccountTransfers = async (address: string, subaccountNumber: number) => {
+    try {
+      const {
+        transfers = [],
+        totalResults,
+        pageSize,
+      } = await indexerClient.account.getParentSubaccountNumberTransfers(
+        address,
+        subaccountNumber,
+        100,
+        undefined,
+        undefined,
+        1
+      );
+
+      // We get all the pages but we should exclude the first one, we already have this data
+      const pages = Array.from(
+        {
+          length: Math.ceil(totalResults / pageSize) - 1,
+        },
+        (_, index) => index + 2
+      );
+
+      const results = await Promise.all(
+        pages.map((page) =>
+          indexerClient.account.getParentSubaccountNumberTransfers(
+            address,
+            subaccountNumber,
+            100,
+            undefined,
+            undefined,
+            page
+          )
+        )
+      );
+
+      const allTransfers: RawSubaccountTransfer[] = [
+        ...transfers,
+        ...results.map((data) => data.transfers).flat(),
+      ];
+
+      // sorts the data in descending order
+      return allTransfers.sort((transferA, transferB) => {
+        return new Date(transferB.createdAt).getTime() - new Date(transferA.createdAt).getTime();
+      });
+    } catch (error) {
+      log('useDydxClient/requestAllAccountTransfers', error);
+      return [];
+    }
+  };
+
   const getMarketTickSize = async (marketId: string) => {
     try {
       const { markets } = (await indexerClient.markets.getPerpetualMarkets(marketId)) ?? {};
@@ -324,6 +428,8 @@ const useDydxClientContext = () => {
     getWalletFromEvmSignature,
 
     // Public Methods
+    requestAllAccountTransfers,
+    requestAllAccountFills,
     requestAllPerpetualMarkets,
     requestAllGovernanceProposals,
     getCandlesForDatafeed,

src/lib/csv.ts

@@ -0,0 +1,15 @@
+import { ConfigOptions, download, generateCsv, mkConfig } from 'export-to-csv';
+
+export const exportCSV = <T extends object>(data: T[], options: ConfigOptions = {}) => {
+  const { filename = 'generated', showColumnHeaders = true, ...rest } = options;
+  const config = mkConfig({ showColumnHeaders, filename, ...rest });
+
+  const csv = generateCsv(config)(
+    data as {
+      [k: string]: unknown;
+      [k: number]: unknown;
+    }[]
+  );
+
+  download(config)(csv);
+};