From 12a74f90c2579e151f819f6a756ec8a0ac05524b Mon Sep 17 00:00:00 2001
From: Mihaela-Ioana Mot <32430018+mmioana@users.noreply.github.com>
Date: Thu, 23 Jan 2025 16:00:24 +0100
Subject: [PATCH 1/6] Feat: M2 Proxy Colonies has started - will be removed


From 0e1fb659d449c73fc4fa68c7ae22c2ecff63ccd6 Mon Sep 17 00:00:00 2001
From: Romeo Ledesma <r_ledesma@outlook.com>
Date: Tue, 4 Feb 2025 18:19:17 +0000
Subject: [PATCH 2/6] feat: refactor filter logic

---
 .../Filters/BalanceFilters/BalanceFilters.tsx |   6 +-
 .../Filters/BalanceFilters/consts.ts          |  30 ++++++
 .../Filters/BalanceFilters/consts.tsx         |  22 ----
 .../Filters/BalanceFilters/index.ts           |   1 +
 .../Filters/FiltersContext/FiltersContext.ts  |  16 ++-
 .../FiltersContext/FiltersContextProvider.tsx | 102 +++++++++---------
 .../Filters/FiltersContext/types.ts           |  13 ++-
 .../partials/ActiveFiltersList/hooks.ts       |  34 ++++--
 .../AttributeFilters/AttributeFilters.tsx     |   8 +-
 .../filters/ChainFilters/ChainFilters.tsx     |  41 +++++++
 .../partials/filters/ChainFilters/index.ts    |   1 +
 .../filters/TokenFilters/TokenFilters.tsx     |  56 ++++++----
 .../Filters/partials/filters/index.ts         |   9 ++
 .../partials/BalanceTable/hooks.tsx           |  25 +++--
 .../FundsPage/partials/Filter/Filter.tsx      |  29 ++---
 .../FundsPage/partials/Filter/FilterItem.tsx  |   7 +-
 .../pages/FundsPage/partials/Filter/types.ts  |   2 +
 .../FundsPage/partials/FundsTable/consts.tsx  |  17 +++
 .../FundsPage/partials/FundsTable/hooks.tsx   |  65 +++++++++--
 .../FundsPage/partials/FundsTable/types.ts    |   3 +
 .../partials/ChainSelect/ChainSelect.tsx      |  10 +-
 .../partials/ChainSelect/hooks.ts             |  14 ++-
 .../v5/common/Checkbox/Checkbox.tsx           |   2 +-
 src/i18n/en.json                              |   5 +-
 src/utils/objects/index.ts                    |   6 ++
 25 files changed, 365 insertions(+), 159 deletions(-)
 create mode 100644 src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/BalanceFilters/consts.ts
 delete mode 100644 src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/BalanceFilters/consts.tsx
 create mode 100644 src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/partials/filters/ChainFilters/ChainFilters.tsx
 create mode 100644 src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/partials/filters/ChainFilters/index.ts
 create mode 100644 src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/partials/filters/index.ts
 create mode 100644 src/components/frame/v5/pages/FundsPage/partials/FundsTable/consts.tsx

diff --git a/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/BalanceFilters/BalanceFilters.tsx b/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/BalanceFilters/BalanceFilters.tsx
index a1bf834fa5b..ffed1f935dd 100644
--- a/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/BalanceFilters/BalanceFilters.tsx
+++ b/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/BalanceFilters/BalanceFilters.tsx
@@ -15,7 +15,7 @@ import { useFiltersContext } from '../FiltersContext/FiltersContext.ts';
 import ActiveFiltersList from '../partials/ActiveFiltersList/ActiveFiltersList.tsx';
 import BalanceTableFiltersItem from '../partials/BalanceTableFiltersItem/BalanceTableFiltersItem.tsx';
 
