Countdown timer for multi device

src/components/SetupErrorDisplay.tsx

@@ -1,5 +1,6 @@
+import { MutinyWallet } from "@mutinywallet/mutiny-wasm";
 import { Title } from "@solidjs/meta";
-import { Match, Switch } from "solid-js";
+import { createResource, Match, Switch } from "solid-js";
 
 import nodevice from "~/assets/no-device.png";
 import {
@@ -15,6 +16,10 @@ import {
     SmallHeader
 } from "~/components";
 import { useI18n } from "~/i18n/context";
+import {
+    getSettings,
+    MutinyWalletSettingStrings
+} from "~/logic/mutinyWalletSetup";
 import { FeedbackLink } from "~/routes/Feedback";
 
 function ErrorFooter() {
@@ -33,6 +38,40 @@ export function SetupErrorDisplay(props: { initialError: Error }) {
     const i18n = useI18n();
     const error = props.initialError;
 
+    const [lockSeconds, { mutate }] = createResource(async () => {
+        if (error.message.startsWith("Mutiny is already running")) {
+            const settings: MutinyWalletSettingStrings = await getSettings();
+            // todo set password
+            try {
+                const secs = await MutinyWallet.get_device_lock_remaining_secs(
+                    undefined,
+                    settings.auth,
+                    settings.storage
+                );
+                return Number(secs) || 0;
+            } catch (e) {
+                console.error(e);
+                return 60; // set to 60 if we fail to get the lock time
+            }
+        } else {
+            return 0;
+        }
+    });
+
+    // Countdown every second if we are displaying the device lock error
+    if (error.message.startsWith("Mutiny is already running")) {
+        setInterval(async () => {
+            const current = lockSeconds();
+            if (current !== undefined) {
+                if (current > 0) {
+                    mutate(current - 1);
+                } else {
+                    window.location.reload();
+                }
+            }
+        }, 1000);
+    }
+
     return (
         <SafeArea>
             <Switch>
@@ -98,7 +137,7 @@ export function SetupErrorDisplay(props: { initialError: Error }) {
                             {i18n.t("error.on_boot.existing_tab.description")}
                         </NiceP>
                         <Button onClick={() => window.location.reload()}>
-                            Reload
+                            {i18n.t("error.reload")}
                         </Button>
                         <ErrorFooter />
                     </DefaultMain>
@@ -127,8 +166,15 @@ export function SetupErrorDisplay(props: { initialError: Error }) {
                                 "error.on_boot.already_running.description"
                             )}
                         </NiceP>
+                        <p class="rounded-xl bg-white/10 p-4 font-mono">
+                            {i18n.t(
+                                "error.on_boot.already_running.retry_again_in"
+                            )}{" "}
+                            {lockSeconds()}{" "}
+                            {i18n.t("error.on_boot.already_running.seconds")}
+                        </p>
                         <Button onClick={() => window.location.reload()}>
-                            Reload
+                            {i18n.t("error.reload")}
                         </Button>
                         <ErrorFooter />
                     </DefaultMain>
@@ -187,7 +233,7 @@ export function SetupErrorDisplay(props: { initialError: Error }) {
                             {i18n.t("error.on_boot.loading_failed.description")}
                         </NiceP>
                         <Button onClick={() => window.location.reload()}>
-                            Reload
+                            {i18n.t("error.reload")}
                         </Button>
                         <NiceP>
                             {i18n.t(

src/i18n/en/translations.ts

@@ -575,6 +575,7 @@ export default {
     error: {
         title: "Error",
         emergency_link: "emergency kit.",
+        reload: "Reload",
         restart: {
             title: "Something *extra* screwy going on? Stop the nodes!",
             start: "Start",
@@ -614,7 +615,9 @@ export default {
             already_running: {
                 title: "Mutiny may be running on another device",
                 description:
-                    "Mutiny can only be used in one place at a time. It looks like you have another device or browser using this wallet. If you've recently closed Mutiny on another device, please wait a few minutes and try again."
+                    "Mutiny can only be used in one place at a time. It looks like you have another device or browser using this wallet. If you've recently closed Mutiny on another device, please wait a few minutes and try again.",
+                retry_again_in: "Retry again in",
+                seconds: "seconds"
             },
             incompatible_browser: {
                 title: "Incompatible browser",