From d3c62d99203506544733e1ca60d8c50d1b9df419 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rui=20Sim=C3=A3o?= <rui.daniel.simao@gmail.com>
Date: Wed, 22 Jan 2025 14:53:37 +0000
Subject: [PATCH] feat: add filters

---
 apps/evm/package.json                         |   1 -
 .../src/app/[lang]/(bridge)/bridge/Bridge.tsx |  10 +-
 apps/evm/src/components/Layout/Header.tsx     |   2 +-
 apps/evm/src/components/Layout/Sidebar.tsx    |  13 +-
 .../ProfileActivity/ProfileActivity.style.tsx |  85 +-------
 .../ProfileActivity/ProfileActivity.tsx       |  83 +++-----
 .../ProfileActivity/ProfileActivityFilter.tsx |  73 -------
 .../ProfileActivityFilters.tsx                | 193 ++++++++++++++++++
 .../ProfileActivity/TransactionDetails.tsx    |  13 +-
 .../transactions/useGetGatewayTransactions.ts |   1 -
 apps/evm/src/lib/store.ts                     |  16 +-
 pnpm-lock.yaml                                |  23 ---
 pnpm-workspace.yaml                           |   1 -
 13 files changed, 253 insertions(+), 261 deletions(-)
 delete mode 100644 apps/evm/src/components/ProfileActivity/ProfileActivityFilter.tsx
 create mode 100644 apps/evm/src/components/ProfileActivity/ProfileActivityFilters.tsx

diff --git a/apps/evm/package.json b/apps/evm/package.json
index 21b59325c..51a7ec3de 100644
--- a/apps/evm/package.json
+++ b/apps/evm/package.json
@@ -37,7 +37,6 @@
     "@sentry/nextjs": "catalog:",
     "@tanstack/react-query": "catalog:",
     "@tanstack/react-store": "catalog:",
-    "@tanstack/react-virtual": "catalog:",
     "@vercel/kv": "catalog:",
     "@wagmi/core": "catalog:",
     "big.js": "catalog:",
diff --git a/apps/evm/src/app/[lang]/(bridge)/bridge/Bridge.tsx b/apps/evm/src/app/[lang]/(bridge)/bridge/Bridge.tsx
index 63c124f63..173755499 100644
--- a/apps/evm/src/app/[lang]/(bridge)/bridge/Bridge.tsx
+++ b/apps/evm/src/app/[lang]/(bridge)/bridge/Bridge.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { ChainId, getChainIdByChainName, getChainName } from '@gobob/chains';
-import { Card, Flex, Spinner, Tabs, TabsItem, Span, SolidClock, Button } from '@gobob/ui';
+import { Card, Flex, Spinner, Tabs, TabsItem, Span, SolidClock, Button, Skeleton } from '@gobob/ui';
 import { Trans } from '@lingui/macro';
 import { useRouter } from 'next/navigation';
 import { Key, useCallback, useEffect, useMemo, useState } from 'react';
