2.0 Overhaul start

src/components/Widgets/ConfiguringWidget.tsx

@@ -0,0 +1,117 @@
+import React, { useEffect } from "react";
+
+import { useDevice } from "@core/providers/useDevice.js";
+
+export const ConfiguringWidget = (): JSX.Element => {
+  const {
+    hardware,
+    channels,
+    config,
+    moduleConfig,
+    setReady,
+    nodes,
+    connection,
+  } = useDevice();
+
+  useEffect(() => {
+    if (
+      hardware.myNodeNum !== 0 &&
+      Object.keys(config).length === 7 &&
+      Object.keys(moduleConfig).length === 7 &&
+      channels.length === hardware.maxChannels
+    ) {
+      setReady(true);
+    }
+  }, [
+    config,
+    moduleConfig,
+    channels,
+    hardware.maxChannels,
+    hardware.myNodeNum,
+    setReady,
+  ]);
+
+  return (
+    <div className="p-6 flex flex-col rounded-2xl mb-4 text-sm space-y-3 bg-[#f9e3aa] text-black">
+      <p className="text-xl font-bold">Connecting to device</p>
+      <ol className="flex flex-col overflow-hidden gap-3">
+        <StatusIndicator
+          title="Device Info"
+          current={hardware.myNodeNum ? 1 : 0}
+          total={0}
+        />
+        <StatusIndicator title="Peers" current={nodes.length} total={0} />
+        <StatusIndicator
+          title="Device Config"
+          current={Object.keys(config).length - 1}
+          total={6}
+        />
+        <StatusIndicator
+          title="Module Config"
+          current={Object.keys(moduleConfig).length - 1}
+          total={6}
+        />
+        <StatusIndicator
+          title="Channels"
+          current={channels.length}
+          total={hardware.maxChannels ?? 0}
+        />
+      </ol>
+      <div
+        className="mt-2 rounded-md bg-[#dabb6b] p-1 ring-[#f9e3aa]  cursor-pointer text-center"
+        onClick={() => {
+          void connection?.configure();
+        }}
+      >
+        Retry
+      </div>
+    </div>
+  );
+};
+
+export interface StatusIndicatorProps {
+  title: string;
+  current: number;
+  total: number;
+}
+
+const StatusIndicator = ({
+  title,
+  current,
+  total,
+}: StatusIndicatorProps): JSX.Element => {
+  return (
+    <li className="relative">
+      <div
+        className={`absolute top-4 left-2.5 -ml-px h-full w-0.5 ${
+          current >= total ? "bg-green-500" : "bg-[#f9e3aa]"
+        }`}
+      />
+      <div className="flex">
+        <div
+          className={`flex relative z-10 h-5 w-5 rounded-full border-2  ${
+            current === 0
+              ? "border-[#dabb6b] bg-[#f9e3aa]"
+              : current >= total
+              ? "bg-green-500 border-green-500"
+              : "bg-[#f9e3aa] border-green-500"
+          }`}
+        >
+          <span
+            className={`m-auto h-1.5 w-1.5 rounded-full ${
+              current > 0 ? "bg-green-500" : "bg-[#f9e3aa]"
+            }`}
+          />
+        </div>
+
+        <span className="flex text-sm ml-4 gap-1">
+          <span className="font-medium">{title}</span>
+          <span className="font-mono text-slate-500">
+            ({current}
+            {total !== 0 && `/${total}`})
+          </span>
+        </span>
+      </div>
+    </li>
+  );
+};

src/components/Widgets/DeviceWidget.tsx

@@ -0,0 +1,50 @@
+import type React from "react";
+
+import { Hashicon } from "@emeraldpay/hashicon-react";
+import { XCircleIcon } from "@heroicons/react/24/outline";
+
+import { Button } from "../Button.js";
+
+export interface DeviceWidgetProps {
+  name: string;
+  nodeNum: string;
+  disconnected: boolean;
+  disconnect: () => void;
+  reconnect: () => void;
+}
+
+export const DeviceWidget = ({
+  name,
+  nodeNum,
+  disconnected,
+  disconnect,
+  reconnect,
+}: DeviceWidgetProps): JSX.Element => {
+  return (
+    <div className="relative rounded-xl bg-emerald-400 overflow-hidden">
+      <div className="absolute w-full h-full bottom-20">
+        <Hashicon size={350} value={nodeNum} />
+      </div>
+      <div className="flex backdrop-blur-md backdrop-brightness-50 backdrop-hue-rotate-30 p-3">
+        <div className="drop-shadow-md">
+          <Hashicon size={96} value={nodeNum} />
+        </div>
+        <div className="w-full flex flex-col">
+          <span className="font-bold text-slate-200 ml-auto text-xl whitespace-nowrap">
+            {name}
+          </span>
+          <div className="ml-auto my-auto">
+            <Button
+              onClick={disconnected ? reconnect : disconnect}
+              variant={disconnected ? "secondary" : "primary"}
+              size="sm"
+              iconAfter={<XCircleIcon className="h-4" />}
+            >
+              {disconnected ? "Reconnect" : "Disconnect"}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

src/components/Widgets/NodeInfoWidget.tsx

@@ -0,0 +1,11 @@
+import type React from "react";
+
+export interface NodeInfoWidgetProps {}
+
+export const NodeInfoWidget = ({}: NodeInfoWidgetProps): JSX.Element => {
+  return (
+    <div className="p-6 flex flex-col rounded-2xl mb-4 text-sm space-y-3 bg-[#f9e3aa] text-black">
+      node info
+    </div>
+  );
+};

src/components/Widgets/PeersWidget.tsx

@@ -0,0 +1,11 @@
+import type React from "react";
+
+export interface PeersWidgetProps {}
+
+export const PeersWidget = ({}: PeersWidgetProps): JSX.Element => {
+  return (
+    <div className="p-6 flex flex-col rounded-2xl mb-4 text-sm space-y-3 bg-[#f9e3aa] text-black">
+      Peers
+    </div>
+  );
+};

src/components/Widgets/PositionWidget.tsx

@@ -0,0 +1,11 @@
+import type React from "react";
+
+export interface PositionWidgetProps {}
+
+export const PositionWidget = ({}: PositionWidgetProps): JSX.Element => {
+  return (
+    <div className="p-6 flex flex-col rounded-2xl mb-4 text-sm space-y-3 bg-[#f9e3aa] text-black">
+      position
+    </div>
+  );
+};