@robotical/webapp-types 0.6.58

package/dist-types/src/components/disposables/buttons/SVGImageButton/index.js

@@ -0,0 +1,19 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./styles.css";
+export default function SVGImageButton(_a) {
+    var onClick = _a.onClick, title = _a.title, subtitle = _a.subtitle, SVGImage = _a.SVGImage, backgroundColour = _a.backgroundColour, titleColour = _a.titleColour, SVGColour = _a.SVGColour, disabled = _a.disabled;
+    return (_jsxs("div", __assign({ className: subtitle
+            ? "svg-image-button-container"
+            : "svg-image-button-container-no-sub", onClick: disabled ? function () { } : onClick, style: { backgroundColor: disabled ? "#f0f0f0" : backgroundColour, cursor: disabled ? "not-allowed" : "pointer" } }, { children: [_jsx("p", __assign({ className: subtitle ? "svg-image-button-title" : "svg-image-button-title-no-sub", style: { color: titleColour } }, { children: title })), subtitle && _jsx("p", __assign({ className: "svg-image-button-subtitle" }, { children: subtitle })), _jsx("div", __assign({ className: "svg-image-button-image-container" }, { children: _jsx(SVGImage, { fill: SVGColour }) }))] })));
+}

package/dist-types/src/components/disposables/buttons/SimpleButton/index.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import "./styles.css";
+type SimpleButtonProps = {
+    onClick: () => void;
+    title: string;
+    titleSize?: string;
+    disabled?: boolean;
+    colour?: string;
+    otherStyles?: React.CSSProperties;
+    borderColour?: string;
+    textColour?: string;
+};
+export default function SimpleButton({ onClick, title, titleSize, disabled, colour, otherStyles, borderColour, textColour }: SimpleButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist-types/src/components/disposables/buttons/SimpleButton/index.js

@@ -0,0 +1,18 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import "./styles.css";
+export default function SimpleButton(_a) {
+    var onClick = _a.onClick, title = _a.title, titleSize = _a.titleSize, disabled = _a.disabled, colour = _a.colour, otherStyles = _a.otherStyles, borderColour = _a.borderColour, textColour = _a.textColour;
+    return (_jsx("div", __assign({ className: "simple-button-component " +
+            (disabled ? "simple-button-component-disabled" : ""), style: __assign(__assign({}, otherStyles), { fontSize: titleSize, backgroundColor: colour, border: borderColour && "1px solid ".concat(borderColour), color: textColour }), onClick: disabled ? function () { } : onClick }, { children: title })));
+}

package/dist-types/src/components/modals/ SensorsDashboardModal/index.d.ts

@@ -0,0 +1,2 @@
+declare function SensorsDashboardModal(): import("react/jsx-runtime").JSX.Element;
+export default SensorsDashboardModal;

package/dist-types/src/components/modals/ SensorsDashboardModal/index.js

@@ -0,0 +1,61 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement, useEffect, useRef, useState } from 'react';
+import SensorsDashboard from '@robotical/sensors-dashboard/dist/App';
+import { ReactComponent as BetaSignSVG } from "../../../assets/beta-sign.svg";
+import modalState from "../../../state-observables/modal/ModalState";
+import DetailedFeedbackModal from '../DetailedFeedbackModal';
+import styles from './styles.module.css';
+function SensorsDashboardModal() {
+    var _a = useState(true), showBetaSign = _a[0], setShowBetaSign = _a[1];
+    var betaSignRef = useRef(null);
+    // if (window.mv2Dashboard) {
+    //     window.mv2Dashboard.setIsModal(true);
+    // }
+    var updateBetaSignVisibility = function () {
+        if (!betaSignRef.current) {
+            return;
+        }
+        var parent = betaSignRef.current.parentElement;
+        if (!parent) {
+            return;
+        }
+        var parentHeight = parent.clientHeight;
+        if (parentHeight > 100) {
+            setShowBetaSign(true);
+        }
+        else {
+            setShowBetaSign(false);
+        }
+    };
+    useEffect(function () {
+        updateBetaSignVisibility();
+        if (!betaSignRef.current) {
+            return;
+        }
+        var resizeObserver = new ResizeObserver(function () {
+            updateBetaSignVisibility();
+        });
+        if (!betaSignRef.current.parentElement) {
+            return;
+        }
+        resizeObserver.observe(betaSignRef.current.parentElement);
+        return function () {
+            resizeObserver.disconnect();
+        };
+    }, [betaSignRef]);
+    return (_jsxs(_Fragment, { children: [_jsx("div", __assign({ style: { visibility: showBetaSign ? "visible" : "hidden" }, className: styles.betaSign, onClick: function () {
+                    return modalState.setModal(createElement(DetailedFeedbackModal), "Anonymous Bug Report");
+                }, ref: betaSignRef }, { children: _jsx(BetaSignSVG, {}) })), _jsx(SensorsDashboard, { isInModal: true })] }));
+}
+export default SensorsDashboardModal;