@@ -56,7 +56,7 @@ interface Props {
 const Bridge = ({ searchParams }: Props) => {
   const router = useRouter();
 
-  const { txPendingUserAction } = useGetBridgeTransactions();
+  const { txPendingUserAction, isPending } = useGetBridgeTransactions();
   const { open } = useConnectModal();
 
   const { address: evmAddress } = useAccount();
@@ -130,7 +130,7 @@ const Bridge = ({ searchParams }: Props) => {
   const handleOpenProfile = () => {
     store.setState((state) => ({
       ...state,
-      shared: { ...state.shared, profile: { isOpen: true, selectedTab: 'activity' } }
+      shared: { ...state.shared, profile: { ...state.shared.profile, isOpen: true, selectedTab: 'activity' } }
     }));
   };
 
@@ -166,7 +166,9 @@ const Bridge = ({ searchParams }: Props) => {
           <Flex justifyContent='flex-end'>
             <Button size='s' style={{ gap: 4, alignItems: 'center' }} onPress={handleActivity}>
               <SolidClock />
-              {txPendingUserAction && txPendingUserAction > 0 ? (
+              {isPending ? (
+                <Skeleton height='1.5rem' width='5rem' />
+              ) : txPendingUserAction && txPendingUserAction > 0 ? (
                 <Card
                   alignItems='center'
                   background='primary-500'
diff --git a/apps/evm/src/components/Layout/Header.tsx b/apps/evm/src/components/Layout/Header.tsx
index 237085f7b..0460ecd02 100644
--- a/apps/evm/src/components/Layout/Header.tsx
+++ b/apps/evm/src/components/Layout/Header.tsx
@@ -89,10 +89,10 @@ const Header = (): JSX.Element => {
                     <Trans>Multisig</Trans>
                   </NavItem>
                 </Nav>
+                <SocialsGroup hidden={isMobile} variant='ghost' />
               </PopoverBody>
             </PopoverContent>
           </Popover>
-          <SocialsGroup hidden={isMobile} variant='ghost' />
         </Flex>
       </Flex>
       <Flex alignItems='center' gap='xl'>
diff --git a/apps/evm/src/components/Layout/Sidebar.tsx b/apps/evm/src/components/Layout/Sidebar.tsx
index 6f79afd62..10130d672 100644
--- a/apps/evm/src/components/Layout/Sidebar.tsx
+++ b/apps/evm/src/components/Layout/Sidebar.tsx
@@ -2,15 +2,13 @@
 
 import {
   Bars3,
-  Button,
   DrawerButton,
   DrawerContent,
   DrawerOverlay,
   DrawerPortal,
   DrawerRoot,
   DrawerTitle,
-  Flex,
-  XMark
+  Flex
 } from '@gobob/ui';
 import { t, Trans } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
@@ -44,13 +42,8 @@ const Sidebar = ({ isMobile }: { isMobile: boolean }): JSX.Element | null => {
             </DrawerTitle>
             <Flex direction='column' elementType='nav' style={{ height: '100%' }}>
               <Flex direction='column' flex={1} gap='4xl'>
-                <Flex alignItems='center' justifyContent='space-between'>
-                  <Logo href={RoutesPath.HOME} onPress={handleClose} />
-                  <Button isIconOnly variant='ghost' onPress={handleClose}>
-                    <XMark size='s' />
-                  </Button>
-                </Flex>
-                <Flex direction='column' flex={1} justifyContent='space-between'>
+                <Logo href={RoutesPath.HOME} onPress={handleClose} />
+                <Flex direction='column' flex={1} gap='lg' justifyContent='space-between'>
                   <Nav direction='column' gap='3xl'>
                     <NavItem href={RoutesPath.BRIDGE} onPress={handleClose}>
                       <Trans>Bridge</Trans>
diff --git a/apps/evm/src/components/ProfileActivity/ProfileActivity.style.tsx b/apps/evm/src/components/ProfileActivity/ProfileActivity.style.tsx
index 283b061a0..bb27e5ad1 100644
--- a/apps/evm/src/components/ProfileActivity/ProfileActivity.style.tsx
+++ b/apps/evm/src/components/ProfileActivity/ProfileActivity.style.tsx
@@ -1,79 +1,15 @@
-import { ArrowDownCircle, Button, Card, Flex, Span, UnstyledButton, hexToRgba } from '@gobob/ui';
+import { Card, Flex, UnstyledButton, hexToRgba } from '@gobob/ui';
 import styled from 'styled-components';
 
-type StyledExpandIconProps = {
-  $isExpanded?: boolean;
-};
-
 type StyledTransactionItemCardProps = {
   $isExpanded?: boolean;
   $isShowMoreHovered?: boolean;
 };
 
-type StyledVirtualizerProps = {
-  $height: number;
-};
-
-type StyledVirtualizerItemProps = {
-  $translateY: number;
-};
-
-const StyledSpan = styled(Span)`
-  display: inline-flex;
-  align-items: center;
-  position: relative;
-  margin-left: ${({ theme }) => theme.spacing('md')};
-  padding: 0 ${({ theme }) => theme.spacing('s')};
-  height: 24px;
-  border-radius: ${({ theme }) => theme.rounded('full')};
-`;
-
-const StyledSpinnerWrapper = styled.span`
-  position: absolute;
-  top: 0;
-  left: 50%;
-  transform: translateX(-50%);
-`;
-
 const StyledTransactionList = styled(Flex)`
   flex: 1 1 auto;
 `;
 
-const StyledTransactionListWrapper = styled(Flex)`
-  overflow: hidden;
-`;
-
-const StyledTransactionListParent = styled.div`
-  height: 100%;
-  overflow: auto;
-`;
-
-const StyledVirtualizer = styled.div<StyledVirtualizerProps>`
-  width: 100%;
-  position: relative;
-  height: ${({ $height }) => `${$height}px`};
-`;
-
-const StyledVirtualizerItem = styled.div<StyledVirtualizerItemProps>`
-  position: absolute;
-  width: 100%;
-  transform: ${({ $translateY }) => `translateY(${$translateY}px)`};
-`;
-
-const StyledDetailsButton = styled(Flex)`
-  font: inherit;
-  display: flex;
-  width: 100%;
-  flex-direction: column;
-  gap: ${({ theme }) => theme.spacing('md')};
-  padding: ${({ theme }) => `${theme.spacing('md')} 0`};
-`;
-
-const StyledExpandIcon = styled(ArrowDownCircle)<StyledExpandIconProps>`
-  ${({ theme }) => theme.transition('common', 'normal')};
-  transform: ${({ $isExpanded }) => ($isExpanded ? 'rotate(-180deg)' : 'rotate(0deg)')};
-`;
-
 const StyledShowMore = styled(UnstyledButton)`
   display: flex;
   justify-content: center;
@@ -103,21 +39,4 @@ const StyledTransactionItemCard = styled(Card)<StyledTransactionItemCardProps>`
     `linear-gradient(${theme.color('grey-400')} 70%, ${theme.color($isShowMoreHovered ? 'grey-700' : 'grey-500')} 100%)`};
 `;
 
-const StyledFilterButton = styled(Button)`
-  gap: ${({ theme }) => theme.spacing('s')};
-`;
-
-export {
-  StyledDetailsButton,
-  StyledExpandIcon,
-  StyledFilterButton,
-  StyledShowMore,
-  StyledSpan,
-  StyledSpinnerWrapper,
-  StyledTransactionItemCard,
-  StyledTransactionList,
-  StyledTransactionListParent,
-  StyledTransactionListWrapper,
-  StyledVirtualizer,
-  StyledVirtualizerItem
-};
+export { StyledShowMore, StyledTransactionItemCard, StyledTransactionList };
diff --git a/apps/evm/src/components/ProfileActivity/ProfileActivity.tsx b/apps/evm/src/components/ProfileActivity/ProfileActivity.tsx
index 731608add..362d55026 100644
--- a/apps/evm/src/components/ProfileActivity/ProfileActivity.tsx
+++ b/apps/evm/src/components/ProfileActivity/ProfileActivity.tsx
@@ -1,12 +1,17 @@
 import { Flex, P, Skeleton } from '@gobob/ui';
 import { Trans } from '@lingui/macro';
-import { useEffect, useMemo, useRef } from 'react';
-import { useConfig } from 'wagmi';
 import { useStore } from '@tanstack/react-store';
 import { watchAccount } from '@wagmi/core';
+import { useEffect, useMemo, useRef } from 'react';
+import { useConfig } from 'wagmi';
 
 import { StyledTransactionList } from './ProfileActivity.style';
-import { ProfileActivityFilter, StatusFilterOption, TransactionTypeFilterOption } from './ProfileActivityFilter';
+import {
+  ProfileActivityFilters,
+  ProfileActivityFiltersData,
+  ProfileActivityStatusFilterOption,
+  ProfileActivityTypeFilterOption
+} from './ProfileActivityFilters';
 import { TransactionItem } from './TransactionItem';
 
 import { useGetBridgeTransactions, useGetGatewayTransactions } from '@/hooks';
@@ -14,10 +19,7 @@ import { store } from '@/lib/store';
 import { BridgeTransactionStatus, GatewayTransactionType, TransactionType } from '@/types';
 
 const ProfileActivity = (): JSX.Element => {
-  const { status = StatusFilterOption.ANY_STATUS, type = TransactionTypeFilterOption.ALL_TRANSACTIONS } = useStore(
-    store,
-    (state) => state.shared.profile.activityFilters
-  );
+  const { filters } = useStore(store, (state) => state.shared.profile.transactions);
 
   const config = useConfig();
 
@@ -56,38 +58,38 @@ const ProfileActivity = (): JSX.Element => {
   }, [isInitialLoading, isLoading]);
 
   const dataByType = useMemo(() => {
-    switch (type) {
-      case TransactionTypeFilterOption.BTC_BRIDGE:
+    switch (filters.type) {
+      case ProfileActivityTypeFilterOption.BTC_BRIDGE:
         return gateway.data?.filter((item) => item.subType === GatewayTransactionType.BRIDGE) || [];
-      case TransactionTypeFilterOption.STRATEGIES:
+      case ProfileActivityTypeFilterOption.STRATEGIES:
         return gateway.data?.filter((item) => item.subType === GatewayTransactionType.STRATEGY) || [];
-      case TransactionTypeFilterOption.NATIVE_BRIDGE:
+      case ProfileActivityTypeFilterOption.NATIVE_BRIDGE:
         return bridge.data;
       default:
-      case TransactionTypeFilterOption.ALL_TRANSACTIONS:
+      case ProfileActivityTypeFilterOption.ALL_TRANSACTIONS:
         return [...bridge.data, ...(gateway?.data || [])];
     }
-  }, [bridge.data, gateway.data, type]);
+  }, [bridge.data, gateway.data, filters.type]);
 
   const dataByStatus = useMemo(() => {
-    switch (status) {
-      case StatusFilterOption.PENDING:
+    switch (filters.status) {
+      case ProfileActivityStatusFilterOption.PENDING:
         return dataByType.filter((item) =>
           item.type === TransactionType.Bridge
             ? item.status !== BridgeTransactionStatus.RELAYED
             : item.status !== 'l2-confirmation'
         );
-      case StatusFilterOption.COMPLETE:
+      case ProfileActivityStatusFilterOption.COMPLETE:
         return dataByType.filter((item) =>
           item.type === TransactionType.Bridge
             ? item.status === BridgeTransactionStatus.RELAYED
             : item.status === 'l2-confirmation'
         );
-      case StatusFilterOption.FAILED:
+      case ProfileActivityStatusFilterOption.FAILED:
         return dataByType.filter((item) =>
           item.type === TransactionType.Bridge ? item.status === BridgeTransactionStatus.FAILED_L1_TO_L2_MESSAGE : false
         );
-      case StatusFilterOption.NEEDED_ACTION:
+      case ProfileActivityStatusFilterOption.NEEDED_ACTION:
         return dataByType.filter((item) =>
           item.type === TransactionType.Bridge
             ? item.status === BridgeTransactionStatus.READY_TO_PROVE ||
@@ -96,10 +98,10 @@ const ProfileActivity = (): JSX.Element => {
         );
 
       default:
-      case StatusFilterOption.ANY_STATUS:
+      case ProfileActivityStatusFilterOption.ANY_STATUS:
         return dataByType;
     }
-  }, [dataByType, status]);
+  }, [dataByType, filters.status]);
 
   const sortedData = useMemo(() => {
     return dataByStatus?.sort((a, b) => b.date.getTime() - a.date.getTime());
@@ -108,38 +110,8 @@ const ProfileActivity = (): JSX.Element => {
   return (
     <Flex direction='column' marginTop='md'>
       <Flex wrap gap='s' justifyContent='flex-end'>
-        <ProfileActivityFilter<StatusFilterOption>
-          label={<Trans>Status</Trans>}
-          options={[
-            { children: <Trans>Any Status</Trans>, key: StatusFilterOption.ANY_STATUS },
-            { children: <Trans>Pending</Trans>, key: StatusFilterOption.PENDING },
-            { children: <Trans>Needed Action</Trans>, key: StatusFilterOption.NEEDED_ACTION },
-            { children: <Trans>Complete</Trans>, key: StatusFilterOption.COMPLETE },
-            { children: <Trans>Failed</Trans>, key: StatusFilterOption.FAILED }
-          ]}
-          value={status as StatusFilterOption}
-          onSelectionChange={(value) =>
-            store.setState((state) => ({
-              ...state,
-              shared: {
-                ...state.shared,
-                profile: {
-                  ...state.shared.profile,
-                  activityFilters: { ...state.shared.profile.activityFilters, status: value }
-                }
-              }
-            }))
-          }
-        />
-        <ProfileActivityFilter<TransactionTypeFilterOption>
-          label={<Trans>Transaction type</Trans>}
-          options={[
-            { children: <Trans>Any Transaction</Trans>, key: TransactionTypeFilterOption.ALL_TRANSACTIONS },
-            { children: <Trans>Native Bridge</Trans>, key: TransactionTypeFilterOption.NATIVE_BRIDGE },
-            { children: <Trans>BTC Bridge</Trans>, key: TransactionTypeFilterOption.BTC_BRIDGE },
-            { children: <Trans>Staking</Trans>, key: TransactionTypeFilterOption.STRATEGIES }
-          ]}
-          value={type as TransactionTypeFilterOption}
+        <ProfileActivityFilters
+          value={filters as ProfileActivityFiltersData}
           onSelectionChange={(value) =>
             store.setState((state) => ({
               ...state,
@@ -147,14 +119,17 @@ const ProfileActivity = (): JSX.Element => {
                 ...state.shared,
                 profile: {
                   ...state.shared.profile,
-                  activityFilters: { ...state.shared.profile.activityFilters, type: value }
+                  transactions: {
+                    ...state.shared.profile.transactions,
+                    filters: value
+                  }
                 }
               }
             }))
           }
         />
       </Flex>
-      <StyledTransactionList direction='column' elementType='ul' flex={1} gap='md' marginTop='md'>
+      <StyledTransactionList direction='column' elementType='ul' flex={1} marginTop='md'>
         {isInitialLoading ? (
           Array(8)
             .fill(undefined)
diff --git a/apps/evm/src/components/ProfileActivity/ProfileActivityFilter.tsx b/apps/evm/src/components/ProfileActivity/ProfileActivityFilter.tsx
deleted file mode 100644
index 5bb06e81c..000000000
--- a/apps/evm/src/components/ProfileActivity/ProfileActivityFilter.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import { SolidFunnel, List, ListItem, Popover, PopoverBody, PopoverContent, PopoverTrigger, Span } from '@gobob/ui';
-import { ReactNode, useState } from 'react';
-
-import { StyledFilterButton } from './ProfileActivity.style';
-
-enum StatusFilterOption {
-  ANY_STATUS = 'default',
-  PENDING = 'pending',
-  NEEDED_ACTION = 'needed-action',
-  COMPLETE = 'complete',
-  FAILED = 'failed'
-}
-
-enum TransactionTypeFilterOption {
-  ALL_TRANSACTIONS = 'default',
-  NATIVE_BRIDGE = 'native-bridge',
-  BTC_BRIDGE = 'btc-bridge',
-  STRATEGIES = 'strategies'
-}
-
-type ProfileActivityFilterProps<T extends StatusFilterOption | TransactionTypeFilterOption> = {
-  label: ReactNode;
-  value: T;
-  options: Array<{ children: ReactNode; key: T }>;
-  onSelectionChange: (value: T) => void;
-};
-
-const ProfileActivityFilter = <T extends StatusFilterOption | TransactionTypeFilterOption>({
-  label,
-  options,
-  value,
-  onSelectionChange
-}: ProfileActivityFilterProps<T>): JSX.Element => {
-  const [isOpen, setOpen] = useState(false);
-
-  return (
-    <Popover isOpen={isOpen} onOpenChange={setOpen}>
-      <PopoverTrigger>
-        <StyledFilterButton size='s' variant='ghost'>
-          <SolidFunnel color='grey-50' size='xs' />
-          <Span size='s'>{options.find((option) => (option.key as T) === value)?.children}</Span>
-        </StyledFilterButton>
-      </PopoverTrigger>
-      <PopoverContent>
-        <PopoverBody gap='xs' padding='lg'>
-          <Span color='grey-50' size='s' style={{ marginLeft: 12, marginRight: 12 }}>
-            {label}:
-          </Span>
-          <List
-            gap='xs'
-            selectedKeys={value ? [value] : undefined}
-            selectionMode='single'
-            onSelectionChange={(key) => {
-              const [selectedKey] = [...key];
-
-              onSelectionChange(selectedKey as T);
-
-              setOpen(false);
-            }}
-          >
-            {options.map((option) => (
-              <ListItem key={option.key} textValue={option.key}>
-                <Span size='s'>{option.children}</Span>
-              </ListItem>
-            ))}
-          </List>
-        </PopoverBody>
-      </PopoverContent>
-    </Popover>
-  );
-};
-
-export { ProfileActivityFilter, StatusFilterOption, TransactionTypeFilterOption };
diff --git a/apps/evm/src/components/ProfileActivity/ProfileActivityFilters.tsx b/apps/evm/src/components/ProfileActivity/ProfileActivityFilters.tsx
new file mode 100644
index 000000000..9bc1c8eb1
--- /dev/null
+++ b/apps/evm/src/components/ProfileActivity/ProfileActivityFilters.tsx
@@ -0,0 +1,193 @@
+import {
+  Button,
+  Card,
+  Flex,
+  List,
+  ListItem,
+  Popover,
+  PopoverBody,
+  PopoverContent,
+  PopoverTrigger,
+  SolidFunnel,
+  Span
+} from '@gobob/ui';
+import { Trans } from '@lingui/macro';
+import { useEffect, useId, useState } from 'react';
+
+enum ProfileActivityStatusFilterOption {
+  ANY_STATUS = 'default',
+  PENDING = 'pending',
+  NEEDED_ACTION = 'needed-action',
+  COMPLETE = 'complete',
+  FAILED = 'failed'
+}
+
+enum ProfileActivityTypeFilterOption {
+  ALL_TRANSACTIONS = 'default',
+  NATIVE_BRIDGE = 'native-bridge',
+  BTC_BRIDGE = 'btc-bridge',
+  STRATEGIES = 'strategies'
+}
+
+const statusFilterOptions = [
+  { children: <Trans>Any Status</Trans>, key: ProfileActivityStatusFilterOption.ANY_STATUS },
+  { children: <Trans>Pending</Trans>, key: ProfileActivityStatusFilterOption.PENDING },
+  { children: <Trans>Needed Action</Trans>, key: ProfileActivityStatusFilterOption.NEEDED_ACTION },
+  { children: <Trans>Complete</Trans>, key: ProfileActivityStatusFilterOption.COMPLETE },
+  { children: <Trans>Failed</Trans>, key: ProfileActivityStatusFilterOption.FAILED }
+];
+
+const typeFilterOptions = [
+  { children: <Trans>Any Transaction</Trans>, key: ProfileActivityTypeFilterOption.ALL_TRANSACTIONS },
+  { children: <Trans>Native Bridge</Trans>, key: ProfileActivityTypeFilterOption.NATIVE_BRIDGE },
+  { children: <Trans>BTC Bridge</Trans>, key: ProfileActivityTypeFilterOption.BTC_BRIDGE },
+  { children: <Trans>Staking</Trans>, key: ProfileActivityTypeFilterOption.STRATEGIES }
+];
+
+type ProfileActivityFiltersData = { type: ProfileActivityTypeFilterOption; status: ProfileActivityStatusFilterOption };
+
+type ProfileActivityFiltersProps = {
+  value: ProfileActivityFiltersData;
+  onSelectionChange: (filters: ProfileActivityFiltersData) => void;
+};
+
+const ProfileActivityFilters = ({ value, onSelectionChange }: ProfileActivityFiltersProps): JSX.Element => {
+  const statusLabelId = useId();
+  const typeLabelId = useId();
+
+  const [state, setState] = useState<ProfileActivityFiltersData>({
+    status: value.status || ProfileActivityStatusFilterOption.ANY_STATUS,
+    type: value.type || ProfileActivityTypeFilterOption.ALL_TRANSACTIONS
+  });
+  const [isOpen, setOpen] = useState(false);
+
+  useEffect(() => {}, [isOpen]);
+
+  const handleApply = () => {
+    onSelectionChange(state);
+    setOpen(false);
+  };
+
+  const handleOpenChange = (isOpen: boolean) => {
+    setOpen(isOpen);
+
+    if (!isOpen && (state.status !== value.status || state.type !== value.type)) {
+      setState(value);
+    }
+  };
+
+  const handleClear = () => {
+    const clearState = {
+      status: ProfileActivityStatusFilterOption.ANY_STATUS,
+      type: ProfileActivityTypeFilterOption.ALL_TRANSACTIONS
+    };
+
+    setState(clearState);
+
+    onSelectionChange(clearState);
+    setOpen(false);
+  };
+
+  const isFiltering =
+    (value.status && value.status !== ProfileActivityStatusFilterOption.ANY_STATUS) ||
+    (value.type && value.type !== ProfileActivityTypeFilterOption.ALL_TRANSACTIONS);
+
+  const statusLabel = statusFilterOptions.find(
+    (item) => item.key === (value.status || ProfileActivityStatusFilterOption.ANY_STATUS)
+  )?.children;
+  const typeLabel = typeFilterOptions.find(
+    (item) => item.key === (value.type || ProfileActivityTypeFilterOption.ALL_TRANSACTIONS)
+  )?.children;
+
+  return (
+    <Popover isOpen={isOpen} onOpenChange={handleOpenChange}>
+      <PopoverTrigger>
+        <Card
+          isHoverable
+          isPressable
+          alignItems='center'
+          background={isFiltering ? 'primary-500' : 'grey-500'}
+          direction='row'
+          gap='s'
+          paddingX='md'
+          paddingY='s'
+          rounded='md'
+        >
+          <SolidFunnel size='xxs' />
+          <Span size='xs'>
+            {isFiltering ? (
+              statusLabel && typeLabel ? (
+                <>
+                  {statusLabel} | {typeLabel}
+                </>
+              ) : (
+                statusLabel || typeLabel
+              )
+            ) : (
+              <Trans>Filter by</Trans>
+            )}
+          </Span>
+        </Card>
+      </PopoverTrigger>
+      <PopoverContent>
+        <PopoverBody gap='xs' padding='none'>
+          <Flex gap='s' paddingTop='lg' paddingX='xl'>
+            <Flex direction='column' gap='xs'>
+              <Span color='grey-50' id={statusLabelId} size='xs'>
+                <Trans>Status</Trans>:
+              </Span>
+              <List
+                aria-labelledby={statusLabelId}
+                selectedKeys={state.status ? [state.status] : undefined}
+                selectionMode='single'
+                onSelectionChange={(key) => {
+                  const [selectedKey] = [...key];
+
+                  setState((s) => ({ ...s, status: selectedKey as ProfileActivityStatusFilterOption }));
+                }}
+              >
+                {statusFilterOptions.map((option) => (
+                  <ListItem key={option.key} textValue={option.key}>
+                    <Span size='xs'>{option.children}</Span>
+                  </ListItem>
+                ))}
+              </List>
+            </Flex>
+            <Flex direction='column' gap='xs'>
+              <Span color='grey-50' id={typeLabelId} size='xs'>
+                <Trans>Type</Trans>:
+              </Span>
+              <List
+                aria-labelledby={typeLabelId}
+                selectedKeys={state.type ? [state.type] : undefined}
+                selectionMode='single'
+                onSelectionChange={(key) => {
+                  const [selectedKey] = [...key];
+
+                  setState((s) => ({ ...s, type: selectedKey as ProfileActivityTypeFilterOption }));
+                }}
+              >
+                {typeFilterOptions.map((option) => (
+                  <ListItem key={option.key} textValue={option.key}>
+                    <Span size='xs'>{option.children}</Span>
+                  </ListItem>
+                ))}
+              </List>
+            </Flex>
+          </Flex>
+          <Flex gap='md' justifyContent='flex-end' paddingBottom='lg' paddingX='xl'>
+            <Button size='s' variant='ghost' onPress={handleClear}>
+              <Trans>Clear</Trans>
+            </Button>
+            <Button color='primary' size='s' onPress={handleApply}>
+              <Trans>Apply</Trans>
+            </Button>
+          </Flex>
+        </PopoverBody>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export { ProfileActivityFilters, ProfileActivityStatusFilterOption, ProfileActivityTypeFilterOption };
+export type { ProfileActivityFiltersData };
diff --git a/apps/evm/src/components/ProfileActivity/TransactionDetails.tsx b/apps/evm/src/components/ProfileActivity/TransactionDetails.tsx
index bc3c1eded..e2e012685 100644
--- a/apps/evm/src/components/ProfileActivity/TransactionDetails.tsx
+++ b/apps/evm/src/components/ProfileActivity/TransactionDetails.tsx
@@ -1,11 +1,11 @@
 import { ChainId } from '@gobob/chains';
 import { Currency, CurrencyAmount } from '@gobob/currency';
-import { Avatar, Card, Flex, P } from '@gobob/ui';
+import { Avatar, Card, Flex, P, Span } from '@gobob/ui';
 import { Trans } from '@lingui/macro';
 import { formatDistanceToNow } from 'date-fns';
 import { useParams } from 'next/navigation';
 
-import { AmountLabel, ChainAsset, ChainLogo } from '@/components';
+import { ChainAsset, ChainLogo } from '@/components';
 import { TransactionDirection } from '@/types';
 import { getLocale } from '@/utils';
 
@@ -41,7 +41,7 @@ const TransactionDetails = ({
       ) : (
         <Card background='grey-700' padding='2xl' rounded='full' />
       )}
-      <Flex direction='column' flex={1}>
+      <Flex direction='column' flex={1} style={{ overflow: 'hidden' }}>
         <Flex alignItems='center' justifyContent='space-between'>
           <P color='grey-50' size='xs' weight='semibold'>
             <Trans>
@@ -57,7 +57,12 @@ const TransactionDetails = ({
           {isPending ? (
             <Trans>Pending</Trans>
           ) : amount ? (
-            <AmountLabel hidePrice amount={amount} />
+            <Flex wrap elementType='span'>
+              <Span size='inherit' style={{ marginRight: 4 }}>
+                {amount.toExact()}
+              </Span>
+              <Span size='inherit'>{amount.currency.symbol}</Span>
+            </Flex>
           ) : (
             <Trans>Unknown</Trans>
           )}
diff --git a/apps/evm/src/hooks/transactions/useGetGatewayTransactions.ts b/apps/evm/src/hooks/transactions/useGetGatewayTransactions.ts
index 07fb45d16..735b0e494 100644
--- a/apps/evm/src/hooks/transactions/useGetGatewayTransactions.ts
+++ b/apps/evm/src/hooks/transactions/useGetGatewayTransactions.ts
@@ -98,4 +98,3 @@ const useGetGatewayTransactions = ({ query }: UseFeeRateProps = {}) => {
 };
 
 export { useGetGatewayTransactions };
-export type { GatewayTransaction, GetGatewayTransactionsReturnType };
diff --git a/apps/evm/src/lib/store.ts b/apps/evm/src/lib/store.ts
index d4449ad6b..86f452c91 100644
--- a/apps/evm/src/lib/store.ts
+++ b/apps/evm/src/lib/store.ts
@@ -7,9 +7,11 @@ type SharedStore = {
   profile: {
     isOpen: boolean;
     selectedTab: 'wallet' | 'activity';
-    activityFilters: {
-      type?: string;
-      status?: string;
+    transactions: {
+      filters: {
+        type?: string;
+        status?: string;
+      };
     };
   };
 };
@@ -41,9 +43,11 @@ const store = new StoreLib<Store>({
     profile: {
       isOpen: false,
       selectedTab: 'wallet',
-      activityFilters: {
-        status: undefined,
-        type: undefined
+      transactions: {
+        filters: {
+          status: undefined,
+          type: undefined
+        }
       }
     }
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 45b192884..edb303ea4 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
@@ -5092,18 +5086,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'}
@@ -19403,16 +19388,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 0f7ff1fd5..3301c95bc 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -46,7 +46,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