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,15 +50,32 @@ const Title: React.FC = () => {
         return;
       }
 
-      if (searchRef.current) {
-        searchRef.current.value = text;
-        searchRef.current.dispatchEvent(new Event("input", { bubbles: true }));
-      }
+      history.push(`/search?q=${text}`);
       setScanning(false);
     }
   };
 
   return (
+    <>
+      <Dialog
+        className="fixed z-10 inset-0 overflow-y-auto"
+        open={isScanning}
+        onClose={() => setScanning(false)}
+      >
+        <div className="flex items-center justify-center min-h-screen">
+          <Dialog.Overlay className="fixed inset-0 bg-black opacity-30" />
+          <Dialog.Title className="absolute top-0 w-full text-center bg-white text-lg">
+            Point an ETH address QR code to camera
+          </Dialog.Title>
+          <div className="absolute inset-0 bg-transparent rounded min-w-max max-w-3xl w-full h-screen max-h-screen m-auto">
+            <QrReader
+              className="m-auto"
+              constraints={{}}
+              onResult={evaluateScan}
+            />
+          </div>
+        </div>
+      </Dialog>
       <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">
@@ -95,13 +113,6 @@ const Title: React.FC = () => {
             >
               <FontAwesomeIcon icon={faQrcode} />
             </button>
-          {isScanning && (
-            <QrReader
-              className="w-screen h-screen"
-              constraints={{}}
-              onResult={evaluateScan}
-            />
-          )}
             <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"
@@ -111,6 +122,7 @@ const Title: React.FC = () => {
           </form>
         </div>
       </div>
+    </>
   );
 };