fix: review fixes

- Pinned the @types/react-csv version
- Changed component name to pascal case
- Removed console.log
- Converted getTxsData to hook and renamed functions
- Added unit test cases for useTxsCSVData hook
- Removed zIndex
- Removed setTimeout code

jest.config.js

@@ -13,6 +13,9 @@ const customJestConfig = {
   // setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
 
   testEnvironment: 'jest-environment-jsdom',
+  moduleNameMapper:{
+    '^@/(.*)$': '<rootDir>/src/$1',
+  }
 };
 
 // createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async

package.json

@@ -85,6 +85,7 @@
     "react": "18.2.0",
     "react-aria": "3.8.0",
     "react-cookie": "4.1.1",
+    "react-csv": "2.0.3",
     "react-dom": "18.2.0",
     "react-error-boundary": "3.1.3",
     "react-hot-toast": "2.1.1",
@@ -102,7 +103,6 @@
     "valid-url": "1.0.9",
     "web-api-hooks": "3.0.2",
     "webpack": "5.47.0",
-    "react-csv": "2.0.3",
     "yup": "0.32.9"
   },
   "devDependencies": {
@@ -132,7 +132,7 @@
     "@types/pluralize": "0.0.29",
     "@types/prismjs": "1.16.6",
     "@types/react": "17.0.15",
-    "@types/react-csv": "^1.1.3",
+    "@types/react-csv": "1.1.3",
     "@types/store": "2.0.2",
     "@types/styled-system__theme-get": "5.0.1",
     "@types/valid-url": "1.0.3",

src/app/common/components/tx-lists/tabs/TxListTabs.tsx

@@ -1,4 +1,4 @@
-import { CSVDownloadButton } from '@/components/csv-download-button';
+import { CSVDownloadButton } from '@/components/CSVDownloadButton';
 import { FilterButton } from '@/components/filter-button';
 import { Tab } from '@/ui/Tab';
 import { TabList } from '@/ui/TabList';

src/common/hooks/__snapshots__/useTxsCSVData.spec.tsx.snap

@@ -0,0 +1,131 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`useTxsCSVData Custom Hook should match the formatTxsCSVData result with the snapshot 1`] = `
+Array [
+  Object {
+    "Date": "2023-05-04T18:10:58.000Z",
+    "Fee Amount": "0.456789",
+    "Fee Currency": "STX",
+    "Net Worth Amount": NaN,
+    "Net Worth Currency": "STX",
+    "Received Amount": "0.987654",
+    "Received Currency": "STX",
+    "Sent Amount": "0.123456",
+    "Sent Currency": "STX",
+    "TxHash": "tx_1234",
+  },
+  Object {
+    "Date": "2023-06-12T08:30:15.000Z",
+    "Fee Amount": "0.789012",
+    "Fee Currency": "STX",
+    "Net Worth Amount": NaN,
+    "Net Worth Currency": "STX",
+    "Received Amount": "0.234567",
+    "Received Currency": "STX",
+    "Sent Amount": "0.987654",
+    "Sent Currency": "STX",
+    "TxHash": "tx_5678",
+  },
+  Object {
+    "Date": "2023-07-25T13:45:30.000Z",
+    "Fee Amount": "0.345678",
+    "Fee Currency": "STX",
+    "Net Worth Amount": NaN,
+    "Net Worth Currency": "STX",
+    "Received Amount": "0.789012",
+    "Received Currency": "STX",
+    "Sent Amount": "0.234567",
+    "Sent Currency": "STX",
+    "TxHash": "tx_9012",
+  },
+  Object {
+    "Date": "2023-08-05T16:20:05.000Z",
+    "Fee Amount": "0.123456",
+    "Fee Currency": "STX",
+    "Net Worth Amount": NaN,
+    "Net Worth Currency": "STX",
+    "Received Amount": "0.345678",
+    "Received Currency": "STX",
+    "Sent Amount": "0.789012",
+    "Sent Currency": "STX",
+    "TxHash": "tx_3456",
+  },
+  Object {
+    "Date": "2023-09-15T21:05:40.000Z",
+    "Fee Amount": "0.987654",
+    "Fee Currency": "STX",
+    "Net Worth Amount": NaN,
+    "Net Worth Currency": "STX",
+    "Received Amount": "0.123456",
+    "Received Currency": "STX",
+    "Sent Amount": "0.345678",
+    "Sent Currency": "STX",
+    "TxHash": "tx_7890",
+  },
+]
+`;
+
+exports[`useTxsCSVData Custom Hook should match the getTxsCSVData result with the snapshot 1`] = `
+Array [
+  Object {
+    "Date": "2023-05-04T18:10:58.000Z",
+    "Fee Amount": "0.456789",
+    "Fee Currency": "STX",
+    "Net Worth Amount": 1.987654,
+    "Net Worth Currency": "STX",
+    "Received Amount": "0.987654",
+    "Received Currency": "STX",
+    "Sent Amount": "0.123456",
+    "Sent Currency": "STX",
+    "TxHash": "tx_1234",
+  },
+  Object {
+    "Date": "2023-06-12T08:30:15.000Z",
+    "Fee Amount": "0.789012",
+    "Fee Currency": "STX",
+    "Net Worth Amount": 1.234567,
+    "Net Worth Currency": "STX",
+    "Received Amount": "0.234567",
+    "Received Currency": "STX",
+    "Sent Amount": "0.987654",
+    "Sent Currency": "STX",
+    "TxHash": "tx_5678",
+  },
+  Object {
+    "Date": "2023-07-25T13:45:30.000Z",
+    "Fee Amount": "0.345678",
+    "Fee Currency": "STX",
+    "Net Worth Amount": 1.789012,
+    "Net Worth Currency": "STX",
+    "Received Amount": "0.789012",
+    "Received Currency": "STX",
+    "Sent Amount": "0.234567",
+    "Sent Currency": "STX",
+    "TxHash": "tx_9012",
+  },
+  Object {
+    "Date": "2023-08-05T16:20:05.000Z",
+    "Fee Amount": "0.123456",
+    "Fee Currency": "STX",
+    "Net Worth Amount": 1.345678,
+    "Net Worth Currency": "STX",
+    "Received Amount": "0.345678",
+    "Received Currency": "STX",
+    "Sent Amount": "0.789012",
+    "Sent Currency": "STX",
+    "TxHash": "tx_3456",
+  },
+  Object {
+    "Date": "2023-09-15T21:05:40.000Z",
+    "Fee Amount": "0.987654",
+    "Fee Currency": "STX",
+    "Net Worth Amount": 1.123456,
+    "Net Worth Currency": "STX",
+    "Received Amount": "0.123456",
+    "Received Currency": "STX",
+    "Sent Amount": "0.345678",
+    "Sent Currency": "STX",
+    "TxHash": "tx_7890",
+  },
+]
+`;

