show pending info when payment timed out

src/components/successfail/MegaClock.tsx

@@ -0,0 +1,11 @@
+import megaclock from "~/assets/icons/megaclock.png";
+
+export function MegaClock() {
+    return (
+        <img
+            src={megaclock}
+            alt="fail"
+            class="mx-auto w-1/2 max-w-[30vh] flex-shrink"
+        />
+    );
+}

src/components/successfail/index.ts

@@ -1,3 +1,4 @@
 export * from "./MegaCheck";
 export * from "./MegaEx";
+export * from "./MegaClock";
 export * from "./SuccessModal";

src/i18n/en/translations.ts

@@ -123,7 +123,10 @@ export default {
             "Amount requested, {{amount}} SATS, does not equal amount set.",
         error_clipboard: "Clipboard not supported",
         error_keysend: "Keysend failed",
-        error_LNURL: "LNURL Pay failed"
+        error_LNURL: "LNURL Pay failed",
+        payment_pending: "Payment pending",
+        payment_pending_description:
+            "It's taking a while, but it's possible this payment may still go through. Please check 'Activity' for the current status."
     },
     feedback: {
         header: "Give us feedback!",

src/routes/Send.tsx

@@ -32,6 +32,7 @@ import {
     InfoBox,
     LargeHeader,
     MegaCheck,
+    MegaClock,
     MegaEx,
     MutinyWalletGuard,
     NavBar,
@@ -198,6 +199,30 @@ function DestinationShower(props: {
     );
 }
 
+function Failure(props: { reason: string }) {
+    const i18n = useI18n();
+
+    return (
+        <Switch>
+            <Match when={props.reason === "Payment timed out."}>
+                <MegaClock />
+                <h1 class="mb-2 mt-4 w-full text-center text-2xl font-semibold md:text-3xl">
+                    {i18n.t("send.payment_pending")}
+                </h1>
+                <InfoBox accent="white">
+                    {i18n.t("send.payment_pending_description")}
+                </InfoBox>
+            </Match>
+            <Match when={true}>
+                <MegaEx />
+                <h1 class="mb-2 mt-4 w-full text-center text-2xl font-semibold md:text-3xl">
+                    {props.reason}
+                </h1>
+            </Match>
+        </Switch>
+    );
+}
+
 export default function Send() {
     const [state, actions] = useMegaStore();
     const navigate = useNavigate();
@@ -635,15 +660,12 @@ export default function Send() {
                     >
                         <Switch>
                             <Match when={sentDetails()?.failure_reason}>
-                                <MegaEx />
-                                <h1 class="mb-2 mt-4 w-full text-center text-2xl font-semibold md:text-3xl">
-                                    {sentDetails()?.amount
-                                        ? source() === "onchain"
-                                            ? i18n.t("send.payment_initiated")
-                                            : i18n.t("send.payment_sent")
-                                        : sentDetails()?.failure_reason}
-                                </h1>
-                                {/*TODO: add failure hint logic for different failure conditions*/}
+                                <Failure
+                                    reason={
+                                        sentDetails()?.failure_reason ||
+                                        "Payment failed for an unknown reason"
+                                    }
+                                />
                             </Match>
                             <Match when={true}>
                                 <Show when={detailsId() && detailsKind()}>