From 8bdd98f3f8ea81961e40a0a9f296aeca1b1ef59f Mon Sep 17 00:00:00 2001
From: oneway <trust.biz888@gmail.com>
Date: Fri, 1 Apr 2022 08:07:42 -0500
Subject: [PATCH 1/4] add accordion and chip component

---
 .cssrem                                    |   4 +
 package.json                               |  17 +-
 src/App.js                                 |   2 +-
 src/Components/Chip/index.jsx              |  16 ++
 src/Components/Chip/style.css              |  27 +++
 src/Components/accordion.css               |  31 +++
 src/index.css                              |   4 +
 src/tokenSearch/NetworkFilter.jsx          |  44 ++++
 src/tokenSearch/SearchNetworks.jsx         |   2 +-
 src/tokenSearch/SearchNetworksSelector.jsx |  21 +-
 src/tokenSearch/index.jsx                  |   8 +-
 tailwind.config.js                         | 253 +++++++++++++++++++++
 12 files changed, 409 insertions(+), 20 deletions(-)
 create mode 100644 .cssrem
 create mode 100644 src/Components/Chip/index.jsx
 create mode 100644 src/Components/Chip/style.css
 create mode 100644 src/Components/accordion.css
 create mode 100644 src/tokenSearch/NetworkFilter.jsx
 create mode 100644 tailwind.config.js

diff --git a/.cssrem b/.cssrem
new file mode 100644
index 0000000..3a2cdc2
--- /dev/null
+++ b/.cssrem
@@ -0,0 +1,4 @@
+{
+  "rootFontSize": 16,
+  "fixedDigits": 3
+}
diff --git a/package.json b/package.json
index f1e14e4..ec9df1e 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@craco/craco": "^6.4.3",
     "@rbl/terminal-library": "git+https://github.com/Rome-Blockchain-Labs/terminal-library.git#8dda04858acb1c45437325857eff56c60afca5ee",
     "@rbl/velox-common": "4.1.3",
     "@reduxjs/toolkit": "^1.8.0",
@@ -16,6 +17,7 @@
     "graphql-request": "^4.2.0",
     "lodash": "^4.17.21",
     "react": "^17.0.2",
+    "react-accessible-accordion": "^4.0.0",
     "react-dom": "^17.0.2",
     "react-redux": "^7.2.6",
     "react-router": "^6.2.2",
@@ -23,7 +25,8 @@
     "react-scripts": "5.0.0",
     "react-virtualized": "^9.22.3",
     "reactstrap": "^9.0.1",
-    "styled-components": "^5.3.3",
+    "styled-components": "^5.3.5",
+    "twin.macro": "^2.8.2",
     "typescript": "^4.6.2",
     "web-vitals": "^2.1.4"
   },
@@ -51,5 +54,17 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@babel/core": "^7.17.8",
+    "autoprefixer": "^10.4.4",
+    "babel-plugin-macros": "^3.1.0",
+    "postcss": "^8.4.12",
+    "tailwindcss": "^3.0.23"
+  },
+  "babelMacros": {
+    "twin": {
+      "preset": "styled-components"
+    }
   }
 }