src/common/hooks/useTxsCSVData.spec.tsx

@@ -0,0 +1,45 @@
+import { renderHook, act } from '@testing-library/react';
+import { useTxsCSVData } from './useTxsCSVData';
+import { QueryClient, QueryClientProvider } from 'react-query';
+import { Provider } from 'react-redux';
+import { store } from '../state/store';
+import { addressBalanceMockData, addressTxsMockData, mockAddress } from '../mockData/txsData';
+import { AddressTransactionWithTransfers } from '@stacks/stacks-blockchain-api-types';
+
+const queryClient = new QueryClient();
+
+queryClient.setQueryData(
+  ['addressConfirmedTxsWithTransfersInfinite', mockAddress],
+  addressTxsMockData
+);
+
+queryClient.setQueryData(['accountBalance', mockAddress], addressBalanceMockData);
+
+const wrapper = ({ children }: { children: React.ReactNode }) => (
+  <Provider store={store}>
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  </Provider>
+);
+
+describe('useTxsCSVData Custom Hook', () => {
+  it('should match the getTxsCSVData result with the snapshot', () => {
+    const { result } = renderHook(() => useTxsCSVData(), { wrapper });
+
+    const txsCsvData = result.current.getTxsCSVData(mockAddress);
+
+    expect(txsCsvData.length).toBe(addressTxsMockData.pages[0].results.length);
+    expect(txsCsvData).toMatchSnapshot();
+  });
+
+  it('should match the formatTxsCSVData result with the snapshot', () => {
+    const { result } = renderHook(() => useTxsCSVData(), { wrapper });
+
+    const formatTxsData = result.current.formatTxsCSVData(
+      addressTxsMockData.pages[0].results as AddressTransactionWithTransfers[],
+      mockAddress
+    );
+
+    expect(formatTxsData.length).toBe(addressTxsMockData.pages[0].results.length);
+    expect(formatTxsData).toMatchSnapshot();
+  });
+});

