@robotical/webapp-types 3.18.3 → 3.18.5

package/dist-types/src/application/RAFTs/RAFT.d.ts

@@ -18,6 +18,7 @@ export default class RAFT implements RICInterface {
     systemInfo: RaftSystemInfo | null;
     raftStateInfo: RICStateInfo | SimplifiedCogStateInfo | null;
     isVerified: boolean;
+    private _verificationDecision;
     hasVerifiedConnection(): boolean;
     /**
      * Method to get ledLcdColours, to be implemented in child classes.

package/dist-types/src/application/RAFTs/RAFT.js

@@ -58,6 +58,7 @@ var RAFT = /** @class */ (function () {
         // RAFT State Info
         this.raftStateInfo = null;
         this.isVerified = false;
+        this._verificationDecision = null;
     }
     RAFT.prototype.hasVerifiedConnection = function () {
         return this.isVerified;
@@ -145,6 +146,7 @@ var RAFT = /** @class */ (function () {
     RAFT.prototype.verifyRaftPhoneApp = function (discoveredDevice) {
         return __awaiter(this, void 0, void 0, function () {
             return __generator(this, function (_a) {
+                this._verificationDecision = null;
                 return [2 /*return*/, window.wrapperCommunicator.sendMessageAndWait(AppSentMessage.RAFT_VERIFY_PHONE, { ledLcdColours: this.ledLcdColours, discoveredDevice: discoveredDevice, raftId: this.id })];
             });
         });
@@ -155,6 +157,7 @@ var RAFT = /** @class */ (function () {
     RAFT.prototype.verifyRaft = function () {
         return __awaiter(this, void 0, void 0, function () {
             return __generator(this, function (_a) {
+                this._verificationDecision = null;
                 return [2 /*return*/, window.wrapperCommunicator.sendMessageAndWait(AppSentMessage.RAFT_VERIFY, { ledLcdColours: this.ledLcdColours, raftId: this.id })];
             });
         });
@@ -163,11 +166,12 @@ var RAFT = /** @class */ (function () {
      * Stops the verification process
      */
     RAFT.prototype.stopVerifyingRaft = function (isCorrectRIC) {
-        return __awaiter(this, void 0, void 0, function () {
-            return __generator(this, function (_a) {
-                return [2 /*return*/, window.wrapperCommunicator.sendMessageAndWait(AppSentMessage.RAFT_STOP_VERIFY, { isCorrectRIC: isCorrectRIC, raftId: this.id })];
-            });
-        });
+        if (this._verificationDecision) {
+            return this._verificationDecision.promise;
+        }
+        var promise = window.wrapperCommunicator.sendMessageAndWait(AppSentMessage.RAFT_STOP_VERIFY, { isCorrectRIC: isCorrectRIC, raftId: this.id });
+        this._verificationDecision = { isCorrectRIC: isCorrectRIC, promise: promise };
+        return promise;
     };
     /**
      * Receiveds events from the RICConnector

package/dist-types/src/components/disposables/SwitchableCameraScanner/camera-stream-lifecycle-guard.d.ts

@@ -0,0 +1,11 @@
+export type CameraStreamLifecycleLease = {
+    owner?: symbol;
+    release: () => void;
+};
+export declare const addCameraStreamLifecycleOwner: (constraints: MediaTrackConstraints | undefined, owner: symbol) => MediaTrackConstraints;
+/**
+ * Keeps each camera request owned by the QR scanner that initiated it.
+ * getUserMedia cannot be aborted, so a stream that resolves after its scanner
+ * unmounts is stopped before the dependency's fixed startup delay can retain it.
+ */
+export declare const acquireCameraStreamLifecycleGuard: () => CameraStreamLifecycleLease;

package/dist-types/src/components/disposables/SwitchableCameraScanner/camera-stream-lifecycle-guard.js

@@ -0,0 +1,202 @@
+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 CAMERA_STREAM_OWNER = Symbol("qr-camera-stream-owner");
+var activeGuard;
+var stopStreamOnce = function (stream) {
+    stream.getTracks().forEach(function (track) {
+        if (track.readyState === "ended") {
+            return;
+        }
+        var originalStop = track.stop.bind(track);
+        var stopped = false;
+        var stopOnce = function () {
+            if (stopped || track.readyState === "ended") {
+                stopped = true;
+                return;
+            }
+            stopped = true;
+            originalStop();
+        };
+        try {
+            Object.defineProperty(track, "stop", {
+                configurable: true,
+                writable: true,
+                value: stopOnce,
+            });
+        }
+        catch (_a) {
+            // Native MediaStreamTrack objects are normally extensible. If a WebView
+            // makes one read-only, stopping it is still more important than deduping
+            // a later, harmless stop call from the scanner dependency.
+        }
+        stopOnce();
+    });
+};
+var getOwnedRequest = function (constraints) {
+    var videoConstraints = constraints === null || constraints === void 0 ? void 0 : constraints.video;
+    if (!videoConstraints || typeof videoConstraints !== "object") {
+        return null;
+    }
+    var owner = videoConstraints[CAMERA_STREAM_OWNER];
+    if (!owner) {
+        return null;
+    }
+    var nativeVideoConstraints = __assign({}, videoConstraints);
+    Reflect.deleteProperty(nativeVideoConstraints, CAMERA_STREAM_OWNER);
+    return {
+        owner: owner,
+        constraints: __assign(__assign({}, constraints), { video: nativeVideoConstraints }),
+    };
+};
+var installGuard = function (mediaDevices) {
+    var _a, _b, _c;
+    var originalGetUserMedia = mediaDevices.getUserMedia;
+    if (typeof originalGetUserMedia !== "function") {
+        return null;
+    }
+    var state = {
+        mediaDevices: mediaDevices,
+        originalDescriptor: Object.getOwnPropertyDescriptor(mediaDevices, "getUserMedia"),
+        originalGetUserMedia: originalGetUserMedia,
+        guardedGetUserMedia: undefined,
+        owners: new Set(),
+        requests: new Set(),
+    };
+    state.guardedGetUserMedia = function (constraints) {
+        var ownedRequest = getOwnedRequest(constraints);
+        if (!ownedRequest) {
+            return state.originalGetUserMedia.call(state.mediaDevices, constraints);
+        }
+        var request = {
+            owner: ownedRequest.owner,
+            cancelled: false,
+        };
+        state.requests.add(request);
+        var cameraRequest;
+        try {
+            cameraRequest = state.originalGetUserMedia.call(state.mediaDevices, ownedRequest.constraints);
+        }
+        catch (error) {
+            state.requests.delete(request);
+            return Promise.reject(error);
+        }
+        return cameraRequest.then(function (stream) {
+            request.stream = stream;
+            if (request.cancelled || !state.owners.has(request.owner)) {
+                stopStreamOnce(stream);
+                state.requests.delete(request);
+            }
+            // Resolve the now-ended stream instead of rejecting. The scanner is
+            // already unmounted, and this lets its queued cleanup settle without
+            // reporting an expected AbortError to the React Native native logger.
+            return stream;
+        }, function (error) {
+            state.requests.delete(request);
+            throw error;
+        });
+    };
+    var installed = false;
+    try {
+        installed =
+            Reflect.set(mediaDevices, "getUserMedia", state.guardedGetUserMedia) &&
+                mediaDevices.getUserMedia === state.guardedGetUserMedia;
+    }
+    catch (_d) {
+        installed = false;
+    }
+    if (!installed && ((_a = state.originalDescriptor) === null || _a === void 0 ? void 0 : _a.configurable) !== false) {
+        try {
+            Object.defineProperty(mediaDevices, "getUserMedia", {
+                configurable: true,
+                enumerable: (_c = (_b = state.originalDescriptor) === null || _b === void 0 ? void 0 : _b.enumerable) !== null && _c !== void 0 ? _c : false,
+                writable: true,
+                value: state.guardedGetUserMedia,
+            });
+            installed = mediaDevices.getUserMedia === state.guardedGetUserMedia;
+        }
+        catch (_e) {
+            installed = false;
+        }
+    }
+    return installed ? state : null;
+};
+var restoreGetUserMedia = function (state) {
+    if (state.mediaDevices.getUserMedia !== state.guardedGetUserMedia) {
+        return true;
+    }
+    try {
+        if (state.originalDescriptor) {
+            Object.defineProperty(state.mediaDevices, "getUserMedia", state.originalDescriptor);
+        }
+        else {
+            Reflect.deleteProperty(state.mediaDevices, "getUserMedia");
+        }
+    }
+    catch (_a) {
+        return false;
+    }
+    return state.mediaDevices.getUserMedia !== state.guardedGetUserMedia;
+};
+export var addCameraStreamLifecycleOwner = function (constraints, owner) {
+    var _a;
+    return (__assign(__assign({}, constraints), (_a = {}, _a[CAMERA_STREAM_OWNER] = owner, _a)));
+};
+/**
+ * Keeps each camera request owned by the QR scanner that initiated it.
+ * getUserMedia cannot be aborted, so a stream that resolves after its scanner
+ * unmounts is stopped before the dependency's fixed startup delay can retain it.
+ */
+export var acquireCameraStreamLifecycleGuard = function () {
+    var mediaDevices = typeof navigator === "undefined" ? undefined : navigator.mediaDevices;
+    if (!mediaDevices || typeof mediaDevices.getUserMedia !== "function") {
+        return { release: function () { return undefined; } };
+    }
+    var state = activeGuard;
+    if (!state ||
+        state.mediaDevices !== mediaDevices ||
+        mediaDevices.getUserMedia !== state.guardedGetUserMedia) {
+        state = installGuard(mediaDevices) || undefined;
+        if (!state) {
+            return { release: function () { return undefined; } };
+        }
+        activeGuard = state;
+    }
+    var acquiredState = state;
+    var owner = Symbol("qr-camera-owner");
+    acquiredState.owners.add(owner);
+    var released = false;
+    return {
+        owner: owner,
+        release: function () {
+            if (released) {
+                return;
+            }
+            released = true;
+            acquiredState.owners.delete(owner);
+            acquiredState.requests.forEach(function (request) {
+                if (request.owner !== owner) {
+                    return;
+                }
+                request.cancelled = true;
+                if (request.stream) {
+                    stopStreamOnce(request.stream);
+                    acquiredState.requests.delete(request);
+                }
+            });
+            if (acquiredState.owners.size === 0 &&
+                restoreGetUserMedia(acquiredState) &&
+                activeGuard === acquiredState) {
+                activeGuard = undefined;
+            }
+        },
+    };
+};

package/dist-types/src/components/disposables/SwitchableCameraScanner/index.js

@@ -21,12 +21,27 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { MdCameraswitch } from "react-icons/md";
 import { Scanner } from "@yudiel/react-qr-scanner";
 import isPhoneApp from "../../../utils/phone-app-communication/is-phone-app";
+import { acquireCameraStreamLifecycleGuard, addCameraStreamLifecycleOwner, } from "./camera-stream-lifecycle-guard";
 import styles from "./styles.module.css";
+function LifecycleGuardedScanner(props) {
+    var _a = useState(null), cameraLease = _a[0], setCameraLease = _a[1];
+    useEffect(function () {
+        var lease = acquireCameraStreamLifecycleGuard();
+        setCameraLease(lease);
+        return lease.release;
+    }, []);
+    var guardedConstraints = useMemo(function () {
+        return (cameraLease === null || cameraLease === void 0 ? void 0 : cameraLease.owner)
+            ? addCameraStreamLifecycleOwner(props.constraints, cameraLease.owner)
+            : props.constraints;
+    }, [cameraLease, props.constraints]);
+    return cameraLease ? (_jsx(Scanner, __assign({}, props, { constraints: guardedConstraints }))) : null;
+}
 export default function SwitchableCameraScanner(_a) {
     var constraints = _a.constraints, scannerProps = __rest(_a, ["constraints"]);
     var t = useTranslation().t;
@@ -39,7 +54,7 @@ export default function SwitchableCameraScanner(_a) {
     var cameraSwitchLabel = switchToFrontCamera
         ? t("connection.switch_to_front_camera")
         : t("connection.switch_to_rear_camera");
-    return (_jsxs("div", __assign({ className: styles.container }, { children: [_jsx(Scanner, __assign({}, scannerProps, { constraints: cameraConstraints })), isPhoneApp() && (_jsx("button", __assign({ type: "button", className: styles.cameraSwitchButton, "aria-label": cameraSwitchLabel, title: cameraSwitchLabel, onClick: function () {
+    return (_jsxs("div", __assign({ className: styles.container }, { children: [_jsx(LifecycleGuardedScanner, __assign({}, scannerProps, { constraints: cameraConstraints })), isPhoneApp() && (_jsx("button", __assign({ type: "button", className: styles.cameraSwitchButton, "aria-label": cameraSwitchLabel, title: cameraSwitchLabel, onClick: function () {
                     return setFacingMode(function (currentFacingMode) {
                         return currentFacingMode === "environment" ? "user" : "environment";
                     });

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

@@ -110,7 +110,11 @@ export default function LEDLightsOrQRVerificationModal(_a) {
             return [2 /*return*/];
         });
     }); };
-    return (_jsxs("div", __assign({ className: styles.container }, { children: [_jsxs("div", __assign({ className: styles.robotContext }, { children: [_jsx("p", __assign({ className: styles.robotContextEyebrow }, { children: t("connection.connecting_to", "Connecting to") })), _jsx("h3", __assign({ className: styles.robotContextTitle }, { children: targetRaftType })), allowSwitchToMarty && (_jsx("button", __assign({ type: "button", className: styles.switchRobotButton, onClick: function () { return modalState.closeModal({ action: "switch-to-marty" }); } }, { children: t("connection.connect_marty_instead", "Connect Marty instead") })))] })), _jsxs("div", __assign({ className: styles.bluetoothNotice }, { children: [_jsx(BluetoothSVG, { className: styles.bluetoothIcon, fill: MAIN_BLUE, "aria-hidden": "true", focusable: "false" }), _jsx("span", __assign({ className: styles.bluetoothText }, { children: t("configuration_screen.bluetooth") }))] })), _jsxs("div", { children: [_jsx("p", __assign({ className: styles.robotContextSubtitle }, { children: t("connection.cog_verification_prompt", "Choose how you want to verify your Cog connection.") })), !isButtonToConnectVisible ? _jsx("div", __assign({ className: styles.cards }, { children: options.map(function (_a) {
+    return (_jsxs("div", __assign({ className: styles.container }, { children: [_jsxs("div", __assign({ className: styles.robotContext }, { children: [_jsx("p", __assign({ className: styles.robotContextEyebrow }, { children: t("connection.connecting_to", "Connecting to") })), _jsx("h3", __assign({ className: styles.robotContextTitle }, { children: targetRaftType })), allowSwitchToMarty && (_jsx("button", __assign({ type: "button", className: styles.switchRobotButton, onClick: function () {
+                            return modalState.closeModalWithoutAnimation({
+                                action: "switch-to-marty",
+                            });
+                        } }, { children: t("connection.connect_marty_instead", "Connect Marty instead") })))] })), _jsxs("div", __assign({ className: styles.bluetoothNotice }, { children: [_jsx(BluetoothSVG, { className: styles.bluetoothIcon, fill: MAIN_BLUE, "aria-hidden": "true", focusable: "false" }), _jsx("span", __assign({ className: styles.bluetoothText }, { children: t("configuration_screen.bluetooth") }))] })), _jsxs("div", { children: [_jsx("p", __assign({ className: styles.robotContextSubtitle }, { children: t("connection.cog_verification_prompt", "Choose how you want to verify your Cog connection.") })), !isButtonToConnectVisible ? _jsx("div", __assign({ className: styles.cards }, { children: options.map(function (_a) {
                             var id = _a.id, title = _a.title, subtitle = _a.subtitle, icon = _a.icon;
                             return (_jsxs("button", __assign({ type: "button", className: qrSelected && id === 'qr' ? [styles.card, styles.qrselected].join(" ") : styles.card, onClick: function () { return handleSelect(id); }, "aria-label": title, "aria-pressed": id === "qr" ? qrSelected : false }, { children: [_jsx("div", __assign({ className: styles.icon }, { children: icon })), _jsx("h3", __assign({ className: styles.title }, { children: title })), _jsx("p", __assign({ className: styles.subtitle }, { children: subtitle }))] }), id));
                         }) })) :

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

@@ -46,7 +46,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import "./styles.css";
 import { ReactComponent as BluetoothSVG } from "../../../assets/configuration/bluetooth.svg";
 import { MAIN_BLUE } from "../../../styles/colors";
@@ -62,7 +62,16 @@ function VerificationModal(_a) {
     var _b = useState([]), randomColours = _b[0], setRandomColours = _b[1];
     // const [connectedRaft, setConnectedRaft] = useState<RAFT | undefined>(connectedRAFT_);
     var _c = useState(-200), RSSI = _c[0], setRSSI = _c[1];
+    var _d = useState(false), isActionPending = _d[0], setIsActionPending = _d[1];
+    var actionStartedRef = useRef(false);
     var t = useTranslation().t;
+    var claimVerificationAction = function () {
+        if (actionStartedRef.current)
+            return false;
+        actionStartedRef.current = true;
+        setIsActionPending(true);
+        return true;
+    };
     useEffect(function () {
         /* Subscribe to the connectedRaft's SIGNAL strength */
         if (!connectedRAFT_)
@@ -76,6 +85,8 @@ function VerificationModal(_a) {
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
+                    if (!claimVerificationAction())
+                        return [2 /*return*/];
                     // close modal, stop verification process, disconnect, scan again
                     modalState.closeModal();
                     if (!connectedRAFT_)
@@ -91,6 +102,8 @@ function VerificationModal(_a) {
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
+                    if (!claimVerificationAction())
+                        return [2 /*return*/];
                     modalState.closeModal();
                     return [4 /*yield*/, (connectedRAFT_ === null || connectedRAFT_ === void 0 ? void 0 : connectedRAFT_.stopVerifyingRaft(true))];
                 case 1:
@@ -113,7 +126,7 @@ function VerificationModal(_a) {
         /* 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 })] })), _jsx("p", __assign({ className: "verification-modal-martys-back-hint" }, { children: t("verification_modal_phone.look_on_back", { raftType: connectedRAFT_ === null || connectedRAFT_ === void 0 ? void 0 : connectedRAFT_.type }) })), _jsxs("div", __assign({ className: "verification-modal-led-row-container" }, { children: [_jsx(LEDs, { coloursArr: randomColours, connectedRaft: connectedRAFT_ }), _jsx(SimpleButton, { onClick: onCancel, title: t("verification_modal_phone.no"), borderColour: "red", colour: "white", textColour: "red" }), _jsx(SimpleButton, { onClick: onYes, title: t("connection.yes") })] }))] })), _jsxs("div", __assign({ className: "verification-modal-bottom-btns-container" }, { children: [_jsx("div", { className: "dummy-gap" }), _jsx(SimpleButton, { onClick: onCancel, title: t("connection.cancel") })] }))] }));
+    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 })] })), _jsx("p", __assign({ className: "verification-modal-martys-back-hint" }, { children: t("verification_modal_phone.look_on_back", { raftType: connectedRAFT_ === null || connectedRAFT_ === void 0 ? void 0 : connectedRAFT_.type }) })), _jsxs("div", __assign({ className: "verification-modal-led-row-container" }, { children: [_jsx(LEDs, { coloursArr: randomColours, connectedRaft: connectedRAFT_ }), _jsx(SimpleButton, { onClick: onCancel, title: t("verification_modal_phone.no"), disabled: isActionPending, borderColour: "red", colour: "white", textColour: "red" }), _jsx(SimpleButton, { onClick: onYes, title: t("connection.yes"), disabled: isActionPending })] }))] })), _jsxs("div", __assign({ className: "verification-modal-bottom-btns-container" }, { children: [_jsx("div", { className: "dummy-gap" }), _jsx(SimpleButton, { onClick: onCancel, title: t("connection.cancel"), disabled: isActionPending })] }))] }));
     return contentJSX;
 }
 export default VerificationModal;

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

@@ -55,7 +55,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment, useEffect, useState } from "react";
+import { Fragment, useEffect, useRef, useState } from "react";
 import "./styles.css";
 import { ReactComponent as BluetoothSVG } from "../../../assets/configuration/bluetooth.svg";
 import { ReactComponent as RefreshSVG } from "../../../assets/refresh.svg";
@@ -81,6 +81,15 @@ function VerificationModalPhoneApp(_a) {
     var _e = useState(false), isLoading = _e[0], setIsLoading = _e[1];
     var _f = useState(isPhoneApp()), isScanning = _f[0], setIsScanning = _f[1];
     var _g = useState(), connectedRaft = _g[0], setConnectedRaft = _g[1];
+    var _h = useState(false), isActionPending = _h[0], setIsActionPending = _h[1];
+    var actionStartedRef = useRef(false);
+    var claimVerificationAction = function () {
+        if (actionStartedRef.current)
+            return false;
+        actionStartedRef.current = true;
+        setIsActionPending(true);
+        return true;
+    };
     useEffect(function () {
         raftDiscoveryFinishedSubscriptionHelper().subscribe(function () { return setIsScanning(false); });
         raftDiscoveryStartedSubscriptionHelper().subscribe(function () { return setIsScanning(true); });
@@ -108,6 +117,8 @@ function VerificationModalPhoneApp(_a) {
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
+                    if (!claimVerificationAction())
+                        return [2 /*return*/];
                     if (!connectedRaft) return [3 /*break*/, 2];
                     return [4 /*yield*/, window.applicationManager.stopVerifyingRaft(connectedRaft.id, false)];
                 case 1:
@@ -128,6 +139,8 @@ function VerificationModalPhoneApp(_a) {
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
+                    if (!claimVerificationAction())
+                        return [2 /*return*/];
                     modalState.closeModalWithoutAnimation();
                     if (!connectedRaft) return [3 /*break*/, 2];
                     return [4 /*yield*/, window.applicationManager.stopVerifyingRaft(connectedRaft.id, false)];
@@ -150,6 +163,8 @@ function VerificationModalPhoneApp(_a) {
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
+                    if (!claimVerificationAction())
+                        return [2 /*return*/];
                     modalState.closeModal();
                     return [4 /*yield*/, (connectedRaft === null || connectedRaft === void 0 ? void 0 : connectedRaft.stopVerifyingRaft(true))];
                 case 1:
@@ -174,6 +189,8 @@ function VerificationModalPhoneApp(_a) {
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
+                    if (actionStartedRef.current)
+                        return [2 /*return*/];
                     setIsLoading(true);
                     if (!connectedRaft) return [3 /*break*/, 2];
                     return [4 /*yield*/, window.applicationManager.stopVerifyingRaft(connectedRaft.id, false)];
@@ -200,12 +217,12 @@ function VerificationModalPhoneApp(_a) {
     }); };
     var contentJSX = null;
     if (foundRICsState.length === 0) {
-        contentJSX = _jsxs("div", __assign({ className: "verification-modal-container" }, { children: [!isScanning && _jsx("p", __assign({ style: { alignSelf: 'center' } }, { children: t("verification_modal_phone.no_robots_found", "No devices 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: t("verification_modal_phone.scan_again", "SCAN AGAIN"), SVGImage: RefreshSVG, backgroundColour: MAIN_BLUE, titleColour: WHITE, SVGColour: WHITE }), _jsx("div", { className: "dummy-gap" }), _jsx(SimpleButton, { onClick: onCancel, title: t("verification_modal_phone.cancel", "CANCEL") })] }))] }));
+        contentJSX = _jsxs("div", __assign({ className: "verification-modal-container" }, { children: [!isScanning && _jsx("p", __assign({ style: { alignSelf: 'center' } }, { children: t("verification_modal_phone.no_robots_found", "No devices 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: t("verification_modal_phone.scan_again", "SCAN AGAIN"), SVGImage: RefreshSVG, backgroundColour: MAIN_BLUE, titleColour: WHITE, SVGColour: WHITE, disabled: isScanning || isActionPending }), _jsx("div", { className: "dummy-gap" }), _jsx(SimpleButton, { onClick: onCancel, title: t("verification_modal_phone.cancel", "CANCEL"), disabled: isActionPending })] }))] }));
     }
     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, {}), " "] })), foundRICsState.map(function (raftObj, raftIdx) {
-                            return _jsxs(Fragment, { children: [_jsxs("button", __assign({ type: "button", className: "verification-modal-marty-name-row-container", onClick: function () { return onSelectRaft(raftIdx); }, "aria-label": "".concat(t("verification_modal_phone.select_robot", "Select device"), " ").concat(raftObj._localName) }, { 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, "aria-hidden": "true" })] })), selectedRICIdx === raftIdx && _jsxs("div", { children: [_jsx("p", __assign({ className: "verification-modal-martys-back-hint" }, { children: isLoading ? t("verification_modal_phone.loading", "Loading...") : t("verification_modal_phone.look_on_back", { raftType: connectedRaft === null || connectedRaft === void 0 ? void 0 : connectedRaft.type }) })), _jsxs("div", __assign({ className: "verification-modal-led-row-container" }, { children: [_jsx(LEDs, { coloursArr: randomColours, connectedRaft: connectedRaft }), !isLoading && _jsx(SimpleButton, { onClick: onCancel, title: t("verification_modal_phone.no", "No"), borderColour: "red", colour: "white", textColour: "red" }), !isLoading && _jsx(SimpleButton, { onClick: onYes, title: t("connection.yes") })] }))] })] }, raftIdx);
-                        })] })), _jsxs("div", __assign({ className: "verification-modal-bottom-btns-container" }, { children: [_jsx(SVGImageButton, { onClick: onScanAgain, title: t("connection.scan_again"), SVGImage: RefreshSVG, backgroundColour: MAIN_BLUE, titleColour: WHITE, SVGColour: WHITE, disabled: isScanning }), _jsx("div", { className: "dummy-gap" }), _jsx(SimpleButton, { onClick: onCancel, title: t("connection.cancel") })] }))] }));
+                            return _jsxs(Fragment, { children: [_jsxs("button", __assign({ type: "button", className: "verification-modal-marty-name-row-container", onClick: function () { return onSelectRaft(raftIdx); }, "aria-label": "".concat(t("verification_modal_phone.select_robot", "Select device"), " ").concat(raftObj._localName), disabled: isActionPending || isLoading }, { 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, "aria-hidden": "true" })] })), selectedRICIdx === raftIdx && _jsxs("div", { children: [_jsx("p", __assign({ className: "verification-modal-martys-back-hint" }, { children: isLoading ? t("verification_modal_phone.loading", "Loading...") : t("verification_modal_phone.look_on_back", { raftType: connectedRaft === null || connectedRaft === void 0 ? void 0 : connectedRaft.type }) })), _jsxs("div", __assign({ className: "verification-modal-led-row-container" }, { children: [_jsx(LEDs, { coloursArr: randomColours, connectedRaft: connectedRaft }), !isLoading && _jsx(SimpleButton, { onClick: onCancel, title: t("verification_modal_phone.no", "No"), disabled: isActionPending, borderColour: "red", colour: "white", textColour: "red" }), !isLoading && _jsx(SimpleButton, { onClick: onYes, title: t("connection.yes"), disabled: isActionPending })] }))] })] }, raftIdx);
+                        })] })), _jsxs("div", __assign({ className: "verification-modal-bottom-btns-container" }, { children: [_jsx(SVGImageButton, { onClick: onScanAgain, title: t("connection.scan_again"), SVGImage: RefreshSVG, backgroundColour: MAIN_BLUE, titleColour: WHITE, SVGColour: WHITE, disabled: isScanning || isActionPending }), _jsx("div", { className: "dummy-gap" }), _jsx(SimpleButton, { onClick: onCancel, title: t("connection.cancel"), disabled: isActionPending })] }))] }));
     }
     return contentJSX;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@robotical/webapp-types",
-  "version": "3.18.3",
+  "version": "3.18.5",
   "description": "Type definitions for the Application Manager",
   "main": "dist/application-manager.d.ts",
   "types": "dist/application-manager.d.ts",