From 2f19c2ccc44ee5265c242f6fc37d1cf16baad4e7 Mon Sep 17 00:00:00 2001
From: nguvictor <victor.nguyen@hotmail.com>
Date: Sun, 22 Oct 2023 21:23:40 -0400
Subject: [PATCH 01/11] initial prototype

---
 src/app/components/PairSelector.tsx | 184 +++++++++++++++++++++++-----
 1 file changed, 150 insertions(+), 34 deletions(-)

diff --git a/src/app/components/PairSelector.tsx b/src/app/components/PairSelector.tsx
index 1a81fe14..77b18766 100644
--- a/src/app/components/PairSelector.tsx
+++ b/src/app/components/PairSelector.tsx
@@ -1,6 +1,84 @@
 import { useAppSelector, useAppDispatch } from "../hooks";
 import { selectPairAddress } from "../redux/pairSelectorSlice";
+import { useEffect, useRef, useState } from "react";
+/*
+const SearchableDropdown = ({
+  options,
+  label,
+  id,
+  selectedVal,
+  handleChange,
+}) => {
+  const [query, setQuery] = useState("");
+  const [isOpen, setIsOpen] = useState(false);
 
+  const inputRef = useRef(null);
+
+  useEffect(() => {
+    document.addEventListener("click", toggle);
+    return () => document.removeEventListener("click", toggle);
+  }, []);
+
+  const selectOption = (option) => {
+    setQuery(() => "");
+    handleChange(option[label]);
+    setIsOpen((isOpen) => !isOpen);
+  };
+
+  function toggle(e) {
+    setIsOpen(e && e.target === inputRef.current);
+  }
+
+  const getDisplayValue = () => {
+    if (query) return query;
+    if (selectedVal) return selectedVal;
+
+    return "";
+  };
+
+  const filter = (options) => {
+    return options.filter(
+      (option) => option[label].toLowerCase().indexOf(query.toLowerCase()) > -1
+    );
+  };
+
+  return (
+    <div className="dropdown">
+      <div className="control">
+        <div className="selected-value">
+          <input
+            ref={inputRef}
+            type="text"
+            value={getDisplayValue()}
+            name="searchTerm"
+            onChange={(e) => {
+              setQuery(e.target.value);
+              handleChange(null);
+            }}
+            onClick={toggle}
+          />
+        </div>
+        <div className={`arrow ${isOpen ? "open" : ""}`}></div>
+      </div>
+
+      <div className={`options ${isOpen ? "open" : ""}`}>
+        {filter(options).map((option, index) => {
+          return (
+            <div
+              onClick={() => selectOption(option)}
+              className={`option ${option[label] === selectedVal ? "selected" : ""
+                }`}
+              key={`${id}-${index}`}
+            >
+              {option[label]}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+*/
 function displayName(name?: string) {
   return name?.replace("/", " - ");
 }
