handle "running on another device" error state

src/components/SetupErrorDisplay.tsx

@@ -1,7 +1,9 @@
 import { Match, Switch } from "solid-js";
 import { Title } from "solid-start";
 
+import nodevice from "~/assets/no-device.png";
 import {
+    Button,
     DefaultMain,
     DeleteEverything,
     ExternalLink,
@@ -83,6 +85,11 @@ export function SetupErrorDisplay(props: { initialError: Error }) {
                         <LargeHeader>
                             {i18n.t("error.on_boot.existing_tab.title")}
                         </LargeHeader>
+                        <img
+                            src={nodevice}
+                            alt="no device"
+                            class="mx-auto w-1/4 max-w-[25vh] flex-shrink"
+                        />
                         <p class="rounded-xl bg-white/10 p-4 font-mono">
                             <span class="font-bold">{error.name}</span>:{" "}
                             {error.message}
@@ -90,6 +97,39 @@ export function SetupErrorDisplay(props: { initialError: Error }) {
                         <NiceP>
                             {i18n.t("error.on_boot.existing_tab.description")}
                         </NiceP>
+                        <Button onClick={() => window.location.reload()}>
+                            Reload
+                        </Button>
+                        <ErrorFooter />
+                    </DefaultMain>
+                </Match>
+                <Match
+                    when={error.message.startsWith("Mutiny is already running")}
+                >
+                    <Title>
+                        {i18n.t("error.on_boot.already_running.title")}
+                    </Title>
+                    <DefaultMain>
+                        <LargeHeader>
+                            {i18n.t("error.on_boot.already_running.title")}
+                        </LargeHeader>
+                        <img
+                            src={nodevice}
+                            alt="no device"
+                            class="mx-auto w-1/4 max-w-[25vh] flex-shrink"
+                        />
+                        <p class="rounded-xl bg-white/10 p-4 font-mono">
+                            <span class="font-bold">{error.name}</span>:{" "}
+                            {error.message}
+                        </p>
+                        <NiceP>
+                            {i18n.t(
+                                "error.on_boot.already_running.description"
+                            )}
+                        </NiceP>
+                        <Button onClick={() => window.location.reload()}>
+                            Reload
+                        </Button>
                         <ErrorFooter />
                     </DefaultMain>
                 </Match>

src/i18n/en/translations.ts

@@ -552,7 +552,12 @@ export default {
             existing_tab: {
                 title: "Multiple tabs detected",
                 description:
-                    "Mutiny currently only supports use in one tab at a time. It looks like you have another tab open with Mutiny running. Please close that tab and refresh this page, or close this tab and refresh the other one."
+                    "Mutiny can only be used in one tab at a time. It looks like you have another tab open with Mutiny running. Please close that tab and refresh this page, or close this tab and refresh the other one."
+            },
+            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."
             },
             incompatible_browser: {
                 title: "Incompatible browser",