From 82114d9662d082ab107dd75e02103b71d6dbb796 Mon Sep 17 00:00:00 2001
From: jLynx <admin@jlynx.net>
Date: Fri, 6 Dec 2024 21:00:06 +1300
Subject: [PATCH] REFACTOR: Reorganize types and interfaces, remove unused
 models (#78)

* refactor: reorganize types and interfaces, remove unused models

* refactor: update import for DataPacket to IDataPacket in serialUtils

* refactor: update interface names for consistency and clarity

* refactor: update import paths for consistency and clarity
---
 src/app/models.tsx                            |   9 -
 src/components/Console/Console.tsx            |  88 ++++
 src/components/Controller/Controller.tsx      | 492 +++---------------
 .../DeviceButtons/DeviceButtons.tsx           |   2 +-
 .../DeviceControls/DeviceControls.tsx         | 121 +++++
 src/components/FileInputs/FileInputs.tsx      |  88 ++++
 .../FirmwareManager/FirmwareManager.tsx       |  86 +++
 src/components/Modal/Modal.tsx                |  10 +-
 src/components/Screen/Screen.tsx              |  31 ++
 src/components/SerialLoader/SerialLoader.tsx  |  25 +-
 .../SerialProvider/SerialProvider.tsx         |  57 +-
 src/components/ToggleSwitch/ToggleSwitch.tsx  |   7 +-
 src/hooks/useDeviceSetup.ts                   | 104 ++++
 src/hooks/useScreenFrame.ts                   |  34 ++
 src/types/index.ts                            |  31 ++
 src/utils/fileUtils.tsx                       |   2 +-
 src/utils/serialUtils.tsx                     |  10 +-
 src/utils/versionUtils.tsx                    |   8 +
 18 files changed, 713 insertions(+), 492 deletions(-)
 delete mode 100644 src/app/models.tsx
 create mode 100644 src/components/Console/Console.tsx
 create mode 100644 src/components/DeviceControls/DeviceControls.tsx
 create mode 100644 src/components/FileInputs/FileInputs.tsx
 create mode 100644 src/components/FirmwareManager/FirmwareManager.tsx
 create mode 100644 src/components/Screen/Screen.tsx
 create mode 100644 src/hooks/useDeviceSetup.ts
 create mode 100644 src/hooks/useScreenFrame.ts
 create mode 100644 src/types/index.ts

diff --git a/src/app/models.tsx b/src/app/models.tsx
deleted file mode 100644
index 4e9423a..0000000
--- a/src/app/models.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-export interface LatestVersions {
-  stable: VersionDetails;
-  nightly: VersionDetails;
-}
-
-export interface VersionDetails {
-  version: string;
-  published_at: string;
-}
diff --git a/src/components/Console/Console.tsx b/src/components/Console/Console.tsx
new file mode 100644
index 0000000..7d8f443
--- /dev/null
+++ b/src/components/Console/Console.tsx
@@ -0,0 +1,88 @@
+import {
+  faPaperPlane,
+  faCircleXmark,
+  faCode,
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+interface IConsole {
+  consoleMessageList: string;
+  command: string;
+  setCommand: (value: string) => void;
+  setConsoleMessageList: (value: string) => void;
+  sendCommand: () => Promise<void>;
+  scriptStatus: string;
+  scriptRunning: boolean;
+  scriptFileInputRef: React.RefObject<HTMLInputElement>;
+}
+
+export const Console: React.FC<IConsole> = ({
+  consoleMessageList,
+  command,
+  setCommand,
+  setConsoleMessageList,
+  sendCommand,
+  scriptStatus,
+  scriptRunning,
+  scriptFileInputRef,
+}) => {
+  return (
+    <div className="flex h-full w-full flex-col items-center justify-center gap-1">
+      <textarea
+        className="h-full w-full rounded bg-gray-600 p-2 font-mono text-white"
+        readOnly
+        value={consoleMessageList}
+        id="serial_console"
+      />
+      {scriptRunning && (
+        <div className="flex w-full flex-row items-center justify-center gap-1">
+          <p className="w-full rounded-md bg-blue-700 p-2 font-mono text-white">
+            {scriptStatus}
+          </p>
+        </div>
+      )}
+      <div className="flex w-full flex-row items-center justify-center gap-1">
+        <input
+          type="text"
+          value={command}
+          onChange={(e) => setCommand(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              sendCommand();
+            }
+          }}
+          placeholder="Enter command"
+          className="w-full rounded-md bg-gray-600 p-2 font-mono text-white"
+        />
+        <button
+          type="submit"
+          className="btn btn-success btn-sm size-10 text-white"
+          onClick={() => {
+            sendCommand();
+          }}
+        >
+          <FontAwesomeIcon icon={faPaperPlane} />
+        </button>
+        <button
+          type="submit"
+          className="btn btn-error btn-sm size-10 text-white"
+          onClick={() => {
+            setConsoleMessageList("");
+          }}
+        >
+          <FontAwesomeIcon icon={faCircleXmark} />
+        </button>
+        <button
+          type="button"
+          className="btn btn-info btn-sm size-10 text-white"
+          onClick={() => {
+            scriptFileInputRef.current?.click();
+          }}
+        >
+          <FontAwesomeIcon icon={faCode} />
+        </button>
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/Controller/Controller.tsx b/src/components/Controller/Controller.tsx
index 5496ed1..c7eee76 100644
--- a/src/components/Controller/Controller.tsx
+++ b/src/components/Controller/Controller.tsx
@@ -1,61 +1,58 @@
 "use client";
 
-import {
-  faRotate,
-  faRotateLeft,
-  faRotateRight,
-  faArrowUp,
-  faArrowDown,
-  faArrowLeft,
-  faArrowRight,
-  faCheckCircle,
-  faPaperPlane,
-  faCircleXmark,
-  faCode,
-} from "@fortawesome/free-solid-svg-icons";
+import { faRotate, faCheckCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React, { ChangeEvent, useEffect, useRef, useState } from "react";
-import { LatestVersions } from "@/app/models";
-import { parseDirectories } from "@/utils/fileUtils";
+import { Console } from "@/components/Console/Console";
+import { DeviceControls } from "@/components/DeviceControls/DeviceControls";
+import { FileStructure } from "@/components/FileBrowser/FileBrowser";
+import { FileInputs } from "@/components/FileInputs/FileInputs";
+import { FirmwareManager } from "@/components/FirmwareManager/FirmwareManager";
+import HotkeyButton from "@/components/HotkeyButton/HotkeyButton";
+import { Loader } from "@/components/Loader/Loader";
+import Modal from "@/components/Modal/Modal";
+import { Screen } from "@/components/Screen/Screen";
+import { useSerial } from "@/components/SerialLoader/SerialLoader";
+import ToggleSwitch from "@/components/ToggleSwitch/ToggleSwitch";
+import { useDeviceSetup } from "@/hooks/useDeviceSetup";
+import { useScreenFrame } from "@/hooks/useScreenFrame";
+import { ILatestVersions } from "@/types";
 import { downloadFileFromUrl, useWriteCommand } from "@/utils/serialUtils";
 import {
-  getVersionLink,
   getVersionType,
   nightlyVersionFormat,
   stableVersionFormat,
 } from "@/utils/versionUtils";
-import { FileBrowser, FileStructure } from "../FileBrowser/FileBrowser";
-import HotkeyButton from "../HotkeyButton/HotkeyButton";
-import { Loader } from "../Loader/Loader";
-import Modal from "../Modal/Modal";
-import { useSerial } from "../SerialLoader/SerialLoader";
-import ToggleSwitch from "../ToggleSwitch/ToggleSwitch";
 
 const Controller = () => {
-  const { serial, consoleMessage } = useSerial();
-  const { write, uploadFile, disableTransmitAction, setLoadingFrame } =
-    useWriteCommand();
-
   const [consoleMessageList, setConsoleMessageList] = useState<string>("");
   const [updateStatus, setUpdateStatus] = useState<string>("");
-  const [selectedUploadFolder, setSelectedUploadFolder] = useState<string>("/");
   const [command, setCommand] = useState<string>("");
-  const [deviceVersion, setDeviceVersion] = useState<string>("");
+  const [selectedUploadFolder, setSelectedUploadFolder] = useState<string>("/");
+  const [scriptStatus, setScriptStatus] = useState<string>(
+    "Type single command above or pick a script"
+  );
   const [autoUpdateFrame, setAutoUpdateFrame] = useState<boolean>(true);
   const [firmwarModalOpen, setFirmwarModalOpen] = useState<boolean>(false);
-  const [setupComplete, setSetupComplete] = useState<boolean>(false);
+  const [scriptRunning, setScriptRunning] = useState<boolean>(false);
   const [dirStructure, setDirStructure] = useState<FileStructure[]>();
-  const [latestVersion, setLatestVersion] = useState<LatestVersions>();
-  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+  const [latestVersion, setLatestVersion] = useState<ILatestVersions>();
+
   const fileInputRef = useRef<HTMLInputElement>(null);
   const firmwareFileInputRef = useRef<HTMLInputElement>(null);
   const scriptFileInputRef = useRef<HTMLInputElement>(null);
-  const [scriptStatus, setScriptStatus] = useState<string>(
-    "Type single command above or pick a script"
-  );
-  const [scriptRunning, setScriptRunning] = useState<boolean>(false);
 
-  const started = useRef<boolean>(false);
+  const { serial, consoleMessage } = useSerial();
+  const { write, uploadFile, disableTransmitAction, setLoadingFrame } =
+    useWriteCommand();
+  const { setupComplete, deviceVersion } = useDeviceSetup({
+    serial,
+    write,
+    setConsoleMessageList,
+    setDirStructure,
+    setLatestVersion,
+  });
+  const { canvasRef, renderFrame } = useScreenFrame();
 
   const sendCommand = async () => {
     await write(command, false);
@@ -65,7 +62,7 @@ const Controller = () => {
   useEffect(() => {
     // We dont add this to the console as its not needed. This may change in the future
     if (consoleMessage.startsWith("screenframe")) {
-      renderFrame();
+      renderFrame(consoleMessage);
       setLoadingFrame(false);
     } else {
       setConsoleMessageList(
@@ -75,50 +72,6 @@ const Controller = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [consoleMessage]);
 
-  useEffect(() => {
-    if (serial.isOpen && !serial.isReading && !started.current) {
-      started.current = true;
-      serial.startReading();
-
-      const initSerialSetupCalls = async () => {
-        await write(setDeviceTime(), false);
-
-        const infoCmd = (await write("info", false, true)).response;
-        const matches = infoCmd?.match(/Mayhem Version:\s*(.*)/i);
-
-        if (matches && matches.length > 1) {
-          const mayhemVersion = matches[1];
-          setDeviceVersion(mayhemVersion);
-        } else {
-          console.log("Mayhem version not found!");
-        }
-
-        await fetchFolderStructure();
-
-        write("screenframeshort", false);
-
-        setConsoleMessageList("");
-        setSetupComplete(true);
-
-        setLatestVersion(await getLatestVersions());
-      };
-
-      const fetchFolderStructure = async () => {
-        const rootStructure = await write(`ls /`, false, true); // get the children directories
-
-        if (rootStructure.response) {
-          const rootItems = rootStructure.response.split("\r\n").slice(1, -1);
-
-          const fileStructures = parseDirectories(rootItems);
-          setDirStructure(fileStructures);
-        }
-      };
-
-      initSerialSetupCalls();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [serial]);
-
   useEffect(() => {
     let serial_console = document.getElementById(
       "serial_console"
@@ -129,64 +82,6 @@ const Controller = () => {
     }
   }, [consoleMessageList]);
 
-  const getLatestVersions = async () => {
-    const apiResponse = await fetch("https://hackrf.app/api/get_versions");
-
-    if (!apiResponse.ok) {
-      console.error("Network response was not ok");
-    }
-
-    return await apiResponse.json<LatestVersions>();
-  };
-
-  const renderFrame = () => {
-    if (!consoleMessage.includes("screenframe")) return;
-
-    const lines = consoleMessage.split("\r\n");
-    const ctx = canvasRef.current?.getContext("2d");
-
-    if (!ctx) return false;
-
-    for (let y = 0; y < lines.length; y++) {
-      let line = lines[y];
-      if (line.startsWith("screenframe")) continue;
-      for (let o = 0, x = 0; o < line.length && x < 240; o++, x++) {
-        try {
-          let by = line.charCodeAt(o) - 32;
-          let r = ((by >> 4) & 3) << 6;
-          let g = ((by >> 2) & 3) << 6;
-          let b = (by & 3) << 6;
-
-          ctx.fillStyle = `rgb(${r},${g},${b})`;
-          ctx?.fillRect(x, y, 1, 1);
-        } catch (err) {
-          console.error(err);
-        }
-      }
-    }
-  };
-
-  const setDeviceTime = () => {
-    const currentDateTime: Date = new Date();
-    // Add 3 seconds to the current time to account for the time it takes to send the command
-    currentDateTime.setSeconds(currentDateTime.getSeconds() + 3);
-    const year: number = currentDateTime.getFullYear();
-    let month: string | number = currentDateTime.getMonth() + 1; // JavaScript months are 0-11
-    let day: string | number = currentDateTime.getDate();
-    let hours: string | number = currentDateTime.getHours();
-    let minutes: string | number = currentDateTime.getMinutes();
-    let seconds: string | number = currentDateTime.getSeconds();
-
-    // Making sure we have two digit representation
-    month = month < 10 ? "0" + month : month;
-    day = day < 10 ? "0" + day : day;
-    hours = hours < 10 ? "0" + hours : hours;
-    minutes = minutes < 10 ? "0" + minutes : minutes;
-    seconds = seconds < 10 ? "0" + seconds : seconds;
-
-    return `rtcset ${year} ${month} ${day} ${hours} ${minutes} ${seconds}`;
-  };
-
   const handleKeyDown = (e: React.KeyboardEvent) => {
     if (
       (e.key.length === 1 && /[a-zA-Z0-9 \\.]/.test(e.key)) ||
@@ -397,23 +292,11 @@ const Controller = () => {
               className="flex flex-col items-center justify-center gap-5"
               id="screenGroup"
             >
-              <canvas
-                ref={canvasRef}
-                width={241}
-                height={321}
-                className={`${
-                  !disableTransmitAction && "cursor-pointer"
-                } shadow-glow shadow-neutral-500 outline-none focus:ring-0`}
-                onMouseDown={(
-                  event: React.MouseEvent<HTMLCanvasElement, MouseEvent>
-                ) => {
-                  if (!canvasRef.current || disableTransmitAction) return;
-                  const bounds = canvasRef.current.getBoundingClientRect();
-                  const x = event.clientX - bounds.left;
-                  const y = event.clientY - bounds.top;
-
-                  write(`touch ${x} ${y}`, autoUpdateFrame);
-                }}
+              <Screen
+                canvasRef={canvasRef}
+                disableTransmitAction={disableTransmitAction}
+                autoUpdateFrame={autoUpdateFrame}
+                write={write}
               />
 
               <div className="flex flex-col items-center justify-center rounded-md bg-gray-700 p-3">
@@ -442,99 +325,11 @@ const Controller = () => {
               </div>
             </div>
 
-            {/* 
-            
-            Attention!
-            For some reason, when I use <DeviceButtons />, once the buttons are clicked, the 
-            buttons never disable. I have spent hours trying to fix this, but I cannot. So 
-            for now I have moved them back out of their own compoent which "Solves" the problem.
-
-            Basically the issue is it seems to be setting the state of disableTransmitAction, but 
-            not rerendering.
-
-            If someone else could fix this, that would be great <3
-
-            */}
-            {/* <DeviceButtons
-              autoUpdateFrame={autoUpdateFrame}
+            <DeviceControls
               disableTransmitAction={disableTransmitAction}
-            /> */}
-            <div
-              className="flex flex-col items-center justify-center gap-4"
-              id="controlGroup"
-            >
-              <div className="flex flex-col items-center justify-center rounded-lg bg-gray-800">
-                <div className="grid grid-flow-col grid-rows-3 gap-4">
-                  <div></div>
-                  <HotkeyButton
-                    label={<FontAwesomeIcon icon={faArrowLeft} />}
-                    disabled={disableTransmitAction}
-                    onClickFunction={() => write("button 2", autoUpdateFrame)}
-                    className="btn btn-success h-16 w-16"
-                    shortcutKeys={"ArrowLeft"}
-                  />
-                  <button
-                    disabled={disableTransmitAction}
-                    onClick={() => write("button 7", autoUpdateFrame)}
-                    className="btn btn-info h-12 w-12 self-end justify-self-start"
-                  >
-                    <FontAwesomeIcon icon={faRotateLeft} />
-                  </button>
-                  <HotkeyButton
-                    label={<FontAwesomeIcon icon={faArrowUp} />}
-                    disabled={disableTransmitAction}
-                    onClickFunction={() => write("button 4", autoUpdateFrame)}
-                    className="btn btn-success h-16 w-16"
-                    shortcutKeys={"ArrowUp"}
-                  />
-                  <HotkeyButton
-                    label={<FontAwesomeIcon icon={faCheckCircle} />}
-                    disabled={disableTransmitAction}
-                    onClickFunction={() => write("button 5", autoUpdateFrame)}
-                    className="btn btn-info h-16 w-16"
-                    shortcutKeys={"Enter"}
-                  />
-                  <HotkeyButton
-                    label={<FontAwesomeIcon icon={faArrowDown} />}
-                    disabled={disableTransmitAction}
-                    onClickFunction={() => write("button 3", autoUpdateFrame)}
-                    className="btn btn-success h-16 w-16"
-                    shortcutKeys={"ArrowDown"}
-                  />
-                  <div></div>
-                  <HotkeyButton
-                    label={<FontAwesomeIcon icon={faArrowRight} />}
-                    disabled={disableTransmitAction}
-                    onClickFunction={() => write("button 1", autoUpdateFrame)}
-                    className="btn btn-success h-16 w-16"
-                    shortcutKeys={"ArrowRight"}
-                  />
-                  <button
-                    disabled={disableTransmitAction}
-                    onClick={() => write("button 8", autoUpdateFrame)}
-                    className="btn btn-info h-12 w-12 self-end justify-self-end"
-                  >
-                    <FontAwesomeIcon icon={faRotateRight} />
-                  </button>
-                </div>
-              </div>
-              <div className="flex items-center justify-center gap-4 rounded-lg bg-gray-800 p-5">
-                <HotkeyButton
-                  label="DFU"
-                  disabled={disableTransmitAction}
-                  onClickFunction={() => write("button 6", autoUpdateFrame)}
-                  className="btn btn-warning h-16 w-20"
-                  shortcutKeys={"mod+D"}
-                />
-                <button
-                  disabled={disableTransmitAction}
-                  onClick={() => write("reboot", autoUpdateFrame)}
-                  className="btn btn-error h-16 w-20"
-                >
-                  REBOOT
-                </button>
-              </div>
-            </div>
+              write={write}
+              autoUpdateFrame={autoUpdateFrame}
+            />
           </div>
 
           {!serial.isReading ? (
@@ -547,114 +342,28 @@ const Controller = () => {
           ) : (
             <>
               <div className="mt-10 flex h-[434px] w-[80%] flex-row items-start justify-center gap-5 rounded-md bg-gray-700 p-5">
-                <div className="flex h-full w-[35%] flex-col gap-1">
-                  <input
-                    ref={fileInputRef}
-                    type="file"
-                    style={{ display: "none" }}
-                    onClick={() => {
-                      if (fileInputRef.current) {
-                        fileInputRef.current.value = "";
-                      }
-                    }}
-                    onChange={(e) => {
-                      onFileChange(e, selectedUploadFolder);
-                    }}
-                  />
-                  <input
-                    ref={firmwareFileInputRef}
-                    type="file"
-                    accept=".tar"
-                    style={{ display: "none" }}
-                    onClick={() => {
-                      if (fileInputRef.current) {
-                        fileInputRef.current.value = "";
-                      }
-                    }}
-                    onChange={(e) => {
-                      onFirmwareFileChange(e, selectedUploadFolder);
-                    }}
-                  />
-                  <input
-                    ref={scriptFileInputRef}
-                    type="file"
-                    accept=".ppsc"
-                    style={{ display: "none" }}
-                    onClick={() => {
-                      if (scriptFileInputRef.current) {
-                        scriptFileInputRef.current.value = "";
-                      }
-                    }}
-                    onChange={(e) => {
-                      onScriptFileChange(e);
-                    }}
-                  />
-                  <div className="flex h-full flex-col overflow-y-auto">
-                    <FileBrowser
-                      fileInputRef={fileInputRef}
-                      setSelectedUploadFolder={setSelectedUploadFolder}
-                      dirStructure={dirStructure}
-                      setDirStructure={setDirStructure}
-                    />
-                  </div>
-                </div>
-                <div className="flex w-full flex-col items-center justify-center gap-1">
-                  <textarea
-                    className="h-[350px] w-full rounded bg-gray-600 p-2 font-mono text-white"
-                    readOnly
-                    value={consoleMessageList}
-                    id="serial_console"
-                  />
-                  {scriptRunning && (
-                    <div className="flex w-full flex-row items-center justify-center gap-1">
-                      <p className="w-full rounded-md bg-blue-700 p-2 font-mono text-white">
-                        {scriptStatus}
-                      </p>
-                    </div>
-                  )}
-                  <div className="flex w-full flex-row items-center justify-center gap-1">
-                    <input
-                      type="text"
-                      value={command}
-                      onChange={(e) => setCommand(e.target.value)}
-                      onKeyDown={(e) => {
-                        if (e.key === "Enter") {
-                          e.preventDefault();
-                          sendCommand();
-                        }
-                      }}
-                      placeholder="Enter command"
-                      className="w-full rounded-md bg-gray-600 p-2 font-mono text-white"
-                    />
-                    <button
-                      type="submit"
-                      className="btn btn-success btn-sm size-10 text-white"
-                      onClick={() => {
-                        sendCommand();
-                      }}
-                    >
-                      <FontAwesomeIcon icon={faPaperPlane} />
-                    </button>
-                    <button
-                      type="submit"
-                      className="btn btn-error btn-sm size-10 text-white"
-                      onClick={() => {
-                        setConsoleMessageList("");
-                      }}
-                    >
-                      <FontAwesomeIcon icon={faCircleXmark} />
-                    </button>
-                    <button
-                      type="button"
-                      className="btn btn-info btn-sm size-10 text-white"
-                      onClick={() => {
-                        scriptFileInputRef.current?.click();
-                      }}
-                    >
-                      <FontAwesomeIcon icon={faCode} />
-                    </button>
-                  </div>
-                </div>
+                <FileInputs
+                  fileInputRef={fileInputRef}
+                  firmwareFileInputRef={firmwareFileInputRef}
+                  scriptFileInputRef={scriptFileInputRef}
+                  selectedUploadFolder={selectedUploadFolder}
+                  dirStructure={dirStructure}
+                  setDirStructure={setDirStructure}
+                  setSelectedUploadFolder={setSelectedUploadFolder}
+                  onFileChange={onFileChange}
+                  onFirmwareFileChange={onFirmwareFileChange}
+                  onScriptFileChange={onScriptFileChange}
+                />
+                <Console
+                  consoleMessageList={consoleMessageList}
+                  command={command}
+                  setCommand={setCommand}
+                  setConsoleMessageList={setConsoleMessageList}
+                  sendCommand={sendCommand}
+                  scriptStatus={scriptStatus}
+                  scriptRunning={scriptRunning}
+                  scriptFileInputRef={scriptFileInputRef}
+                />
               </div>
               <div className="m-5 flex w-[20%] flex-col items-center justify-center rounded-md bg-gray-700 p-5">
                 <p className="pb-5 text-center text-sm">
@@ -689,67 +398,16 @@ const Controller = () => {
             Please manually update to the latest stable or nightly build!
           </p>
         ) : (
-          <div className="flex flex-col gap-3">
-            <p>
-              Currently installed version:{" "}
-              <a
-                className="text-blue-300 underline transition-colors duration-200 hover:text-blue-400"
-                href={getVersionLink(deviceVersion)}
-                target="_blank"
-              >
-                {deviceVersion} - {getVersionType(deviceVersion)}
-              </a>
-            </p>
-            <div className="flex flex-col gap-1">
-              <p>
-                Latest Stable:{" "}
-                <a
-                  className="text-blue-300 underline transition-colors duration-200 hover:text-blue-400"
-                  href={getVersionLink(latestVersion?.stable.version)}
-                  target="_blank"
-                >
-                  {latestVersion?.stable.version}
-                </a>
-              </p>
-              <p>
-                Latest Nightly:{" "}
-                <a
-                  className="text-blue-300 underline transition-colors duration-200 hover:text-blue-400"
-                  href={getVersionLink(latestVersion?.nightly.version)}
-                  target="_blank"
-                >
-                  {latestVersion?.nightly.version}
-                </a>
-              </p>
-            </div>
-
-            <p className="mt-3">Select from the available options:</p>
-            <button
-              onClick={() => flashLatestStableFirmware()}
-              disabled={disableTransmitAction}
-              className="rounded bg-blue-400 p-2 text-white disabled:opacity-50"
-            >
-              Update to latest stable release
-            </button>
-            <button
-              disabled={disableTransmitAction}
-              onClick={() => flashLatestNightlyFirmware()}
-              className="rounded bg-blue-400 p-2 text-white disabled:opacity-50"
-            >
-              Update to latest nightly release
-            </button>
-            <button
-              disabled={disableTransmitAction}
-              onClick={() => {
-                setSelectedUploadFolder("/FIRMWARE/");
-                firmwareFileInputRef.current?.click();
-              }}
-              className="rounded bg-blue-400 p-2 text-white disabled:opacity-50"
-            >
-              Flash custom firmware
-            </button>
-            <p>{updateStatus}</p>
-          </div>
+          <FirmwareManager
+            deviceVersion={deviceVersion}
+            latestVersion={latestVersion}
+            disableTransmitAction={disableTransmitAction}
+            firmwareFileInputRef={firmwareFileInputRef}
+            updateStatus={updateStatus}
+            setSelectedUploadFolder={setSelectedUploadFolder}
+            flashLatestStableFirmware={flashLatestStableFirmware}
+            flashLatestNightlyFirmware={flashLatestNightlyFirmware}
+          />
         )}
       </Modal>
     </>
diff --git a/src/components/DeviceButtons/DeviceButtons.tsx b/src/components/DeviceButtons/DeviceButtons.tsx
index 620fea4..c899601 100644
--- a/src/components/DeviceButtons/DeviceButtons.tsx
+++ b/src/components/DeviceButtons/DeviceButtons.tsx
@@ -1,7 +1,7 @@
 import { faRotateLeft, faRotateRight } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import HotkeyButton from "@/components/HotkeyButton/HotkeyButton";
 import { useWriteCommand } from "@/utils/serialUtils";
-import HotkeyButton from "../HotkeyButton/HotkeyButton";
 
 export const DeviceButtons = ({
   autoUpdateFrame,
diff --git a/src/components/DeviceControls/DeviceControls.tsx b/src/components/DeviceControls/DeviceControls.tsx
new file mode 100644
index 0000000..f84b412
--- /dev/null
+++ b/src/components/DeviceControls/DeviceControls.tsx
@@ -0,0 +1,121 @@
+import {
+  faRotateLeft,
+  faRotateRight,
+  faArrowUp,
+  faArrowDown,
+  faArrowLeft,
+  faArrowRight,
+  faCheckCircle,
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React from "react";
+import HotkeyButton from "@/components/HotkeyButton/HotkeyButton";
+
+interface IDeviceControls {
+  disableTransmitAction: boolean;
+  autoUpdateFrame: boolean;
+  write: any;
+}
+
+export const DeviceControls: React.FC<IDeviceControls> = ({
+  disableTransmitAction,
+  autoUpdateFrame,
+  write,
+}) => {
+  /* 
+
+    Attention!
+    For some reason, when I use <DeviceButtons />, once the buttons are clicked, the 
+    buttons never disable. I have spent hours trying to fix this, but I cannot. So 
+    for now I have moved them back out of their own compoent which "Solves" the problem.
+
+    Basically the issue is it seems to be setting the state of disableTransmitAction, but 
+    not rerendering.
+
+    If someone else could fix this, that would be great <3
+
+    */
+
+  return (
+    /* <DeviceButtons
+              autoUpdateFrame={autoUpdateFrame}
+              disableTransmitAction={disableTransmitAction}
+            /> */
+    <div
+      className="flex flex-col items-center justify-center gap-4"
+      id="controlGroup"
+    >
+      <div className="flex flex-col items-center justify-center rounded-lg bg-gray-800">
+        <div className="grid grid-flow-col grid-rows-3 gap-4">
+          <div></div>
+          <HotkeyButton
+            label={<FontAwesomeIcon icon={faArrowLeft} />}
+            disabled={disableTransmitAction}
+            onClickFunction={() => write("button 2", autoUpdateFrame)}
+            className="btn btn-success h-16 w-16"
+            shortcutKeys={"ArrowLeft"}
+          />
+          <button
+            disabled={disableTransmitAction}
+            onClick={() => write("button 7", autoUpdateFrame)}
+            className="btn btn-info h-12 w-12 self-end justify-self-start"
+          >
+            <FontAwesomeIcon icon={faRotateLeft} />
+          </button>
+          <HotkeyButton
+            label={<FontAwesomeIcon icon={faArrowUp} />}
+            disabled={disableTransmitAction}
+            onClickFunction={() => write("button 4", autoUpdateFrame)}
+            className="btn btn-success h-16 w-16"
+            shortcutKeys={"ArrowUp"}
+          />
+          <HotkeyButton
+            label={<FontAwesomeIcon icon={faCheckCircle} />}
+            disabled={disableTransmitAction}
+            onClickFunction={() => write("button 5", autoUpdateFrame)}
+            className="btn btn-info h-16 w-16"
+            shortcutKeys={"Enter"}
+          />
+          <HotkeyButton
+            label={<FontAwesomeIcon icon={faArrowDown} />}
+            disabled={disableTransmitAction}
+            onClickFunction={() => write("button 3", autoUpdateFrame)}
+            className="btn btn-success h-16 w-16"
+            shortcutKeys={"ArrowDown"}
+          />
+          <div></div>
+          <HotkeyButton
+            label={<FontAwesomeIcon icon={faArrowRight} />}
+            disabled={disableTransmitAction}
+            onClickFunction={() => write("button 1", autoUpdateFrame)}
+            className="btn btn-success h-16 w-16"
+            shortcutKeys={"ArrowRight"}
+          />
+          <button
+            disabled={disableTransmitAction}
+            onClick={() => write("button 8", autoUpdateFrame)}
+            className="btn btn-info h-12 w-12 self-end justify-self-end"
+          >
+            <FontAwesomeIcon icon={faRotateRight} />
+          </button>
+        </div>
+      </div>
+      <div className="flex items-center justify-center gap-4 rounded-lg bg-gray-800 p-5">
+        <HotkeyButton
+          label="DFU"
+          disabled={disableTransmitAction}
+          onClickFunction={() => write("button 6", autoUpdateFrame)}
+          className="btn btn-warning h-16 w-20"
+          shortcutKeys={"mod+D"}
+        />
+        <button
+          disabled={disableTransmitAction}
+          onClick={() => write("reboot", autoUpdateFrame)}
+          className="btn btn-error h-16 w-20"
+        >
+          REBOOT
+        </button>
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/FileInputs/FileInputs.tsx b/src/components/FileInputs/FileInputs.tsx
new file mode 100644
index 0000000..cf4e436
--- /dev/null
+++ b/src/components/FileInputs/FileInputs.tsx
@@ -0,0 +1,88 @@
+import { ChangeEvent, Dispatch, SetStateAction } from "react";
+import {
+  FileBrowser,
+  FileStructure,
+} from "@/components/FileBrowser/FileBrowser";
+
+interface IFileInputs {
+  fileInputRef: React.RefObject<HTMLInputElement>;
+  firmwareFileInputRef: React.RefObject<HTMLInputElement>;
+  scriptFileInputRef: React.RefObject<HTMLInputElement>;
+  selectedUploadFolder: string;
+  dirStructure: FileStructure[] | undefined;
+  setDirStructure: Dispatch<SetStateAction<FileStructure[] | undefined>>;
+  setSelectedUploadFolder: Dispatch<SetStateAction<string>>;
+  onFileChange: (event: ChangeEvent<HTMLInputElement>, path: string) => void;
+  onFirmwareFileChange: (
+    event: ChangeEvent<HTMLInputElement>,
+    path: string
+  ) => void;
+  onScriptFileChange: (event: ChangeEvent<HTMLInputElement>) => void;
+}
+
+export const FileInputs: React.FC<IFileInputs> = ({
+  fileInputRef,
+  firmwareFileInputRef,
+  scriptFileInputRef,
+  selectedUploadFolder,
+  dirStructure,
+  setDirStructure,
+  setSelectedUploadFolder,
+  onFileChange,
+  onFirmwareFileChange,
+  onScriptFileChange,
+}) => {
+  return (
+    <div className="flex h-full w-[35%] flex-col gap-1">
+      <input
+        ref={fileInputRef}
+        type="file"
+        style={{ display: "none" }}
+        onClick={() => {
+          if (fileInputRef.current) {
+            fileInputRef.current.value = "";
+          }
+        }}
+        onChange={(e) => {
+          onFileChange(e, selectedUploadFolder);
+        }}
+      />
+      <input
+        ref={firmwareFileInputRef}
+        type="file"
+        accept=".tar"
+        style={{ display: "none" }}
+        onClick={() => {
+          if (fileInputRef.current) {
+            fileInputRef.current.value = "";
+          }
+        }}
+        onChange={(e) => {
+          onFirmwareFileChange(e, selectedUploadFolder);
+        }}
+      />
+      <input
+        ref={scriptFileInputRef}
+        type="file"
+        accept=".ppsc"
+        style={{ display: "none" }}
+        onClick={() => {
+          if (scriptFileInputRef.current) {
+            scriptFileInputRef.current.value = "";
+          }
+        }}
+        onChange={(e) => {
+          onScriptFileChange(e);
+        }}
+      />
+      <div className="flex h-full flex-col overflow-y-auto">
+        <FileBrowser
+          fileInputRef={fileInputRef}
+          setSelectedUploadFolder={setSelectedUploadFolder}
+          dirStructure={dirStructure}
+          setDirStructure={setDirStructure}
+        />
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/FirmwareManager/FirmwareManager.tsx b/src/components/FirmwareManager/FirmwareManager.tsx
new file mode 100644
index 0000000..1f00c7b
--- /dev/null
+++ b/src/components/FirmwareManager/FirmwareManager.tsx
@@ -0,0 +1,86 @@
+import { ILatestVersions } from "@/types";
+import { getVersionLink, getVersionType } from "@/utils/versionUtils";
+
+interface IFirmwareManager {
+  deviceVersion: string;
+  latestVersion: ILatestVersions | undefined;
+  disableTransmitAction: boolean;
+  firmwareFileInputRef: React.RefObject<HTMLInputElement>;
+  updateStatus: string;
+  setSelectedUploadFolder: (folder: string) => void;
+  flashLatestStableFirmware: () => Promise<void>;
+  flashLatestNightlyFirmware: () => Promise<void>;
+}
+
+export const FirmwareManager: React.FC<IFirmwareManager> = ({
+  deviceVersion,
+  latestVersion,
+  disableTransmitAction,
+  firmwareFileInputRef,
+  updateStatus,
+  setSelectedUploadFolder,
+  flashLatestStableFirmware,
+  flashLatestNightlyFirmware,
+}) => (
+  <div className="flex flex-col gap-3">
+    <p>
+      Currently installed version:{" "}
+      <a
+        className="text-blue-300 underline transition-colors duration-200 hover:text-blue-400"
+        href={getVersionLink(deviceVersion)}
+        target="_blank"
+      >
+        {deviceVersion} - {getVersionType(deviceVersion)}
+      </a>
+    </p>
+    <div className="flex flex-col gap-1">
+      <p>
+        Latest Stable:{" "}
+        <a
+          className="text-blue-300 underline transition-colors duration-200 hover:text-blue-400"
+          href={getVersionLink(latestVersion?.stable.version)}
+          target="_blank"
+        >
+          {latestVersion?.stable.version}
+        </a>
+      </p>
+      <p>
+        Latest Nightly:{" "}
+        <a
+          className="text-blue-300 underline transition-colors duration-200 hover:text-blue-400"
+          href={getVersionLink(latestVersion?.nightly.version)}
+          target="_blank"
+        >
+          {latestVersion?.nightly.version}
+        </a>
+      </p>
+    </div>
+
+    <p className="mt-3">Select from the available options:</p>
+    <button
+      onClick={() => flashLatestStableFirmware()}
+      disabled={disableTransmitAction}
+      className="rounded bg-blue-400 p-2 text-white disabled:opacity-50"
+    >
+      Update to latest stable release
+    </button>
+    <button
+      disabled={disableTransmitAction}
+      onClick={() => flashLatestNightlyFirmware()}
+      className="rounded bg-blue-400 p-2 text-white disabled:opacity-50"
+    >
+      Update to latest nightly release
+    </button>
+    <button
+      disabled={disableTransmitAction}
+      onClick={() => {
+        setSelectedUploadFolder("/FIRMWARE/");
+        firmwareFileInputRef.current?.click();
+      }}
+      className="rounded bg-blue-400 p-2 text-white disabled:opacity-50"
+    >
+      Flash custom firmware
+    </button>
+    <p>{updateStatus}</p>
+  </div>
+);
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
index 6c01089..6e9bda8 100644
--- a/src/components/Modal/Modal.tsx
+++ b/src/components/Modal/Modal.tsx
@@ -1,15 +1,7 @@
 import { faRectangleXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React, { useEffect } from "react";
-
-export interface IModal {
-  title?: string;
-  footer?: React.ReactNode;
-  isModalOpen?: boolean;
-  closeModal: () => void;
-  children: React.ReactNode;
-  className?: string;
-}
+import { IModal } from "@/types";
 
 const Modal = ({
   title,
diff --git a/src/components/Screen/Screen.tsx b/src/components/Screen/Screen.tsx
new file mode 100644
index 0000000..b5903ef
--- /dev/null
+++ b/src/components/Screen/Screen.tsx
@@ -0,0 +1,31 @@
+interface IScreen {
+  canvasRef: React.RefObject<HTMLCanvasElement>;
+  disableTransmitAction: boolean;
+  autoUpdateFrame: boolean;
+  write: any;
+}
+
+export const Screen: React.FC<IScreen> = ({
+  canvasRef,
+  disableTransmitAction,
+  autoUpdateFrame,
+  write,
+}) => {
+  return (
+    <canvas
+      ref={canvasRef}
+      width={241}
+      height={321}
+      className={`${
+        !disableTransmitAction && "cursor-pointer"
+      } shadow-glow shadow-neutral-500 outline-none focus:ring-0`}
+      onMouseDown={(event) => {
+        if (!canvasRef.current || disableTransmitAction) return;
+        const bounds = canvasRef.current.getBoundingClientRect();
+        const x = event.clientX - bounds.left;
+        const y = event.clientY - bounds.top;
+        write(`touch ${x} ${y}`, autoUpdateFrame);
+      }}
+    />
+  );
+};
diff --git a/src/components/SerialLoader/SerialLoader.tsx b/src/components/SerialLoader/SerialLoader.tsx
index 427c333..b3c5002 100644
--- a/src/components/SerialLoader/SerialLoader.tsx
+++ b/src/components/SerialLoader/SerialLoader.tsx
@@ -6,32 +6,29 @@ import {
   useRef,
   useState,
 } from "react";
-import Modal from "../Modal/Modal";
+import Modal from "@/components/Modal/Modal";
 import useWebSerial, {
-  UseWebSerialReturn,
-} from "../SerialProvider/SerialProvider";
+  ISerialProvider,
+} from "@/components/SerialProvider/SerialProvider";
+import { ISerialContextValue } from "@/types";
 
-interface SerialLoaderProps {}
+interface ISerialLoader {}
 
-export interface SerialContextValue {
-  serial: UseWebSerialReturn;
-  consoleMessage: string;
-}
-export const SerialContext = createContext<SerialContextValue>({
-  serial: {} as UseWebSerialReturn,
+export const SerialContext = createContext<ISerialContextValue>({
+  serial: {} as ISerialProvider,
   consoleMessage: "",
 });
 
 // custom hook to use the context
 export const useSerial = () => useContext(SerialContext);
 
-const SerialLoader = ({ children }: PropsWithChildren<SerialLoaderProps>) => {
+const SerialLoader = ({ children }: PropsWithChildren<ISerialLoader>) => {
   const pairButtonRef = useRef<HTMLButtonElement>(null);
   const [consoleMessage, setConsoleMessage] = useState<string>();
   const [isLinuxUserModalOpen, setIsLinuxUserModalOpen] =
     useState<boolean>(false);
 
-  const serial: UseWebSerialReturn = useWebSerial({
+  const serial: ISerialProvider = useWebSerial({
     onConnect: (data: any) => {
       // ToDo: Auto connect when its connected (But have a select toggle to be able to turn this off)
       console.log("onConnect", data);
@@ -112,7 +109,7 @@ const SerialLoader = ({ children }: PropsWithChildren<SerialLoaderProps>) => {
           </button>
           <div className="pt-5">
             <i>No device found or cannot connect? </i>
-            <ul className="list-disc list-inside">
+            <ul className="list-inside list-disc">
               <li>
                 Keep your PortaPack in normal mode (instead of HackRF mode)
               </li>
@@ -124,7 +121,7 @@ const SerialLoader = ({ children }: PropsWithChildren<SerialLoaderProps>) => {
                 <li>
                   Linux user?{" "}
                   <span
-                    className="text-blue-600 cursor-pointer"
+                    className="cursor-pointer text-blue-600"
                     onClick={toggleLinuxUserModal}
                   >
                     Permission help
diff --git a/src/components/SerialProvider/SerialProvider.tsx b/src/components/SerialProvider/SerialProvider.tsx
index 5df5cc5..af15b65 100644
--- a/src/components/SerialProvider/SerialProvider.tsx
+++ b/src/components/SerialProvider/SerialProvider.tsx
@@ -1,7 +1,8 @@
 import { useCallback, useEffect, useRef, useState } from "react";
+import { IDataPacket } from "@/types";
 
 // Needing to do this as the typescript definitions for the Web Serial API are not yet complete
-interface WebSerialPort extends SerialPort {
+interface IWebSerialPort extends SerialPort {
   cancelRequested: boolean;
 }
 
@@ -24,22 +25,16 @@ type StopBitsType = 1 | 2;
 
 export type PortState = "closed" | "closing" | "open" | "opening";
 
-interface WebSerialContext {
+interface IWebSerialContext {
   initialized: boolean;
-  ports: WebSerialPort[];
+  ports: IWebSerialPort[];
 }
 
-const webSerialContext: WebSerialContext = {
+const webSerialContext: IWebSerialContext = {
   initialized: false,
   ports: [],
 };
 
-export interface DataPacket {
-  id: number;
-  command: string;
-  response: string | null;
-}
-
 /**
  *
  * @param {() => void} callback
@@ -52,28 +47,28 @@ const useInterval = (callback: () => void, delay: number) => {
   }, [callback, delay]);
 };
 
-export interface UseWebSerialReturn {
-  ports: WebSerialPort[];
+export interface ISerialProvider {
+  ports: IWebSerialPort[];
   isOpen: boolean;
   isReading: boolean;
   canUseSerial: boolean;
   portState: PortState;
   hasTriedAutoconnect: boolean;
-  portInfo: (port: WebSerialPort) => {
+  portInfo: (port: IWebSerialPort) => {
     usbVendorId: number;
     usbProductId: number;
     usbId: string;
   } | null;
   manualConnectToPort: (options?: SerialPortRequestOptions) => Promise<boolean>;
-  openPort: (newPort: WebSerialPort) => Promise<void>;
+  openPort: (newPort: IWebSerialPort) => Promise<void>;
   closePort: () => Promise<void>;
   startReading: () => Promise<void>;
   stopReading: () => Promise<void>;
   write: () => Promise<void>;
   queueWrite: (message: string) => number;
-  queueWriteAndResponse: (message: string) => Promise<DataPacket>;
-  queueWriteAndResponseBinary: (message: Uint8Array) => Promise<DataPacket>;
-  commandResponseMap: DataPacket[];
+  queueWriteAndResponse: (message: string) => Promise<IDataPacket>;
+  queueWriteAndResponseBinary: (message: Uint8Array) => Promise<IDataPacket>;
+  commandResponseMap: IDataPacket[];
   options: {
     baudRate: BaudRatesType;
     bufferSize: number;
@@ -115,16 +110,16 @@ const useWebSerial = ({
   onDisconnect,
   onData,
 }: {
-  onConnect?: (port: WebSerialPort) => void;
-  onDisconnect?: (port: WebSerialPort) => void;
+  onConnect?: (port: IWebSerialPort) => void;
+  onDisconnect?: (port: IWebSerialPort) => void;
   onData: (data: string) => void;
-}): UseWebSerialReturn => {
+}): ISerialProvider => {
   const [hasTriedAutoconnect, setHasTriedAutoconnect] = useState(false);
 
   const [canUseSerial] = useState(() => "serial" in navigator);
   const portState = useRef<PortState>("closed");
-  const portRef = useRef<WebSerialPort | null>(null);
-  const [ports, setPorts] = useState<WebSerialPort[]>(webSerialContext.ports);
+  const portRef = useRef<IWebSerialPort | null>(null);
+  const [ports, setPorts] = useState<IWebSerialPort[]>(webSerialContext.ports);
   const [isOpen, setIsOpen] = useState(false);
   const [isReading, setIsReading] = useState<boolean>(false);
   const isIncomingMessage = useRef<boolean>(false);
@@ -143,7 +138,7 @@ const useWebSerial = ({
   const [ringIndicator, setRingIndicator] = useState(false);
 
   const [messageQueue, setMessageQueue] = useState<Array<Uint8Array>>([]);
-  const commandResponseMap = useRef<DataPacket[]>([]);
+  const commandResponseMap = useRef<IDataPacket[]>([]);
   const commandCounter = useRef(0);
 
   useInterval(() => {
@@ -192,7 +187,7 @@ const useWebSerial = ({
 
       try {
         const port = await navigator.serial.requestPort(options);
-        openPort(port as WebSerialPort);
+        openPort(port as IWebSerialPort);
         return true;
       } catch (error) {
         portState.current = "closed";
@@ -209,7 +204,7 @@ const useWebSerial = ({
       const availablePorts = await navigator.serial.getPorts();
       if (availablePorts.length) {
         const port = availablePorts[0];
-        await openPort(port as WebSerialPort);
+        await openPort(port as IWebSerialPort);
         return true;
       } else {
         portState.current = "closed";
@@ -221,9 +216,9 @@ const useWebSerial = ({
 
   /**
    *
-   * @param {WebSerialPort} port
+   * @param {IWebSerialPort} port
    */
-  const portInfo = (port: WebSerialPort) => {
+  const portInfo = (port: IWebSerialPort) => {
     const info = port.getInfo();
     if (info.usbVendorId && info.usbProductId) {
       return {
@@ -239,7 +234,7 @@ const useWebSerial = ({
     return null;
   };
 
-  const openPort = async (newPort: WebSerialPort) => {
+  const openPort = async (newPort: IWebSerialPort) => {
     if (!newPort) {
       throw new Error("useWebSerial: No port selected");
     }
@@ -518,9 +513,9 @@ const useWebSerial = ({
 
     navigator.serial.getPorts().then((ports) => {
       if (ports.length >= 1) {
-        webSerialContext.ports = ports as WebSerialPort[];
-        setPorts(ports as WebSerialPort[]);
-        portRef.current = ports[0] as WebSerialPort;
+        webSerialContext.ports = ports as IWebSerialPort[];
+        setPorts(ports as IWebSerialPort[]);
+        portRef.current = ports[0] as IWebSerialPort;
       }
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
diff --git a/src/components/ToggleSwitch/ToggleSwitch.tsx b/src/components/ToggleSwitch/ToggleSwitch.tsx
index 93e0bba..6c6d613 100644
--- a/src/components/ToggleSwitch/ToggleSwitch.tsx
+++ b/src/components/ToggleSwitch/ToggleSwitch.tsx
@@ -1,12 +1,9 @@
-type ToggleSwitchProps = {
+type IToggleSwitch = {
   isToggle: boolean;
   toggleSwitch: () => void;
 };
 
-const ToggleSwitch: React.FC<ToggleSwitchProps> = ({
-  isToggle,
-  toggleSwitch,
-}) => {
+const ToggleSwitch: React.FC<IToggleSwitch> = ({ isToggle, toggleSwitch }) => {
   return (
     <label className="flex cursor-pointer items-center">
       <div className="relative">
diff --git a/src/hooks/useDeviceSetup.ts b/src/hooks/useDeviceSetup.ts
new file mode 100644
index 0000000..49ac455
--- /dev/null
+++ b/src/hooks/useDeviceSetup.ts
@@ -0,0 +1,104 @@
+import { useState, useEffect, useRef } from "react";
+import { FileStructure } from "@/components/FileBrowser/FileBrowser";
+import { ISerialProvider } from "@/components/SerialProvider/SerialProvider";
+import { ILatestVersions } from "@/types";
+import { parseDirectories } from "@/utils/fileUtils";
+import { getLatestVersions } from "@/utils/versionUtils";
+
+interface IDeviceSetup {
+  serial: ISerialProvider;
+  write: (
+    command: string,
+    updateFrame: boolean,
+    awaitResponse?: boolean
+  ) => Promise<any>;
+  setConsoleMessageList: (value: string) => void;
+  setDirStructure: (value: FileStructure[]) => void;
+  setLatestVersion: (value: ILatestVersions) => void;
+}
+
+interface IDeviceSetupReturn {
+  setupComplete: boolean;
+  deviceVersion: string;
+}
+
+export const useDeviceSetup = ({
+  serial,
+  write,
+  setConsoleMessageList,
+  setDirStructure,
+  setLatestVersion,
+}: IDeviceSetup): IDeviceSetupReturn => {
+  const [setupComplete, setSetupComplete] = useState(false);
+  const [deviceVersion, setDeviceVersion] = useState("");
+
+  const started = useRef<boolean>(false);
+
+  const setDeviceTime = () => {
+    const currentDateTime: Date = new Date();
+    // Add 3 seconds to the current time to account for the time it takes to send the command
+    currentDateTime.setSeconds(currentDateTime.getSeconds() + 3);
+    const year: number = currentDateTime.getFullYear();
+    let month: string | number = currentDateTime.getMonth() + 1; // JavaScript months are 0-11
+    let day: string | number = currentDateTime.getDate();
+    let hours: string | number = currentDateTime.getHours();
+    let minutes: string | number = currentDateTime.getMinutes();
+    let seconds: string | number = currentDateTime.getSeconds();
+
+    // Making sure we have two digit representation
+    month = month < 10 ? "0" + month : month;
+    day = day < 10 ? "0" + day : day;
+    hours = hours < 10 ? "0" + hours : hours;
+    minutes = minutes < 10 ? "0" + minutes : minutes;
+    seconds = seconds < 10 ? "0" + seconds : seconds;
+
+    return `rtcset ${year} ${month} ${day} ${hours} ${minutes} ${seconds}`;
+  };
+
+  useEffect(() => {
+    if (serial.isOpen && !serial.isReading && !started.current) {
+      started.current = true;
+      serial.startReading();
+
+      const initSerialSetupCalls = async () => {
+        await write(setDeviceTime(), false);
+
+        const infoCmd = (await write("info", false, true)).response;
+        const matches = infoCmd?.match(/Mayhem Version:\s*(.*)/i);
+
+        if (matches && matches.length > 1) {
+          const mayhemVersion = matches[1];
+          setDeviceVersion(mayhemVersion);
+        } else {
+          console.log("Mayhem version not found!");
+        }
+
+        await fetchFolderStructure();
+
+        write("screenframeshort", false);
+
+        setConsoleMessageList("");
+        setSetupComplete(true);
+
+        setLatestVersion(await getLatestVersions());
+      };
+
+      const fetchFolderStructure = async () => {
+        const rootStructure = await write(`ls /`, false, true); // get the children directories
+
+        if (rootStructure.response) {
+          const rootItems = rootStructure.response.split("\r\n").slice(1, -1);
+
+          const fileStructures = parseDirectories(rootItems);
+          setDirStructure(fileStructures);
+        }
+      };
+
+      initSerialSetupCalls();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [serial]);
+  //   }, [serial, write, setConsoleMessageList, setDirStructure, setLatestVersion]);
+
+  return { setupComplete, deviceVersion };
+};
diff --git a/src/hooks/useScreenFrame.ts b/src/hooks/useScreenFrame.ts
new file mode 100644
index 0000000..32074f0
--- /dev/null
+++ b/src/hooks/useScreenFrame.ts
@@ -0,0 +1,34 @@
+import { useRef } from "react";
+
+export const useScreenFrame = () => {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  const renderFrame = (consoleMessage: string) => {
+    if (!consoleMessage.includes("screenframe")) return;
+
+    const lines = consoleMessage.split("\r\n");
+    const ctx = canvasRef.current?.getContext("2d");
+
+    if (!ctx) return false;
+
+    for (let y = 0; y < lines.length; y++) {
+      let line = lines[y];
+      if (line.startsWith("screenframe")) continue;
+      for (let o = 0, x = 0; o < line.length && x < 240; o++, x++) {
+        try {
+          let by = line.charCodeAt(o) - 32;
+          let r = ((by >> 4) & 3) << 6;
+          let g = ((by >> 2) & 3) << 6;
+          let b = (by & 3) << 6;
+
+          ctx.fillStyle = `rgb(${r},${g},${b})`;
+          ctx?.fillRect(x, y, 1, 1);
+        } catch (err) {
+          console.error(err);
+        }
+      }
+    }
+  };
+
+  return { canvasRef, renderFrame };
+};
diff --git a/src/types/index.ts b/src/types/index.ts
new file mode 100644
index 0000000..ef27dee
--- /dev/null
+++ b/src/types/index.ts
@@ -0,0 +1,31 @@
+import { ISerialProvider } from "@/components/SerialProvider/SerialProvider";
+
+export interface ILatestVersions {
+  stable: IVersionDetails;
+  nightly: IVersionDetails;
+}
+
+export interface IVersionDetails {
+  version: string;
+  published_at: string;
+}
+
+export interface IModal {
+  title?: string;
+  footer?: React.ReactNode;
+  isModalOpen?: boolean;
+  closeModal: () => void;
+  children: React.ReactNode;
+  className?: string;
+}
+
+export interface IDataPacket {
+  id: number;
+  command: string;
+  response: string | null;
+}
+
+export interface ISerialContextValue {
+  serial: ISerialProvider;
+  consoleMessage: string;
+}
diff --git a/src/utils/fileUtils.tsx b/src/utils/fileUtils.tsx
index 934f8a1..e45a658 100644
--- a/src/utils/fileUtils.tsx
+++ b/src/utils/fileUtils.tsx
@@ -1,4 +1,4 @@
-import { FileStructure } from "../components/FileBrowser/FileBrowser";
+import { FileStructure } from "@/components/FileBrowser/FileBrowser";
 
 export const hexToBytes = (hex: string) => {
   let bytes = new Uint8Array(Math.ceil(hex.length / 2));
diff --git a/src/utils/serialUtils.tsx b/src/utils/serialUtils.tsx
index 42d5787..cef3f33 100644
--- a/src/utils/serialUtils.tsx
+++ b/src/utils/serialUtils.tsx
@@ -1,9 +1,9 @@
 import { Dispatch, SetStateAction, useEffect, useState } from "react";
-import { DataPacket } from "@/components/SerialProvider/SerialProvider";
+import { useSerial } from "@/components/SerialLoader/SerialLoader";
+import { IDataPacket } from "@/types";
 import { hexToBytes } from "./fileUtils";
-import { useSerial } from "../components/SerialLoader/SerialLoader";
 
-interface DownloadedFile {
+interface IDownloadedFile {
   blob: Blob;
   filename: string;
 }
@@ -26,7 +26,7 @@ export const useWriteCommand = () => {
     updateFrame: boolean,
     awaitResponse: boolean = true
   ) => {
-    let data: DataPacket = {
+    let data: IDataPacket = {
       id: 0,
       command: "",
       response: null,
@@ -167,7 +167,7 @@ const downloadFileFromBytes = (
 
 export const downloadFileFromUrl = async (
   url: string
-): Promise<DownloadedFile> => {
+): Promise<IDownloadedFile> => {
   const response = await fetch(url);
 
   if (!response.ok) {
diff --git a/src/utils/versionUtils.tsx b/src/utils/versionUtils.tsx
index 99c0e6d..f6985bc 100644
--- a/src/utils/versionUtils.tsx
+++ b/src/utils/versionUtils.tsx
@@ -1,3 +1,5 @@
+import { ILatestVersions } from "@/types";
+
 type Version = "stable" | "nightly" | "custom" | "unknown";
 
 export const nightlyVersionFormat = (input: string): number => {
@@ -50,3 +52,9 @@ export const getVersionLink = (versionString: string = ""): string => {
   }
   return "";
 };
+
+export const getLatestVersions = async (): Promise<ILatestVersions> => {
+  const apiResponse = await fetch("https://hackrf.app/api/get_versions");
+  if (!apiResponse.ok) throw new Error("Failed to fetch versions");
+  return await apiResponse.json();
+};