Trello 19

src/pages/tracked-contracts/TrackedChain.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+interface TrackedChainProps {
+  name: string;
+  active: boolean;
+  onClick: () => void;
+}
+
+const TrackedChain: React.FC<TrackedChainProps> = ({ name, active, onClick }) => {
+  return (
+    <div
+      className={`focus:outline-none py-4 capitalize cursor-pointer ${active ? 'font-bold text-primary' : ''}`}
+      role="button"
+      onClick={() => onClick()}
+      onKeyPress={() => onClick()}
+      tabIndex={0}
+    >
+      {name}
+    </div>
+  );
+};
+
+export default TrackedChain;

src/pages/tracked-contracts/TrackedContractsList.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { Card, CardBody, CardHeader } from '../../components/common';
 import SearchInput from '../../components/common/Input';
 import mockDataChain from './mock-data';
+import TrackedChain from './TrackedChain';
 
 type ChainType = 'evm' | 'substrate';
 
@@ -28,38 +29,15 @@ const TrackedContractsList: React.FC<{}> = () => {
     setChains(mockDataChain as Chain[]);
   }, []);
 
+  // Filter out by the search but also keep the current active in the search
   const allChains = chains
-    .filter((data) => {
-      if (!searchChain) {
-        return data;
-      }
-      if (data.name.includes(searchChain.trim().toLocaleLowerCase())) {
-        return data;
-      }
-      return null;
-    })
-    .map((chain) => {
-      return (
-        <div
-          className={`focus:outline-none py-4 capitalize cursor-pointer ${
-            chain.name === activeChain?.name ? 'font-bold text-primary' : ''
-          }`}
-          role="button"
-          onClick={() => setActiveChain(chain)}
-          onKeyPress={() => setActiveChain(chain)}
-          tabIndex={0}
-        >
-          {chain.name}
-        </div>
-      );
-    });
+    .filter((chain) => chain.name.includes(searchChain.trim().toLocaleLowerCase()) || activeChain?.name === chain.name)
+    .map((chain) => (
+      <TrackedChain active={chain.name === activeChain?.name} name={chain.name} onClick={() => setActiveChain(chain)} />
+    ));
 
   const activeContracts =
-    activeChain && activeChain.tracked_contracts.length
-      ? activeChain.tracked_contracts.map((contract) => {
-          return contract;
-        })
-      : 'No Tracked Contracts';
+    activeChain && activeChain.tracked_contracts.length ? activeChain.tracked_contracts : 'No Tracked Contracts';
 
   return (
     <div className="container mx-auto">