diff --git a/src/App.js b/src/App.js
index e070a53..ebca7cb 100644
--- a/src/App.js
+++ b/src/App.js
@@ -10,7 +10,7 @@ function App() {
       <Provider store={store}>
       <br/><br/><br/><br/><br/><br/>
       <br/><br/>
-      <div style={{width:"500px", margin:"auto", border:"solid"}}>
+      <div style={{width:"500px", margin:"auto"}}>
         <TokenSearch />
         {/*  <iframe loading={"lazy"} src={"http://localhost:3000/cookieFramed.html"} height={500}/>*/}
       </div>
diff --git a/src/Components/Chip/index.jsx b/src/Components/Chip/index.jsx
new file mode 100644
index 0000000..8dd2e50
--- /dev/null
+++ b/src/Components/Chip/index.jsx
@@ -0,0 +1,16 @@
+import React, { memo } from 'react';
+import './style.css'
+
+export const Chip = memo(
+  (props) => {
+    const {label, checked, onChange} = props
+    return (
+      <>
+        <input type="checkbox" id={label} onChange={onChange} checked={checked}/>
+        <label for={label}>{label} </label>
+      </>
+    )
+  }
+)
+
+export default Chip
\ No newline at end of file
diff --git a/src/Components/Chip/style.css b/src/Components/Chip/style.css
new file mode 100644
index 0000000..0d13eb9
--- /dev/null
+++ b/src/Components/Chip/style.css
@@ -0,0 +1,27 @@
+input[type="checkbox"] {
+  display: none;
+}
+
+input[type="checkbox"] + label {
+  -webkit-transition: all 500ms ease;
+  transition: all 500ms ease;
+  font-size: 18px;
+  cursor: pointer;
+  border-radius: 50px;
+  background-color: #fff;
+  border:solid 2px #7d7d7d;
+  padding: 0.5rem 2rem;
+  display: inline-block;
+  -moz-user-select: -moz-none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  margin: 10px;
+}
+
+
+input[type="checkbox"]:checked + label {
+  -webkit-transition: all 500ms ease;
+  transition: all 500ms ease;
+  background-color: #666699; color: white; border-color:#666699;
+}
diff --git a/src/Components/accordion.css b/src/Components/accordion.css
new file mode 100644
index 0000000..f237bac
--- /dev/null
+++ b/src/Components/accordion.css
@@ -0,0 +1,31 @@
+
+.accordion__button {
+  background-color: #f4f4f4;
+  color: #444;
+  cursor: pointer;
+  padding: 18px;
+  width: 100%;
+  text-align: left;
+  border: none;
+}
+
+.accordion__button:hover {
+  background-color: #ddd;
+}
+
+.accordion__button:after {
+  display: block;
+  content: '';
+  float: right;
+  height: 10px;
+  width: 10px;
+  margin-right: 12px;
+  border-bottom: 2px solid currentColor;
+  border-right: 2px solid currentColor;
+  transform: rotate(-45deg);
+  }
+
+.accordion__button[aria-expanded='true']::after,
+.accordion__button[aria-selected='true']::after {
+  transform: rotate(45deg);
+}
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index ec2585e..17df0e7 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
diff --git a/src/tokenSearch/NetworkFilter.jsx b/src/tokenSearch/NetworkFilter.jsx
new file mode 100644
index 0000000..3b08b8a
--- /dev/null
+++ b/src/tokenSearch/NetworkFilter.jsx
@@ -0,0 +1,44 @@
+import React from "react"
+import { useDispatch, useSelector } from 'react-redux';
+
+import {
+  Accordion,
+  AccordionItem,
+  AccordionItemHeading,
+  AccordionItemButton,
+  AccordionItemPanel,
+} from 'react-accessible-accordion';
+//import 'react-accessible-accordion/dist/fancy-example.css';
+import SearchNetworks from "./SearchNetworks";
+import SearchExchanges from "./SearchExchanges";
+
+import './../Components/accordion.css'
+
+export const NetworkFilter = () => {
+  const { isSelecting, searchText, isLoading, networkMap } = useSelector(
+    (state) => state
+  );
+
+  console.log('networkMap: ', networkMap)
+  return (<>
+   <Accordion allowZeroExpanded>
+      <AccordionItem>
+        <AccordionItemHeading>
+          <AccordionItemButton >
+            Filter Networks
+          </AccordionItemButton>
+        </AccordionItemHeading>
+        <AccordionItemPanel>
+         {<SearchNetworks />}
+         {<SearchExchanges />}
+        </AccordionItemPanel>
+      </AccordionItem>
+
+    </Accordion>
+  </>
+
+
+  )
+}
+
+export default NetworkFilter
\ No newline at end of file
diff --git a/src/tokenSearch/SearchNetworks.jsx b/src/tokenSearch/SearchNetworks.jsx
index dc06a79..e67195b 100644
--- a/src/tokenSearch/SearchNetworks.jsx
+++ b/src/tokenSearch/SearchNetworks.jsx
@@ -15,7 +15,7 @@ const NetworkList = styled.div`
 
 export const SearchNetworks = () => {
   return (
-    <>
+    <>      
       <NetworkList>
         <SearchNetworksAll key={'All'} />
         {
diff --git a/src/tokenSearch/SearchNetworksSelector.jsx b/src/tokenSearch/SearchNetworksSelector.jsx
index 7f34065..2096179 100644
--- a/src/tokenSearch/SearchNetworksSelector.jsx
+++ b/src/tokenSearch/SearchNetworksSelector.jsx
@@ -2,27 +2,22 @@ import React from "react"
 import { useDispatch, useSelector } from 'react-redux';
 import { setNetworkMap } from "../redux/tokenSearchSlice"
 
+import Chip from '../Components/Chip';
 
 //todo new file
 export const SearchNetworkSelector = ({ networkName }) => {
   const dispatch = useDispatch();
   const { networkMap } = useSelector((state) => state);
 
+  const handleChange = (e) => {
+    dispatch(setNetworkMap({ networkName, checked: e.target.checked }));
+    networkName = 'All';
+    dispatch(setNetworkMap({ networkName, checked: false }));
+  }
 
   return (
-    <>
-      <input
-        checked={networkMap['All'] ? false : (networkMap[networkName] || false)}
-        type="checkbox"
-        onChange={e => {
-          dispatch(setNetworkMap({ networkName, checked: e.target.checked }));
-
-          networkName = 'All';
-          dispatch(setNetworkMap({ networkName, checked: false }));
-        }
-        }
-      />
-      {networkName}
+    <>      
+      <Chip label={networkName} checked={networkMap['All'] ? false : (networkMap[networkName] || false)}  onChanged={handleChange} />
     </>
   );
 };
diff --git a/src/tokenSearch/index.jsx b/src/tokenSearch/index.jsx
index 52096b1..da2d7f3 100644
--- a/src/tokenSearch/index.jsx
+++ b/src/tokenSearch/index.jsx
@@ -6,9 +6,8 @@ import {
 } from '../redux/tokenSearchSlice';
 import SearchInput from "./SearchInput";
 import SearchResult from "./SearchResult";
-import SearchNetworks from "./SearchNetworks";
-import SearchExchanges from "./SearchExchanges";
 
+import NetworkFilter from "./NetworkFilter.jsx";
 
 export const TokenSearch = () => {
   const dispatch = useDispatch();
@@ -28,8 +27,9 @@ export const TokenSearch = () => {
   return (
     <div ref={searchRef}>
       <SearchInput />
-      {isSelecting && <SearchNetworks />}
-      {isSelecting && <SearchExchanges />}
+      <NetworkFilter />
+     
+     
       {isSelecting && <SearchResult loading={isLoading} />}
     </div>
   );
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..e43e4d9
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,253 @@
+const { isObject, keys } = require('lodash');
+
+const themeColors = {
+  algorand: 'var(--color-algorand)',
+  avalanche: 'var(--color-avalanche)',
+  binance: 'var(--color-binance)',
+  black: 'var(--color-black)',
+  blue: {
+    100: 'var(--color-blue-100)',
+    200: 'var(--color-blue-200)',
+    300: 'var(--color-blue-300)',
+    400: 'var(--color-blue-400)',
+    500: 'var(--color-blue-500)',
+    600: 'var(--color-blue-600)',
+    700: 'var(--color-blue-700)',
+    800: 'var(--color-blue-800)',
+    900: 'var(--color-blue-900)',
+  },
+  borrow: 'var(--color-borrow)',
+  cardano: 'var(--color-cardano)',
+  cosmos: 'var(--color-cosmos)',
+  dark: {
+    100: 'var(--color-dark-100)',
+    200: 'var(--color-dark-200)',
+    300: 'var(--color-dark-300)',
+    400: 'var(--color-dark-400)',
+    500: 'var(--color-dark-500)',
+    600: 'var(--color-dark-600)',
+    700: 'var(--color-dark-700)',
+    800: 'var(--color-dark-800)',
+    900: 'var(--color-dark-900)',
+  },
+  eos: 'var(--color-eos)',
+  gray: {
+    100: 'var(--color-gray-100)',
+    200: 'var(--color-gray-200)',
+    300: 'var(--color-gray-300)',
+    400: 'var(--color-gray-400)',
+    500: 'var(--color-gray-500)',
+    600: 'var(--color-gray-600)',
+    700: 'var(--color-gray-700)',
+    800: 'var(--color-gray-800)',
+    900: 'var(--color-gray-900)',
+  },
+  green: {
+    400: 'var(--color-green-400)',
+    500: 'var(--color-green-500)',
+    700: 'var(--color-green-700)',
+  },
+  hedera: 'var(--color-hedera)',
+  nuls: 'var(--color-nuls)',
+  orange: {
+    500: 'var(--color-orange-500)',
+  },
+  pink: {
+    800: 'var(--color-pink-800)',
+    900: 'var(--color-pink-900)',
+  },
+  polkadot: 'var(--color-polkadot)',
+  red: {
+    400: 'var(--color-red-400)',
+    500: 'var(--color-red-500)',
+  },
+  solana: 'var(--color-solana)',
+  stellar: 'var(--color-stellar)',
+  supply: 'var(--color-supply)',
+  tezos: 'var(--color-tezos)',
+  transparent: 'transparent',
+  tron: 'var(--color-tron)',
+  white: 'var(--color-white)',
+  yellow: {
+    400: 'var(--color-yellow-400)',
+    500: 'var(--color-yellow-500)',
+  },
+};
+
+const withOpacity = (variable) => {
+  return ({ opacityValue }) => {
+    if (opacityValue) {
+      return `rgba(${variable}, ${opacityValue})`;
+    }
+    return `rgb(${variable})`;
+  };
+};
+
+const generateDefaultColors = (colors) => {
+  const defaultColors = {};
+  keys(colors).forEach((colorName) => {
+    if (isObject(colors[colorName])) {
+      defaultColors[colorName] = generateDefaultColors(colors[colorName]);
+    } else {
+      defaultColors[colorName] = `rgb(${colors[colorName]})`;
+    }
+  });
+
+  return defaultColors;
+};
+
+const generateBackgroundColors = (colors) => {
+  const bgColors = {};
+  keys(colors).forEach((colorName) => {
+    if (isObject(colors[colorName])) {
+      bgColors[colorName] = generateBackgroundColors(colors[colorName]);
+    } else {
+      bgColors[colorName] = withOpacity(colors[colorName]);
+    }
+  });
+
+  return bgColors;
+};
+
+module.exports = {
+  darkMode: false, // or 'media' or 'class'
+  theme: {
+    extend: {
+      backgroundImage: {
+        darkConnect: 'linear-gradient(180deg, transparent 0%, #001016 80%)',
+        darkPage: 'linear-gradient(128deg, #006C8F 0%, #070707 100%)',
+        lightConnect: 'linear-gradient(180deg, transparent 0%, white 80%)',
+        lightPage: 'linear-gradient(236deg, #FFE1E1 0%, #DCF5FF 100%)',
+      },
+      borderRadius: {
+        10: '.625rem',
+        14: '.875rem',
+        17: '1.0625rem',
+        20: '1.25rem',
+        28: '1.75rem',
+        3: '.1875rem',
+        6: '.375rem',
+      },
+      colors: generateDefaultColors(themeColors),
+      backgroundColor: generateBackgroundColors(themeColors),
+      height: {
+        19: '4.75rem',
+        '6/5': '120%',
+        'fit-content': 'fit-content',
+      },
+      maxWidth: {
+        100: '25rem',
+        52: '13rem',
+      },
+      minWidth: {
+        36: '9rem', // 144px
+        screen: '100vw', // 100vw
+      },
+      minHeight: {
+        'full-view': '100vh',
+      },
+      opacity: {
+        15: '.15',
+        33: '.33',
+        50: '.5',
+        72: '.72',
+        83: '.83',
+        85: '.85',
+      },
+      screens: {
+        '3xl': '1920px',
+      },
+      spacing: {
+        1.25: '.3125rem',
+        12.5: '3.125rem',
+        13: '3.25rem',
+        17.5: '4.375rem',
+        18: '4.5rem',
+        2.5: '.625rem',
+        23: '5.75rem',
+        25: '6.25rem',
+        27: '6.75rem',
+        37.5: '9.375rem',
+        4.5: '1.125rem',
+        5.5: '1.375rem',
+        50: '12.5rem',
+        55: '13.75rem',
+        6.25: '1.5625rem',
+        6.5: '1.625rem',
+        7.5: '1.875rem',
+        75: '18.75rem',
+        85: '21.25rem',
+      },
+      transitionProperty: {
+        size: 'width, height',
+      },
+      width: {
+        'fit-content': 'fit-content',
+      },
+      zIndex: {
+        '-1': '-1',
+      },
+      lineHeight: {
+        1: 'var(--line-height-1)',
+        2: 'var(--line-height-2)',
+        3: 'var(--line-height-3)',
+        4: 'var(--line-height-4)',
+        5: 'var(--line-height-5)',
+        6: 'var(--line-height-6)',
+        7: 'var(--line-height-7)',
+        8: 'var(--line-height-8)',
+        9: 'var(--line-height-9)',
+        10: 'var(--line-height-10)',
+        11: 'var(--line-height-11)',
+        12: 'var(--line-height-12)',
+        13: 'var(--line-height-13)',
+        14: 'var(--line-height-14)',
+        15: 'var(--line-height-15)',
+        16: 'var(--line-height-16)',
+        17: 'var(--line-height-17)',
+        18: 'var(--line-height-18)',
+        19: 'var(--line-height-19)',
+        20: 'var(--line-height-20)',
+        21: 'var(--line-height-21)',
+        none: 'var(--line-height-none)',
+      },
+    },
+    fontFamily: {
+      condensed: ['Roboto Condensed'],
+      fira: ['Fira Code', 'monospace'],
+      roboto: ['Roboto', 'sans-serif'],
+      sans: ['Montserrat', 'ui-sans-serif', 'system-ui', '-apple-system'],
+    },
+    fontSize: {
+      '9xs': 'var(--font-9xs-size)',
+      '8xs': 'var(--font-8xs-size)',
+      '7xs': 'var(--font-7xs-size)',
+      '6xs': 'var(--font-6xs-size)',
+      '5xs': 'var(--font-5xs-size)',
+      '4xs': 'var(--font-4xs-size)',
+      '3xs': 'var(--font-3xs-size)',
+      '2xs': 'var(--font-2xs-size)',
+      xs: ['var(--font-xs-size)', { lineHeight: 'var(--font-xs-line-height)' }],
+      sm: ['var(--font-sm-size)', { lineHeight: 'var(--font-sm-line-height)' }],
+      md: 'var(--font-md-size)',
+      base: [
+        'var(--font-base-size)',
+        { lineHeight: 'var(--font-base-line-height)' },
+      ],
+      lg: ['var(--font-lg-size)', { lineHeight: 'var(--font-lg-line-height)' }],
+      xl: ['var(--font-xl-size)', { lineHeight: 'var(--font-xl-line-height)' }],
+      '2xl': 'var(--font-2xl-size)',
+      '3xl': 'var(--font-3xl-size)',
+      '4xl': 'var(--font-4xl-size)',
+      '5xl': 'var(--font-5xl-size)',
+      '6xl': 'var(--font-6xl-size)',
+      '7xl': 'var(--font-7xl-size)',
+      '8xl': 'var(--font-8xl-size)',
+      '9xl': 'var(--font-9xl-size)',
+    },
+  },
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+  ],
+  plugins: [],
+};

From f337d09e9fe27efd273fe100c733c7a8148be7e5 Mon Sep 17 00:00:00 2001
From: oneway <trust.biz888@gmail.com>
Date: Fri, 1 Apr 2022 09:02:13 -0500
Subject: [PATCH 2/4] finish chip component

---
 src/Components/Chip/index.jsx              |  6 +++---
 src/redux/tokenSearchSlice.js              |  2 +-
 src/tokenSearch/SearchNetworks.jsx         | 20 +++++++++++++++-----
 src/tokenSearch/SearchNetworksAll.jsx      |  1 -
 src/tokenSearch/SearchNetworksSelector.jsx | 21 +++++++++++++--------
 src/tokenSearch/helpers/config.js          |  2 --
 src/tokenSearch/index.jsx                  |  3 +--
 7 files changed, 33 insertions(+), 22 deletions(-)

diff --git a/src/Components/Chip/index.jsx b/src/Components/Chip/index.jsx
index 8dd2e50..ebda44e 100644
--- a/src/Components/Chip/index.jsx
+++ b/src/Components/Chip/index.jsx
@@ -3,11 +3,11 @@ import './style.css'
 
 export const Chip = memo(
   (props) => {
-    const {label, checked, onChange} = props
+    const {label, checked, onChange, name, value} = props
     return (
       <>
-        <input type="checkbox" id={label} onChange={onChange} checked={checked}/>
-        <label for={label}>{label} </label>
+        <input type="checkbox" id={label} onChange={onChange} checked={checked} name={name} value={value}/>
+        <label htmlFor={label}>{label} </label>
       </>
     )
   }
diff --git a/src/redux/tokenSearchSlice.js b/src/redux/tokenSearchSlice.js
index a75f655..2fc13a5 100644
--- a/src/redux/tokenSearchSlice.js
+++ b/src/redux/tokenSearchSlice.js
@@ -193,7 +193,7 @@ export const tokenSearchSlice = createSlice({
     setNetworkMap: (state, action) => {
       console.log(action)
       state.networkMap[action.payload.networkName] = action.payload.checked
-    }
+    }, 
   },
 });
 
diff --git a/src/tokenSearch/SearchNetworks.jsx b/src/tokenSearch/SearchNetworks.jsx
index e67195b..75859c0 100644
--- a/src/tokenSearch/SearchNetworks.jsx
+++ b/src/tokenSearch/SearchNetworks.jsx
@@ -1,10 +1,10 @@
 import React from "react"
+import { useDispatch, useSelector } from 'react-redux';
 import { uniq } from "lodash"
 import { networkExchangePairs } from "./helpers/config";
-import { SearchNetworkSelector } from "./SearchNetworksSelector";
-import { SearchNetworksAll } from "./SearchNetworksAll";
+import { setNetworkMap } from "../redux/tokenSearchSlice"
 import styled from 'styled-components';
-
+import Chip from '../Components/Chip';
 
 const NetworkList = styled.div`
   display:flex;
@@ -14,15 +14,25 @@ const NetworkList = styled.div`
 `;
 
 export const SearchNetworks = () => {
+  const dispatch = useDispatch();
+  const { networkMap } = useSelector((state) => state);
+
+  const handleChange = (e) => {    
+    const {checked, value: networkName} = e.target
+    dispatch(setNetworkMap({ networkName, checked }));
+  }
+
+  console.log('[networkMap]: ', networkMap)
+
   return (
     <>      
       <NetworkList>
-        <SearchNetworksAll key={'All'} />
+        <Chip label='All' onChange={handleChange} key={'allNetworks'} name='all' value='all' />    
         {
           uniq(networkExchangePairs
             .map(pair => pair[0]))
             .map(networkName => {
-              return <SearchNetworkSelector key={networkName} networkName={networkName} />
+              return <Chip label={networkName} onChange={handleChange} key={networkName} name='networks' value={networkName} />
             })
         }
       </NetworkList>
diff --git a/src/tokenSearch/SearchNetworksAll.jsx b/src/tokenSearch/SearchNetworksAll.jsx
index 9f31413..d6d612d 100644
--- a/src/tokenSearch/SearchNetworksAll.jsx
+++ b/src/tokenSearch/SearchNetworksAll.jsx
@@ -10,7 +10,6 @@ export const SearchNetworksAll = () => {
   const { networkMap } = useSelector((state) => state);
   let networkName = 'All';
 
-
   return (
     <>
       <input
diff --git a/src/tokenSearch/SearchNetworksSelector.jsx b/src/tokenSearch/SearchNetworksSelector.jsx
index 2096179..7f34065 100644
--- a/src/tokenSearch/SearchNetworksSelector.jsx
+++ b/src/tokenSearch/SearchNetworksSelector.jsx
@@ -2,22 +2,27 @@ import React from "react"
 import { useDispatch, useSelector } from 'react-redux';
 import { setNetworkMap } from "../redux/tokenSearchSlice"
 
-import Chip from '../Components/Chip';
 
 //todo new file
 export const SearchNetworkSelector = ({ networkName }) => {
   const dispatch = useDispatch();
   const { networkMap } = useSelector((state) => state);
 
-  const handleChange = (e) => {
-    dispatch(setNetworkMap({ networkName, checked: e.target.checked }));
-    networkName = 'All';
-    dispatch(setNetworkMap({ networkName, checked: false }));
-  }
 
   return (
-    <>      
-      <Chip label={networkName} checked={networkMap['All'] ? false : (networkMap[networkName] || false)}  onChanged={handleChange} />
+    <>
+      <input
+        checked={networkMap['All'] ? false : (networkMap[networkName] || false)}
+        type="checkbox"
+        onChange={e => {
+          dispatch(setNetworkMap({ networkName, checked: e.target.checked }));
+
+          networkName = 'All';
+          dispatch(setNetworkMap({ networkName, checked: false }));
+        }
+        }
+      />
+      {networkName}
     </>
   );
 };
diff --git a/src/tokenSearch/helpers/config.js b/src/tokenSearch/helpers/config.js
index 37c3cc6..56d5628 100644
--- a/src/tokenSearch/helpers/config.js
+++ b/src/tokenSearch/helpers/config.js
@@ -4,8 +4,6 @@ export const romeTokenSyncUri = String(
     'https://romenet.prod.velox.global/v1/graphql'
 ).replace('ws', 'http');
 
-
-
 const AvalanchePairs = [
   ["avalanche","baguette"],
   ["avalanche","canary"],
diff --git a/src/tokenSearch/index.jsx b/src/tokenSearch/index.jsx
index da2d7f3..c4bbcb9 100644
--- a/src/tokenSearch/index.jsx
+++ b/src/tokenSearch/index.jsx
@@ -27,8 +27,7 @@ export const TokenSearch = () => {
   return (
     <div ref={searchRef}>
       <SearchInput />
-      <NetworkFilter />
-     
+      <NetworkFilter /> 
      
       {isSelecting && <SearchResult loading={isLoading} />}
     </div>

From a1b3925f4b868e7976e9b18463a904188015a8ff Mon Sep 17 00:00:00 2001
From: oneway <trust.biz888@gmail.com>
Date: Fri, 1 Apr 2022 10:21:31 -0500
Subject: [PATCH 3/4] finish network chipping

---
 src/Components/Chip/index.jsx              |  4 +--
 src/Components/Chip/style.css              |  8 ++---
 src/redux/tokenSearchSlice.js              | 28 ++++++++++++++---
 src/tokenSearch/NetworkFilter.jsx          |  7 ++---
 src/tokenSearch/SearchExchanges.jsx        | 32 +++++++-------------
 src/tokenSearch/SearchNetworks.jsx         | 12 +++++---
 src/tokenSearch/SearchNetworksAll.jsx      | 35 ----------------------
 src/tokenSearch/SearchNetworksSelector.jsx | 29 ------------------
 8 files changed, 52 insertions(+), 103 deletions(-)
 delete mode 100644 src/tokenSearch/SearchNetworksAll.jsx
 delete mode 100644 src/tokenSearch/SearchNetworksSelector.jsx

diff --git a/src/Components/Chip/index.jsx b/src/Components/Chip/index.jsx
index ebda44e..d74c43b 100644
--- a/src/Components/Chip/index.jsx
+++ b/src/Components/Chip/index.jsx
@@ -6,8 +6,8 @@ export const Chip = memo(
     const {label, checked, onChange, name, value} = props
     return (
       <>
-        <input type="checkbox" id={label} onChange={onChange} checked={checked} name={name} value={value}/>
-        <label htmlFor={label}>{label} </label>
+        <input type="checkbox" id={`${label}-${name}`} onChange={onChange} checked={checked} name={name} value={value}/>
+        <label htmlFor={`${label}-${name}`}>{label} </label>
       </>
     )
   }
diff --git a/src/Components/Chip/style.css b/src/Components/Chip/style.css
index 0d13eb9..5594dc4 100644
--- a/src/Components/Chip/style.css
+++ b/src/Components/Chip/style.css
@@ -5,18 +5,18 @@ input[type="checkbox"] {
 input[type="checkbox"] + label {
   -webkit-transition: all 500ms ease;
   transition: all 500ms ease;
-  font-size: 18px;
+  font-size: 14px;
   cursor: pointer;
-  border-radius: 50px;
+  border-radius: 5px;
   background-color: #fff;
   border:solid 2px #7d7d7d;
-  padding: 0.5rem 2rem;
+  padding: 0.1rem 0.3rem;
   display: inline-block;
   -moz-user-select: -moz-none;
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  margin: 10px;
+  margin: 5px;
 }
 
 
diff --git a/src/redux/tokenSearchSlice.js b/src/redux/tokenSearchSlice.js
index 2fc13a5..002a2db 100644
--- a/src/redux/tokenSearchSlice.js
+++ b/src/redux/tokenSearchSlice.js
@@ -118,6 +118,10 @@ export const searchTokenPairs = createAsyncThunk(
     }
   }
 );
+const initNetworks =  uniq(networkExchangePairs
+  .map(pair => pair[0]))
+  .map(networkName => networkName).reduce((k, v) => ({...k, [v]: false}), {})
+
 
 const initialTimestamp = new Date().getTime();
 const initialState = {
@@ -130,7 +134,7 @@ const initialState = {
   serializedTradeEstimator: '',
   suggestions: [],
   exchangeMap: {},
-  networkMap: {}
+  networkMap: initNetworks
 };
 
 export const tokenSearchSlice = createSlice({
@@ -188,11 +192,27 @@ export const tokenSearchSlice = createSlice({
       state.isSelecting = !state.isSelecting;
     },
     setExchangeMap: (state, action) => {
-      state.exchangeMap[action.payload.exchangeName] = action.payload.checked
+      const {checked, exchangeName} = action.payload
+      if (exchangeName === 'all') {
+        
+      } else
+        state.exchangeMap[exchangeName] = checked
+
+
+        console.log(state.exchangeMap, '?>>>>>>>>>>>>>>>')
     },
     setNetworkMap: (state, action) => {
-      console.log(action)
-      state.networkMap[action.payload.networkName] = action.payload.checked
+      const {checked, networkName} = action.payload
+
+      if (networkName === 'all') {
+        const allNetworks = uniq(networkExchangePairs
+          .map(pair => pair[0]))
+          .map(networkName => networkName)
+        allNetworks.forEach((network) => {
+          state.networkMap[network] = checked
+        }) 
+      } else
+        state.networkMap[networkName] = checked
     }, 
   },
 });
diff --git a/src/tokenSearch/NetworkFilter.jsx b/src/tokenSearch/NetworkFilter.jsx
index 3b08b8a..09ec5c0 100644
--- a/src/tokenSearch/NetworkFilter.jsx
+++ b/src/tokenSearch/NetworkFilter.jsx
@@ -15,17 +15,16 @@ import SearchExchanges from "./SearchExchanges";
 import './../Components/accordion.css'
 
 export const NetworkFilter = () => {
-  const { isSelecting, searchText, isLoading, networkMap } = useSelector(
+  const { isSelecting, searchText, exchangeMap, networkMap } = useSelector(
     (state) => state
   );
-
-  console.log('networkMap: ', networkMap)
+    
   return (<>
    <Accordion allowZeroExpanded>
       <AccordionItem>
         <AccordionItemHeading>
           <AccordionItemButton >
-            Filter Networks
+            Filter Networks: search {}
           </AccordionItemButton>
         </AccordionItemHeading>
         <AccordionItemPanel>
diff --git a/src/tokenSearch/SearchExchanges.jsx b/src/tokenSearch/SearchExchanges.jsx
index bdabda2..4640ec6 100644
--- a/src/tokenSearch/SearchExchanges.jsx
+++ b/src/tokenSearch/SearchExchanges.jsx
@@ -4,7 +4,7 @@ import { networkExchangePairs } from "./helpers/config";
 import { useDispatch, useSelector } from 'react-redux';
 import { setExchangeMap } from "../redux/tokenSearchSlice";
 import styled from 'styled-components';
-
+import Chip from '../Components/Chip';
 
 const ExchangeList = styled.div`
   border-top:solid 1px #000;
@@ -13,34 +13,24 @@ const ExchangeList = styled.div`
   justify-content:center;
   padding:3px;
 `;
-
-
-//todo new file
-const ExchangeSelection = ({ exchangeName }) => {
-  const dispatch = useDispatch();
-  const { exchangeMap } = useSelector((state) => state);
-
-  return <>
-    <input
-      checked={exchangeMap[exchangeName] || false}
-      type="checkbox"
-      onChange={(e) => dispatch(setExchangeMap({ exchangeName, checked: e.target.checked }))}
-    />
-    {exchangeName}
-  </>
-}
-
+ 
 export const SearchExchanges = () => {
-  const { networkMap } = useSelector((state) => state);
+  const dispatch = useDispatch();
+  const { exchangeMap, networkMap } = useSelector((state) => state);
 
+  const handleChange = (e) => {    
+    const {checked, value: exchangeName} = e.target    
+    dispatch(setExchangeMap({ exchangeName, checked }));
+  }
 
   return (
     <>
       <ExchangeList>
-        {<ExchangeSelection key={'*'} exchangeName={'All'} />}
+        <Chip label='All' onChange={handleChange} key={'allExchanges'} name='exchanges' value='all'  />  
+        
         {uniqBy(networkExchangePairs.filter(pair => networkMap[pair[0]]), 1).map(pair => {
           const exchangeName = pair[1]
-          return <ExchangeSelection key={exchangeName} exchangeName={exchangeName} />
+          return <Chip key={exchangeName} label={exchangeName} onChange={handleChange} name='exchanges' value={exchangeName} checked={exchangeMap[exchangeName]}/>
         })}
       </ExchangeList>
     </>
diff --git a/src/tokenSearch/SearchNetworks.jsx b/src/tokenSearch/SearchNetworks.jsx
index 75859c0..2c2201d 100644
--- a/src/tokenSearch/SearchNetworks.jsx
+++ b/src/tokenSearch/SearchNetworks.jsx
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useMemo } from "react"
 import { useDispatch, useSelector } from 'react-redux';
 import { uniq } from "lodash"
 import { networkExchangePairs } from "./helpers/config";
@@ -22,17 +22,21 @@ export const SearchNetworks = () => {
     dispatch(setNetworkMap({ networkName, checked }));
   }
 
-  console.log('[networkMap]: ', networkMap)
+  const isAllChecked = useMemo(() => {
+    return Object.keys(networkMap).length > 0 && 
+            Object.keys(networkMap).length === Object.values(networkMap).filter((e) => e === true).length
+  }, [networkMap])
 
+   
   return (
     <>      
       <NetworkList>
-        <Chip label='All' onChange={handleChange} key={'allNetworks'} name='all' value='all' />    
+        <Chip label='All' onChange={handleChange} key={'allNetworks'} name='networks' value='all' checked={isAllChecked} />    
         {
           uniq(networkExchangePairs
             .map(pair => pair[0]))
             .map(networkName => {
-              return <Chip label={networkName} onChange={handleChange} key={networkName} name='networks' value={networkName} />
+              return <Chip label={networkName} onChange={handleChange} key={networkName} name='networks' value={networkName} checked={networkMap[networkName]}/>
             })
         }
       </NetworkList>
diff --git a/src/tokenSearch/SearchNetworksAll.jsx b/src/tokenSearch/SearchNetworksAll.jsx
deleted file mode 100644
index d6d612d..0000000
--- a/src/tokenSearch/SearchNetworksAll.jsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from "react"
-import { useDispatch, useSelector } from 'react-redux';
-import { setNetworkMap } from "../redux/tokenSearchSlice"
-import { omitBy } from "lodash"
-import { networkExchangePairs } from "./helpers/config";
-
-//todo new file
-export const SearchNetworksAll = () => {
-  const dispatch = useDispatch();
-  const { networkMap } = useSelector((state) => state);
-  let networkName = 'All';
-
-  return (
-    <>
-      <input
-        checked={networkMap[networkName] === true || Object.keys(omitBy(networkMap, (b) => !b)).length === 0}
-        type="checkbox"
-        onChange={e => {
-          // Loops through all the active networks to set them to false.
-          for (networkName in networkMap) {
-            dispatch(setNetworkMap({ networkName, checked: false }));
-          }
-
-          // Have to reset the name of the network because this is SUPER hacky.
-          networkName = 'All';
-
-          // Sets the "All Network" option to yes.
-          dispatch(setNetworkMap({ networkName, checked: e.target.checked }));
-        }}
-      />
-      {networkName}
-    </>
-  );
-};
-export default SearchNetworksAll;
\ No newline at end of file
diff --git a/src/tokenSearch/SearchNetworksSelector.jsx b/src/tokenSearch/SearchNetworksSelector.jsx
deleted file mode 100644
index 7f34065..0000000
--- a/src/tokenSearch/SearchNetworksSelector.jsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from "react"
-import { useDispatch, useSelector } from 'react-redux';
-import { setNetworkMap } from "../redux/tokenSearchSlice"
-
-
-//todo new file
-export const SearchNetworkSelector = ({ networkName }) => {
-  const dispatch = useDispatch();
-  const { networkMap } = useSelector((state) => state);
-
-
-  return (
-    <>
-      <input
-        checked={networkMap['All'] ? false : (networkMap[networkName] || false)}
-        type="checkbox"
-        onChange={e => {
-          dispatch(setNetworkMap({ networkName, checked: e.target.checked }));
-
-          networkName = 'All';
-          dispatch(setNetworkMap({ networkName, checked: false }));
-        }
-        }
-      />
-      {networkName}
-    </>
-  );
-};
-export default SearchNetworkSelector
\ No newline at end of file

From c89553d9f7321fcd6713908354290e3fa4b1ad2a Mon Sep 17 00:00:00 2001
From: oneway <trust.biz888@gmail.com>
Date: Mon, 4 Apr 2022 14:26:34 -0500
Subject: [PATCH 4/4] finish filtering

---
 src/redux/tokenSearchSlice.js       | 49 +++++++++++++++++++++++------
 src/tokenSearch/SearchExchanges.jsx | 34 +++++++++++++++-----
 src/tokenSearch/index.jsx           |  3 +-
 3 files changed, 67 insertions(+), 19 deletions(-)

diff --git a/src/redux/tokenSearchSlice.js b/src/redux/tokenSearchSlice.js
index 002a2db..9426559 100644
--- a/src/redux/tokenSearchSlice.js
+++ b/src/redux/tokenSearchSlice.js
@@ -2,7 +2,7 @@ import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
 import retry from 'async-retry';
 import { stringify } from 'flatted';
 import { searchTokensAsync } from "../tokenSearch/helpers/async";
-import { uniq, omitBy } from "lodash"
+import { uniq, omitBy, uniqBy } from "lodash"
 import { networkExchangePairs } from '../tokenSearch/helpers/config';
 
 export const setPair = createAsyncThunk(
@@ -122,6 +122,16 @@ const initNetworks =  uniq(networkExchangePairs
   .map(pair => pair[0]))
   .map(networkName => networkName).reduce((k, v) => ({...k, [v]: false}), {})
 
+const initExchanges = {}
+uniq(networkExchangePairs.map((exchange) => {
+  const netName = exchange[0]
+  const exchangeName = exchange[1]
+
+  if (!Object.keys(initExchanges).includes(netName)) 
+  initExchanges[netName] = {}
+  initExchanges[netName][exchangeName] = false
+  return false
+}))
 
 const initialTimestamp = new Date().getTime();
 const initialState = {
@@ -133,7 +143,7 @@ const initialState = {
   selectedPair: undefined,
   serializedTradeEstimator: '',
   suggestions: [],
-  exchangeMap: {},
+  exchangeMap: initExchanges,
   networkMap: initNetworks
 };
 
@@ -192,15 +202,34 @@ export const tokenSearchSlice = createSlice({
       state.isSelecting = !state.isSelecting;
     },
     setExchangeMap: (state, action) => {
-      const {checked, exchangeName} = action.payload
-      if (exchangeName === 'all') {
-        
-      } else
-        state.exchangeMap[exchangeName] = checked
-
-
-        console.log(state.exchangeMap, '?>>>>>>>>>>>>>>>')
+      const {checked, exchangeName, networkName} = action.payload
+      
+      
+      if (exchangeName === 'all') {       
+        uniq(networkExchangePairs).map(pair => {
+          const exName = pair[1]
+          const netName = pair[0]
+          
+          if (!Object.keys(state.exchangeMap).includes(netName)) 
+            state.exchangeMap[netName] = {}
+
+          state.exchangeMap[netName][exName] = checked
+          return checked
+        })
+      } else {
+        if (networkName !== undefined)
+          state.exchangeMap[networkName][exchangeName] = checked
+
+        Object.keys(state.networkMap).filter(netName => { 
+          if(state.networkMap[netName] === true && Object.keys(state.exchangeMap[netName]).includes(exchangeName.toString())) {                   
+            state.exchangeMap[netName][exchangeName] = checked
+          }
+          return false
+        })
+         
+      }
     },
+    
     setNetworkMap: (state, action) => {
       const {checked, networkName} = action.payload
 
diff --git a/src/tokenSearch/SearchExchanges.jsx b/src/tokenSearch/SearchExchanges.jsx
index 4640ec6..8197cdd 100644
--- a/src/tokenSearch/SearchExchanges.jsx
+++ b/src/tokenSearch/SearchExchanges.jsx
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useMemo, useState, useEffect } from "react"
 import { uniqBy } from "lodash"
 import { networkExchangePairs } from "./helpers/config";
 import { useDispatch, useSelector } from 'react-redux';
@@ -17,20 +17,40 @@ const ExchangeList = styled.div`
 export const SearchExchanges = () => {
   const dispatch = useDispatch();
   const { exchangeMap, networkMap } = useSelector((state) => state);
-
+  console.log('networkMap]: ', networkMap)
+  console.log('exchangeMap]: ', exchangeMap)
   const handleChange = (e) => {    
-    const {checked, value: exchangeName} = e.target    
-    dispatch(setExchangeMap({ exchangeName, checked }));
-  }
+    const {checked, value } = e.target    
+    const data = value.split('-')
+    const networkName = data[0]
+    const exchangeName = data[1]
+    dispatch(setExchangeMap({ exchangeName, checked, networkName }));
+  } 
 
+  const selectedNets = Object.keys(networkMap).filter((key) => networkMap[key] === true)        
+  const exchanges = Object.fromEntries(Object.entries(exchangeMap).filter(([key, value]) => {                 
+    return selectedNets.includes(key.toString()) && exchangeMap[key]            
+  }))
+  
+  const isAllChecked = useMemo(() => {   
+    const checked = Object.keys(exchanges).every(network => {         
+      const result = Object.values(exchanges[network]).every((value) => {              
+        return value
+      })             
+      return result
+    })  
+    return checked
+  }, [exchanges]) 
+  
   return (
     <>
       <ExchangeList>
-        <Chip label='All' onChange={handleChange} key={'allExchanges'} name='exchanges' value='all'  />  
+        <Chip label='All' onChange={handleChange} key={'allExchanges'} name='exchanges' value='-all' checked={isAllChecked} />  
         
         {uniqBy(networkExchangePairs.filter(pair => networkMap[pair[0]]), 1).map(pair => {
           const exchangeName = pair[1]
-          return <Chip key={exchangeName} label={exchangeName} onChange={handleChange} name='exchanges' value={exchangeName} checked={exchangeMap[exchangeName]}/>
+          const networkName = pair[0] 
+          return <Chip key={exchangeName} label={exchangeName} onChange={handleChange} name='exchanges' value={`${networkName}-${exchangeName}`} checked={exchangeMap[networkName][exchangeName]}/>
         })}
       </ExchangeList>
     </>
diff --git a/src/tokenSearch/index.jsx b/src/tokenSearch/index.jsx
index c4bbcb9..de4f939 100644
--- a/src/tokenSearch/index.jsx
+++ b/src/tokenSearch/index.jsx
@@ -27,8 +27,7 @@ export const TokenSearch = () => {
   return (
     <div ref={searchRef}>
       <SearchInput />
-      <NetworkFilter /> 
-     
+      <NetworkFilter />      
       {isSelecting && <SearchResult loading={isLoading} />}
     </div>
   );