First complete working prototype scanning from search bar

src/Title.tsx

@@ -6,6 +6,7 @@ import { OnResultFunction } from "@blackbox-vision/react-qr-reader/dist-types/ty
 import { BarcodeFormat } from "@zxing/library";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faQrcode } from "@fortawesome/free-solid-svg-icons/faQrcode";
+import { Dialog } from "@headlessui/react";
 import useKeyboardShortcut from "use-keyboard-shortcut";
 import PriceBox from "./PriceBox";
 import { RuntimeContext } from "./useRuntime";
@@ -35,9 +36,9 @@ const Title: React.FC = () => {
     searchRef.current?.focus();
   });
 
-  const [isScanning, setScanning] = useState<boolean>();
+  const [isScanning, setScanning] = useState<boolean>(false);
   const onScan = () => {
-    setScanning(!isScanning);
+    setScanning(true);
   };
   const evaluateScan: OnResultFunction = (result, error, codeReader) => {
     console.log("scan");
@@ -49,68 +50,79 @@ const Title: React.FC = () => {
         return;
       }
 
-      if (searchRef.current) {
+      history.push(`/search?q=${text}`);
-        searchRef.current.value = text;
-        searchRef.current.dispatchEvent(new Event("input", { bubbles: true }));
-      }
       setScanning(false);
     }
   };
 
   return (
-    <div className="px-9 py-2 flex justify-between items-baseline">
+    <>
-      <Link className="self-center" to="/">
+      <Dialog
-        <div className="text-2xl text-link-blue font-title font-bold flex items-center space-x-2">
+        className="fixed z-10 inset-0 overflow-y-auto"
-          <img
+        open={isScanning}
-            className="rounded-full"
+        onClose={() => setScanning(false)}
-            src="/otter.jpg"
+      >
-            width={32}
+        <div className="flex items-center justify-center min-h-screen">
-            height={32}
+          <Dialog.Overlay className="fixed inset-0 bg-black opacity-30" />
-            alt="An otter scanning"
+          <Dialog.Title className="absolute top-0 w-full text-center bg-white text-lg">
-            title="An otter scanning"
+            Point an ETH address QR code to camera
-          />
+          </Dialog.Title>
-          <span>Otterscan</span>
+          <div className="absolute inset-0 bg-transparent rounded min-w-max max-w-3xl w-full h-screen max-h-screen m-auto">
-        </div>
-      </Link>
-      <div className="flex items-baseline space-x-3">
-        {provider?.network.chainId === 1 && <PriceBox />}
-        <form
-          className="flex"
-          onSubmit={handleSubmit}
-          autoComplete="off"
-          spellCheck={false}
-        >
-          <input
-            className="w-full border-t border-b border-l rounded-l focus:outline-none px-2 py-1 text-sm"
-            type="text"
-            size={60}
-            placeholder='Type "/" to search by address / txn hash / block number / ENS name'
-            onChange={handleChange}
-            ref={searchRef}
-          />
-          <button
-            className="border bg-gray-100 hover:bg-gray-200 focus:outline-none px-2 py-1 text-sm text-gray-500"
-            type="button"
-            onClick={onScan}
-          >
-            <FontAwesomeIcon icon={faQrcode} />
-          </button>
-          {isScanning && (
             <QrReader
-              className="w-screen h-screen"
+              className="m-auto"
               constraints={{}}
               onResult={evaluateScan}
             />
-          )}
+          </div>
-          <button
+        </div>
-            className="rounded-r border-t border-b border-r bg-gray-100 hover:bg-gray-200 focus:outline-none px-2 py-1 text-sm text-gray-500"
+      </Dialog>
-            type="submit"
+      <div className="px-9 py-2 flex justify-between items-baseline">
+        <Link className="self-center" to="/">
+          <div className="text-2xl text-link-blue font-title font-bold flex items-center space-x-2">
+            <img
+              className="rounded-full"
+              src="/otter.jpg"
+              width={32}
+              height={32}
+              alt="An otter scanning"
+              title="An otter scanning"
+            />
+            <span>Otterscan</span>
+          </div>
+        </Link>
+        <div className="flex items-baseline space-x-3">
+          {provider?.network.chainId === 1 && <PriceBox />}
+          <form
+            className="flex"
+            onSubmit={handleSubmit}
+            autoComplete="off"
+            spellCheck={false}
           >
-            Search
+            <input
-          </button>
+              className="w-full border-t border-b border-l rounded-l focus:outline-none px-2 py-1 text-sm"
-        </form>
+              type="text"
+              size={60}
+              placeholder='Type "/" to search by address / txn hash / block number / ENS name'
+              onChange={handleChange}
+              ref={searchRef}
+            />
+            <button
+              className="border bg-gray-100 hover:bg-gray-200 focus:outline-none px-2 py-1 text-sm text-gray-500"
+              type="button"
+              onClick={onScan}
+            >
+              <FontAwesomeIcon icon={faQrcode} />
+            </button>
+            <button
+              className="rounded-r border-t border-b border-r bg-gray-100 hover:bg-gray-200 focus:outline-none px-2 py-1 text-sm text-gray-500"
+              type="submit"
+            >
+              Search
+            </button>
+          </form>
+        </div>
       </div>
-    </div>
+    </>
   );
 };