-import { filterItems } from './consts.tsx';
+import { filterItems } from './consts.ts';
 
 interface BalanceFiltersProps {
   toggleAddFundsModalOn: () => void;
@@ -42,10 +42,10 @@ const BalanceFilters: FC<BalanceFiltersProps> = ({ toggleAddFundsModalOn }) => {
         {formatText({ id: isMobile ? 'filterAndSort' : 'filters' })}
       </h4>
       <ul className="flex flex-col gap-7 sm:gap-0">
-        {filterItems.map(({ icon, label, children }) => (
+        {filterItems.map(({ icon, label, FiltersContent }) => (
           <li key={label}>
             <BalanceTableFiltersItem label={label} icon={icon}>
-              {children}
+              <FiltersContent />
             </BalanceTableFiltersItem>
           </li>
         ))}
diff --git a/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/BalanceFilters/consts.ts b/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/BalanceFilters/consts.ts
new file mode 100644
index 00000000000..92274143efc
--- /dev/null
+++ b/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/BalanceFilters/consts.ts
@@ -0,0 +1,30 @@
+import {
+  CoinVertical,
+  CubeFocus,
+  FolderSimpleLock,
+} from '@phosphor-icons/react';
+
+import { formatText } from '~utils/intl.ts';
+
+import { BalancePageFilter } from '../partials/filters/index.ts';
+
+export const filterItems = [
+  {
+    icon: CoinVertical,
+    label: formatText({ id: 'balancePage.filter.tokenType' }),
+    name: 'token',
+    FiltersContent: BalancePageFilter.Token,
+  },
+  {
+    icon: FolderSimpleLock,
+    label: formatText({ id: 'balancePage.filter.attributes' }),
+    name: 'attribute',
+    FiltersContent: BalancePageFilter.Attribute,
+  },
+  {
+    icon: CubeFocus,
+    label: formatText({ id: 'balancePage.filter.chain' }),
+    name: 'chain',
+    FiltersContent: BalancePageFilter.Chain,
+  },
+];
diff --git a/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/BalanceFilters/consts.tsx b/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/BalanceFilters/consts.tsx
deleted file mode 100644
index 47a76479fbd..00000000000
--- a/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/BalanceFilters/consts.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { CoinVertical, FolderSimpleLock } from '@phosphor-icons/react';
-import React from 'react';
-
-import { formatText } from '~utils/intl.ts';
-
-import AttributeFilters from '../partials/filters/AttributeFilters/index.ts';
-import TokenFilters from '../partials/filters/TokenFilters/index.ts';
-
-export const filterItems = [
-  {
-    icon: CoinVertical,
-    label: formatText({ id: 'balancePage.filter.tokenType' }),
-    name: 'actionType',
-    children: <TokenFilters />,
-  },
-  {
-    icon: FolderSimpleLock,
-    label: formatText({ id: 'balancePage.filter.attributes' }),
-    name: 'status',
-    children: <AttributeFilters />,
-  },
-];
diff --git a/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/BalanceFilters/index.ts b/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/BalanceFilters/index.ts
index e69de29bb2d..5ab2d5cd3df 100644
--- a/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/BalanceFilters/index.ts
+++ b/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/BalanceFilters/index.ts
@@ -0,0 +1 @@
+export { default } from './BalanceFilters.tsx';
diff --git a/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/FiltersContext/FiltersContext.ts b/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/FiltersContext/FiltersContext.ts
index 94d1030a060..14d2ad04ad9 100644
--- a/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/FiltersContext/FiltersContext.ts
+++ b/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/FiltersContext/FiltersContext.ts
@@ -1,28 +1,24 @@
 import { createContext, useContext } from 'react';
 
 import {
-  type AttributeFilters,
   type FiltersValues,
-  type TokenTypes,
   type BalanceTableFilters,
+  type BalanceFilterType,
 } from './types.ts';
 
 import type React from 'react';
 
-interface FiltersContextValue {
+export interface FiltersContextValue {
   searchFilter: string;
   setSearchFilter: (searchValue: string) => void;
-  tokenTypes: TokenTypes;
-  attributeFilters: AttributeFilters;
   activeFilters: BalanceTableFilters;
   selectedFiltersCount: number;
-  handleAttributeFilterChange: (
-    event: React.ChangeEvent<HTMLInputElement>,
-  ) => void;
-  handleTokenTypesFilterChange: (
+  handleResetFilters: (filter: FiltersValues) => void;
+  filters: BalanceTableFilters;
+  handleFiltersChange: (
     event: React.ChangeEvent<HTMLInputElement>,
+    type: BalanceFilterType,
   ) => void;
-  handleResetFilters: (filter: FiltersValues) => void;
 }
 
 export const FiltersContext = createContext<FiltersContextValue | undefined>(
diff --git a/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/FiltersContext/FiltersContextProvider.tsx b/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/FiltersContext/FiltersContextProvider.tsx
index 9644d3a8cc8..14d829e0a41 100644
--- a/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/FiltersContext/FiltersContextProvider.tsx
+++ b/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/FiltersContext/FiltersContextProvider.tsx
@@ -6,68 +6,75 @@ import React, {
   useCallback,
 } from 'react';
 
-import { FiltersContext } from './FiltersContext.ts';
+import { getObjectValues } from '~utils/objects/index.ts';
+
+import { FiltersContext, type FiltersContextValue } from './FiltersContext.ts';
 import {
-  type AttributeFilters,
   FiltersValues,
-  type TokenTypes,
   type BalanceTableFilters,
+  type BalanceFilterType,
 } from './types.ts';
 
 const FilterContextProvider: FC<PropsWithChildren> = ({ children }) => {
   const [searchFilter, setSearchFilter] = useState('');
-  const [tokenTypes, setTokenTypes] = useState<TokenTypes>({});
-  const [attributeFilters, setAttributeFilters] = useState<AttributeFilters>({
-    native: false,
-    reputation: false,
-  });
 
-  const handleTokenTypesFilterChange = useCallback(
-    (event: React.ChangeEvent<HTMLInputElement>) => {
-      const isChecked = event.target.checked;
-      const name = event.target.name as keyof TokenTypes;
-
-      if (isChecked) {
-        setTokenTypes({ ...tokenTypes, [name]: true });
-      } else {
-        setTokenTypes({ ...tokenTypes, [name]: false });
-      }
+  const [filters, setFilters] = useState<BalanceTableFilters>({
+    search: '',
+    attribute: {
+      native: false,
+      reputation: false,
     },
-    [tokenTypes],
-  );
+    token: {},
+    chain: {},
+  });
 
-  const handleAttributeFilterChange = useCallback(
-    (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleFiltersChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>, type: BalanceFilterType) => {
       const isChecked = event.target.checked;
-      const name = event.target.name as keyof AttributeFilters;
+      const { name } = event.target;
 
-      if (isChecked) {
-        setAttributeFilters({ ...attributeFilters, [name]: true });
-      } else {
-        setAttributeFilters({ ...attributeFilters, [name]: false });
-      }
+      setFilters((state) => ({
+        ...state,
+        [type]: {
+          ...state[type],
+          [name]: isChecked,
+        },
+      }));
     },
-    [attributeFilters],
+    [],
   );
 
   const activeFilters: BalanceTableFilters = useMemo(() => {
     return {
-      ...(Object.keys(tokenTypes).length ? { tokenTypes } : {}),
-      ...(Object.keys(attributeFilters).length ? { attributeFilters } : {}),
-      ...(searchFilter ? { search: searchFilter } : {}),
+      attribute: filters.attribute,
+      chain: filters.chain,
+      token: filters.token,
+      search: '',
     };
-  }, [tokenTypes, attributeFilters, searchFilter]);
+  }, [filters.attribute, filters.chain, filters.token]);
 
   const handleResetFilters = useCallback((filter: FiltersValues) => {
     switch (filter) {
       case FiltersValues.TokenType: {
-        return setTokenTypes({});
+        return setFilters((state) => ({
+          ...state,
+          token: {},
+        }));
       }
       case FiltersValues.Attributes: {
-        return setAttributeFilters({
-          native: false,
-          reputation: false,
-        });
+        return setFilters((state) => ({
+          ...state,
+          attribute: {
+            native: false,
+            reputation: false,
+          },
+        }));
+      }
+      case FiltersValues.Chain: {
+        return setFilters((state) => ({
+          ...state,
+          chain: {},
+        }));
       }
       default: {
         return undefined;
@@ -76,30 +83,27 @@ const FilterContextProvider: FC<PropsWithChildren> = ({ children }) => {
   }, []);
 
   const selectedFiltersCount =
-    Object.values(tokenTypes).filter((value) => value === true).length +
-    Object.values(attributeFilters).filter((value) => value === true).length;
+    getObjectValues(filters.token).filter((filter) => filter).length +
+    getObjectValues(filters.attribute).filter((filter) => filter).length +
+    getObjectValues(filters.chain).filter((filter) => filter).length;
 
-  const value = useMemo(
+  const value = useMemo<FiltersContextValue>(
     () => ({
       searchFilter,
       setSearchFilter,
-      tokenTypes,
-      attributeFilters,
       activeFilters,
       selectedFiltersCount,
-      handleAttributeFilterChange,
-      handleTokenTypesFilterChange,
       handleResetFilters,
+      filters,
+      handleFiltersChange,
     }),
     [
       searchFilter,
-      tokenTypes,
-      attributeFilters,
       activeFilters,
       selectedFiltersCount,
-      handleAttributeFilterChange,
-      handleTokenTypesFilterChange,
       handleResetFilters,
+      filters,
+      handleFiltersChange,
     ],
   );
 
diff --git a/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/FiltersContext/types.ts b/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/FiltersContext/types.ts
index 6fd31548f2d..572bcf0a8fc 100644
--- a/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/FiltersContext/types.ts
+++ b/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/FiltersContext/types.ts
@@ -1,6 +1,7 @@
 export enum FiltersValues {
   TokenType = 'tokenType',
   Attributes = 'attributes',
+  Chain = 'chain',
 }
 
 export interface TokenTypes {
@@ -12,7 +13,11 @@ export interface AttributeFilters {
   reputation: boolean;
 }
 
-export interface BalanceTableFilters {
-  tokenTypes?: TokenTypes;
-  attributeFilters?: AttributeFilters;
-}
+export type BalanceFilterType = 'attribute' | 'chain' | 'token';
+
+export type BalanceTableFilters = {
+  search: string;
+  attribute: AttributeFilters;
+  chain: Record<string, boolean>;
+  token: Record<string, boolean>;
+};
diff --git a/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/partials/ActiveFiltersList/hooks.ts b/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/partials/ActiveFiltersList/hooks.ts
index fa7f94ebc48..98651f30836 100644
--- a/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/partials/ActiveFiltersList/hooks.ts
+++ b/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/partials/ActiveFiltersList/hooks.ts
@@ -7,19 +7,22 @@ import { formatText } from '~utils/intl.ts';
 import { ATTRIBUTE_FILTERS } from '../filters/AttributeFilters/consts.ts';
 import { useGetTokenTypeFilters } from '../filters/TokenFilters/hooks.ts';
 
+// The hook used to show enabled filters via the blue filter pills
 export const useActiveFilters = () => {
-  const { attributeFilters, tokenTypes, handleResetFilters } =
-    useFiltersContext();
+  const {
+    handleResetFilters,
+    filters: { attribute, token, chain },
+  } = useFiltersContext();
 
   const tokenTypesFilters = useGetTokenTypeFilters();
-  const tokenItems = tokenTypesFilters.map(({ token }) => ({
-    symbol: token.symbol,
-    name: token?.tokenAddress || '',
+  const tokenItems = tokenTypesFilters.map(({ token: tokenTypeFilter }) => ({
+    symbol: tokenTypeFilter.symbol,
+    name: tokenTypeFilter?.tokenAddress || '',
   }));
 
   const activeFiltersToDisplay = useMemo(() => {
     return [
-      ...(Object.values(tokenTypes).some((value) => value === true)
+      ...(Object.values(token).some((value) => value === true)
         ? [
             {
               filter: FiltersValues.TokenType,
@@ -27,12 +30,12 @@ export const useActiveFilters = () => {
                 id: 'balancePage.filter.type',
               }),
               items: tokenItems
-                .filter(({ name }) => tokenTypes[name])
+                .filter(({ name }) => token[name])
                 .map(({ symbol }) => symbol),
             },
           ]
         : []),
-      ...(Object.values(attributeFilters).some((value) => value === true)
+      ...(Object.values(attribute).some((value) => value === true)
         ? [
             {
               filter: FiltersValues.Attributes,
@@ -40,13 +43,24 @@ export const useActiveFilters = () => {
                 id: 'balancePage.filter.attributes',
               }),
               items: ATTRIBUTE_FILTERS.filter(
-                ({ name }) => attributeFilters[name],
+                ({ name }) => attribute[name],
               ).map(({ label }) => label),
             },
           ]
         : []),
+      ...(Object.values(chain).some((value) => value === true)
+        ? [
+            {
+              filter: FiltersValues.Chain,
+              category: formatText({
+                id: 'balancePage.filter.chain',
+              }),
+              items: Object.keys(chain),
+            },
+          ]
+        : []),
     ];
-  }, [attributeFilters, tokenTypes, tokenItems]);
+  }, [token, tokenItems, attribute, chain]);
 
   return { activeFiltersToDisplay, handleResetFilters };
 };
diff --git a/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/partials/filters/AttributeFilters/AttributeFilters.tsx b/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/partials/filters/AttributeFilters/AttributeFilters.tsx
index 42839001b97..309efc6836a 100644
--- a/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/partials/filters/AttributeFilters/AttributeFilters.tsx
+++ b/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/partials/filters/AttributeFilters/AttributeFilters.tsx
@@ -7,7 +7,7 @@ import Checkbox from '~v5/common/Checkbox/index.ts';
 import { ATTRIBUTE_FILTERS } from './consts.ts';
 
 const AttributeFilters: FC = () => {
-  const { attributeFilters, handleAttributeFilterChange } = useFiltersContext();
+  const { handleFiltersChange, filters } = useFiltersContext();
 
   return (
     <div>
@@ -16,14 +16,16 @@ const AttributeFilters: FC = () => {
       </h5>
       <ul>
         {ATTRIBUTE_FILTERS.map(({ label, name }) => {
-          const isChecked = attributeFilters[name];
+          const isChecked = filters.attribute[name];
 
           return (
             <li key={name}>
               <Checkbox
                 className="subnav-button px-0 sm:px-3.5"
                 name={name}
-                onChange={handleAttributeFilterChange}
+                onChange={(event) => {
+                  handleFiltersChange(event, 'attribute');
+                }}
                 isChecked={isChecked}
               >
                 {label}
diff --git a/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/partials/filters/ChainFilters/ChainFilters.tsx b/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/partials/filters/ChainFilters/ChainFilters.tsx
new file mode 100644
index 00000000000..47904d8a771
--- /dev/null
+++ b/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/partials/filters/ChainFilters/ChainFilters.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+
+import { useFiltersContext } from '~frame/v5/pages/BalancePage/partials/BalanceTable/Filters/FiltersContext/index.ts';
+import { formatText } from '~utils/intl.ts';
+import { useChainOptions } from '~v5/common/ActionSidebar/partials/ChainSelect/hooks.ts';
+import Checkbox from '~v5/common/Checkbox/index.ts';
+
+const ChainFilters = () => {
+  const { filters, handleFiltersChange } = useFiltersContext();
+
+  const chainOptions = useChainOptions();
+
+  return (
+    <div>
+      <h5 className="hidden px-3.5 pb-2 uppercase text-gray-400 text-4 sm:block">
+        {formatText({ id: 'balancePage.filter.chain' })}
+      </h5>
+      <ul>
+        {chainOptions.map(({ label, icon: Icon }) => {
+          const isChecked = filters.chain[label];
+
+          return (
+            <li key={label}>
+              <Checkbox
+                className="subnav-button px-0 sm:px-3.5"
+                name={label}
+                onChange={(event) => handleFiltersChange(event, 'chain')}
+                isChecked={isChecked}
+              >
+                {Icon && <Icon size={20} />}
+                {label}
+              </Checkbox>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+};
+
+export default ChainFilters;
diff --git a/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/partials/filters/ChainFilters/index.ts b/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/partials/filters/ChainFilters/index.ts
new file mode 100644
index 00000000000..d18b1b36e66
--- /dev/null
+++ b/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/partials/filters/ChainFilters/index.ts
@@ -0,0 +1 @@
+export { default } from './ChainFilters.tsx';
diff --git a/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/partials/filters/TokenFilters/TokenFilters.tsx b/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/partials/filters/TokenFilters/TokenFilters.tsx
index bc90067d372..759f2814385 100644
--- a/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/partials/filters/TokenFilters/TokenFilters.tsx
+++ b/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/partials/filters/TokenFilters/TokenFilters.tsx
@@ -9,23 +9,39 @@ import { TokenAvatar } from '~v5/shared/TokenAvatar/TokenAvatar.tsx';
 import { useGetTokenTypeFilters } from './hooks.ts';
 
 const TokenFilters: FC = () => {
-  const { tokenTypes, handleTokenTypesFilterChange } = useFiltersContext();
+  const {
+    filters: { token: tokenFilters },
+    handleFiltersChange,
+  } = useFiltersContext();
+
   const tokenTypesFilters = useGetTokenTypeFilters();
-  const tokenItems = tokenTypesFilters.map(({ token }) => ({
-    symbol: token.symbol,
-    label: (
-      <div className="flex items-center gap-2">
-        <TokenAvatar
-          size={18}
-          tokenName={token.name}
-          tokenAddress={token.tokenAddress}
-          tokenAvatarSrc={token.avatar ?? undefined}
-        />
-        {multiLineTextEllipsis(token.symbol, 5)}
-      </div>
-    ),
-    name: token?.tokenAddress || '',
-  }));
+
+  const tokenItems = tokenTypesFilters.map(
+    ({
+      token: {
+        symbol,
+        name,
+        tokenAddress,
+        avatar,
+        chainMetadata: { chainId },
+      },
+    }) => ({
+      symbol,
+      label: (
+        <div className="flex items-center gap-2">
+          <TokenAvatar
+            size={18}
+            tokenName={name}
+            tokenAddress={tokenAddress}
+            tokenAvatarSrc={avatar ?? undefined}
+          />
+          {multiLineTextEllipsis(symbol, 5)}
+        </div>
+      ),
+      name: tokenAddress || '',
+      key: `${chainId}-${symbol}`,
+    }),
+  );
 
   return (
     <div>
@@ -33,15 +49,15 @@ const TokenFilters: FC = () => {
         {formatText({ id: 'balancePage.filter.approvedTokenTypes' })}
       </h5>
       <ul>
-        {tokenItems.map(({ label, name }) => {
-          const isChecked = tokenTypes[name];
+        {tokenItems.map(({ label, name, key }) => {
+          const isChecked = tokenFilters[name];
 
           return (
-            <li key={name}>
+            <li key={key}>
               <Checkbox
                 className="subnav-button px-0 sm:px-3.5"
                 name={name}
-                onChange={handleTokenTypesFilterChange}
+                onChange={(event) => handleFiltersChange(event, 'token')}
                 isChecked={isChecked}
               >
                 {label}
diff --git a/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/partials/filters/index.ts b/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/partials/filters/index.ts
new file mode 100644
index 00000000000..1c10083b371
--- /dev/null
+++ b/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/partials/filters/index.ts
@@ -0,0 +1,9 @@
+import AttributeFilters from './AttributeFilters/index.ts';
+import ChainFilters from './ChainFilters/index.ts';
+import TokenFilters from './TokenFilters/index.ts';
+
+export const BalancePageFilter = {
+  Token: TokenFilters,
+  Attribute: AttributeFilters,
+  Chain: ChainFilters,
+};
diff --git a/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/hooks.tsx b/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/hooks.tsx
index 702802c0906..f1109e1f74a 100644
--- a/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/hooks.tsx
+++ b/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/hooks.tsx
@@ -16,6 +16,7 @@ import Numeral from '~shared/Numeral/index.ts';
 import { type NativeTokenStatus, type Token } from '~types/graphql.ts';
 import { notNull } from '~utils/arrays/index.ts';
 import { formatText } from '~utils/intl.ts';
+import { getObjectValues } from '~utils/objects/index.ts';
 import { multiLineTextEllipsis } from '~utils/strings.ts';
 import {
   getBalanceForTokenAndDomain,
@@ -37,10 +38,12 @@ export const useBalancesData = (): BalanceTableFieldModel[] => {
     colony: { tokens: colonyTokens, balances, nativeToken },
   } = useColonyContext();
   const selectedDomain = useGetSelectedDomainFilter();
-  const { attributeFilters, tokenTypes, searchFilter } = useFiltersContext();
+  const { filters, searchFilter } = useFiltersContext();
   const { balancesByToken: expenditureBalances, loading } =
     useColonyExpenditureBalances();
 
+  const { attribute: attributeFilters, token: tokenFilters } = filters;
+
   const tokensData = useMemo(
     () =>
       colonyTokens?.items.filter(notNull).map((item) => {
@@ -79,19 +82,17 @@ export const useBalancesData = (): BalanceTableFieldModel[] => {
 
   const filteredTokens = tokensData?.filter((token) => {
     if (attributeFilters.native) {
-      if (
-        Object.values(tokenTypes).some((tokenTypeFilter) => tokenTypeFilter)
-      ) {
+      if (getObjectValues(tokenFilters).some((filter) => filter)) {
         return (
           token.token?.tokenAddress === nativeToken.tokenAddress &&
-          tokenTypes[token.token?.tokenAddress || 0]
+          tokenFilters[token.token?.tokenAddress || 0]
         );
       }
       return token.token?.tokenAddress === nativeToken.tokenAddress;
     }
 
-    if (Object.values(tokenTypes).some((tokenTypeFilter) => tokenTypeFilter)) {
-      return tokenTypes[token.token?.tokenAddress || 0];
+    if (getObjectValues(tokenFilters).some((filter) => filter)) {
+      return tokenFilters[token.token?.tokenAddress || 0];
     }
 
     return true;
@@ -103,6 +104,16 @@ export const useBalancesData = (): BalanceTableFieldModel[] => {
       token?.symbol.toLowerCase().includes(searchFilter.toLowerCase()),
   );
 
+  // const searchedChainIds = getObjectKeys(filters.chain).filter(
+  //   (chain) => filters.chain[chain],
+  // );
+
+  // const searchedTokensByChainIds = searchedTokens.filter(({ token }) =>
+  //   searchedChainIds?.length && token
+  //     ? searchedChainIds.includes(token?.chainMetadata.chainId)
+  //     : true,
+  // );
+
   const sortedTokens = useMemo(
     () =>
       searchedTokens?.sort((a, b) => {
diff --git a/src/components/frame/v5/pages/FundsPage/partials/Filter/Filter.tsx b/src/components/frame/v5/pages/FundsPage/partials/Filter/Filter.tsx
index 07230657eac..f24c29352af 100644
--- a/src/components/frame/v5/pages/FundsPage/partials/Filter/Filter.tsx
+++ b/src/components/frame/v5/pages/FundsPage/partials/Filter/Filter.tsx
@@ -55,19 +55,22 @@ function Filter<TValue extends FilterValue>({
     [onSearch],
   );
 
-  const RootItems = rootItems.map(({ icon, items, label, name, title }) => (
-    <FilterItem
-      key={name.toString()}
-      label={label}
-      icon={icon}
-      title={title}
-      name={name}
-      items={items}
-      path={name.toString()}
-      value={value}
-      onChange={onChange}
-    />
-  ));
+  const RootItems = rootItems.map(
+    ({ icon, items, label, name, title, containerClassName }) => (
+      <FilterItem
+        key={name.toString()}
+        label={label}
+        icon={icon}
+        title={title}
+        name={name}
+        items={items}
+        path={name.toString()}
+        value={value}
+        onChange={onChange}
+        containerClassName={containerClassName}
+      />
+    ),
+  );
 
   const filterCount = Object.values(value).reduce((acc, obj) => {
     return acc + Object.values(obj).filter((item) => item === true).length;
diff --git a/src/components/frame/v5/pages/FundsPage/partials/Filter/FilterItem.tsx b/src/components/frame/v5/pages/FundsPage/partials/Filter/FilterItem.tsx
index b41d1de5a8f..920061ff55f 100644
--- a/src/components/frame/v5/pages/FundsPage/partials/Filter/FilterItem.tsx
+++ b/src/components/frame/v5/pages/FundsPage/partials/Filter/FilterItem.tsx
@@ -1,4 +1,5 @@
 import { CaretDown } from '@phosphor-icons/react';
+import clsx from 'clsx';
 import React from 'react';
 import { usePopperTooltip } from 'react-popper-tooltip';
 
@@ -18,6 +19,7 @@ function FilterItem<TValue extends FilterValue>({
   path,
   value,
   title,
+  containerClassName,
 }: RootFilterProps<TValue>) {
   const { getTooltipProps, setTooltipRef, setTriggerRef, visible } =
     usePopperTooltip({
@@ -77,7 +79,10 @@ function FilterItem<TValue extends FilterValue>({
                 hasShadow: true,
                 className: 'py-6 px-2',
               }}
-              className="mr-2 w-full sm:max-w-[13.25rem]"
+              className={clsx(
+                'mr-2 w-full sm:max-w-[13.25rem]',
+                containerClassName,
+              )}
             >
               <>
                 <span className="px-3.5 pb-2 uppercase text-gray-400 text-4">
diff --git a/src/components/frame/v5/pages/FundsPage/partials/Filter/types.ts b/src/components/frame/v5/pages/FundsPage/partials/Filter/types.ts
index 39e5dae12c1..f3f2ddbb6b5 100644
--- a/src/components/frame/v5/pages/FundsPage/partials/Filter/types.ts
+++ b/src/components/frame/v5/pages/FundsPage/partials/Filter/types.ts
@@ -10,6 +10,7 @@ export type FilterValue = {
 export interface NestedItem<TValue extends FilterValue, TLevel extends number> {
   label: ReactNode;
   name: KeysAtLevel<TValue, TLevel>;
+  icon?: Icon;
   symbol?: string;
   // @ts-ignore
   items?: NestedItem<TValue, Add<TLevel, 1>>[];
@@ -22,6 +23,7 @@ export interface RootItem<TValue extends FilterValue> {
   icon: Icon;
   title: ReactNode;
   filterName: string;
+  containerClassName?: string;
 }
 
 export interface FilterProps<TValue extends FilterValue> {
diff --git a/src/components/frame/v5/pages/FundsPage/partials/FundsTable/consts.tsx b/src/components/frame/v5/pages/FundsPage/partials/FundsTable/consts.tsx
new file mode 100644
index 00000000000..45b73549873
--- /dev/null
+++ b/src/components/frame/v5/pages/FundsPage/partials/FundsTable/consts.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { SUPPORTED_CHAINS } from '~constants/proxyColonies.ts';
+
+export const chainFilters = SUPPORTED_CHAINS.map(
+  ({ name, icon: Icon, chainId }) => ({
+    name,
+    symbol: name,
+    filterKey: chainId,
+    label: (
+      <div className="flex items-start gap-2">
+        {Icon && <Icon size={20} />}
+        {name}
+      </div>
+    ),
+  }),
+);
diff --git a/src/components/frame/v5/pages/FundsPage/partials/FundsTable/hooks.tsx b/src/components/frame/v5/pages/FundsPage/partials/FundsTable/hooks.tsx
index 8f170d837ed..f3fc1269195 100644
--- a/src/components/frame/v5/pages/FundsPage/partials/FundsTable/hooks.tsx
+++ b/src/components/frame/v5/pages/FundsPage/partials/FundsTable/hooks.tsx
@@ -1,15 +1,17 @@
-import { CoinVertical, ShieldCheck } from '@phosphor-icons/react';
+import { CoinVertical, CubeFocus, ShieldCheck } from '@phosphor-icons/react';
 import { type ColumnDef, createColumnHelper } from '@tanstack/react-table';
 import { isEqual } from 'lodash';
 import React, { useMemo, useState } from 'react';
 
 import { ADDRESS_ZERO } from '~constants';
 import { useColonyContext } from '~context/ColonyContext/ColonyContext.ts';
+import { useDeployedChainIds } from '~hooks/proxyColonies/useDeployedChainIds.ts';
 import useColonyFundsClaims from '~hooks/useColonyFundsClaims.ts';
 import { notNull } from '~utils/arrays/index.ts';
 import { formatText } from '~utils/intl.ts';
 import { multiLineTextEllipsis } from '~utils/strings.ts';
 import { formatMessage } from '~utils/yup/tests/helpers.ts';
+import { useChainOptions } from '~v5/common/ActionSidebar/partials/ChainSelect/hooks.ts';
 import { TokenAvatar } from '~v5/shared/TokenAvatar/TokenAvatar.tsx';
 
 import { type FilterProps } from '../Filter/types.ts';
@@ -49,6 +51,11 @@ export const useFundsTableColumns = (): ColumnDef<
 export const useFundsTable = (): UseFundsTableProps => {
   const { colony } = useColonyContext();
   const claims = useColonyFundsClaims();
+  const activeProxyColoniesChainIds = useDeployedChainIds({
+    filterFn: (deployedProxyColony) => deployedProxyColony?.isActive,
+  });
+  const validChainFilters = useChainOptions();
+
   const colonyTokens = useMemo(
     () =>
       colony.tokens?.items.filter(notNull).sort((a, b) => {
@@ -149,11 +156,16 @@ export const useFundsTable = (): UseFundsTableProps => {
     return true;
   });
 
-  const searchedTokens = visibleTokens.filter(
-    ({ token }) =>
-      token?.name.toLowerCase().includes(searchValue.toLowerCase()) ||
-      token?.symbol.toLowerCase().includes(searchValue.toLowerCase()),
-  );
+  const chainFilters = validChainFilters.map(({ icon: Icon, label }) => ({
+    name: label,
+    symbol: label,
+    label: (
+      <div className="flex items-start gap-2">
+        {Icon && <Icon size={20} />}
+        {label}
+      </div>
+    ),
+  }));
 
   const tokenTypeFilters = colonyTokens.map(({ token }) => ({
     name: token.tokenAddress,
@@ -214,6 +226,15 @@ export const useFundsTable = (): UseFundsTableProps => {
           },
         ],
       },
+      {
+        name: 'chain',
+        filterName: formatText({ id: 'incomingFundsPage.filter.chain' }),
+        label: formatText({ id: 'incomingFundsPage.filter.chain' }),
+        icon: CubeFocus,
+        title: formatText({ id: 'incomingFundsPage.filter.availableChains' }),
+        items: chainFilters,
+        containerClassName: 'sm:max-w-full',
+      },
     ],
   };
 
@@ -244,6 +265,38 @@ export const useFundsTable = (): UseFundsTableProps => {
     })
     .filter(Boolean);
 
+  const searchedTokens = useMemo(() => {
+    const searchedChains = activeFilters.find(
+      (activeFilter) => activeFilter?.filterName === 'Chain',
+    )?.filters;
+
+    const searchedChainIds = validChainFilters
+      .filter(({ label }) => searchedChains?.includes(label))
+      ?.map(({ value }) => value);
+
+    const searchedTokensByChainIds = visibleTokens.filter(({ token }) =>
+      searchedChainIds?.length && token
+        ? [...searchedChainIds, ...activeProxyColoniesChainIds].includes(
+            token?.chainMetadata.chainId,
+          )
+        : true,
+    );
+
+    const searchResults = searchedTokensByChainIds.filter(
+      ({ token }) =>
+        token?.name.toLowerCase().includes(searchValue.toLowerCase()) ||
+        token?.symbol.toLowerCase().includes(searchValue.toLowerCase()),
+    );
+
+    return searchResults;
+  }, [
+    activeFilters,
+    activeProxyColoniesChainIds,
+    searchValue,
+    validChainFilters,
+    visibleTokens,
+  ]);
+
   return {
     filters,
     searchedTokens,
diff --git a/src/components/frame/v5/pages/FundsPage/partials/FundsTable/types.ts b/src/components/frame/v5/pages/FundsPage/partials/FundsTable/types.ts
index 64aa5b89dea..caf502745d1 100644
--- a/src/components/frame/v5/pages/FundsPage/partials/FundsTable/types.ts
+++ b/src/components/frame/v5/pages/FundsPage/partials/FundsTable/types.ts
@@ -20,6 +20,9 @@ export type FundsTableFilters = {
   type: {
     [key: string]: boolean;
   };
+  chain: {
+    [key: string]: boolean;
+  };
 };
 
 export interface UseFundsTableProps {
diff --git a/src/components/v5/common/ActionSidebar/partials/ChainSelect/ChainSelect.tsx b/src/components/v5/common/ActionSidebar/partials/ChainSelect/ChainSelect.tsx
index ee30ece4043..366cf47c405 100644
--- a/src/components/v5/common/ActionSidebar/partials/ChainSelect/ChainSelect.tsx
+++ b/src/components/v5/common/ActionSidebar/partials/ChainSelect/ChainSelect.tsx
@@ -9,12 +9,8 @@ import { formatText } from '~utils/intl.ts';
 import ChainBadge from '~v5/common/Pills/ChainBadge/ChainBadge.tsx';
 import { renderIconOption } from '~v5/shared/SearchSelect/partials/OptionRenderer/IconOptionRenderer.tsx';
 import SearchSelect from '~v5/shared/SearchSelect/SearchSelect.tsx';
-import {
-  type SearchSelectOption,
-  type IconOption,
-} from '~v5/shared/SearchSelect/types.ts';
 
-import { useChainOptions } from './hooks.ts';
+import { type IUseChainOptions, useChainOptions } from './hooks.ts';
 
 const displayName = 'v5.common.ActionsContent.partials.ChainSelect';
 
@@ -22,7 +18,7 @@ interface ChainSelectProps {
   name: string;
   disabled?: boolean;
   readOnly?: boolean;
-  filterOptionsFn?: (option: SearchSelectOption<IconOption>) => boolean;
+  filterOptionsFn?: IUseChainOptions['filterOptionsFn'];
 }
 
 const ChainSelect: FC<ChainSelectProps> = ({
@@ -39,7 +35,7 @@ const ChainSelect: FC<ChainSelectProps> = ({
   });
   const fieldValue = field.value;
   const isError = !!error;
-  const chainOptions = useChainOptions(filterOptionsFn);
+  const chainOptions = useChainOptions({ filterOptionsFn });
 
   const { readonly } = useAdditionalFormOptionsContext();
   const isReadOnly = readonly || readOnlyProp;
diff --git a/src/components/v5/common/ActionSidebar/partials/ChainSelect/hooks.ts b/src/components/v5/common/ActionSidebar/partials/ChainSelect/hooks.ts
index 7cdbcb696b7..c95ce46d109 100644
--- a/src/components/v5/common/ActionSidebar/partials/ChainSelect/hooks.ts
+++ b/src/components/v5/common/ActionSidebar/partials/ChainSelect/hooks.ts
@@ -4,8 +4,18 @@ import { SUPPORTED_CHAINS } from '~constants/proxyColonies.ts';
 import { useGetSupportedChainsQuery } from '~gql';
 import GanacheIcon from '~icons/GanacheIcon.tsx';
 import { notNull } from '~utils/arrays/index.ts';
+import {
+  type IconOption,
+  type SearchSelectOption,
+} from '~v5/shared/SearchSelect/types.ts';
+
+export interface IUseChainOptions {
+  filterOptionsFn?: (options: SearchSelectOption<IconOption>) => boolean;
+}
+
+export const useChainOptions = (args: IUseChainOptions = {}) => {
+  const { filterOptionsFn } = args;
 
-export const useChainOptions = (filterOptionsFn) => {
   const { data } = useGetSupportedChainsQuery();
 
   const chainOptions = useMemo(() => {
@@ -26,7 +36,7 @@ export const useChainOptions = (filterOptionsFn) => {
         };
       })
       .filter(notNull)
-      .filter((option) => filterOptionsFn && filterOptionsFn(option));
+      .filter((option) => (filterOptionsFn ? filterOptionsFn(option) : true));
   }, [data, filterOptionsFn]);
 
   return chainOptions;
diff --git a/src/components/v5/common/Checkbox/Checkbox.tsx b/src/components/v5/common/Checkbox/Checkbox.tsx
index f2752055662..6c338efe8f3 100644
--- a/src/components/v5/common/Checkbox/Checkbox.tsx
+++ b/src/components/v5/common/Checkbox/Checkbox.tsx
@@ -16,7 +16,7 @@ const Checkbox: FC<PropsWithChildren<CheckboxProps>> = ({
   label = '',
   onChange,
   className,
-  isChecked,
+  isChecked = false,
   children,
 }) => {
   const generatedId = useId();
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 0c80fa8f21a..2e18aea8384 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -30,7 +30,6 @@
     "navigation.finances.balance": "Balance",
     "navigation.finances.balances": "Balances",
     "navigation.finances.incoming": "Incoming",
-    "navigation.finances.incomingFunds": "Incoming funds",
     "navigation.finances.transactions": "Transactions",
     "navigation.finances.streamingPayments": "Streaming payments",
     "navigation.agreements": "Agreements",
@@ -1574,11 +1573,13 @@
     "incomingFundsPage.table.claim": "Claim",
     "incomingFundsPage.table.accepted": "Accepted",
     "incomingFundsPage.table.new": "New",
+    "incomingFundsPage.filter.chain": "Chain",
     "incomingFundsPage.table.claimAllFunds": "Accept all available funds",
     "incomingFundsPage.filter.tokenStatus": "Token status",
     "incomingFundsPage.filter.tokenType": "Token type",
     "incomingFundsPage.filter.approvedTokens": "approved token types",
     "incomingFundsPage.filter.approved": "Approved",
+    "incomingFundsPage.filter.availableChains": "Available chains",
     "incomingFundsPage.filter.unapproved": "Unapproved",
     "incomingFundsPage.filter.status": "Status",
     "incomingFundsPage.filter.type": "Type",
@@ -1727,6 +1728,8 @@
     "balancePage.table.addFunds": "Add funds to the Colony",
     "balancePage.table.emptyTitle": "No results to display",
     "balancePage.table.emptyDescription": "There are no tokens in the Colony that match your search. Try searching again",
+    "balancePage.filter.availableChains": "Available chains",
+    "balancePage.filter.chain": "Chain",
     "balancePage.filter.searchModalTitle": "Search balance activity",
     "balancePage.filter.search": "Search tokens",
     "balancePage.filter.tokenType": "Token type",
diff --git a/src/utils/objects/index.ts b/src/utils/objects/index.ts
index badd003fe82..81ae6077a15 100644
--- a/src/utils/objects/index.ts
+++ b/src/utils/objects/index.ts
@@ -20,6 +20,12 @@ export const getObjectKeys = <T extends object>(obj: T): Array<keyof T> => {
   return Object.keys(obj) as Array<keyof T>;
 };
 
+export const getObjectValues = <T extends object>(
+  obj: T,
+): Array<T[keyof T]> => {
+  return Object.values(obj) as Array<T[keyof T]>;
+};
+
 /**
  * Removes specified fields from an object and returns the updated object.
  *

From 9fb31ed3e302114e830c4ff4b66b38ba7eb5f616 Mon Sep 17 00:00:00 2001
From: Romeo Ledesma <r_ledesma@outlook.com>
Date: Tue, 4 Feb 2025 19:00:15 +0000
Subject: [PATCH 3/6] feat: filter config proof of concept

---
 .../Filters/FiltersContext/FiltersContext.ts  |  9 ++--
 .../FiltersContext/FiltersContextProvider.tsx | 50 +++++++++----------
 .../Filters/FiltersContext/types.ts           | 24 +++++----
 .../partials/ActiveFiltersList/hooks.ts       | 15 +++---
 .../AttributeFilters/AttributeFilters.tsx     |  2 +-
 .../filters/ChainFilters/ChainFilters.tsx     |  7 +--
 .../filters/TokenFilters/TokenFilters.tsx     |  2 +-
 .../partials/BalanceTable/hooks.tsx           | 36 ++++++-------
 8 files changed, 76 insertions(+), 69 deletions(-)

diff --git a/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/FiltersContext/FiltersContext.ts b/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/FiltersContext/FiltersContext.ts
index 14d2ad04ad9..794da29d662 100644
--- a/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/FiltersContext/FiltersContext.ts
+++ b/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/FiltersContext/FiltersContext.ts
@@ -2,8 +2,8 @@ import { createContext, useContext } from 'react';
 
 import {
   type FiltersValues,
-  type BalanceTableFilters,
-  type BalanceFilterType,
+  type TBalanceTableFilters,
+  type TBalanceFilter,
 } from './types.ts';
 
 import type React from 'react';
@@ -11,13 +11,12 @@ import type React from 'react';
 export interface FiltersContextValue {
   searchFilter: string;
   setSearchFilter: (searchValue: string) => void;
-  activeFilters: BalanceTableFilters;
   selectedFiltersCount: number;
   handleResetFilters: (filter: FiltersValues) => void;
-  filters: BalanceTableFilters;
+  filters: TBalanceTableFilters;
   handleFiltersChange: (
     event: React.ChangeEvent<HTMLInputElement>,
-    type: BalanceFilterType,
+    type: TBalanceFilter,
   ) => void;
 }
 
diff --git a/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/FiltersContext/FiltersContextProvider.tsx b/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/FiltersContext/FiltersContextProvider.tsx
index 14d829e0a41..e12aab9df6b 100644
--- a/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/FiltersContext/FiltersContextProvider.tsx
+++ b/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/FiltersContext/FiltersContextProvider.tsx
@@ -11,48 +11,45 @@ import { getObjectValues } from '~utils/objects/index.ts';
 import { FiltersContext, type FiltersContextValue } from './FiltersContext.ts';
 import {
   FiltersValues,
-  type BalanceTableFilters,
-  type BalanceFilterType,
+  type TBalanceTableFilters,
+  type TBalanceFilter,
 } from './types.ts';
 
 const FilterContextProvider: FC<PropsWithChildren> = ({ children }) => {
   const [searchFilter, setSearchFilter] = useState('');
 
-  const [filters, setFilters] = useState<BalanceTableFilters>({
-    search: '',
+  const [filters, setFilters] = useState<TBalanceTableFilters>({
     attribute: {
-      native: false,
-      reputation: false,
+      native: {
+        isChecked: false,
+      },
+      reputation: {
+        isChecked: false,
+      },
     },
     token: {},
     chain: {},
   });
 
   const handleFiltersChange = useCallback(
-    (event: React.ChangeEvent<HTMLInputElement>, type: BalanceFilterType) => {
+    (event: React.ChangeEvent<HTMLInputElement>, type: TBalanceFilter) => {
       const isChecked = event.target.checked;
-      const { name } = event.target;
+      const { name, id } = event.target;
 
       setFilters((state) => ({
         ...state,
         [type]: {
           ...state[type],
-          [name]: isChecked,
+          [name]: {
+            isChecked,
+            id,
+          },
         },
       }));
     },
     [],
   );
 
-  const activeFilters: BalanceTableFilters = useMemo(() => {
-    return {
-      attribute: filters.attribute,
-      chain: filters.chain,
-      token: filters.token,
-      search: '',
-    };
-  }, [filters.attribute, filters.chain, filters.token]);
-
   const handleResetFilters = useCallback((filter: FiltersValues) => {
     switch (filter) {
       case FiltersValues.TokenType: {
@@ -65,8 +62,12 @@ const FilterContextProvider: FC<PropsWithChildren> = ({ children }) => {
         return setFilters((state) => ({
           ...state,
           attribute: {
-            native: false,
-            reputation: false,
+            native: {
+              isChecked: false,
+            },
+            reputation: {
+              isChecked: false,
+            },
           },
         }));
       }
@@ -83,15 +84,15 @@ const FilterContextProvider: FC<PropsWithChildren> = ({ children }) => {
   }, []);
 
   const selectedFiltersCount =
-    getObjectValues(filters.token).filter((filter) => filter).length +
-    getObjectValues(filters.attribute).filter((filter) => filter).length +
-    getObjectValues(filters.chain).filter((filter) => filter).length;
+    getObjectValues(filters.token).filter(({ isChecked }) => isChecked).length +
+    getObjectValues(filters.attribute).filter(({ isChecked }) => isChecked)
+      .length +
+    getObjectValues(filters.chain).filter(({ isChecked }) => isChecked).length;
 
   const value = useMemo<FiltersContextValue>(
     () => ({
       searchFilter,
       setSearchFilter,
-      activeFilters,
       selectedFiltersCount,
       handleResetFilters,
       filters,
@@ -99,7 +100,6 @@ const FilterContextProvider: FC<PropsWithChildren> = ({ children }) => {
     }),
     [
       searchFilter,
-      activeFilters,
       selectedFiltersCount,
       handleResetFilters,
       filters,
diff --git a/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/FiltersContext/types.ts b/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/FiltersContext/types.ts
index 572bcf0a8fc..10ac6cf4da6 100644
--- a/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/FiltersContext/types.ts
+++ b/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/FiltersContext/types.ts
@@ -8,16 +8,20 @@ export interface TokenTypes {
   [key: string]: boolean;
 }
 
-export interface AttributeFilters {
-  native: boolean;
-  reputation: boolean;
-}
+type TFilterConfig = {
+  isChecked: boolean;
+  id?: string;
+};
 
-export type BalanceFilterType = 'attribute' | 'chain' | 'token';
+type TAttributeFilter = {
+  native: TFilterConfig;
+  reputation: TFilterConfig;
+};
 
-export type BalanceTableFilters = {
-  search: string;
-  attribute: AttributeFilters;
-  chain: Record<string, boolean>;
-  token: Record<string, boolean>;
+export type TBalanceTableFilters = {
+  attribute: TAttributeFilter;
+  chain: Record<string, TFilterConfig>;
+  token: Record<string, TFilterConfig>;
 };
+
+export type TBalanceFilter = keyof TBalanceTableFilters;
diff --git a/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/partials/ActiveFiltersList/hooks.ts b/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/partials/ActiveFiltersList/hooks.ts
index 98651f30836..f9881d11a09 100644
--- a/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/partials/ActiveFiltersList/hooks.ts
+++ b/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/partials/ActiveFiltersList/hooks.ts
@@ -3,6 +3,7 @@ import { useMemo } from 'react';
 import { useFiltersContext } from '~frame/v5/pages/BalancePage/partials/BalanceTable/Filters/FiltersContext/index.ts';
 import { FiltersValues } from '~frame/v5/pages/BalancePage/partials/BalanceTable/Filters/FiltersContext/types.ts';
 import { formatText } from '~utils/intl.ts';
+import { getObjectKeys } from '~utils/objects/index.ts';
 
 import { ATTRIBUTE_FILTERS } from '../filters/AttributeFilters/consts.ts';
 import { useGetTokenTypeFilters } from '../filters/TokenFilters/hooks.ts';
@@ -22,7 +23,7 @@ export const useActiveFilters = () => {
 
   const activeFiltersToDisplay = useMemo(() => {
     return [
-      ...(Object.values(token).some((value) => value === true)
+      ...(Object.values(token).some(({ isChecked }) => isChecked)
         ? [
             {
               filter: FiltersValues.TokenType,
@@ -30,12 +31,12 @@ export const useActiveFilters = () => {
                 id: 'balancePage.filter.type',
               }),
               items: tokenItems
-                .filter(({ name }) => token[name])
+                .filter(({ name }) => token[name]?.isChecked)
                 .map(({ symbol }) => symbol),
             },
           ]
         : []),
-      ...(Object.values(attribute).some((value) => value === true)
+      ...(Object.values(attribute).some(({ isChecked }) => isChecked)
         ? [
             {
               filter: FiltersValues.Attributes,
@@ -43,19 +44,21 @@ export const useActiveFilters = () => {
                 id: 'balancePage.filter.attributes',
               }),
               items: ATTRIBUTE_FILTERS.filter(
-                ({ name }) => attribute[name],
+                ({ name }) => attribute[name]?.isChecked,
               ).map(({ label }) => label),
             },
           ]
         : []),
-      ...(Object.values(chain).some((value) => value === true)
+      ...(Object.values(chain).some(({ isChecked }) => isChecked)
         ? [
             {
               filter: FiltersValues.Chain,
               category: formatText({
                 id: 'balancePage.filter.chain',
               }),
-              items: Object.keys(chain),
+              items: getObjectKeys(chain).filter(
+                (chainKey) => chain[chainKey]?.isChecked,
+              ),
             },
           ]
         : []),
diff --git a/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/partials/filters/AttributeFilters/AttributeFilters.tsx b/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/partials/filters/AttributeFilters/AttributeFilters.tsx
index 309efc6836a..e03a5fc550b 100644
--- a/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/partials/filters/AttributeFilters/AttributeFilters.tsx
+++ b/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/partials/filters/AttributeFilters/AttributeFilters.tsx
@@ -16,7 +16,7 @@ const AttributeFilters: FC = () => {
       </h5>
       <ul>
         {ATTRIBUTE_FILTERS.map(({ label, name }) => {
-          const isChecked = filters.attribute[name];
+          const { isChecked } = filters.attribute[name] ?? {};
 
           return (
             <li key={name}>
diff --git a/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/partials/filters/ChainFilters/ChainFilters.tsx b/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/partials/filters/ChainFilters/ChainFilters.tsx
index 47904d8a771..fe96032c18a 100644
--- a/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/partials/filters/ChainFilters/ChainFilters.tsx
+++ b/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/partials/filters/ChainFilters/ChainFilters.tsx
@@ -13,15 +13,16 @@ const ChainFilters = () => {
   return (
     <div>
       <h5 className="hidden px-3.5 pb-2 uppercase text-gray-400 text-4 sm:block">
-        {formatText({ id: 'balancePage.filter.chain' })}
+        {formatText({ id: 'balancePage.filter.availableChains' })}
       </h5>
       <ul>
-        {chainOptions.map(({ label, icon: Icon }) => {
-          const isChecked = filters.chain[label];
+        {chainOptions.map(({ label, icon: Icon, value }) => {
+          const { isChecked } = filters.chain[label] ?? {};
 
           return (
             <li key={label}>
               <Checkbox
+                id={value}
                 className="subnav-button px-0 sm:px-3.5"
                 name={label}
                 onChange={(event) => handleFiltersChange(event, 'chain')}
diff --git a/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/partials/filters/TokenFilters/TokenFilters.tsx b/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/partials/filters/TokenFilters/TokenFilters.tsx
index 759f2814385..e5da128dd84 100644
--- a/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/partials/filters/TokenFilters/TokenFilters.tsx
+++ b/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/partials/filters/TokenFilters/TokenFilters.tsx
@@ -50,7 +50,7 @@ const TokenFilters: FC = () => {
       </h5>
       <ul>
         {tokenItems.map(({ label, name, key }) => {
-          const isChecked = tokenFilters[name];
+          const { isChecked } = tokenFilters[name] ?? {};
 
           return (
             <li key={key}>
diff --git a/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/hooks.tsx b/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/hooks.tsx
index f1109e1f74a..570c646de5d 100644
--- a/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/hooks.tsx
+++ b/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/hooks.tsx
@@ -42,7 +42,11 @@ export const useBalancesData = (): BalanceTableFieldModel[] => {
   const { balancesByToken: expenditureBalances, loading } =
     useColonyExpenditureBalances();
 
-  const { attribute: attributeFilters, token: tokenFilters } = filters;
+  const {
+    attribute: attributeFilters,
+    token: tokenFilters,
+    chain: chainFilters,
+  } = filters;
 
   const tokensData = useMemo(
     () =>
@@ -81,8 +85,8 @@ export const useBalancesData = (): BalanceTableFieldModel[] => {
   );
 
   const filteredTokens = tokensData?.filter((token) => {
-    if (attributeFilters.native) {
-      if (getObjectValues(tokenFilters).some((filter) => filter)) {
+    if (attributeFilters.native.isChecked) {
+      if (getObjectValues(tokenFilters).some(({ isChecked }) => isChecked)) {
         return (
           token.token?.tokenAddress === nativeToken.tokenAddress &&
           tokenFilters[token.token?.tokenAddress || 0]
@@ -91,28 +95,24 @@ export const useBalancesData = (): BalanceTableFieldModel[] => {
       return token.token?.tokenAddress === nativeToken.tokenAddress;
     }
 
-    if (getObjectValues(tokenFilters).some((filter) => filter)) {
+    if (getObjectValues(tokenFilters).some(({ isChecked }) => isChecked)) {
       return tokenFilters[token.token?.tokenAddress || 0];
     }
 
     return true;
   });
 
-  const searchedTokens = filteredTokens?.filter(
-    ({ token }) =>
-      token?.name.toLowerCase().includes(searchFilter.toLowerCase()) ||
-      token?.symbol.toLowerCase().includes(searchFilter.toLowerCase()),
-  );
-
-  // const searchedChainIds = getObjectKeys(filters.chain).filter(
-  //   (chain) => filters.chain[chain],
-  // );
+  const searchedChainIds = getObjectValues(chainFilters)
+    .filter(({ isChecked }) => isChecked)
+    .map(({ id }) => id);
 
-  // const searchedTokensByChainIds = searchedTokens.filter(({ token }) =>
-  //   searchedChainIds?.length && token
-  //     ? searchedChainIds.includes(token?.chainMetadata.chainId)
-  //     : true,
-  // );
+  const searchedTokens = filteredTokens?.filter(({ token }) =>
+    searchedChainIds.length
+      ? searchedChainIds.includes(token.chainMetadata.chainId)
+      : true &&
+        (token?.name.toLowerCase().includes(searchFilter.toLowerCase()) ||
+          token?.symbol.toLowerCase().includes(searchFilter.toLowerCase())),
+  );
 
   const sortedTokens = useMemo(
     () =>

From 95e2e60c26bde094023b763ebf7602a765bb4014 Mon Sep 17 00:00:00 2001
From: Romeo Ledesma <r_ledesma@outlook.com>
Date: Wed, 5 Feb 2025 11:49:09 +0000
Subject: [PATCH 4/6] feat: filter activity by targetChainId

---
 .../FiltersContext/FiltersContext.ts          |  4 ++
 .../FiltersContext/FiltersContextProvider.tsx | 40 ++++++++++++++++--
 .../FiltersContext/types.ts                   |  1 +
 .../partials/ActionsTableFilters/consts.tsx   | 15 ++++++-
 .../partials/ActiveFiltersList/hooks.ts       | 20 ++++++++-
 .../filters/ChainFilters/ChainFilters.tsx     | 42 +++++++++++++++++++
 .../partials/filters/ChainFilters/index.ts    |  1 +
 src/hooks/useActivityFeed/helpers.ts          | 18 +++++++-
 src/hooks/useActivityFeed/types.ts            |  1 +
 src/hooks/useActivityFeed/useActivityFeed.ts  |  4 +-
 src/i18n/en.json                              |  2 +
 11 files changed, 140 insertions(+), 8 deletions(-)
 create mode 100644 src/components/common/ColonyActionsTable/partials/ActionsTableFilters/partials/filters/ChainFilters/ChainFilters.tsx
 create mode 100644 src/components/common/ColonyActionsTable/partials/ActionsTableFilters/partials/filters/ChainFilters/index.ts

diff --git a/src/components/common/ColonyActionsTable/FiltersContext/FiltersContext.ts b/src/components/common/ColonyActionsTable/FiltersContext/FiltersContext.ts
index bd77e9718e9..375948327ca 100644
--- a/src/components/common/ColonyActionsTable/FiltersContext/FiltersContext.ts
+++ b/src/components/common/ColonyActionsTable/FiltersContext/FiltersContext.ts
@@ -22,6 +22,7 @@ export interface FiltersContextValue {
   dateFilters: DateOptions;
   activeFilters: ActivityFeedFilters;
   selectedFiltersCount: number;
+  chainIdFilters: string[];
   handleActionTypesFilterChange: (
     event: React.ChangeEvent<HTMLInputElement>,
   ) => void;
@@ -34,6 +35,9 @@ export interface FiltersContextValue {
   handleDateFilterChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
   handleCustomDateFilterChange: (date: [Date | null, Date | null]) => void;
   handleResetFilters: (filter: FiltersValues) => void;
+  handleChainIdFilterChange: (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => void;
 }
 
 export const FiltersContext = createContext<FiltersContextValue | undefined>(
diff --git a/src/components/common/ColonyActionsTable/FiltersContext/FiltersContextProvider.tsx b/src/components/common/ColonyActionsTable/FiltersContext/FiltersContextProvider.tsx
index 897d1b2c515..48f7a75489a 100644
--- a/src/components/common/ColonyActionsTable/FiltersContext/FiltersContextProvider.tsx
+++ b/src/components/common/ColonyActionsTable/FiltersContext/FiltersContextProvider.tsx
@@ -15,11 +15,12 @@ import {
 import useCurrentBlockTime from '~hooks/useCurrentBlockTime.ts';
 import { type AnyActionType } from '~types/actions.ts';
 import { type MotionState } from '~utils/colonyMotions.ts';
+import { useChainOptions } from '~v5/common/ActionSidebar/partials/ChainSelect/hooks.ts';
 
 import { type DateOptions } from '../partials/ActionsTableFilters/types.ts';
 import { getDateFilter } from '../utils.ts';
 
-import { FiltersContext } from './FiltersContext.ts';
+import { FiltersContext, type FiltersContextValue } from './FiltersContext.ts';
 import { FiltersValues } from './types.ts';
 
 const emptyDateFilters: DateOptions = {
@@ -39,7 +40,10 @@ const FiltersContextProvider: FC<PropsWithChildren> = ({ children }) => {
   >([]);
   const [actionTypesFilters, setActionTypesFilters] = useState<Action[]>([]);
   const [dateFilters, setDateFilters] = useState<DateOptions>(emptyDateFilters);
+  const [chainIdFilters, setChainIdFilters] = useState<string[]>([]);
+
   const { dateFromCurrentBlockTime } = useCurrentBlockTime();
+  const chainOptions = useChainOptions();
 
   const handleActionTypesFilterChange = useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -120,10 +124,27 @@ const FiltersContextProvider: FC<PropsWithChildren> = ({ children }) => {
     [],
   );
 
+  const handleChainIdFilterChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const { checked } = event.target;
+      const { name } = event.target;
+
+      if (checked) {
+        setChainIdFilters((state) => [...state, name]);
+      } else {
+        setChainIdFilters((state) =>
+          state.filter((checkedItem) => checkedItem !== name),
+        );
+      }
+    },
+    [],
+  );
+
   const activeFilters: ActivityFeedFilters = useMemo(() => {
     const date = dateFromCurrentBlockTime
       ? getDateFilter(dateFilters, dateFromCurrentBlockTime)
       : null;
+
     const actionTypes = actionTypesFilters.reduce<AnyActionType[]>(
       (result, actionType) => {
         const apiActionTypes = ACTION_TYPE_TO_API_ACTION_TYPES_MAP[actionType];
@@ -137,6 +158,10 @@ const FiltersContextProvider: FC<PropsWithChildren> = ({ children }) => {
       [],
     );
 
+    const chainIds = chainOptions
+      .filter((chainOption) => chainIdFilters.includes(chainOption.label))
+      .map((chainOption) => chainOption.value);
+
     return {
       ...(motionStates.length ? { motionStates } : {}),
       ...(actionTypes.length ? { actionTypes } : {}),
@@ -147,14 +172,17 @@ const FiltersContextProvider: FC<PropsWithChildren> = ({ children }) => {
           }
         : {}),
       ...(searchFilter ? { search: searchFilter } : {}),
+      ...(chainIdFilters.length ? { chainIds } : {}),
     };
   }, [
-    actionTypesFilters,
     dateFromCurrentBlockTime,
     dateFilters,
-    decisionMethods,
+    actionTypesFilters,
     motionStates,
+    decisionMethods,
     searchFilter,
+    chainIdFilters,
+    chainOptions,
   ]);
 
   const handleResetFilters = useCallback((filter: FiltersValues) => {
@@ -184,7 +212,7 @@ const FiltersContextProvider: FC<PropsWithChildren> = ({ children }) => {
     decisionMethods.length +
     Object.values(dateFilters).filter(Boolean).length;
 
-  const value = useMemo(
+  const value = useMemo<FiltersContextValue>(
     () => ({
       searchFilter,
       setSearchFilter,
@@ -194,12 +222,14 @@ const FiltersContextProvider: FC<PropsWithChildren> = ({ children }) => {
       dateFilters,
       activeFilters,
       selectedFiltersCount,
+      chainIdFilters,
       handleActionTypesFilterChange,
       handleDecisionMethodsFilterChange,
       handleMotionStatesFilterChange,
       handleDateFilterChange,
       handleCustomDateFilterChange,
       handleResetFilters,
+      handleChainIdFilterChange,
     }),
     [
       searchFilter,
@@ -209,12 +239,14 @@ const FiltersContextProvider: FC<PropsWithChildren> = ({ children }) => {
       dateFilters,
       activeFilters,
       selectedFiltersCount,
+      chainIdFilters,
       handleActionTypesFilterChange,
       handleDecisionMethodsFilterChange,
       handleMotionStatesFilterChange,
       handleDateFilterChange,
       handleCustomDateFilterChange,
       handleResetFilters,
+      handleChainIdFilterChange,
     ],
   );
 
diff --git a/src/components/common/ColonyActionsTable/FiltersContext/types.ts b/src/components/common/ColonyActionsTable/FiltersContext/types.ts
index 138e79ce691..abdd9aa6af9 100644
--- a/src/components/common/ColonyActionsTable/FiltersContext/types.ts
+++ b/src/components/common/ColonyActionsTable/FiltersContext/types.ts
@@ -4,4 +4,5 @@ export enum FiltersValues {
   DecisionMethod = 'decisionMethod',
   Date = 'date',
   Custom = 'custom',
+  Chain = 'chain',
 }
diff --git a/src/components/common/ColonyActionsTable/partials/ActionsTableFilters/consts.tsx b/src/components/common/ColonyActionsTable/partials/ActionsTableFilters/consts.tsx
index 4e4031cde44..e2f6ad38faa 100644
--- a/src/components/common/ColonyActionsTable/partials/ActionsTableFilters/consts.tsx
+++ b/src/components/common/ColonyActionsTable/partials/ActionsTableFilters/consts.tsx
@@ -1,9 +1,16 @@
-import { Calendar, FilePlus, FlagPennant, Scales } from '@phosphor-icons/react';
+import {
+  Calendar,
+  CubeFocus,
+  FilePlus,
+  FlagPennant,
+  Scales,
+} from '@phosphor-icons/react';
 import React from 'react';
 
 import { formatText } from '~utils/intl.ts';
 
 import ActionTypeFilters from './partials/filters/ActionTypeFilters/index.ts';
+import ChainFilters from './partials/filters/ChainFilters/ChainFilters.tsx';
 import DateFilters from './partials/filters/DateFilters/index.ts';
 import DecisionMethodFilters from './partials/filters/DecisionMethodFilters/index.ts';
 import StatusFilters from './partials/filters/StatusFilters/index.ts';
@@ -33,4 +40,10 @@ export const filterItems = [
     name: 'decisionMethod',
     children: <DecisionMethodFilters />,
   },
+  {
+    icon: CubeFocus,
+    label: formatText({ id: 'activityFeedTable.filters.chain' }),
+    name: 'chain',
+    children: <ChainFilters />,
+  },
 ];
diff --git a/src/components/common/ColonyActionsTable/partials/ActionsTableFilters/partials/ActiveFiltersList/hooks.ts b/src/components/common/ColonyActionsTable/partials/ActionsTableFilters/partials/ActiveFiltersList/hooks.ts
index d1075c05788..44c43130eae 100644
--- a/src/components/common/ColonyActionsTable/partials/ActionsTableFilters/partials/ActiveFiltersList/hooks.ts
+++ b/src/components/common/ColonyActionsTable/partials/ActionsTableFilters/partials/ActiveFiltersList/hooks.ts
@@ -17,6 +17,7 @@ export const useActiveFilters = () => {
     decisionMethods,
     motionStates,
     handleResetFilters,
+    chainIdFilters,
   } = useFiltersContext();
 
   const activeFiltersToDisplay = useMemo(() => {
@@ -87,8 +88,25 @@ export const useActiveFilters = () => {
             },
           ]
         : []),
+      ...(chainIdFilters.length
+        ? [
+            {
+              filter: FiltersValues.Chain,
+              category: formatText({
+                id: 'activityFeedTable.filters.chain',
+              }),
+              items: chainIdFilters,
+            },
+          ]
+        : []),
     ];
-  }, [actionTypesFilters, dateFilters, decisionMethods, motionStates]);
+  }, [
+    actionTypesFilters,
+    chainIdFilters,
+    dateFilters,
+    decisionMethods,
+    motionStates,
+  ]);
 
   return { activeFiltersToDisplay, handleResetFilters };
 };
diff --git a/src/components/common/ColonyActionsTable/partials/ActionsTableFilters/partials/filters/ChainFilters/ChainFilters.tsx b/src/components/common/ColonyActionsTable/partials/ActionsTableFilters/partials/filters/ChainFilters/ChainFilters.tsx
new file mode 100644
index 00000000000..1531ddc7732
--- /dev/null
+++ b/src/components/common/ColonyActionsTable/partials/ActionsTableFilters/partials/filters/ChainFilters/ChainFilters.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+
+import { useFiltersContext } from '~common/ColonyActionsTable/FiltersContext/FiltersContext.ts';
+import { formatText } from '~utils/intl.ts';
+import { useChainOptions } from '~v5/common/ActionSidebar/partials/ChainSelect/hooks.ts';
+import Checkbox from '~v5/common/Checkbox/index.ts';
+
+const ChainFilters = () => {
+  const { chainIdFilters, handleChainIdFilterChange } = useFiltersContext();
+
+  const chainOptions = useChainOptions();
+
+  return (
+    <div>
+      <h5 className="hidden px-3.5 pb-2 uppercase text-gray-400 text-4 sm:block">
+        {formatText({ id: 'balancePage.filter.availableChains' })}
+      </h5>
+      <ul>
+        {chainOptions.map(({ label, icon: Icon, value }) => {
+          const isChecked = chainIdFilters.includes(label);
+
+          return (
+            <li key={label}>
+              <Checkbox
+                id={value}
+                className="subnav-button px-0 sm:px-3.5"
+                name={label}
+                onChange={handleChainIdFilterChange}
+                isChecked={isChecked}
+              >
+                {Icon && <Icon size={20} />}
+                {label}
+              </Checkbox>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+};
+
+export default ChainFilters;
diff --git a/src/components/common/ColonyActionsTable/partials/ActionsTableFilters/partials/filters/ChainFilters/index.ts b/src/components/common/ColonyActionsTable/partials/ActionsTableFilters/partials/filters/ChainFilters/index.ts
new file mode 100644
index 00000000000..d18b1b36e66
--- /dev/null
+++ b/src/components/common/ColonyActionsTable/partials/ActionsTableFilters/partials/filters/ChainFilters/index.ts
@@ -0,0 +1 @@
+export { default } from './ChainFilters.tsx';
diff --git a/src/hooks/useActivityFeed/helpers.ts b/src/hooks/useActivityFeed/helpers.ts
index 0a8d997d273..33834645bc2 100644
--- a/src/hooks/useActivityFeed/helpers.ts
+++ b/src/hooks/useActivityFeed/helpers.ts
@@ -166,7 +166,13 @@ export const getBaseSearchActionsFilterVariable = (
 
 export const getSearchActionsFilterVariable = (
   colonyAddress: string,
-  { dateFrom, dateTo, decisionMethods, teamId }: ActivityFeedFilters = {},
+  {
+    dateFrom,
+    dateTo,
+    decisionMethods,
+    teamId,
+    chainIds,
+  }: ActivityFeedFilters = {},
 ): SearchActionsFilterVariable => {
   const dateFilter =
     dateFrom && dateTo
@@ -191,6 +197,7 @@ export const getSearchActionsFilterVariable = (
               }
             : {}),
         };
+
   const decisionMethodFilter =
     decisionMethods && !!decisionMethods.length
       ? {
@@ -229,11 +236,20 @@ export const getSearchActionsFilterVariable = (
         }
       : undefined;
 
+  const chainFilters = chainIds?.length
+    ? {
+        or: chainIds.map((chainId) => ({
+          targetChainId: { eq: Number(chainId) },
+        })),
+      }
+    : {};
+
   return {
     ...getBaseSearchActionsFilterVariable(colonyAddress),
     ...(teamId !== undefined ? { fromDomainId: { eq: teamId } } : {}),
     ...dateFilter,
     ...(decisionMethodFilter || {}),
+    ...chainFilters,
   };
 };
 
diff --git a/src/hooks/useActivityFeed/types.ts b/src/hooks/useActivityFeed/types.ts
index 4539195d506..f3a9b61ca1e 100644
--- a/src/hooks/useActivityFeed/types.ts
+++ b/src/hooks/useActivityFeed/types.ts
@@ -21,6 +21,7 @@ export interface ActivityFeedFilters {
   dateTo?: Date;
   decisionMethods?: ActivityDecisionMethod[];
   search?: string;
+  chainIds?: string[];
 }
 
 export type ActivityFeedSort = SearchActionsQueryVariables['sort'];
diff --git a/src/hooks/useActivityFeed/useActivityFeed.ts b/src/hooks/useActivityFeed/useActivityFeed.ts
index 11dc9283499..3161adaa7ba 100644
--- a/src/hooks/useActivityFeed/useActivityFeed.ts
+++ b/src/hooks/useActivityFeed/useActivityFeed.ts
@@ -56,6 +56,8 @@ const useActivityFeed = (
     setPageNumber(1);
   }, [stringifiedFilters]);
 
+  const filter = getSearchActionsFilterVariable(colonyAddress, filters);
+
   const {
     data,
     fetchMore,
@@ -63,7 +65,7 @@ const useActivityFeed = (
     refetch: refetchActions,
   } = useSearchActionsQuery({
     variables: {
-      filter: getSearchActionsFilterVariable(colonyAddress, filters),
+      filter,
       sort: sort || {
         field: SearchableColonyActionSortableFields.CreatedAt,
         direction: SearchableSortDirection.Desc,
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 2e18aea8384..95f9d180c29 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -1777,6 +1777,8 @@
     "activityFeedTable.table.date": "<p>Date:</p> {date}",
     "activityFeedTable.table.status": "<p>Status:</p> {statusBadge}",
     "activityFeedTable.filters.actionType": "Action type",
+    "activityFeedTable.filters.availableChains": "Available chains",
+    "activityFeedTable.filters.chain": "Chain",
     "activityFeedTable.filters.date": "Date",
     "activityFeedTable.filters.date.pastHour": "Past hour",
     "activityFeedTable.filters.date.pastDay": "Past 24 hours",

From dcfdc05f087de683faaba2da0ae75c6b6e2f88de Mon Sep 17 00:00:00 2001
From: Romeo Ledesma <r_ledesma@outlook.com>
Date: Wed, 5 Feb 2025 14:37:32 +0000
Subject: [PATCH 5/6] feat: cleanup

---
 .../Filters/FiltersContext/FiltersContext.ts  |  4 +--
 .../FiltersContext/FiltersContextProvider.tsx | 34 +++++++------------
 .../Filters/FiltersContext/consts.ts          | 14 ++++++++
 .../Filters/FiltersContext/types.ts           |  2 +-
 .../partials/BalanceTable/hooks.tsx           | 10 +++---
 .../FundsPage/partials/FundsTable/consts.tsx  | 17 ----------
 .../FundsPage/partials/FundsTable/hooks.tsx   | 17 ++--------
 7 files changed, 37 insertions(+), 61 deletions(-)
 create mode 100644 src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/FiltersContext/consts.ts
 delete mode 100644 src/components/frame/v5/pages/FundsPage/partials/FundsTable/consts.tsx

diff --git a/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/FiltersContext/FiltersContext.ts b/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/FiltersContext/FiltersContext.ts
index 794da29d662..d497cc8c9c3 100644
--- a/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/FiltersContext/FiltersContext.ts
+++ b/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/FiltersContext/FiltersContext.ts
@@ -3,7 +3,7 @@ import { createContext, useContext } from 'react';
 import {
   type FiltersValues,
   type TBalanceTableFilters,
-  type TBalanceFilter,
+  type TBalanceTableFilterKey,
 } from './types.ts';
 
 import type React from 'react';
@@ -16,7 +16,7 @@ export interface FiltersContextValue {
   filters: TBalanceTableFilters;
   handleFiltersChange: (
     event: React.ChangeEvent<HTMLInputElement>,
-    type: TBalanceFilter,
+    type: TBalanceTableFilterKey,
   ) => void;
 }
 
diff --git a/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/FiltersContext/FiltersContextProvider.tsx b/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/FiltersContext/FiltersContextProvider.tsx
index e12aab9df6b..6d3cad7ece3 100644
--- a/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/FiltersContext/FiltersContextProvider.tsx
+++ b/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/FiltersContext/FiltersContextProvider.tsx
@@ -8,31 +8,28 @@ import React, {
 
 import { getObjectValues } from '~utils/objects/index.ts';
 
+import { defaultBalanceTableFilters } from './consts.ts';
 import { FiltersContext, type FiltersContextValue } from './FiltersContext.ts';
 import {
   FiltersValues,
   type TBalanceTableFilters,
-  type TBalanceFilter,
+  type TBalanceTableFilterKey,
 } from './types.ts';
 
 const FilterContextProvider: FC<PropsWithChildren> = ({ children }) => {
   const [searchFilter, setSearchFilter] = useState('');
 
   const [filters, setFilters] = useState<TBalanceTableFilters>({
-    attribute: {
-      native: {
-        isChecked: false,
-      },
-      reputation: {
-        isChecked: false,
-      },
-    },
-    token: {},
-    chain: {},
+    attribute: defaultBalanceTableFilters.attribute,
+    token: defaultBalanceTableFilters.token,
+    chain: defaultBalanceTableFilters.chain,
   });
 
   const handleFiltersChange = useCallback(
-    (event: React.ChangeEvent<HTMLInputElement>, type: TBalanceFilter) => {
+    (
+      event: React.ChangeEvent<HTMLInputElement>,
+      type: TBalanceTableFilterKey,
+    ) => {
       const isChecked = event.target.checked;
       const { name, id } = event.target;
 
@@ -55,26 +52,19 @@ const FilterContextProvider: FC<PropsWithChildren> = ({ children }) => {
       case FiltersValues.TokenType: {
         return setFilters((state) => ({
           ...state,
-          token: {},
+          token: defaultBalanceTableFilters.token,
         }));
       }
       case FiltersValues.Attributes: {
         return setFilters((state) => ({
           ...state,
-          attribute: {
-            native: {
-              isChecked: false,
-            },
-            reputation: {
-              isChecked: false,
-            },
-          },
+          attribute: defaultBalanceTableFilters.attribute,
         }));
       }
       case FiltersValues.Chain: {
         return setFilters((state) => ({
           ...state,
-          chain: {},
+          chain: defaultBalanceTableFilters.chain,
         }));
       }
       default: {
diff --git a/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/FiltersContext/consts.ts b/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/FiltersContext/consts.ts
new file mode 100644
index 00000000000..8563edd14ce
--- /dev/null
+++ b/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/FiltersContext/consts.ts
@@ -0,0 +1,14 @@
+import { type TBalanceTableFilters } from './types.ts';
+
+export const defaultBalanceTableFilters: TBalanceTableFilters = {
+  attribute: {
+    native: {
+      isChecked: false,
+    },
+    reputation: {
+      isChecked: false,
+    },
+  },
+  chain: {},
+  token: {},
+};
diff --git a/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/FiltersContext/types.ts b/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/FiltersContext/types.ts
index 10ac6cf4da6..93e4628400c 100644
--- a/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/FiltersContext/types.ts
+++ b/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/FiltersContext/types.ts
@@ -24,4 +24,4 @@ export type TBalanceTableFilters = {
   token: Record<string, TFilterConfig>;
 };
 
-export type TBalanceFilter = keyof TBalanceTableFilters;
+export type TBalanceTableFilterKey = keyof TBalanceTableFilters;
diff --git a/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/hooks.tsx b/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/hooks.tsx
index 570c646de5d..2e0ce11f941 100644
--- a/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/hooks.tsx
+++ b/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/hooks.tsx
@@ -84,19 +84,19 @@ export const useBalancesData = (): BalanceTableFieldModel[] => {
     ],
   );
 
-  const filteredTokens = tokensData?.filter((token) => {
+  const filteredTokens = tokensData?.filter(({ token: { tokenAddress } }) => {
     if (attributeFilters.native.isChecked) {
       if (getObjectValues(tokenFilters).some(({ isChecked }) => isChecked)) {
         return (
-          token.token?.tokenAddress === nativeToken.tokenAddress &&
-          tokenFilters[token.token?.tokenAddress || 0]
+          tokenAddress === nativeToken.tokenAddress &&
+          tokenFilters[tokenAddress || 0]
         );
       }
-      return token.token?.tokenAddress === nativeToken.tokenAddress;
+      return tokenAddress === nativeToken.tokenAddress;
     }
 
     if (getObjectValues(tokenFilters).some(({ isChecked }) => isChecked)) {
-      return tokenFilters[token.token?.tokenAddress || 0];
+      return tokenFilters[tokenAddress]?.isChecked;
     }
 
     return true;
diff --git a/src/components/frame/v5/pages/FundsPage/partials/FundsTable/consts.tsx b/src/components/frame/v5/pages/FundsPage/partials/FundsTable/consts.tsx
deleted file mode 100644
index 45b73549873..00000000000
--- a/src/components/frame/v5/pages/FundsPage/partials/FundsTable/consts.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-
-import { SUPPORTED_CHAINS } from '~constants/proxyColonies.ts';
-
-export const chainFilters = SUPPORTED_CHAINS.map(
-  ({ name, icon: Icon, chainId }) => ({
-    name,
-    symbol: name,
-    filterKey: chainId,
-    label: (
-      <div className="flex items-start gap-2">
-        {Icon && <Icon size={20} />}
-        {name}
-      </div>
-    ),
-  }),
-);
diff --git a/src/components/frame/v5/pages/FundsPage/partials/FundsTable/hooks.tsx b/src/components/frame/v5/pages/FundsPage/partials/FundsTable/hooks.tsx
index f3fc1269195..57f21e69895 100644
--- a/src/components/frame/v5/pages/FundsPage/partials/FundsTable/hooks.tsx
+++ b/src/components/frame/v5/pages/FundsPage/partials/FundsTable/hooks.tsx
@@ -5,7 +5,6 @@ import React, { useMemo, useState } from 'react';
 
 import { ADDRESS_ZERO } from '~constants';
 import { useColonyContext } from '~context/ColonyContext/ColonyContext.ts';
-import { useDeployedChainIds } from '~hooks/proxyColonies/useDeployedChainIds.ts';
 import useColonyFundsClaims from '~hooks/useColonyFundsClaims.ts';
 import { notNull } from '~utils/arrays/index.ts';
 import { formatText } from '~utils/intl.ts';
@@ -51,9 +50,7 @@ export const useFundsTableColumns = (): ColumnDef<
 export const useFundsTable = (): UseFundsTableProps => {
   const { colony } = useColonyContext();
   const claims = useColonyFundsClaims();
-  const activeProxyColoniesChainIds = useDeployedChainIds({
-    filterFn: (deployedProxyColony) => deployedProxyColony?.isActive,
-  });
+
   const validChainFilters = useChainOptions();
 
   const colonyTokens = useMemo(
@@ -276,9 +273,7 @@ export const useFundsTable = (): UseFundsTableProps => {
 
     const searchedTokensByChainIds = visibleTokens.filter(({ token }) =>
       searchedChainIds?.length && token
-        ? [...searchedChainIds, ...activeProxyColoniesChainIds].includes(
-            token?.chainMetadata.chainId,
-          )
+        ? searchedChainIds.includes(token?.chainMetadata.chainId)
         : true,
     );
 
@@ -289,13 +284,7 @@ export const useFundsTable = (): UseFundsTableProps => {
     );
 
     return searchResults;
-  }, [
-    activeFilters,
-    activeProxyColoniesChainIds,
-    searchValue,
-    validChainFilters,
-    visibleTokens,
-  ]);
+  }, [activeFilters, searchValue, validChainFilters, visibleTokens]);
 
   return {
     filters,

From 89a9a0de038db0154a647756dfa8c6b575564d0c Mon Sep 17 00:00:00 2001
From: Romeo Ledesma <r_ledesma@outlook.com>
Date: Fri, 7 Feb 2025 13:47:05 +0000
Subject: [PATCH 6/6] feat: only show enabled proxy chains on the chains filter
 list

---
 .../FiltersContext/FiltersContextProvider.tsx |  9 +++-
 .../filters/ChainFilters/ChainFilters.tsx     |  5 ++-
 .../filters/ChainFilters/ChainFilters.tsx     |  5 ++-
 .../FundsPage/partials/FundsTable/hooks.tsx   |  5 ++-
 .../partials/ChainSelect/hooks.ts             | 44 ++++++++++++++++---
 src/constants/index.ts                        | 14 ++++++
 src/graphql/generated.ts                      |  2 -
 .../proxyColonies/useDeployedChainIds.ts      |  5 ++-
 8 files changed, 75 insertions(+), 14 deletions(-)

diff --git a/src/components/common/ColonyActionsTable/FiltersContext/FiltersContextProvider.tsx b/src/components/common/ColonyActionsTable/FiltersContext/FiltersContextProvider.tsx
index 48f7a75489a..019d5d3f107 100644
--- a/src/components/common/ColonyActionsTable/FiltersContext/FiltersContextProvider.tsx
+++ b/src/components/common/ColonyActionsTable/FiltersContext/FiltersContextProvider.tsx
@@ -43,7 +43,10 @@ const FiltersContextProvider: FC<PropsWithChildren> = ({ children }) => {
   const [chainIdFilters, setChainIdFilters] = useState<string[]>([]);
 
   const { dateFromCurrentBlockTime } = useCurrentBlockTime();
-  const chainOptions = useChainOptions();
+  const chainOptions = useChainOptions({
+    includeDefaultChain: true,
+    onlyShowActiveChains: true,
+  });
 
   const handleActionTypesFilterChange = useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -196,6 +199,9 @@ const FiltersContextProvider: FC<PropsWithChildren> = ({ children }) => {
       case FiltersValues.DecisionMethod: {
         return setDecisionMethods([]);
       }
+      case FiltersValues.Chain: {
+        return setChainIdFilters([]);
+      }
       case FiltersValues.Date:
       case FiltersValues.Custom: {
         return setDateFilters(emptyDateFilters);
@@ -209,6 +215,7 @@ const FiltersContextProvider: FC<PropsWithChildren> = ({ children }) => {
   const selectedFiltersCount =
     actionTypesFilters.length +
     motionStates.length +
+    chainIdFilters.length +
     decisionMethods.length +
     Object.values(dateFilters).filter(Boolean).length;
 
diff --git a/src/components/common/ColonyActionsTable/partials/ActionsTableFilters/partials/filters/ChainFilters/ChainFilters.tsx b/src/components/common/ColonyActionsTable/partials/ActionsTableFilters/partials/filters/ChainFilters/ChainFilters.tsx
index 1531ddc7732..ca539c57662 100644
--- a/src/components/common/ColonyActionsTable/partials/ActionsTableFilters/partials/filters/ChainFilters/ChainFilters.tsx
+++ b/src/components/common/ColonyActionsTable/partials/ActionsTableFilters/partials/filters/ChainFilters/ChainFilters.tsx
@@ -8,7 +8,10 @@ import Checkbox from '~v5/common/Checkbox/index.ts';
 const ChainFilters = () => {
   const { chainIdFilters, handleChainIdFilterChange } = useFiltersContext();
 
-  const chainOptions = useChainOptions();
+  const chainOptions = useChainOptions({
+    includeDefaultChain: true,
+    onlyShowActiveChains: true,
+  });
 
   return (
     <div>
diff --git a/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/partials/filters/ChainFilters/ChainFilters.tsx b/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/partials/filters/ChainFilters/ChainFilters.tsx
index fe96032c18a..18cbccd4f04 100644
--- a/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/partials/filters/ChainFilters/ChainFilters.tsx
+++ b/src/components/frame/v5/pages/BalancePage/partials/BalanceTable/Filters/partials/filters/ChainFilters/ChainFilters.tsx
@@ -8,7 +8,10 @@ import Checkbox from '~v5/common/Checkbox/index.ts';
 const ChainFilters = () => {
   const { filters, handleFiltersChange } = useFiltersContext();
 
-  const chainOptions = useChainOptions();
+  const chainOptions = useChainOptions({
+    includeDefaultChain: true,
+    onlyShowActiveChains: true,
+  });
 
   return (
     <div>
diff --git a/src/components/frame/v5/pages/FundsPage/partials/FundsTable/hooks.tsx b/src/components/frame/v5/pages/FundsPage/partials/FundsTable/hooks.tsx
index 57f21e69895..89140afae55 100644
--- a/src/components/frame/v5/pages/FundsPage/partials/FundsTable/hooks.tsx
+++ b/src/components/frame/v5/pages/FundsPage/partials/FundsTable/hooks.tsx
@@ -51,7 +51,10 @@ export const useFundsTable = (): UseFundsTableProps => {
   const { colony } = useColonyContext();
   const claims = useColonyFundsClaims();
 
-  const validChainFilters = useChainOptions();
+  const validChainFilters = useChainOptions({
+    includeDefaultChain: true,
+    onlyShowActiveChains: true,
+  });
 
   const colonyTokens = useMemo(
     () =>
diff --git a/src/components/v5/common/ActionSidebar/partials/ChainSelect/hooks.ts b/src/components/v5/common/ActionSidebar/partials/ChainSelect/hooks.ts
index c95ce46d109..e7091124301 100644
--- a/src/components/v5/common/ActionSidebar/partials/ChainSelect/hooks.ts
+++ b/src/components/v5/common/ActionSidebar/partials/ChainSelect/hooks.ts
@@ -1,8 +1,9 @@
 import { useMemo } from 'react';
 
+import { DEFAULT_CHAIN_CONFIG, type IChainConfig } from '~constants';
 import { SUPPORTED_CHAINS } from '~constants/proxyColonies.ts';
 import { useGetSupportedChainsQuery } from '~gql';
-import GanacheIcon from '~icons/GanacheIcon.tsx';
+import { useDeployedChainIds } from '~hooks/proxyColonies/useDeployedChainIds.ts';
 import { notNull } from '~utils/arrays/index.ts';
 import {
   type IconOption,
@@ -11,33 +12,62 @@ import {
 
 export interface IUseChainOptions {
   filterOptionsFn?: (options: SearchSelectOption<IconOption>) => boolean;
+  onlyShowActiveChains?: boolean;
+  includeDefaultChain?: boolean;
 }
 
 export const useChainOptions = (args: IUseChainOptions = {}) => {
-  const { filterOptionsFn } = args;
+  const { filterOptionsFn, includeDefaultChain, onlyShowActiveChains } = args;
+
+  const deployedChainIds = useDeployedChainIds({
+    filterFn: (deployedProxyColony) => deployedProxyColony?.isActive,
+    skip: !onlyShowActiveChains,
+  });
 
   const { data } = useGetSupportedChainsQuery();
 
+  const supportedChains = data?.listSupportedChains?.items;
+
   const chainOptions = useMemo(() => {
-    return (data?.listSupportedChains?.items ?? [])
+    if (!supportedChains) {
+      return [];
+    }
+
+    let options: IChainConfig[] = supportedChains
       .map((chain) => {
         const chainConfig = SUPPORTED_CHAINS.find(
           (supportedChain) => supportedChain.chainId === chain?.id,
         );
+
         if (!chainConfig) {
           return null;
         }
 
         return {
-          icon: chainConfig.icon ?? GanacheIcon,
+          icon: chainConfig.icon ?? DEFAULT_CHAIN_CONFIG.icon,
           isDisabled: !chain?.isActive,
           value: chainConfig.chainId,
           label: chainConfig.shortName,
         };
       })
-      .filter(notNull)
-      .filter((option) => (filterOptionsFn ? filterOptionsFn(option) : true));
-  }, [data, filterOptionsFn]);
+      .filter(notNull);
+
+    if (onlyShowActiveChains) {
+      options = options.filter(({ value }) => deployedChainIds.includes(value));
+    }
+
+    if (filterOptionsFn) {
+      options = options.filter((option) => filterOptionsFn(option));
+    }
+
+    return [...options, ...(includeDefaultChain ? [DEFAULT_CHAIN_CONFIG] : [])];
+  }, [
+    deployedChainIds,
+    filterOptionsFn,
+    includeDefaultChain,
+    onlyShowActiveChains,
+    supportedChains,
+  ]);
 
   return chainOptions;
 };
diff --git a/src/constants/index.ts b/src/constants/index.ts
index 4c19ad8e77b..abc966d2275 100644
--- a/src/constants/index.ts
+++ b/src/constants/index.ts
@@ -309,6 +309,20 @@ export const DEFAULT_NETWORK_TOKEN = TOKEN_DATA[DEFAULT_NETWORK];
 
 export const DEFAULT_NETWORK_INFO = NETWORK_DATA[DEFAULT_NETWORK];
 
+export interface IChainConfig {
+  icon: Icon;
+  value: string;
+  label: string;
+  isDisabled: boolean;
+}
+
+export const DEFAULT_CHAIN_CONFIG: IChainConfig = {
+  icon: DEFAULT_NETWORK_INFO.icon ?? GanacheIcon,
+  value: DEFAULT_NETWORK_INFO.chainId,
+  label: DEFAULT_NETWORK_INFO.shortName,
+  isDisabled: false,
+};
+
 /*
  * List all networks that curently support metatransactions
  */
diff --git a/src/graphql/generated.ts b/src/graphql/generated.ts
index b146bbed30c..bf13c3549d0 100644
--- a/src/graphql/generated.ts
+++ b/src/graphql/generated.ts
@@ -650,8 +650,6 @@ export enum ColonyActionType {
   AddVerifiedMembers = 'ADD_VERIFIED_MEMBERS',
   AddVerifiedMembersMotion = 'ADD_VERIFIED_MEMBERS_MOTION',
   AddVerifiedMembersMultisig = 'ADD_VERIFIED_MEMBERS_MULTISIG',
-  /** An action related to arbitrary transaction */
-  ArbitraryTx = 'ARBITRARY_TX',
   /** An action related to canceling an expenditure */
   CancelExpenditure = 'CANCEL_EXPENDITURE',
   /** An action related to a motion to cancel an expenditure */
diff --git a/src/hooks/proxyColonies/useDeployedChainIds.ts b/src/hooks/proxyColonies/useDeployedChainIds.ts
index 359c6cc25c3..00b5c9fffcc 100644
--- a/src/hooks/proxyColonies/useDeployedChainIds.ts
+++ b/src/hooks/proxyColonies/useDeployedChainIds.ts
@@ -1,11 +1,13 @@
 import { useColonyContext } from '~context/ColonyContext/ColonyContext.ts';
-import { type ProxyColony, useGetProxyColoniesQuery } from '~gql';
+import { useGetProxyColoniesQuery, type ProxyColony } from '~gql';
 import { notNull } from '~utils/arrays/index.ts';
 
 export const useDeployedChainIds = ({
   filterFn = notNull,
+  skip = false,
 }: {
   filterFn: (x: ProxyColony) => boolean;
+  skip?: boolean;
 }) => {
   const { colony } = useColonyContext();
   const { data } = useGetProxyColoniesQuery({
@@ -13,6 +15,7 @@ export const useDeployedChainIds = ({
       colonyAddress: colony.colonyAddress,
     },
     fetchPolicy: 'network-only',
+    skip,
   });
   const deployedProxyColonies =
     data?.getProxyColoniesByColonyAddress?.items || [];