Trello 19

src/App.tsx

@@ -4,13 +4,15 @@ import './App.scss';
 import BaseLayout from './components/layouts/BaseLayout';
 import Ipfs from './pages/ipfs/Ipfs';
 import IpfsList from './pages/ipfs/IpfsList';
+import TrackedContractsList from './pages/tracked-contracts/TrackedContractsList';
 
 const App = (): JSX.Element => {
   return (
     <Router>
       <BaseLayout>
         <Switch>
           <Route path="/ipfs/:hash" component={Ipfs} />
+          <Route path="/tracked-contracts" component={TrackedContractsList} />
           <Route path={['/', '/ipfs']} component={IpfsList} />
         </Switch>
       </BaseLayout>

src/components/common/Card/Card.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-const Card: React.FC<{}> = ({ children }) => {
-  return <div className="inline-block bg-light shadow-lg overflow-hidden sm:rounded-lg">{children}</div>;
+const Card: React.FC<{ className?: string }> = ({ className = '', children }) => {
+  return <div className={`inline-block bg-light shadow-lg overflow-hidden sm:rounded-lg ${className}`}>{children}</div>;
 };
 
 export default Card;

src/components/common/Input/SearchInput.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { FaSearch, FaTimes } from 'react-icons/fa';
+
+interface SearchInput {
+  value: any;
+  onChange: (value: string) => void;
+  name?: string;
+  id?: string;
+  className?: string;
+  placeholder?: string;
+}
+
+const SearchInput: React.FC<SearchInput> = ({
+  value,
+  onChange,
+  name = 'search',
+  id = 'search',
+  className = '',
+  placeholder = '',
+}): JSX.Element => {
+  return (
+    <div className="mt-1 relative">
+      <div className="absolute inset-y-0 right-0 p-3 text-gray-600 flex items-center">
+        {/** TODO: Remove this and actually use the other icons library once we get the query manager merged in */}
+        {value ? (
+          <button type="button" onClick={() => onChange('')}>
+            <FaTimes size={12} />
+          </button>
+        ) : (
+          <FaSearch size={12} />
+        )}
+      </div>
+      <input
+        type="text"
+        name={name}
+        id={id}
+        value={value}
+        placeholder={placeholder}
+        className={`focus:outline-none focus:ring-2 focus:ring-opacity-20 focus:ring-primary block w-full pl-7 pr-12 sm:text-sm border-gray-200 bg-gray-200 text-gray-600 rounded-full ${className}`}
+        onChange={(event) => onChange(event.target.value)}
+      />
+    </div>
+  );
+};
+
+export default SearchInput;

src/components/common/Input/index.ts

@@ -0,0 +1,3 @@
+import SearchInput from './SearchInput';
+
+export default SearchInput;

src/components/common/Table/TableHeaderCell.tsx

@@ -10,6 +10,5 @@ const TableHeaderCell: React.FC<{ className?: string }> = ({ className = '', chi
     </th>
   );
 };
-9;
 
 export default TableHeaderCell;

src/components/common/index.ts

@@ -0,0 +1,2 @@
+export * from './Card';
+export * from './Table';

src/components/layouts/NavigationBar/NavigationBar.tsx

@@ -19,6 +19,9 @@ const NavigationBar = (): JSX.Element => {
               <li className="navigation-bar__link">
                 <Link to="/ipfs">IPFS</Link>
               </li>
+              <li className="navigation-bar__link">
+                <Link to="/tracked-contracts">Tracked Contracts</Link>
+              </li>
             </ul>
           </div>
         </div>

src/pages/tracked-contracts/TrackedContractsList.tsx

@@ -0,0 +1,96 @@
+import React, { useEffect, useState } from 'react';
+import { Card, CardBody, CardHeader } from '../../components/common';
+import SearchInput from '../../components/common/Input';
+import mockDataChain from './mock-data';
+
+type ChainType = 'evm' | 'substrate';
+
+interface Chain {
+  name: string;
+  type: ChainType;
+  project: string;
+  url: string;
+  credentials: {
+    // TODO: Ask potentially BE to have structure camelCase in case or we can just disable the warning in eslint
+    /* eslint-disable camelcase */
+    private_key?: string;
+    public_key?: string;
+  };
+  tracked_contracts: string[];
+}
+
+const TrackedContractsList: React.FC<{}> = () => {
+  const [chains, setChains] = useState<Chain[]>([]);
+  const [activeChain, setActiveChain] = useState<Chain>();
+  const [searchChain, setSearchChain] = useState('');
+
+  useEffect(() => {
+    setChains(mockDataChain as Chain[]);
+  }, []);
+
+  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>
+      );
+    });
+
+  const activeContracts =
+    activeChain && activeChain.tracked_contracts.length
+      ? activeChain.tracked_contracts.map((contract) => {
+          return contract;
+        })
+      : 'No Tracked Contracts';
+
+  return (
+    <div className="container mx-auto">
+      <div className="flex">
+        <div className="flex-none mr-10 w-1/4 md:w-auto">
+          <Card>
+            <div className="mx-4 px-4 py-3 max-w-md">
+              <SearchInput
+                value={searchChain}
+                onChange={(val: string) => setSearchChain(val)}
+                placeholder="Search"
+                className="py-3 text-lg leading-relaxed max-w-full"
+              />
+            </div>
+            <CardBody>
+              <div className="divide-y divide-gray-100 text-secondary">{allChains}</div>
+            </CardBody>
+          </Card>
+        </div>
+        <div className="flex-1">
+          <Card className="w-full">
+            <CardBody>
+              <CardHeader>Tracked Contracts</CardHeader>
+              {/* <Table></Table> */}
+              {activeContracts}
+            </CardBody>
+          </Card>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TrackedContractsList;

src/pages/tracked-contracts/index.ts

@@ -0,0 +1 @@
+export { default as TrackedContractsList } from './TrackedContractsList';

src/pages/tracked-contracts/mock-data.ts

@@ -0,0 +1,33 @@
+// We can remove this when we can hook to the BE and get that data it's just for getting the UX ready for it
+const mockDataChain = [
+  {
+    name: 'eth.mainnet',
+    type: 'evm',
+    project: 'eth',
+    url: 'https://mainnet.infura.io/v3/<project_id>',
+    credentials: {},
+    tracked_contracts: [],
+  },
+  {
+    name: 'eth.dev-mainnet-fork',
+    type: 'evm',
+    project: 'eth',
+    url: 'ws://localhost:8545',
+    credentials: {
+      private_key: '<private_key>',
+    },
+    tracked_contracts: ['0x3194cBDC3dbcd3E11a07892e7bA5c3394048Cc87'],
+  },
+  {
+    name: 'dev-canvas',
+    type: 'substrate',
+    project: 'canvas',
+    url: 'ws://127.0.0.1:9944',
+    credentials: {
+      private_key: '<private_key>',
+      public_key: '<public_key>',
+    },
+    tracked_contracts: ['5FnDzvXcnu3RCtQ3f3RFqaQnVLfcWLZ9FvUURNoPMdmsKZXP'],
+  },
+];
+export default mockDataChain;