src/common/hooks/useTxsCSVData.ts

@@ -0,0 +1,82 @@
+import {
+  AddressBalanceResponse,
+  AddressTransactionsWithTransfersListResponse,
+  AddressTransactionWithTransfers,
+} from '@stacks/stacks-blockchain-api-types';
+import { InfiniteData, useQueryClient } from 'react-query';
+
+import { useFilterState } from '@/app/common/hooks/use-filter-state';
+import { microStxToStx, microToStacks } from '../utils';
+
+export type CSVDownloadObjectType = {
+  Date: string;
+  'Sent Amount': string | number;
+  'Sent Currency': string;
+  'Received Amount': string | number;
+  'Received Currency': string;
+  'Fee Amount': string | number;
+  'Fee Currency': string;
+  'Net Worth Amount': string | number;
+  'Net Worth Currency': string;
+  TxHash: string;
+};
+
+export const useTxsCSVData = () => {
+  const queryClient = useQueryClient();
+  const { activeFilters } = useFilterState();
+
+  const getTxsCSVData = (address: string): CSVDownloadObjectType[] => {
+    const txsQueryData = queryClient.getQueriesData<
+      InfiniteData<AddressTransactionsWithTransfersListResponse>
+    >({
+      queryKey: ['addressConfirmedTxsWithTransfersInfinite', address],
+    });
+
+    const addressBalanceQueryData = queryClient.getQueriesData<AddressBalanceResponse>({
+      queryKey: ['accountBalance', address],
+    });
+
+    const balance = addressBalanceQueryData[0][1].stx.balance;
+
+    const txs = txsQueryData[0][1].pages.reduce<AddressTransactionWithTransfers[]>(
+      (acc, { results }) => {
+        return acc.concat(results);
+      },
+      []
+    );
+
+    const filteredTxs = txs?.filter(tx => activeFilters[tx.tx.tx_type]);
+    return formatTxsCSVData(filteredTxs, balance);
+  };
+
+  const formatTxsCSVData = (
+    txs: AddressTransactionWithTransfers[],
+    balance: string | number
+  ): CSVDownloadObjectType[] => {
+    let stxBalance = Number(balance);
+    return txs.map((transaction, i) => {
+      const {
+        stx_sent,
+        stx_received,
+        tx: { burn_block_time_iso, fee_rate, tx_id },
+      } = transaction;
+      if (i > 0) {
+        stxBalance += Number(stx_received) - Number(stx_sent);
+      }
+      return {
+        Date: burn_block_time_iso,
+        'Sent Amount': microToStacks(stx_sent),
+        'Sent Currency': 'STX',
+        'Received Amount': microToStacks(stx_received),
+        'Received Currency': 'STX',
+        'Fee Amount': microToStacks(fee_rate),
+        'Fee Currency': 'STX',
+        'Net Worth Amount': microStxToStx(stxBalance),
+        'Net Worth Currency': 'STX',
+        TxHash: tx_id,
+      };
+    });
+  };
+
+  return { getTxsCSVData, formatTxsCSVData };
+};