@robotical/webapp-types 3.11.8 → 3.12.0

package/dist-types/src/application/ApplicationManager/ApplicationManager.d.ts

@@ -14,6 +14,7 @@ import { CarouselNavigatorManager } from "../../utils/CarouselNavigatorManager";
 import { CustomBluetoothItem, UserDeviceInfo } from "../../types/userDeviceInfo";
 import { UserRoleContextTypes } from "../../store/user-role-context";
 export default class ApplicationManager {
+    selectedLocale: string;
     AnalyticsFacade: typeof AnalyticsFacade;
     analyticsSessionId: string | undefined;
     private _observers;
@@ -31,6 +32,8 @@ export default class ApplicationManager {
     private _router;
     setRouter(router: any): void;
     navigateTo(path: string): void;
+    setSelectedLocale(locale: string): void;
+    getSelectedLocale(): string;
     ricSelectedCb: ((raft: RAFT) => void) | null;
     toaster: typeof Toaster;
     showBackHomeButton: () => void;

package/dist-types/src/application/ApplicationManager/ApplicationManager.js

@@ -56,10 +56,13 @@ import draggableModalState from "../../state-observables/modal/DraggableModalSta
 import SensorsDashboardModal from "../../components/modals/ SensorsDashboardModal";
 import LEDLightsOrQRVerificationModal from "../../components/modals/LEDLightsOrQRVerificationModal";
 import { CarouselNavigatorManager } from "../../utils/CarouselNavigatorManager";
+import i18n from "../../i18n";
 var SHOW_LOGS = true;
 var TAG = "ApplicationManager";
 var ApplicationManager = /** @class */ (function () {
     function ApplicationManager() {
+        // locale
+        this.selectedLocale = "en";
         // Analytics
         this.AnalyticsFacade = AnalyticsFacade;
         // Observers
@@ -122,6 +125,12 @@ var ApplicationManager = /** @class */ (function () {
             Logger.error(SHOW_LOGS, TAG, "Router is not set");
         }
     };
+    ApplicationManager.prototype.setSelectedLocale = function (locale) {
+        this.selectedLocale = locale;
+    };
+    ApplicationManager.prototype.getSelectedLocale = function () {
+        return this.selectedLocale;
+    };
     ApplicationManager.prototype.getDeviceInfo = function () {
         return __awaiter(this, void 0, void 0, function () {
             var _a;
@@ -392,7 +401,7 @@ var ApplicationManager = /** @class */ (function () {
                 switch (_a.label) {
                     case 0:
                         if (!shouldShowQrModal) return [3 /*break*/, 2];
-                        return [4 /*yield*/, modalState.setModal(createElement(LEDLightsOrQRVerificationModal), "Verification Method")];
+                        return [4 /*yield*/, modalState.setModal(createElement(LEDLightsOrQRVerificationModal), i18n.t("connection.verification_method"))];
                     case 1:
                         specificUUIDs = _a.sent();
                         return [3 /*break*/, 3];
@@ -419,7 +428,7 @@ var ApplicationManager = /** @class */ (function () {
                     case 4:
                         _a.trys.push([4, 9, , 10]);
                         if (!isQRVerification) return [3 /*break*/, 6];
-                        secondaryModalState.setModal(createElement(ConnectingLoadingSpinnerModal, {}), "Connecting...", false);
+                        secondaryModalState.setModal(createElement(ConnectingLoadingSpinnerModal, {}), i18n.t("connection.connecting_msg"), false);
                         this.ricSelectedCb = null;
                         return [4 /*yield*/, window.applicationManager.startDiscoveryWithoutVerification(uuids, afterRaftConnectedCb)];
                     case 5:
@@ -439,7 +448,7 @@ var ApplicationManager = /** @class */ (function () {
                         return [3 /*break*/, 10];
                     case 10: return [3 /*break*/, 16];
                     case 11:
-                        secondaryModalState.setModal(createElement(ConnectingLoadingSpinnerModal, {}), "Connecting...", false);
+                        secondaryModalState.setModal(createElement(ConnectingLoadingSpinnerModal, {}), i18n.t("connection.connecting_msg"), false);
                         _a.label = 12;
                     case 12:
                         _a.trys.push([12, 14, , 15]);
@@ -581,7 +590,7 @@ var ApplicationManager = /** @class */ (function () {
                     case 2:
                         _c.sent();
                         if (!!withoutVerification) return [3 /*break*/, 3];
-                        modalState.setModal(createElement(VerificationModal, { connectedRAFT_: raft }), "Looking for ".concat(raft.type));
+                        modalState.setModal(createElement(VerificationModal, { connectedRAFT_: raft }), i18n.t("connection.looking_for_raft", { raftType: raft.type }), false);
                         return [3 /*break*/, 5];
                     case 3:
                         oldColours = raft._ledLcdColours;

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

@@ -10,15 +10,17 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
 import { useEffect } from "react";
 import { secondaryModalState } from "../../../state-observables/modal/ModalState";
 import styles from "./styles.module.css";
 export default function ConnectingLoadingSpinnerModal(_a) {
+    var t = useTranslation().t;
     useEffect(function () {
         // close modal after 3 minutes assuming no connection will take that long
         setTimeout(function () {
             secondaryModalState.closeModal();
         }, 180000);
     }, []);
-    return (_jsx("div", __assign({ className: styles.container }, { children: "This shouldn't take long!" })));
+    return (_jsx("div", __assign({ className: styles.container }, { children: t("connection.connecting_loading") })));
 }

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

@@ -11,11 +11,13 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from "react";
+import { useTranslation } from "react-i18next";
 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 t = useTranslation().t;
     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];
@@ -23,15 +25,15 @@ export default function DetailedFeedbackModal(_a) {
         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.");
+            var confirm_1 = window.confirm(t("detailed_feedback_modal.no_email_confirm") || "");
             if (!confirm_1)
                 return;
         }
-        var reportWithContact = { text: "".concat(email ? email : "Anonymous", ": ").concat(report) };
+        var reportWithContact = { text: "".concat(email ? email : t('detailed_feedback_modal.anonymous', 'Anonymous'), ": ").concat(report) };
         // window.applicationManager.analyticsManager.logEvent("textfeedback", { ...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" })] }))] })) })));
+    return (_jsx("div", __assign({ className: styles.bugReportModalContainer }, { children: reportSent ? (t("detailed_feedback_modal.thank_you", "Thank you for your feedback!")) : (_jsxs(_Fragment, { children: [_jsxs("div", __assign({ className: styles.bugReportModalInfo }, { children: [t("detailed_feedback_modal.info", "Please help us improve! Please let us know if you spot any irregularities/bugs. "), _jsx("strong", __assign({ className: styles.bugReportModalInfoStrong }, { children: t("detailed_feedback_modal.info_strong", "You can optionally leave your contact details so we can reach out and help you") })), ". ", t("detailed_feedback_modal.thank_you", "Thank you!")] })), _jsxs("div", __assign({ className: styles.bugReportModalForm }, { children: [_jsx("textarea", { className: styles.bugReportModalTextInput, placeholder: t("detailed_feedback_modal.report_placeholder", "Your report...") || "Your report...", onChange: function (e) { return setReport(e.target.value); }, value: report }), _jsx("label", __assign({ className: styles.bugReportModalEmailLabel }, { children: t("detailed_feedback_modal.email_label", "Provide your email if you want us to get back to you with a solution!") })), _jsx("input", { type: "email", className: styles.bugReportModalEmailInput, placeholder: t("detailed_feedback_modal.email_placeholder", "Email (optional)") || "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: t("detailed_feedback_modal.cancel", "Cancel") }), _jsx(SimpleButton, { onClick: onReport, title: t("detailed_feedback_modal.report", "Report") })] }))] })) })));
 }

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

@@ -54,22 +54,10 @@ import { MdQrCode } from "react-icons/md";
 //@ts-ignore
 import { Scanner, centerText } from '@yudiel/react-qr-scanner';
 import { ConnManager } from "@robotical/roboticaljs";
-var options = [
-    {
-        id: "qr",
-        title: "QR Code Verification",
-        subtitle: "Scan a QR code to verify.",
-        icon: _jsx(MdQrCode, { size: 32 }),
-    },
-    {
-        id: "led",
-        title: "LED Lights Verification",
-        subtitle: "Check LED signals for verification.",
-        icon: _jsx(HiOutlineLightBulb, { size: 32 }),
-    },
-];
+import { useTranslation } from "react-i18next";
 export default function LEDLightsOrQRVerificationModal() {
     var _this = this;
+    var t = useTranslation().t;
     var _a = useState(true), qrSelected = _a[0], setQRSelected = _a[1];
     var _b = useState(undefined), serialNoFromQR = _b[0], setSerialNoFromQR = _b[1];
     var _c = useState(false), isButtonToConnectVisible = _c[0], setIsButtonToConnectVisible = _c[1];
@@ -85,6 +73,20 @@ export default function LEDLightsOrQRVerificationModal() {
             setQRSelected(false);
         }
     }, [serialNoFromQR]);
+    var options = [
+        {
+            id: "qr",
+            title: t('connection.qr_title'),
+            subtitle: t('connection.qr_subtitle'),
+            icon: _jsx(MdQrCode, { size: 32 }),
+        },
+        {
+            id: "led",
+            title: t('connection.led_title'),
+            subtitle: t('connection.led_subtitle'),
+            icon: _jsx(HiOutlineLightBulb, { size: 32 }),
+        },
+    ];
     var handleSelect = function (id) {
         if (id === 'qr') {
             setSerialNoFromQR(undefined);
@@ -112,7 +114,7 @@ export default function LEDLightsOrQRVerificationModal() {
                     var id = _a.id, title = _a.title, subtitle = _a.subtitle, icon = _a.icon;
                     return (_jsxs("div", __assign({ className: qrSelected && id === 'qr' ? [styles.card, styles.qrselected].join(" ") : styles.card, onClick: function () { return handleSelect(id); } }, { 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));
                 }) })) :
-                _jsx("div", __assign({ className: styles.cogNote }, { children: _jsxs("strong", { children: ["Don't forget to ", _jsx("span", __assign({ className: styles.cogNoteHighlight }, { children: "turn on" })), " your Cog!"] }) })), qrSelected && _jsx(QRContent, { setSerialNo: setSerialNoFromQR }), _jsxs("div", __assign({ className: styles.buttonsContainer }, { children: [isButtonToConnectVisible && _jsx("button", __assign({ className: styles.connectButton, onClick: handleConnect }, { children: "QR code scan - click to connect" })), _jsx("button", __assign({ className: styles.cancelButton, onClick: function () { return modalState.closeModal(false); } }, { children: "Cancel" }))] }))] })));
+                _jsx("div", __assign({ className: styles.cogNote }, { children: _jsxs("strong", { children: ["Don't forget to ", _jsx("span", __assign({ className: styles.cogNoteHighlight }, { children: "turn on" })), " your Cog!"] }) })), qrSelected && _jsx(QRContent, { setSerialNo: setSerialNoFromQR }), _jsxs("div", __assign({ className: styles.buttonsContainer }, { children: [isButtonToConnectVisible && _jsx("button", __assign({ className: styles.connectButton, onClick: handleConnect }, { children: t('connection.qr_connect_button') })), _jsx("button", __assign({ className: styles.cancelButton, onClick: function () { return modalState.closeModal(false); } }, { children: t('connection.cancel') }))] }))] })));
 }
 function QRContent(_a) {
     var _this = this;

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

@@ -56,6 +56,7 @@ import SimpleButton from "../../disposables/buttons/SimpleButton";
 import LEDs from "../../oneoffs/LEDs";
 import { raftConnectingSubscriptionHelper } from "../../../application/RAFTs/raft-subscription-helpers";
 import { useConnectedRafts } from "../../../store/SelectedRaftContext";
+import { useTranslation } from "react-i18next";
 var SHOW_LOGS = true;
 var TAG = "VerificationModal";
 function VerificationModal(_a) {
@@ -65,6 +66,7 @@ function VerificationModal(_a) {
     // const [connectedRaft, setConnectedRaft] = useState<RAFT | undefined>(connectedRAFT_);
     var _c = useState(-200), RSSI = _c[0], setRSSI = _c[1];
     var removeConnectedRaft = useConnectedRafts().removeConnectedRaft;
+    var t = useTranslation().t;
     useEffect(function () {
         /* Subscribe to the connectedRaft's SIGNAL strength */
         if (!connectedRAFT_)
@@ -119,7 +121,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 })] })), _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" })] }))] }));
+    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") })] }))] }));
     return contentJSX;
 }
 export default VerificationModal;

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

@@ -71,11 +71,13 @@ import LoadingSpinner from "../../disposables/LoadingSpinner";
 import { RaftConnectionMethod } from "../../../types/raft";
 import { useConnectedRafts } from "../../../store/SelectedRaftContext";
 import { ConnManager } from "@robotical/roboticaljs";
+import { useTranslation } from "react-i18next";
 var SHOW_LOGS = true;
 var TAG = "VerificationModalPhone";
 function VerificationModalPhoneApp(_a) {
     var _this = this;
     var foundRICs = _a.foundRICs;
+    var t = useTranslation().t;
     var _b = useState([]), randomColours = _b[0], setRandomColours = _b[1];
     var _c = useState(foundRICs), foundRICsState = _c[0], setFoundRICsState = _c[1];
     var _d = useState(-1), selectedRICIdx = _d[0], setSelectedRICIdx = _d[1];
@@ -213,12 +215,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: "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" })] }))] }));
+        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 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: 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") })] }))] }));
     }
     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("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 _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 ? 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 contentJSX;
 }

package/dist-types/src/i18n.d.ts

@@ -0,0 +1,2 @@
+import i18n from 'i18next';
+export default i18n;