package/dist-types/src/components/modals/ConnectingLoadingSpinnerModal/index.d.ts

@@ -0,0 +1,3 @@
+type Props = {};
+export default function ConnectingLoadingSpinnerModal({}: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist-types/src/components/modals/ConnectingLoadingSpinnerModal/index.js

@@ -0,0 +1,16 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import styles from "./styles.module.css";
+export default function ConnectingLoadingSpinnerModal(_a) {
+    return (_jsx("div", __assign({ className: styles.container }, { children: "This shouldn't take long!" })));
+}

package/dist-types/src/components/modals/DetailedFeedbackModal/index.d.ts

@@ -0,0 +1,5 @@
+type Props = {
+    otherInfoObject?: object;
+};
+export default function DetailedFeedbackModal({ otherInfoObject }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist-types/src/components/modals/DetailedFeedbackModal/index.js

@@ -0,0 +1,37 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import modalState from "../../../state-observables/modal/ModalState";
+import styles from "./styles.module.css";
+import SimpleButton from "../../disposables/buttons/SimpleButton";
+export default function DetailedFeedbackModal(_a) {
+    var otherInfoObject = _a.otherInfoObject;
+    var _b = useState(""), report = _b[0], setReport = _b[1];
+    var _c = useState(""), email = _c[0], setEmail = _c[1];
+    var _d = useState(false), reportSent = _d[0], setReportSent = _d[1];
+    var onReport = function () {
+        if (!report)
+            return;
+        if (!email) {
+            var confirm_1 = window.confirm("We noticed you didn't leave your email. Without it we won't be able to reach out and help you. If you want to leave your email, press cancel and fill in the email field, otherwise press OK to send the report without your email.");
+            if (!confirm_1)
+                return;
+        }
+        var reportWithContact = { text: "".concat(email ? email : "Anonymous", ": ").concat(report) };
+        window.applicationManager.analyticsManager.logEvent("textfeedback", __assign(__assign({}, reportWithContact), otherInfoObject));
+        setReportSent(true);
+        modalState.updateModalProps({ modalTitle: "🚀" });
+        setTimeout(function () { return modalState.closeModal(); }, 1500);
+    };
+    return (_jsx("div", __assign({ className: styles.bugReportModalContainer }, { children: reportSent ? ("Thank you for your feedback!") : (_jsxs(_Fragment, { children: [_jsxs("div", __assign({ className: styles.bugReportModalInfo }, { children: ["Please help up improve Marty! Please let us know if you spot any irregularities/bugs. ", _jsx("strong", __assign({ className: styles.bugReportModalInfoStrong }, { children: "You can optionally leave your contact details so we can reach out and help you" })), ". Thank you!"] })), _jsxs("div", __assign({ className: styles.bugReportModalForm }, { children: [_jsx("textarea", { className: styles.bugReportModalTextInput, placeholder: "Your report...", onChange: function (e) { return setReport(e.target.value); }, value: report }), _jsx("label", __assign({ className: styles.bugReportModalEmailLabel }, { children: "Provide your email if you want us to get back to you with a solution!" })), _jsx("input", { type: "email", className: styles.bugReportModalEmailInput, placeholder: "Email (optional)", onChange: function (e) { return setEmail(e.target.value); }, value: email })] })), _jsxs("div", __assign({ className: styles.bugReportModalButtons }, { children: [_jsx(SimpleButton, { onClick: function () { return modalState.closeModal(); }, title: "Cancel" }), _jsx(SimpleButton, { onClick: onReport, title: "Report" })] }))] })) })));
+}

package/dist-types/src/components/modals/DisconnectConfirmation/index.d.ts

@@ -0,0 +1 @@
+export default function DisconnectConfirmationModal(): import("react/jsx-runtime").JSX.Element;

package/dist-types/src/components/modals/DisconnectConfirmation/index.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import modalState from "../../../state-observables/modal/ModalState";
+import { RED } from "../../../styles/colors";
+import SimpleButton from "../../disposables/buttons/SimpleButton";
+import { Container } from "./styles";
+export default function DisconnectConfirmationModal() {
+    return (_jsxs(Container, { children: [_jsx(SimpleButton, { onClick: function () { return modalState.closeModal(false); }, title: "Cancel" }), _jsx(SimpleButton, { onClick: function () { return modalState.closeModal(true); }, title: "Disconnect", colour: RED })] }));
+}

package/dist-types/src/components/modals/DisconnectConfirmation/styles.d.ts

@@ -0,0 +1 @@
+export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist-types/src/components/modals/DisconnectConfirmation/styles.js

@@ -0,0 +1,7 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled from "styled-components";
+export var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: grid;\n    grid-auto-flow: column;\n    column-gap: 2rem;\n"], ["\n    display: grid;\n    grid-auto-flow: column;\n    column-gap: 2rem;\n"])));
+var templateObject_1;

package/dist-types/src/components/modals/InUnplugged/index.d.ts

@@ -0,0 +1 @@
+export default function InUnpluggedModalContent(): import("react/jsx-runtime").JSX.Element;

package/dist-types/src/components/modals/InUnplugged/index.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CenteredView, StyledView, ModalText, ModalTitle, StyledImage, } from "./styles";
+import imageAbutton from "../../../assets/marty-a-button.png";
+import modalState from "../../../state-observables/modal/ModalState";
+import SimpleButton from "../../disposables/buttons/SimpleButton";
+export default function InUnpluggedModalContent() {
+    // disconnecting from marty as soon as
+    // the modal comes up because some users might
+    // try pressing A when the modal is still up.
+    // window.marty.disconnect();
+    return (_jsxs(StyledView, { children: [_jsx(ModalTitle, { children: "Couldn't connect to your Marty!" }), _jsx(ModalText, { children: "Your Marty is currently in unplugged mode. If you want to dissconect Marty from unplugged mode, please press the \"MODE\"/\"A\" button on the back of Marty and try again!" }), _jsx(StyledImage, { src: imageAbutton }), _jsx(CenteredView, { children: _jsx(SimpleButton, { title: "Got it!", onClick: function () { return modalState.closeModal(); } }) })] }));
+}

package/dist-types/src/components/modals/InUnplugged/styles.d.ts

@@ -0,0 +1,5 @@
+export declare const StyledView: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ModalText: import("styled-components").StyledComponent<"p", any, {}, never>;
+export declare const ModalTitle: import("styled-components").StyledComponent<"p", any, {}, never>;
+export declare const CenteredView: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledImage: import("styled-components").StyledComponent<"img", any, {}, never>;

package/dist-types/src/components/modals/InUnplugged/styles.js

@@ -0,0 +1,11 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled from "styled-components";
+export var StyledView = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: grid;\n  grid-template-areas: \"modal-title modal-title\" \"modal-info marty-img\" \"button button\";\n  grid-template-columns: 1fr 1fr;\n  background-color: white;\n  border-radius: 2rem;\n  align-items: center;\n  max-width: 90vw;\n  max-height: 90vh;\n  row-gap: 1rem;\n"], ["\n  display: grid;\n  grid-template-areas: \"modal-title modal-title\" \"modal-info marty-img\" \"button button\";\n  grid-template-columns: 1fr 1fr;\n  background-color: white;\n  border-radius: 2rem;\n  align-items: center;\n  max-width: 90vw;\n  max-height: 90vh;\n  row-gap: 1rem;\n"])));
+export var ModalText = styled.p(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  grid-area: modal-info;\n  font-family: \"Lato Regular\";\n  text-align: center;\n"], ["\n  grid-area: modal-info;\n  font-family: \"Lato Regular\";\n  text-align: center;\n"])));
+export var ModalTitle = styled.p(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  grid-area: modal-title;\n  font-size: 2.2rem;\n  font-family: \"Lato Regular\";\n  text-align: center;\n"], ["\n  grid-area: modal-title;\n  font-size: 2.2rem;\n  font-family: \"Lato Regular\";\n  text-align: center;\n"])));
+export var CenteredView = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  grid-area: button;\n  flex-direction: row;\n"], ["\n  grid-area: button;\n  flex-direction: row;\n"])));
+export var StyledImage = styled.img(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  grid-area: marty-img;\n  max-height: 40vh;\n  max-width: 40vw;\n  justify-self: center;\n"], ["\n  grid-area: marty-img;\n  max-height: 40vh;\n  max-width: 40vw;\n  justify-self: center;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist-types/src/components/modals/VerificationModal/index.d.ts

@@ -0,0 +1,6 @@
+import "./styles.css";
+import RAFT from "../../../application/RAFTs/RAFT";
+declare function VerificationModal({ connectedRAFT_ }: {
+    connectedRAFT_: RAFT;
+}): import("react/jsx-runtime").JSX.Element;
+export default VerificationModal;

package/dist-types/src/components/modals/VerificationModal/index.js

@@ -0,0 +1,124 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import "./styles.css";
+import { ReactComponent as BluetoothSVG } from "../../../assets/configuration/bluetooth.svg";
+import { MAIN_BLUE } from "../../../styles/colors";
+import modalState from "../../../state-observables/modal/ModalState";
+import RICSignal from "../../oneoffs/RaftSignal";
+import SimpleButton from "../../disposables/buttons/SimpleButton";
+import LEDs from "../../oneoffs/LEDs";
+import { raftConnectingSubscriptionHelper } from "../../../application/RAFTs/raft-subscription-helpers";
+import { useConnectedRafts } from "../../../store/SelectedRaftContext";
+var SHOW_LOGS = true;
+var TAG = "VerificationModal";
+function VerificationModal(_a) {
+    var _this = this;
+    var connectedRAFT_ = _a.connectedRAFT_;
+    var _b = useState([]), randomColours = _b[0], setRandomColours = _b[1];
+    var _c = useState(connectedRAFT_), connectedRaft = _c[0], setConnectedRaft = _c[1];
+    var _d = useState(-200), RSSI = _d[0], setRSSI = _d[1];
+    var removeConnectedRaft = useConnectedRafts().removeConnectedRaft;
+    useEffect(function () {
+        /* Subscribe to the connectedRaft's SIGNAL strength */
+        if (!connectedRaft)
+            return;
+        var signalUpdateTimout = setInterval(function () {
+            setRSSI(connectedRaft.getRSSI());
+        }, 1000);
+        return function () { return clearInterval(signalUpdateTimout); };
+    }, [connectedRaft]);
+    var onCancel = function () { return __awaiter(_this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    // close modal, stop verification process, disconnect, scan again
+                    modalState.closeModal();
+                    if (!connectedRaft)
+                        return [2 /*return*/];
+                    removeConnectedRaft(connectedRaft.id);
+                    return [4 /*yield*/, window.applicationManager.stopVerifyingRaft(connectedRaft.id, false)];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, connectedRaft.disconnect()];
+                case 2:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var onYes = function () { return __awaiter(_this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    modalState.closeModal();
+                    return [4 /*yield*/, (connectedRaft === null || connectedRaft === void 0 ? void 0 : connectedRaft.stopVerifyingRaft(true))];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    useEffect(function () {
+        /* Subscribe to the connectedRaft's Connection state */
+        if (!connectedRaft)
+            return;
+        raftConnectingSubscriptionHelper(connectedRaft).subscribe(setRandomColours);
+        return function () {
+            raftConnectingSubscriptionHelper(connectedRaft).unsubscribe();
+        };
+    }, [connectedRaft]);
+    useEffect(function () {
+        /* Verify the connectedRaft once it's connected */
+        connectedRaft === null || connectedRaft === void 0 ? void 0 : connectedRaft.verifyRaft();
+    }, [connectedRaft]);
+    var contentJSX = _jsxs("div", __assign({ className: "verification-modal-container" }, { children: [_jsxs("div", __assign({ className: "verification-modal-martys-container" }, { children: [_jsxs("div", __assign({ className: "verification-modal-marty-name-row-container" }, { children: [_jsx("p", __assign({ className: "verification-modal-marty-name" }, { children: connectedRaft === null || connectedRaft === void 0 ? void 0 : connectedRaft.getFriendlyName() })), _jsx("div", __assign({ className: "verification-modal-marty-signal-container" }, { children: _jsx(RICSignal, { signalStrength: RSSI }) })), _jsx(BluetoothSVG, { fill: MAIN_BLUE })] })), _jsxs("p", __assign({ className: "verification-modal-martys-back-hint" }, { children: ["Look on ", connectedRaft === null || connectedRaft === void 0 ? void 0 : connectedRaft.type, "'s back, is it displaying these lights?"] })), _jsxs("div", __assign({ className: "verification-modal-led-row-container" }, { children: [_jsx(LEDs, { coloursArr: randomColours, connectedRaft: connectedRaft }), _jsx(SimpleButton, { onClick: onCancel, title: "No", borderColour: "red", colour: "white", textColour: "red" }), _jsx(SimpleButton, { onClick: onYes, title: "YES" })] }))] })), _jsxs("div", __assign({ className: "verification-modal-bottom-btns-container" }, { children: [_jsx("div", { className: "dummy-gap" }), _jsx(SimpleButton, { onClick: onCancel, title: "CANCEL" })] }))] }));
+    return contentJSX;
+}
+export default VerificationModal;

package/dist-types/src/components/modals/VerificationModalPhoneApp/index.d.ts

@@ -0,0 +1,6 @@
+import "./styles.css";
+import { FOUND_RAFT_ON_DISCOVERY_RESPONSE } from "../../../types/phone-app-communicator";
+declare function VerificationModalPhoneApp({ foundRICs }: {
+    foundRICs: FOUND_RAFT_ON_DISCOVERY_RESPONSE["foundRIC"][];
+}): import("react/jsx-runtime").JSX.Element;
+export default VerificationModalPhoneApp;

package/dist-types/src/components/modals/VerificationModalPhoneApp/index.js

@@ -0,0 +1,195 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useEffect, useState } from "react";
+import "./styles.css";
+import { ReactComponent as BluetoothSVG } from "../../../assets/configuration/bluetooth.svg";
+import { ReactComponent as RefreshSVG } from "../../../assets/refresh.svg";
+import { MAIN_BLUE, WHITE } from "../../../styles/colors";
+import modalState from "../../../state-observables/modal/ModalState";
+import RICSignal from "../../oneoffs/RaftSignal";
+import SimpleButton from "../../disposables/buttons/SimpleButton";
+import LEDs from "../../oneoffs/LEDs";
+import SVGImageButton from "../../disposables/buttons/SVGImageButton";
+import { raftConnectingSubscriptionHelper, raftDiscoveryFinishedSubscriptionHelper, raftDiscoveryStartedSubscriptionHelper } from "../../../application/RAFTs/raft-subscription-helpers";
+import isPhoneApp from "../../../utils/phone-app-communication/is-phone-app";
+import LoadingSpinner from "../../disposables/LoadingSpinner";
+import { RaftConnectionMethod } from "../../../types/raft";
+import { useConnectedRafts } from "../../../store/SelectedRaftContext";
+import { ConnManager } from "@robotical/roboticaljs";
+var SHOW_LOGS = true;
+var TAG = "VerificationModalPhone";
+function VerificationModalPhoneApp(_a) {
+    var _this = this;
+    var foundRICs = _a.foundRICs;
+    var _b = useState([]), randomColours = _b[0], setRandomColours = _b[1];
+    var _c = useState(-1), selectedRICIdx = _c[0], setSelectedRICIdx = _c[1];
+    var _d = useState(false), isLoading = _d[0], setIsLoading = _d[1];
+    var _e = useState(isPhoneApp()), isScanning = _e[0], setIsScanning = _e[1];
+    var _f = useState(), connectedRaft = _f[0], setConnectedRaft = _f[1];
+    var removeConnectedRaft = useConnectedRafts().removeConnectedRaft;
+    useEffect(function () {
+        raftDiscoveryFinishedSubscriptionHelper().subscribe(function () { return setIsScanning(false); });
+        raftDiscoveryStartedSubscriptionHelper().subscribe(function () { return setIsScanning(true); });
+        return function () {
+            raftDiscoveryFinishedSubscriptionHelper().unsubscribe();
+            raftDiscoveryStartedSubscriptionHelper().unsubscribe();
+        };
+    }, []);
+    var onCancel = function () { return __awaiter(_this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!connectedRaft) return [3 /*break*/, 3];
+                    return [4 /*yield*/, window.applicationManager.stopVerifyingRaft(connectedRaft.id, false)];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, window.applicationManager.disconnectFromRaft(connectedRaft.id)];
+                case 2:
+                    _a.sent();
+                    removeConnectedRaft(connectedRaft.id);
+                    return [3 /*break*/, 5];
+                case 3: return [4 /*yield*/, window.applicationManager.stopDiscovery()];
+                case 4:
+                    _a.sent();
+                    _a.label = 5;
+                case 5:
+                    modalState.closeModal();
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var onScanAgain = function () { return __awaiter(_this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!connectedRaft) return [3 /*break*/, 3];
+                    return [4 /*yield*/, window.applicationManager.stopVerifyingRaft(connectedRaft.id, false)];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, window.applicationManager.disconnectFromRaft(connectedRaft.id)];
+                case 2:
+                    _a.sent();
+                    _a.label = 3;
+                case 3:
+                    setSelectedRICIdx(-1);
+                    setConnectedRaft(undefined);
+                    if (!window.applicationManager.ricSelectedCb) return [3 /*break*/, 5];
+                    return [4 /*yield*/, window.applicationManager.startDiscovery(window.applicationManager.ricSelectedCb, [ConnManager.COGUUID, ConnManager.RICUUID])];
+                case 4:
+                    _a.sent();
+                    _a.label = 5;
+                case 5: return [2 /*return*/];
+            }
+        });
+    }); };
+    var onYes = function () { return __awaiter(_this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    modalState.closeModal();
+                    return [4 /*yield*/, (connectedRaft === null || connectedRaft === void 0 ? void 0 : connectedRaft.stopVerifyingRaft(true))];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    useEffect(function () {
+        if (!connectedRaft)
+            return;
+        raftConnectingSubscriptionHelper(connectedRaft).subscribe(setRandomColours);
+        connectedRaft === null || connectedRaft === void 0 ? void 0 : connectedRaft.verifyRaftPhoneApp(foundRICs[selectedRICIdx]);
+        return function () {
+            raftConnectingSubscriptionHelper(connectedRaft).unsubscribe();
+        };
+    }, [connectedRaft]);
+    var onSelectRaft = function (raftIdx) { return __awaiter(_this, void 0, void 0, function () {
+        var foundRaft, newRaft;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    setIsLoading(true);
+                    if (!connectedRaft) return [3 /*break*/, 3];
+                    return [4 /*yield*/, window.applicationManager.stopVerifyingRaft(connectedRaft.id, false)];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, window.applicationManager.disconnectFromRaft(connectedRaft.id)];
+                case 2:
+                    _a.sent();
+                    removeConnectedRaft(connectedRaft.id);
+                    _a.label = 3;
+                case 3:
+                    setSelectedRICIdx(raftIdx);
+                    if (!foundRICs) return [3 /*break*/, 5];
+                    foundRaft = foundRICs[raftIdx];
+                    return [4 /*yield*/, window.applicationManager.selectRaft(foundRaft, RaftConnectionMethod.PHONE_BLE)];
+                case 4:
+                    newRaft = _a.sent();
+                    if (!newRaft)
+                        return [2 /*return*/];
+                    setConnectedRaft(newRaft);
+                    _a.label = 5;
+                case 5:
+                    setIsLoading(false);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var contentJSX = null;
+    if (foundRICs.length === 0) {
+        contentJSX = _jsxs("div", __assign({ className: "verification-modal-container" }, { children: [!isScanning && _jsx("p", __assign({ style: { alignSelf: 'center' } }, { children: "No Robots Found" })), _jsx("div", __assign({ className: "verification-modal-martys-container" }, { children: isScanning && _jsxs("div", __assign({ style: { margin: "auto", width: "50px", height: "50px" } }, { children: [" ", _jsx(LoadingSpinner, {}), " "] })) })), _jsxs("div", __assign({ className: "verification-modal-bottom-btns-container" }, { children: [_jsx(SVGImageButton, { onClick: onScanAgain, title: "SCAN AGAIN", SVGImage: RefreshSVG, backgroundColour: MAIN_BLUE, titleColour: WHITE, SVGColour: WHITE }), _jsx("div", { className: "dummy-gap" }), _jsx(SimpleButton, { onClick: onCancel, title: "CANCEL" })] }))] }));
+    }
+    else {
+        contentJSX = _jsxs("div", __assign({ className: "verification-modal-container" }, { children: [_jsxs("div", __assign({ className: "verification-modal-martys-container" }, { children: [isScanning && _jsxs("div", __assign({ style: { margin: "auto", width: "50px", height: "50px" } }, { children: [" ", _jsx(LoadingSpinner, {}), " "] })), foundRICs.map(function (raftObj, raftIdx) {
+                            return _jsxs(Fragment, { children: [_jsxs("div", __assign({ className: "verification-modal-marty-name-row-container", onClick: function () { return onSelectRaft(raftIdx); } }, { children: [_jsx("p", __assign({ className: "verification-modal-marty-name" }, { children: raftObj._localName })), _jsx("div", __assign({ className: "verification-modal-marty-signal-container" }, { children: _jsx(RICSignal, { signalStrength: raftObj._rssi }) })), _jsx(BluetoothSVG, { fill: MAIN_BLUE })] })), selectedRICIdx === raftIdx && _jsxs("div", { children: [_jsx("p", __assign({ className: "verification-modal-martys-back-hint" }, { children: isLoading ? "Loading..." : "Look on ".concat(connectedRaft === null || connectedRaft === void 0 ? void 0 : connectedRaft.type, "'s back, is it displaying these lights?") })), _jsxs("div", __assign({ className: "verification-modal-led-row-container" }, { children: [_jsx(LEDs, { coloursArr: randomColours, connectedRaft: connectedRaft }), !isLoading && _jsx(SimpleButton, { onClick: onCancel, title: "No", borderColour: "red", colour: "white", textColour: "red" }), !isLoading && _jsx(SimpleButton, { onClick: onYes, title: "YES" })] }))] })] }, raftIdx);
+                        })] })), _jsxs("div", __assign({ className: "verification-modal-bottom-btns-container" }, { children: [_jsx(SVGImageButton, { onClick: onScanAgain, title: "SCAN AGAIN", SVGImage: RefreshSVG, backgroundColour: MAIN_BLUE, titleColour: WHITE, SVGColour: WHITE, disabled: isScanning }), _jsx("div", { className: "dummy-gap" }), _jsx(SimpleButton, { onClick: onCancel, title: "CANCEL" })] }))] }));
+    }
+    return contentJSX;
+}
+export default VerificationModalPhoneApp;

package/dist-types/src/components/oneoffs/LEDs/index.d.ts

@@ -0,0 +1,8 @@
+import "./styles.css";
+import RAFT from "../../../application/RAFTs/RAFT";
+type LEDsProps = {
+    coloursArr: string[];
+    connectedRaft: RAFT | undefined;
+};
+export default function LEDs({ coloursArr, connectedRaft }: LEDsProps): import("react/jsx-runtime").JSX.Element | null;
+export {};