From 00154374a231678c0eef821b54dc6594eeed4c39 Mon Sep 17 00:00:00 2001 From: Connor Barr Date: Tue, 6 Aug 2024 14:53:33 +0100 Subject: [PATCH] chore: removed old order history page --- .../complex/orders-history/index-old.tsx | 401 ------------------ 1 file changed, 401 deletions(-) delete mode 100644 packages/web/components/complex/orders-history/index-old.tsx diff --git a/packages/web/components/complex/orders-history/index-old.tsx b/packages/web/components/complex/orders-history/index-old.tsx deleted file mode 100644 index 9de6e2b425..0000000000 --- a/packages/web/components/complex/orders-history/index-old.tsx +++ /dev/null @@ -1,401 +0,0 @@ -import { - flexRender, - getCoreRowModel, - useReactTable, -} from "@tanstack/react-table"; -import { useWindowVirtualizer } from "@tanstack/react-virtual"; -import { observer } from "mobx-react-lite"; -import Image from "next/image"; -import Link from "next/link"; -import React, { useCallback, useEffect, useMemo } from "react"; - -import { Icon } from "~/components/assets"; -import { - OrderCellData, - tableColumns, -} from "~/components/complex/orders-history/columns"; -import { Spinner } from "~/components/loaders"; -import { GenericDisclaimer } from "~/components/tooltip/generic-disclaimer"; -import { EventName } from "~/config"; -import { useAmplitudeAnalytics, useTranslation } from "~/hooks"; -import { - useOrderbookAllActiveOrders, - useOrderbookClaimableOrders, -} from "~/hooks/limit-orders/use-orderbook"; -import { useStore } from "~/stores"; - -export const OrderHistory = observer(() => { - const { logEvent } = useAmplitudeAnalytics({ - onLoadEvent: [EventName.LimitOrder.pageViewed], - }); - const { accountStore } = useStore(); - const { t } = useTranslation(); - const wallet = accountStore.getWallet(accountStore.osmosisChainId); - - const { - orders, - isLoading, - fetchNextPage, - isFetchingNextPage, - hasNextPage, - refetch, - isRefetching, - } = useOrderbookAllActiveOrders({ - userAddress: wallet?.address ?? "", - pageSize: 10, - }); - - const { claimAllOrders } = useOrderbookClaimableOrders({ - userAddress: wallet?.address ?? "", - }); - - const tableData: OrderCellData[] = useMemo(() => { - return orders.map((o) => ({ - ...o, - isRefetching, - refetch: async () => refetch({ stale: false }), - })); - }, [orders, isRefetching, refetch]); - - const table = useReactTable({ - data: tableData, - columns: tableColumns, - getCoreRowModel: getCoreRowModel(), - }); - - const claimOrders = useCallback(async () => { - try { - logEvent([EventName.LimitOrder.claimOrdersStarted]); - await claimAllOrders(); - logEvent([EventName.LimitOrder.claimOrdersCompleted]); - } catch (error) { - if (error instanceof Error && error.message === "Request rejected") { - // don't log when the user rejects in wallet - return; - } - const { message } = error as Error; - logEvent([ - EventName.LimitOrder.claimOrdersFailed, - { errorMessage: message }, - ]); - } - }, [claimAllOrders, logEvent]); - - const filledOrders = useMemo( - () => - table - .getRowModel() - .rows.filter((row) => row.original.status === "filled"), - // eslint-disable-next-line react-hooks/exhaustive-deps - [table, tableData] - ); - - const pendingOrders = useMemo( - () => - table - .getRowModel() - .rows.filter( - (row) => - row.original.status === "open" || - row.original.status === "partiallyFilled" - ), - - // eslint-disable-next-line react-hooks/exhaustive-deps - [table, tableData] - ); - const pastOrders = useMemo( - () => - table - .getRowModel() - .rows.filter( - (row) => - row.original.status === "cancelled" || - row.original.status === "fullyClaimed" - ), - // eslint-disable-next-line react-hooks/exhaustive-deps - [table, tableData] - ); - - const { rows } = table.getRowModel(); - - const filledOrdersCount = useMemo(() => filledOrders.length, [filledOrders]); - const pendingOrdersCount = useMemo( - () => pendingOrders.length, - [pendingOrders] - ); - // Whether a filled header was added - const hasFilledOrders = useMemo( - () => (filledOrdersCount > 0 ? 1 : 0), - [filledOrdersCount] - ); - // Whether a pending header was added - const hasPendingOrders = useMemo( - () => (pendingOrdersCount > 0 ? 1 : 0), - [pendingOrdersCount] - ); - // Whether a past orders header was added - const hasPastOrders = useMemo( - () => (pastOrders.length > 0 ? 1 : 0), - [pastOrders] - ); - - const rowVirtualizer = useWindowVirtualizer({ - // To account for headers we add an additional row to virtualization per header added - count: rows.length + (hasFilledOrders + hasPendingOrders + hasPastOrders), - estimateSize: () => 84, - paddingStart: 272, - overscan: 3, - }); - - const virtualRows = rowVirtualizer.getVirtualItems(); - - const paddingTop = virtualRows.length > 0 ? virtualRows?.[0]?.start || 0 : 0; - const paddingBottom = - virtualRows.length > 0 - ? rowVirtualizer.getTotalSize() - - (virtualRows?.[virtualRows.length - 1]?.end || 0) - : 0; - - // pagination - const lastRow = rows[rows.length - 1]; - const lastVirtualRow = virtualRows[virtualRows.length - 1]; - const canLoadMore = !isLoading && !isFetchingNextPage && hasNextPage; - useEffect(() => { - if ( - lastRow && - lastVirtualRow && - lastRow.index === - lastVirtualRow.index - - hasFilledOrders - - hasPendingOrders - - (pastOrders.length > 0 ? 1 : 0) && - canLoadMore - ) - fetchNextPage(); - }, [ - lastRow, - lastVirtualRow, - canLoadMore, - fetchNextPage, - pastOrders, - hasFilledOrders, - hasPendingOrders, - ]); - - const filledOrderRows = useMemo(() => { - const minIndex = 0; - const maxIndex = filledOrdersCount + hasFilledOrders - 1; - return virtualRows - .filter((row) => row.index > minIndex && row.index <= maxIndex) - .map((virtualRow) => { - const row = rows[virtualRow.index - 1]; - return row; - }); - }, [filledOrdersCount, rows, virtualRows, hasFilledOrders]); - - const pendingOrderRows = useMemo(() => { - // Pending orders only adjust for any filled orders and if there was a filled orders header - const minIndex = filledOrdersCount + hasFilledOrders; - const maxIndex = filledOrdersCount + hasFilledOrders + pendingOrdersCount; - return virtualRows - .filter((row) => row.index > minIndex && row.index <= maxIndex) - .map((virtualRow) => { - const row = rows[virtualRow.index - (1 + hasFilledOrders)]; - return row; - }); - }, [ - filledOrdersCount, - hasFilledOrders, - pendingOrdersCount, - rows, - virtualRows, - ]); - const pastOrderRows = useMemo(() => { - // For past orders we must account for all of the previous orders and if they added headers - const minIndex = - filledOrdersCount + - hasFilledOrders + - pendingOrdersCount + - hasPendingOrders; - // Past orders fill the rest of the array so we account for that plus and headers - const maxIndex = virtualRows.length - 1; - return virtualRows - .filter((row) => row.index > minIndex && row.index <= maxIndex) - .map((virtualRow) => { - const row = - rows[virtualRow.index - (1 + hasFilledOrders + hasPendingOrders)]; - return row; - }); - }, [ - filledOrdersCount, - hasFilledOrders, - hasPendingOrders, - pendingOrdersCount, - rows, - virtualRows, - ]); - - if (isLoading) { - return ( -
- -
- ); - } - - if (orders.length === 0) { - return ( -
- ion thumbs up -
{t("limitOrders.historyTable.emptyState.title")}
-

- {t("limitOrders.historyTable.emptyState.subtitle")} - - {t("limitOrders.startTrading")} - -

-
- ); - } - - return ( -
- - - {table.getHeaderGroups().map((headerGroup) => ( - - {headerGroup.headers.map((header) => ( - - ))} - - ))} - - - {paddingTop > 0 && paddingTop - 272 > 0 && ( - - - )} - {filledOrdersCount > 0 && ( - <> - - - - {filledOrderRows.map((row) => { - return ( - - {row.getVisibleCells().map((cell) => ( - - ))} - - ); - })} - - )} - {pendingOrdersCount > 0 && ( - <> -
{t("limitOrders.pending")}
- {pendingOrderRows.map((row) => { - return ( - - {row.getVisibleCells().map((cell) => ( - - ))} - - ); - })} - - )} - {pastOrders.length > 0 && ( - <> -
{t("limitOrders.past")}
- {pastOrderRows.map((row) => { - return ( - - {row.getVisibleCells().map((cell) => ( - - ))} - - ); - })} - - )} - {isFetchingNextPage && ( - - - - )} - {paddingBottom > 0 && ( - - - )} - -
- {flexRender( - header.column.columnDef.header, - header.getContext() - )} -
-
-
-
-
-
{t("limitOrders.filledOrdersToClaim")}
-
- {filledOrders.length} -
-
- -
- -
- -
- -
-
- {flexRender( - cell.column.columnDef.cell, - cell.getContext() - )} -
- {flexRender( - cell.column.columnDef.cell, - cell.getContext() - )} -
- {flexRender( - cell.column.columnDef.cell, - cell.getContext() - )} -
- -
-
-
- ); -});