@@ -11,44 +89,82 @@ export function PairSelector() {
   const selectPair = (pairAddress: string) => {
     dispatch(selectPairAddress(pairAddress));
   };
+  const options = [
+    { id: 1, name: "Graspus graspus" },
+    { id: 2, name: "Grus rubicundus" },
+    { id: 3, name: "Speothos vanaticus" },
+  ];
+  const label = "name";
+  const id = "pairAddress";
+  const selectedVal = "A";
+  const handleChange = (val) => setValue(val);
+
+  const [query, setQuery] = useState("");
+  const [isOpen, setIsOpen] = useState(false);
+
+  const inputRef = useRef(null);
+
+  useEffect(() => {
+    document.addEventListener("click", toggle);
+    return () => document.removeEventListener("click", toggle);
+  }, []);
+
+  const selectOption = (option) => {
+    setQuery(() => "");
+    handleChange(option[label]);
+    setIsOpen((isOpen) => !isOpen);
+  };
+
+  function toggle(e) {
+    setIsOpen(e && e.target === inputRef.current);
+  }
+
+  const getDisplayValue = () => {
+    if (query) return query;
+    if (selectedVal) return selectedVal;
+
+    return "";
+  };
+
+  const filter = (options) => {
+    return options.filter(
+      (option) => option[label].toLowerCase().indexOf(query.toLowerCase()) > -1
+    );
+  };
 
   return (
     <div className="dropdown w-full">
-      <label
-        tabIndex={0}
-        className="justify-between btn btn-block px-8 text-xl font-bold"
-      >
-        <span id="pair-selector-text">
-          {displayName(pairSelector.name) || "Loading"}
-        </span>
-        <span className="float-right">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="16"
-            height="16"
-            fill="white"
-            viewBox="0 0 16 16"
-          >
-            <path d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z" />
-          </svg>
-        </span>
-      </label>
-      <ul
-        tabIndex={0}
-        className="dropdown-content z-[1] menu bg-base-200 shadow rounded-box w-full !my-0 !p-0"
-      >
-        {pairSelector.pairsList.map((pair, index) => (
-          <li className="font-bold !pl-0" key={index}>
-            <button
-              className="justify-between"
-              onClick={() => selectPair(pair.address)}
+      <div className="control">
+        <div className="selected-value">
+          <input
+            ref={inputRef}
+            type="text"
+            value={getDisplayValue()}
+            name="searchTerm"
+            onChange={(e) => {
+              setQuery(e.target.value);
+              handleChange(null);
+            }}
+            onClick={toggle}
+          />
+        </div>
+        <div className={`arrow ${isOpen ? "open" : ""}`}></div>
+      </div>
+
+      <div className={`options ${isOpen ? "open" : ""}`}>
+        {filter(options).map((option, index) => {
+          return (
+            <div
+              onClick={() => selectOption(option)}
+              className={`option ${option[label] === selectedVal ? "selected" : ""
+                }`}
+              key={`${id}-${index}`}
             >
-              {displayName(pair.name)}
-              <span>+</span>
-            </button>
-          </li>
-        ))}
-      </ul>
+              {option[label]}
+            </div>
+          );
+        })}
+      </div>
     </div>
   );
 }

From 0e9552df45414cdfd8222bda4550b9596468ab96 Mon Sep 17 00:00:00 2001
From: Victor <victor@sentryhealth.ca>
Date: Sun, 22 Oct 2023 22:04:31 -0400
Subject: [PATCH 02/11] switching is working

---
 src/app/components/PairSelector.tsx | 29 +++++++++++++----------------
 1 file changed, 13 insertions(+), 16 deletions(-)

