diff --git a/apps/evm/package.json b/apps/evm/package.json index 013d9a424..f4bdcccdd 100644 --- a/apps/evm/package.json +++ b/apps/evm/package.json @@ -35,19 +35,18 @@ "@react-aria/label": "^3.7.6", "@react-aria/utils": "catalog:", "@sentry/nextjs": "catalog:", - "@tanstack/react-query": "catalog:", "@tanstack/react-store": "catalog:", - "@tanstack/react-virtual": "catalog:", + "@tanstack/react-query": "catalog:", "@vercel/kv": "catalog:", "@wagmi/core": "catalog:", "big.js": "catalog:", "date-fns": "catalog:", "graphql-request": "catalog:", "lottie-react": "^2.4.0", + "react-calendly": "^4.3.1", "negotiator": "catalog:", "next": "catalog:", "react": "catalog:", - "react-calendly": "^4.3.1", "react-dom": "catalog:", "react-jazzicon": "^1.0.4", "react-multi-carousel": "^2.8.5", @@ -57,8 +56,8 @@ "use-count-up": "^3.0.1", "usehooks-ts": "catalog:", "viem": "catalog:", - "wagmi": "catalog:", - "yup": "catalog:" + "yup": "catalog:", + "wagmi": "catalog:" }, "devDependencies": { "@gobob/test-utils": "workspace:^", diff --git a/apps/evm/src/app/[lang]/(bridge)/components/TransactionList/TransactionList.style.tsx b/apps/evm/src/app/[lang]/(bridge)/components/TransactionList/TransactionList.style.tsx index 529405bc6..f1ce59026 100644 --- a/apps/evm/src/app/[lang]/(bridge)/components/TransactionList/TransactionList.style.tsx +++ b/apps/evm/src/app/[lang]/(bridge)/components/TransactionList/TransactionList.style.tsx @@ -5,15 +5,6 @@ type StyledExpandIconProps = { $isExpanded?: boolean; }; -type StyledVirtualizerProps = { - $height: number; -}; - -type StyledVirtualizerItemProps = { - $height: number; - $translateY: number; -}; - const StyledSection = styled(Card)` width: 100%; overflow: hidden; @@ -47,26 +38,6 @@ const StyledTransactionListWrapper = styled(Flex)` overflow: hidden; `; -const StyledTransactionListParent = styled.div` - height: 610px; - overflow: auto; -`; - -const StyledVirtualizer = styled.div` - width: 100%; - position: relative; - height: ${({ $height }) => `${$height}px`}; -`; - -const StyledVirtualizerItem = styled.div` - position: absolute; - top: 0; - left: 0; - width: 100%; - height: ${({ $height }) => `${$height}px`}; - transform: ${({ $translateY }) => `translateY(${$translateY}px)`}; -`; - const StyledDetailsButton = styled(Flex)` font: inherit; display: flex; @@ -88,8 +59,5 @@ export { StyledSpan, StyledSpinnerWrapper, StyledTransactionList, - StyledTransactionListWrapper, - StyledTransactionListParent, - StyledVirtualizer, - StyledVirtualizerItem + StyledTransactionListWrapper }; diff --git a/apps/evm/src/app/[lang]/(bridge)/components/TransactionList/TransactionList.tsx b/apps/evm/src/app/[lang]/(bridge)/components/TransactionList/TransactionList.tsx index a50400912..cf483d403 100644 --- a/apps/evm/src/app/[lang]/(bridge)/components/TransactionList/TransactionList.tsx +++ b/apps/evm/src/app/[lang]/(bridge)/components/TransactionList/TransactionList.tsx @@ -1,9 +1,8 @@ import { CardProps, Divider, Flex, H2, Link, P, Spinner } from '@gobob/ui'; import { Trans } from '@lingui/macro'; -import { useMemo, useRef } from 'react'; +import { Fragment, useMemo } from 'react'; import { useIsClient } from 'usehooks-ts'; import { useAccount } from 'wagmi'; -import { useVirtualizer } from '@tanstack/react-virtual'; import { TransactionItem } from './TransactionItem'; import { @@ -11,10 +10,7 @@ import { StyledSpan, StyledSpinnerWrapper, StyledTransactionList, - StyledTransactionListParent, - StyledTransactionListWrapper, - StyledVirtualizer, - StyledVirtualizerItem + StyledTransactionListWrapper } from './TransactionList.style'; import { chainL2 } from '@/constants'; @@ -40,19 +36,6 @@ const TransactionList = ({ txPendingUserAction, ...props }: TransactionListProps): JSX.Element => { - // The scrollable element for your list - const parentRef = useRef(null); - - // The virtualizer - const rowVirtualizer = useVirtualizer({ - count: data?.length || 0, - getScrollElement: () => parentRef.current, - estimateSize: () => 102, - paddingStart: 16, - paddingEnd: 16, - gap: 16 - }); - const { address, chain } = useAccount(); const isClient = useIsClient(); @@ -75,8 +58,6 @@ const TransactionList = ({ const txsUrl = address ? `${explorerUrl}/address/${address}` : `${explorerUrl}`; const hasData = !!data?.length; - const dividerStyle = { marginTop: '1rem' }; - return (

{title}

@@ -87,6 +68,7 @@ const TransactionList = ({ flex={1} gap='xl' justifyContent={isInitialLoading || !hasData ? 'center' : undefined} + paddingY='xl' > {!isClient || isInitialLoading ? ( @@ -98,24 +80,16 @@ const TransactionList = ({ ) : ( <> {hasData ? ( - - - {rowVirtualizer.getVirtualItems().map((virtualItem) => ( - - - {virtualItem.index < data.length - 1 && } - - ))} - - + data.map((transaction, idx) => ( + + + {idx < data.length - 1 && } + + )) ) : (

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a8a27a3eb..c3e756bb1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -57,9 +57,6 @@ catalogs: '@tanstack/react-store': specifier: ^0.5.6 version: 0.5.6 - '@tanstack/react-virtual': - specifier: ^3.11.2 - version: 3.11.2 '@types/big.js': specifier: ^6.2.0 version: 6.2.2 @@ -511,9 +508,6 @@ importers: '@tanstack/react-store': specifier: 'catalog:' version: 0.5.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - '@tanstack/react-virtual': - specifier: 'catalog:' - version: 3.11.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@vercel/kv': specifier: 'catalog:' version: 3.0.0 @@ -4924,18 +4918,9 @@ packages: react: ^18.2.0 react-dom: ^18.2.0 - '@tanstack/react-virtual@3.11.2': - resolution: {integrity: sha512-OuFzMXPF4+xZgx8UzJha0AieuMihhhaWG0tCqpp6tDzlFwOmNBPYMuLOtMJ1Tr4pXLHmgjcWhG6RlknY2oNTdQ==} - peerDependencies: - react: ^18.2.0 - react-dom: ^18.2.0 - '@tanstack/store@0.5.5': resolution: {integrity: sha512-EOSrgdDAJExbvRZEQ/Xhh9iZchXpMN+ga1Bnk8Nmygzs8TfiE6hbzThF+Pr2G19uHL6+DTDTHhJ8VQiOd7l4tA==} - '@tanstack/virtual-core@3.11.2': - resolution: {integrity: sha512-vTtpNt7mKCiZ1pwU9hfKPhpdVO2sVzFQsxoVBGtOSHxlrRRzYr8iQ2TlwbAcRYCcEiZ9ECAM8kBzH0v2+VzfKw==} - '@testing-library/cypress@10.0.2': resolution: {integrity: sha512-dKv95Bre5fDmNb9tOIuWedhGUryxGu1GWYWtXDqUsDPcr9Ekld0fiTb+pcBvSsFpYXAZSpmyEjhoXzLbhh06yQ==} engines: {node: '>=12', npm: '>=6'} @@ -7718,7 +7703,6 @@ packages: ethereum-bloom-filters@1.1.0: resolution: {integrity: sha512-J1gDRkLpuGNvWYzWslBQR9cDV4nd4kfvVTE/Wy4Kkm4yb3EYRSlyi0eB/inTsSTTVyA0+HyzHgbr95Fn/Z1fSw==} - deprecated: do not use this package use package versions above as this can miss some topics ethereum-cryptography@2.2.0: resolution: {integrity: sha512-hsm9JhfytIf8QME/3B7j4bc8V+VdTU+Vas1aJlvIS96ffoNAosudXvGoEvWmc7QZYdkC8mrMJz9r0fcbw7GyCA==} @@ -11686,7 +11670,6 @@ packages: sudo-prompt@9.2.1: resolution: {integrity: sha512-Mu7R0g4ig9TUuGSxJavny5Rv0egCEtpZRNMrZaYS1vxkiIxGiGUwoezU3LazIQ+KE04hTrTfNPgxU5gzi7F5Pw==} - deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info. summary@2.1.0: resolution: {integrity: sha512-nMIjMrd5Z2nuB2RZCKJfFMjgS3fygbeyGk9PxPPaJR1RIcyN9yn4A63Isovzm3ZtQuEkLBVgMdPup8UeLH7aQw==} @@ -19060,16 +19043,8 @@ snapshots: react-dom: 18.3.1(react@18.3.1) use-sync-external-store: 1.2.2(react@18.3.1) - '@tanstack/react-virtual@3.11.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': - dependencies: - '@tanstack/virtual-core': 3.11.2 - react: 18.3.1 - react-dom: 18.3.1(react@18.3.1) - '@tanstack/store@0.5.5': {} - '@tanstack/virtual-core@3.11.2': {} - '@testing-library/cypress@10.0.2(cypress@13.11.0)': dependencies: '@babel/runtime': 7.24.7 diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index 5cffaed51..7f9fb5d2b 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -45,7 +45,6 @@ catalog: '@tanstack/react-store': ^0.5.6 '@tanstack/react-query': ^5.35.1 - '@tanstack/react-virtual': ^3.11.2 usehooks-ts: ^3.1.0