diff --git a/src/app/components/PairSelector.tsx b/src/app/components/PairSelector.tsx
index 77b18766..cbb4ae1b 100644
--- a/src/app/components/PairSelector.tsx
+++ b/src/app/components/PairSelector.tsx
@@ -89,15 +89,11 @@ export function PairSelector() {
   const selectPair = (pairAddress: string) => {
     dispatch(selectPairAddress(pairAddress));
   };
-  const options = [
-    { id: 1, name: "Graspus graspus" },
-    { id: 2, name: "Grus rubicundus" },
-    { id: 3, name: "Speothos vanaticus" },
-  ];
-  const label = "name";
+  console.log(pairSelector.pairsList);
+  const options = pairSelector.pairsList;
   const id = "pairAddress";
-  const selectedVal = "A";
-  const handleChange = (val) => setValue(val);
+  const selectedVal = pairSelector.pairsList[0] ? pairSelector.pairsList[0].name : "Loading";
+  const handleChange = (val) => {console.log(val);selectPair(val)};
 
   const [query, setQuery] = useState("");
   const [isOpen, setIsOpen] = useState(false);
@@ -111,7 +107,7 @@ export function PairSelector() {
 
   const selectOption = (option) => {
     setQuery(() => "");
-    handleChange(option[label]);
+    handleChange(option["address"]);
     setIsOpen((isOpen) => !isOpen);
   };
 
@@ -128,12 +124,12 @@ export function PairSelector() {
 
   const filter = (options) => {
     return options.filter(
-      (option) => option[label].toLowerCase().indexOf(query.toLowerCase()) > -1
+      (option) => option["name"].toLowerCase().indexOf(query.toLowerCase()) > -1
     );
   };
 
   return (
-    <div className="dropdown w-full">
+    <div className="w-full">
       <div className="control">
         <div className="selected-value">
           <input
@@ -148,19 +144,20 @@ export function PairSelector() {
             onClick={toggle}
           />
         </div>
-        <div className={`arrow ${isOpen ? "open" : ""}`}></div>
+        <div className={`arrow ${isOpen ? "" : "hidden"}`}></div>
       </div>
 
-      <div className={`options ${isOpen ? "open" : ""}`}>
+      <div className={`options ${isOpen ? "" : "hidden"}`}>
         {filter(options).map((option, index) => {
           return (
             <div
               onClick={() => selectOption(option)}
-              className={`option ${option[label] === selectedVal ? "selected" : ""
-                }`}
+              className={`option ${
+                option["name"] === selectedVal ? "selected" : ""
+              }`}
               key={`${id}-${index}`}
             >
-              {option[label]}
+              {option["name"]}
             </div>
           );
         })}

From e667e28eb949f1d86398d428ef1f9c19baeb2944 Mon Sep 17 00:00:00 2001
From: Victor <victor@sentryhealth.ca>
Date: Mon, 23 Oct 2023 18:22:05 -0400
Subject: [PATCH 03/11] style adjustments

---
 src/app/components/PairSelector.tsx | 95 ++++++++++++++++++-----------
 1 file changed, 60 insertions(+), 35 deletions(-)

diff --git a/src/app/components/PairSelector.tsx b/src/app/components/PairSelector.tsx
index cbb4ae1b..f356336a 100644
--- a/src/app/components/PairSelector.tsx
+++ b/src/app/components/PairSelector.tsx
@@ -89,11 +89,15 @@ export function PairSelector() {
   const selectPair = (pairAddress: string) => {
     dispatch(selectPairAddress(pairAddress));
   };
-  console.log(pairSelector.pairsList);
   const options = pairSelector.pairsList;
-  const id = "pairAddress";
-  const selectedVal = pairSelector.pairsList[0] ? pairSelector.pairsList[0].name : "Loading";
-  const handleChange = (val) => {console.log(val);selectPair(val)};
+  const id = "pairOption";
+  const selectedVal = pairSelector.pairsList[0]
+    ? pairSelector.pairsList[0].name
+    : "Loading";
+  const handleChange = (val) => {
+    console.log(val);
+    selectPair(val);
+  };
 
   const [query, setQuery] = useState("");
   const [isOpen, setIsOpen] = useState(false);
@@ -130,37 +134,58 @@ export function PairSelector() {
 
   return (
     <div className="w-full">
-      <div className="control">
-        <div className="selected-value">
-          <input
-            ref={inputRef}
-            type="text"
-            value={getDisplayValue()}
-            name="searchTerm"
-            onChange={(e) => {
-              setQuery(e.target.value);
-              handleChange(null);
-            }}
-            onClick={toggle}
-          />
-        </div>
-        <div className={`arrow ${isOpen ? "" : "hidden"}`}></div>
-      </div>
-
-      <div className={`options ${isOpen ? "" : "hidden"}`}>
-        {filter(options).map((option, index) => {
-          return (
-            <div
-              onClick={() => selectOption(option)}
-              className={`option ${
-                option["name"] === selectedVal ? "selected" : ""
-              }`}
-              key={`${id}-${index}`}
-            >
-              {option["name"]}
-            </div>
-          );
-        })}
+      <div className="dropdown dropdown-end">
+        <label className="justify-between btn btn-block px-8 text-xl font-bold">
+          <div className="selected-value">
+            <input
+              ref={inputRef}
+              type="text"
+              value={getDisplayValue()}
+              name="searchTerm"
+              onChange={(e) => {
+                setQuery(e.target.value);
+                handleChange(null);
+              }}
+              onClick={toggle}
+            />
+            <span className="float-right">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                fill="white"
+                viewBox="0 0 16 16"
+              >
+                <path d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z" />
+              </svg>
+            </span>
+          </div>
+        </label>
+        <ul
+          tabIndex={0}
+          className={
+            `options ${isOpen ? "" : ""}` +
+            " dropdown-content z-[1] menu bg-base-200 shadow rounded-box w-full !my-0 !p-0"
+          }
+        >
+          {filter(options).map((option, index) => {
+            return (
+              <li
+                onClick={() => selectOption(option)}
+                className={
+                  `${option["name"] === selectedVal ? "selected" : ""}` +
+                  " font-bold !pl-0"
+                }
+                key={`${id}-${index}`}
+              >
+                <button>
+                  {displayName(option["name"])}
+                  <span>+</span>
+                </button>
+              </li>
+            );
+          })}
+        </ul>
       </div>
     </div>
   );

From 8d656ba2678611d34a5c2ef889383a45422f54c4 Mon Sep 17 00:00:00 2001
From: Victor <victor@sentryhealth.ca>
Date: Tue, 24 Oct 2023 00:28:15 -0400
Subject: [PATCH 04/11] styling updates

---
 src/app/components/PairSelector.tsx | 40 +++++++++++++++++------------
 1 file changed, 24 insertions(+), 16 deletions(-)

diff --git a/src/app/components/PairSelector.tsx b/src/app/components/PairSelector.tsx
index f356336a..c6431077 100644
--- a/src/app/components/PairSelector.tsx
+++ b/src/app/components/PairSelector.tsx
@@ -91,37 +91,42 @@ export function PairSelector() {
   };
   const options = pairSelector.pairsList;
   const id = "pairOption";
-  const selectedVal = pairSelector.pairsList[0]
+  let selectedVal = pairSelector.pairsList[0]
     ? pairSelector.pairsList[0].name
     : "Loading";
   const handleChange = (val) => {
-    console.log(val);
     selectPair(val);
   };
 
   const [query, setQuery] = useState("");
-  const [isOpen, setIsOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState(true);
 
   const inputRef = useRef(null);
-
+  const dropdownRef = useRef(null);
+  /*
   useEffect(() => {
     document.addEventListener("click", toggle);
     return () => document.removeEventListener("click", toggle);
   }, []);
-
+*/
   const selectOption = (option) => {
     setQuery(() => "");
     handleChange(option["address"]);
+    console.log(option);
+    selectedVal = option["name"];
     setIsOpen((isOpen) => !isOpen);
   };
 
   function toggle(e) {
+    console.log(inputRef.current);
     setIsOpen(e && e.target === inputRef.current);
   }
 
   const getDisplayValue = () => {
-    if (query) return query;
-    if (selectedVal) return selectedVal;
+    console.log("query %s", query);
+    console.log("sel %s", selectedVal);
+    if (query) return displayName(query);
+    if (selectedVal) return displayName(selectedVal);
 
     return "";
   };
@@ -134,9 +139,9 @@ export function PairSelector() {
 
   return (
     <div className="w-full">
-      <div className="dropdown dropdown-end">
-        <label className="justify-between btn btn-block px-8 text-xl font-bold">
-          <div className="selected-value">
+      <div className="dropdown dropdown-end w-full">
+        <label className="btn btn-block text-xl font-bold no-animation">
+          <div className="flex justify-between selected-value w-full">
             <input
               ref={inputRef}
               type="text"
@@ -147,8 +152,9 @@ export function PairSelector() {
                 handleChange(null);
               }}
               onClick={toggle}
+              className="flex-initial !bg-transparent"
             />
-            <span className="float-right">
+            <span className="flex-none order-last pt-2">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 width="16"
@@ -162,9 +168,10 @@ export function PairSelector() {
           </div>
         </label>
         <ul
+          ref={dropdownRef}
           tabIndex={0}
           className={
-            `options ${isOpen ? "" : ""}` +
+            `options ${isOpen ? "" : "hidden"}` +
             " dropdown-content z-[1] menu bg-base-200 shadow rounded-box w-full !my-0 !p-0"
           }
         >
@@ -177,11 +184,12 @@ export function PairSelector() {
                   " font-bold !pl-0"
                 }
                 key={`${id}-${index}`}
+                value={option["name"]}
               >
-                <button>
-                  {displayName(option["name"])}
-                  <span>+</span>
-                </button>
+                <div className="flex justify-between">
+                  <span className="flex-1">{displayName(option["name"])}</span>
+                  <span className="flex-none">+</span>
+                </div>
               </li>
             );
           })}

From 604822bf8d5fb328e55173616479cdcbfaaf42fc Mon Sep 17 00:00:00 2001
From: Victor <victor@sentryhealth.ca>
Date: Tue, 24 Oct 2023 00:53:52 -0400
Subject: [PATCH 05/11] fixed issue with name

---
 src/app/components/PairSelector.tsx | 110 +++-------------------------
 1 file changed, 12 insertions(+), 98 deletions(-)

diff --git a/src/app/components/PairSelector.tsx b/src/app/components/PairSelector.tsx
index c6431077..507b2d72 100644
--- a/src/app/components/PairSelector.tsx
+++ b/src/app/components/PairSelector.tsx
@@ -1,84 +1,7 @@
 import { useAppSelector, useAppDispatch } from "../hooks";
 import { selectPairAddress } from "../redux/pairSelectorSlice";
 import { useEffect, useRef, useState } from "react";
-/*
-const SearchableDropdown = ({
-  options,
-  label,
-  id,
-  selectedVal,
-  handleChange,
-}) => {
-  const [query, setQuery] = useState("");
-  const [isOpen, setIsOpen] = useState(false);
-
-  const inputRef = useRef(null);
-
-  useEffect(() => {
-    document.addEventListener("click", toggle);
-    return () => document.removeEventListener("click", toggle);
-  }, []);
 
-  const selectOption = (option) => {
-    setQuery(() => "");
-    handleChange(option[label]);
-    setIsOpen((isOpen) => !isOpen);
-  };
-
-  function toggle(e) {
-    setIsOpen(e && e.target === inputRef.current);
-  }
-
-  const getDisplayValue = () => {
-    if (query) return query;
-    if (selectedVal) return selectedVal;
-
-    return "";
-  };
-
-  const filter = (options) => {
-    return options.filter(
-      (option) => option[label].toLowerCase().indexOf(query.toLowerCase()) > -1
-    );
-  };
-
-  return (
-    <div className="dropdown">
-      <div className="control">
-        <div className="selected-value">
-          <input
-            ref={inputRef}
-            type="text"
-            value={getDisplayValue()}
-            name="searchTerm"
-            onChange={(e) => {
-              setQuery(e.target.value);
-              handleChange(null);
-            }}
-            onClick={toggle}
-          />
-        </div>
-        <div className={`arrow ${isOpen ? "open" : ""}`}></div>
-      </div>
-
-      <div className={`options ${isOpen ? "open" : ""}`}>
-        {filter(options).map((option, index) => {
-          return (
-            <div
-              onClick={() => selectOption(option)}
-              className={`option ${option[label] === selectedVal ? "selected" : ""
-                }`}
-              key={`${id}-${index}`}
-            >
-              {option[label]}
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-};
-*/
 function displayName(name?: string) {
   return name?.replace("/", " - ");
 }
@@ -91,42 +14,33 @@ export function PairSelector() {
   };
   const options = pairSelector.pairsList;
   const id = "pairOption";
-  let selectedVal = pairSelector.pairsList[0]
-    ? pairSelector.pairsList[0].name
-    : "Loading";
+  let selectedVal = useRef<string>(
+    pairSelector.pairsList[0] ? pairSelector.pairsList[0].name : "Loading"
+  );
   const handleChange = (val) => {
-    selectPair(val);
+    selectPair(val["address"]);
   };
 
   const [query, setQuery] = useState("");
-  const [isOpen, setIsOpen] = useState(true);
+  const [isOpen, setIsOpen] = useState(false);
 
   const inputRef = useRef(null);
   const dropdownRef = useRef(null);
-  /*
-  useEffect(() => {
-    document.addEventListener("click", toggle);
-    return () => document.removeEventListener("click", toggle);
-  }, []);
-*/
+
   const selectOption = (option) => {
     setQuery(() => "");
-    handleChange(option["address"]);
-    console.log(option);
-    selectedVal = option["name"];
+    handleChange(option);
+    selectedVal.current = option["name"];
     setIsOpen((isOpen) => !isOpen);
   };
 
   function toggle(e) {
-    console.log(inputRef.current);
     setIsOpen(e && e.target === inputRef.current);
   }
 
   const getDisplayValue = () => {
-    console.log("query %s", query);
-    console.log("sel %s", selectedVal);
     if (query) return displayName(query);
-    if (selectedVal) return displayName(selectedVal);
+    if (selectedVal.current) return displayName(selectedVal.current);
 
     return "";
   };
@@ -180,11 +94,11 @@ export function PairSelector() {
               <li
                 onClick={() => selectOption(option)}
                 className={
-                  `${option["name"] === selectedVal ? "selected" : ""}` +
-                  " font-bold !pl-0"
+                  `${
+                    option["name"] === selectedVal.current ? "selected" : ""
+                  }` + " font-bold !pl-0"
                 }
                 key={`${id}-${index}`}
-                value={option["name"]}
               >
                 <div className="flex justify-between">
                   <span className="flex-1">{displayName(option["name"])}</span>

From f81b37d2b004eaf6d931b5eb09a5d6be5930a5a1 Mon Sep 17 00:00:00 2001
From: Victor <victor@sentryhealth.ca>
Date: Tue, 24 Oct 2023 00:55:58 -0400
Subject: [PATCH 06/11] fixed lint

---
 src/app/components/PairSelector.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/components/PairSelector.tsx b/src/app/components/PairSelector.tsx
index 507b2d72..4b3f4292 100644
--- a/src/app/components/PairSelector.tsx
+++ b/src/app/components/PairSelector.tsx
@@ -1,6 +1,6 @@
 import { useAppSelector, useAppDispatch } from "../hooks";
 import { selectPairAddress } from "../redux/pairSelectorSlice";
-import { useEffect, useRef, useState } from "react";
+import { useRef, useState } from "react";
 
 function displayName(name?: string) {
   return name?.replace("/", " - ");

From 09ad290ab6d6be8a94bf516abaf40ae4f9aa1f87 Mon Sep 17 00:00:00 2001
From: Victor <victor@sentryhealth.ca>
Date: Thu, 26 Oct 2023 23:21:06 -0400
Subject: [PATCH 07/11] cleaned up

---
 src/app/components/PairSelector.tsx | 34 ++++++++++++++++++-----------
 1 file changed, 21 insertions(+), 13 deletions(-)

diff --git a/src/app/components/PairSelector.tsx b/src/app/components/PairSelector.tsx
index 4b3f4292..6159e6d5 100644
--- a/src/app/components/PairSelector.tsx
+++ b/src/app/components/PairSelector.tsx
@@ -2,6 +2,10 @@ import { useAppSelector, useAppDispatch } from "../hooks";
 import { selectPairAddress } from "../redux/pairSelectorSlice";
 import { useRef, useState } from "react";
 
+interface PairInfo {
+  name: string;
+  address: string;
+}
 function displayName(name?: string) {
   return name?.replace("/", " - ");
 }
@@ -14,10 +18,8 @@ export function PairSelector() {
   };
   const options = pairSelector.pairsList;
   const id = "pairOption";
-  let selectedVal = useRef<string>(
-    pairSelector.pairsList[0] ? pairSelector.pairsList[0].name : "Loading"
-  );
-  const handleChange = (val) => {
+  const handleChange = (val: PairInfo | null) => {
+    if (val == null) return;
     selectPair(val["address"]);
   };
 
@@ -27,10 +29,9 @@ export function PairSelector() {
   const inputRef = useRef(null);
   const dropdownRef = useRef(null);
 
-  const selectOption = (option) => {
+  const selectOption = (option: PairInfo) => {
     setQuery(() => "");
     handleChange(option);
-    selectedVal.current = option["name"];
     setIsOpen((isOpen) => !isOpen);
   };
 
@@ -40,12 +41,12 @@ export function PairSelector() {
 
   const getDisplayValue = () => {
     if (query) return displayName(query);
-    if (selectedVal.current) return displayName(selectedVal.current);
+    if (pairSelector.name) return displayName(pairSelector.name);
 
     return "";
   };
 
-  const filter = (options) => {
+  const filter = (options: PairInfo[]) => {
     return options.filter(
       (option) => option["name"].toLowerCase().indexOf(query.toLowerCase()) > -1
     );
@@ -93,11 +94,7 @@ export function PairSelector() {
             return (
               <li
                 onClick={() => selectOption(option)}
-                className={
-                  `${
-                    option["name"] === selectedVal.current ? "selected" : ""
-                  }` + " font-bold !pl-0"
-                }
+                className=" font-bold !pl-0"
                 key={`${id}-${index}`}
               >
                 <div className="flex justify-between">
@@ -107,6 +104,17 @@ export function PairSelector() {
               </li>
             );
           })}
+          <li>
+            <div
+              className={
+                filter(options).length == 0
+                  ? "flex justify-between"
+                  : "flex justify-between hidden"
+              }
+            >
+              <span className="flex-1">No Results</span>
+            </div>
+          </li>
         </ul>
       </div>
     </div>

From b400530dbc4373d860998c2c8856c46b80a1cac0 Mon Sep 17 00:00:00 2001
From: Victor <victor@sentryhealth.ca>
Date: Thu, 26 Oct 2023 23:31:51 -0400
Subject: [PATCH 08/11] lint fix

---
 src/app/components/PairSelector.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/components/PairSelector.tsx b/src/app/components/PairSelector.tsx
index 6159e6d5..fb57efbf 100644
--- a/src/app/components/PairSelector.tsx
+++ b/src/app/components/PairSelector.tsx
@@ -35,7 +35,7 @@ export function PairSelector() {
     setIsOpen((isOpen) => !isOpen);
   };
 
-  function toggle(e) {
+  function toggle(e: React.MouseEvent<HTMLInputElement>) {
     setIsOpen(e && e.target === inputRef.current);
   }
 

From 854cd112d6a71e0454d771a912ffd68e4daae1cb Mon Sep 17 00:00:00 2001
From: Victor <victor@sentryhealth.ca>
Date: Fri, 27 Oct 2023 08:47:50 -0400
Subject: [PATCH 09/11] adding to timeout

---
 e2e/index.spec.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/e2e/index.spec.ts b/e2e/index.spec.ts
index c9ea2dd4..b8ab7970 100644
--- a/e2e/index.spec.ts
+++ b/e2e/index.spec.ts
@@ -36,7 +36,9 @@ test("connects to AlphaDEX", async ({ page }) => {
   );
 
   // A pair should appear in the pair selector
-  await expect(page.locator("#pair-selector-text")).toHaveText(/^.* - .*$/);
+  await expect(page.locator("#pair-selector-text")).toHaveText(/^.* - .*$/, {
+    timeout: 15000,
+  });
 });
 
 // TODO: after MVP

From 48491ace8d164c765e896d6281ef6c4766afd612 Mon Sep 17 00:00:00 2001
From: Victor <victor@sentryhealth.ca>
Date: Fri, 27 Oct 2023 11:07:14 -0400
Subject: [PATCH 10/11] tweaked tests and added id

---
 e2e/index.spec.ts                   | 4 +---
 src/app/components/PairSelector.tsx | 1 +
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/e2e/index.spec.ts b/e2e/index.spec.ts
index b8ab7970..c9ea2dd4 100644
--- a/e2e/index.spec.ts
+++ b/e2e/index.spec.ts
@@ -36,9 +36,7 @@ test("connects to AlphaDEX", async ({ page }) => {
   );
 
   // A pair should appear in the pair selector
-  await expect(page.locator("#pair-selector-text")).toHaveText(/^.* - .*$/, {
-    timeout: 15000,
-  });
+  await expect(page.locator("#pair-selector-text")).toHaveText(/^.* - .*$/);
 });
 
 // TODO: after MVP
diff --git a/src/app/components/PairSelector.tsx b/src/app/components/PairSelector.tsx
index fb57efbf..fd9c3d43 100644
--- a/src/app/components/PairSelector.tsx
+++ b/src/app/components/PairSelector.tsx
@@ -58,6 +58,7 @@ export function PairSelector() {
         <label className="btn btn-block text-xl font-bold no-animation">
           <div className="flex justify-between selected-value w-full">
             <input
+              id="pair-selector-text"
               ref={inputRef}
               type="text"
               value={getDisplayValue()}

From 35be0ad9fb86bc825ab1c67ff29de622645a7cf7 Mon Sep 17 00:00:00 2001
From: Victor <victor@sentryhealth.ca>
Date: Fri, 27 Oct 2023 12:18:43 -0400
Subject: [PATCH 11/11] tweaked test

---
 e2e/index.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/e2e/index.spec.ts b/e2e/index.spec.ts
index c9ea2dd4..244f567b 100644
--- a/e2e/index.spec.ts
+++ b/e2e/index.spec.ts
@@ -36,7 +36,7 @@ test("connects to AlphaDEX", async ({ page }) => {
   );
 
   // A pair should appear in the pair selector
-  await expect(page.locator("#pair-selector-text")).toHaveText(/^.* - .*$/);
+  await expect(page.locator("#pair-selector-text")).toHaveValue(/^.* - .*$/);
 });
 
 // TODO: after MVP