feat: add new success screens

src/components/Activity.tsx

@@ -87,8 +87,6 @@ function UnifiedActivityItem(props: {
     );
 }
 
-
-
 export function CombinedActivity(props: { limit?: number }) {
     const [state, _actions] = useMegaStore();
     const i18n = useI18n();

src/components/ActivityItem.tsx

@@ -1,11 +1,4 @@
-import {
-    Match,
-    ParentComponent,
-    Switch,
-    createMemo,
-    createResource
-} from "solid-js";
-import { satsToUsd } from "~/utils/conversions";
+import { Match, ParentComponent, Switch, createResource } from "solid-js";
 import bolt from "~/assets/icons/bolt.svg";
 import chain from "~/assets/icons/chain.svg";
 import shuffle from "~/assets/icons/shuffle.svg";
@@ -16,31 +9,14 @@ import { timeAgo } from "~/utils/prettyPrintTime";
 import { generateGradient } from "~/utils/gradientHash";
 import { useMegaStore } from "~/state/megaStore";
 import { Contact } from "@mutinywallet/mutiny-wasm";
+import { Amount } from "~/components/Amount";
 
 export const ActivityAmount: ParentComponent<{
     amount: string;
     price: number;
     positive?: boolean;
     center?: boolean;
 }> = (props) => {
-    const amountInUsd = createMemo(() => {
-        const parsed = Number(props.amount);
-        if (isNaN(parsed)) {
-            return props.amount;
-        } else {
-            return satsToUsd(props.price, parsed, true);
-        }
-    });
-
-    const prettyPrint = createMemo(() => {
-        const parsed = Number(props.amount);
-        if (isNaN(parsed)) {
-            return props.amount;
-        } else {
-            return parsed.toLocaleString();
-        }
-    });
-
     return (
         <div
             class="flex flex-col"
@@ -49,17 +25,13 @@ export const ActivityAmount: ParentComponent<{
                 "items-center": props.center
             }}
         >
-            <div
-                class="text-base"
-                classList={{ "text-m-green": props.positive }}
-            >
-                {props.positive && "+ "}
-                {prettyPrint()}&nbsp;<span class="text-sm">SATS</span>
-            </div>
-            <div class="text-sm text-neutral-500">
-                &#8776;&nbsp;{amountInUsd()}&nbsp;
-                <span class="text-sm">USD</span>
-            </div>
+            <Amount
+                amountSats={Number(props.amount)}
+                align="right"
+                icon={props.positive ? "plus" : undefined}
+                showFiat
+                green={props.positive ? true : false}
+            />
         </div>
     );
 };

src/components/Amount.tsx

@@ -15,9 +15,11 @@ export function Amount(props: {
     amountSats: bigint | number | undefined;
     showFiat?: boolean;
     loading?: boolean;
-    centered?: boolean;
-    icon?: "lightning" | "chain";
     whiteBg?: boolean;
+    align?: "left" | "center" | "right";
+    icon?: "lightning" | "chain" | "plus" | "minus";
+    size?: "small" | "large" | "xl";
+    green?: boolean;
 }) {
     const [state, _] = useMegaStore();
 
@@ -28,7 +30,9 @@ export function Amount(props: {
         <div
             class="flex flex-col gap-1"
             classList={{
-                "items-center": props.centered
+                "items-start": props.align === "left",
+                "items-center": props.align === "center",
+                "items-end": props.align === "right"
             }}
         >
             <div class="flex gap-2 items-center">
@@ -39,28 +43,78 @@ export function Amount(props: {
                     <img src={chain} alt="chain" class="h-[18px]" />
                 </Show>
                 <h1
-                    class="text-2xl font-light"
+                    class="font-light text-right"
                     classList={{
-                        "text-black": props.whiteBg
+                        "text-black": props.whiteBg,
+                        "text-sm": props.size === "small",
+                        "text-xl": props.size === "large",
+                        "text-2xl": props.size === "xl",
+                        "text-m-green": props.green
                     }}
                 >
+                    <Show when={props.icon === "plus"}>
+                        <span>+</span>
+                    </Show>
+                    <Show when={props.icon === "minus"}>
+                        <span>-</span>
+                    </Show>
                     {props.loading
                         ? "..."
                         : prettyPrintAmount(props.amountSats)}
                     &nbsp;
-                    <span class="text-base font-light">SATS</span>
+                    <span
+                        class="font-light text-base"
+                        classList={{
+                            "text-sm": props.size === "small",
+                            "text-lg": props.size === "xl"
+                        }}
+                    >
+                        <Show
+                            when={
+                                !props.amountSats ||
+                                Number(props.amountSats) > 1 ||
+                                Number(props.amountSats) === 0
+                            }
+                        >
+                            SATS
+                        </Show>
+                        <Show
+                            when={
+                                props.amountSats &&
+                                Number(props.amountSats) === 1
+                            }
+                        >
+                            SAT
+                        </Show>
+                    </span>
                 </h1>
             </div>
             <Show when={props.showFiat}>
                 <h2
-                    class="text-sm font-light"
+                    class="font-light text-white/70"
                     classList={{
                         "text-black": props.whiteBg,
-                        "text-white/70": !props.whiteBg
+                        "text-white/70": !props.whiteBg,
+                        "text-sm": !props.size,
+                        "text-xs": props.size === "small",
+                        "text-base": props.size === "large",
+                        "text-lg": props.size === "xl"
                     }}
                 >
-                    &#8776; {props.loading ? "..." : amountInUsd()}&nbsp;
-                    <span class="text-sm">USD</span>
+                    ~
+                    <Show when={props.size === "xl"}>
+                        <span>&nbsp;</span>
+                    </Show>
+                    {props.loading ? "..." : amountInUsd()}
+                    <span
+                        class="text-sm"
+                        classList={{
+                            "text-xs": props.size === "small",
+                            "text-base": props.size === "large"
+                        }}
+                    >
+                        &nbsp;USD
+                    </span>
                 </h2>
             </Show>
         </div>

src/components/AmountFiat.tsx

@@ -0,0 +1,22 @@
+import { useMegaStore } from "~/state/megaStore";
+import { satsToUsd } from "~/utils/conversions";
+
+export function AmountFiat(props: {
+    amountSats: bigint | number | undefined;
+    loading?: boolean;
+    classes?: string;
+}) {
+    const [state, _] = useMegaStore();
+
+    const amountInUsd = () =>
+        satsToUsd(state.price, Number(props.amountSats) || 0, true);
+
+    return (
+        <div class={`flex flex-col gap-1 ${props.classes}`}>
+            <h2 class="font-light text-white/70">
+                ~{props.loading ? "..." : amountInUsd()}
+                <span>&nbsp;USD</span>
+            </h2>
+        </div>
+    );
+}

src/components/BalanceBox.tsx

@@ -45,6 +45,7 @@ export default function BalanceBox(props: { loading?: boolean }) {
                         amountSats={state.balance?.lightning || 0}
                         showFiat
                         icon="lightning"
+                        size="xl"
                     />
                 </Show>
                 <hr class="my-2 border-m-grey-750" />
@@ -54,6 +55,7 @@ export default function BalanceBox(props: { loading?: boolean }) {
                             amountSats={totalOnchain()}
                             showFiat
                             icon="chain"
+                            size="xl"
                         />
                         <div class="flex flex-col items-end gap-1 justify-between">
                             <Show when={state.balance?.unconfirmed != 0n}>

src/components/MoreInfoModal.tsx

@@ -1,20 +1,26 @@
 import { Dialog } from "@kobalte/core";
-import { ParentComponent, createSignal } from "solid-js";
+import { ParentComponent, createSignal, JSXElement } from "solid-js";
 import { DIALOG_CONTENT, DIALOG_POSITIONER, OVERLAY } from "./DetailsModal";
 import { ModalCloseButton, SmallHeader } from "./layout";
 import { ExternalLink } from "./layout/ExternalLink";
+import help from "~/assets/icons/help.svg";
 import { useI18n } from "~/i18n/context";
 
-export function FeesModal() {
+export function FeesModal(props: { icon?: boolean }) {
     const i18n = useI18n();
     return (
-        <MoreInfoModal title={i18n.t("whats_with_the_fees")} linkText={i18n.t("why?")}>
-            <p>
-                {i18n.t("more_info_modal_p1")}
-            </p>
-            <p>
-                {i18n.t("more_info_modal_p2")}
-            </p>
+        <MoreInfoModal
+            title={i18n.t("whats_with_the_fees")}
+            linkText={
+                props.icon ? (
+                    <img src={help} alt="help" class="w-4 h-4 cursor-pointer" />
+                ) : (
+                    i18n.t("why?")
+                )
+            }
+        >
+            <p>{i18n.t("more_info_modal_p1")}</p>
+            <p>{i18n.t("more_info_modal_p2")}</p>
             <p>
                 <ExternalLink href="https://github.com/MutinyWallet/mutiny-web/wiki/Understanding-liquidity">
                     {i18n.t("learn_more_about_liquidity")}
@@ -25,7 +31,7 @@ export function FeesModal() {
 }
 
 export const MoreInfoModal: ParentComponent<{
-    linkText: string;
+    linkText: string | JSXElement;
     title: string;
 }> = (props) => {
     const [open, setOpen] = createSignal(false);

src/components/ResetRouter.tsx

@@ -16,7 +16,8 @@ export function ResetRouter() {
         <InnerCard>
             <VStack>
                 <NiceP>
-                    Failing to make payments? Try resetting the lightning router.
+                    Failing to make payments? Try resetting the lightning
+                    router.
                 </NiceP>
                 <Button intent="red" onClick={reset}>
                     Reset Router

src/components/layout/Button.tsx

@@ -12,7 +12,7 @@ const button = cva(
             intent: {
                 active: "bg-white text-black border border-white hover:text-[#3B6CCC]",
                 inactive:
-                    "bg-black text-white border border-white hover:text-[#3B6CCC]",
+                    "bg-transparent text-white border border-white hover:text-[#3B6CCC]",
                 glowy: "bg-black/10 shadow-xl text-white border border-m-blue hover:m-blue-dark hover:text-m-blue",
                 blue: "bg-m-blue text-white shadow-inner-button hover:bg-m-blue-dark text-shadow-button",
                 red: "bg-m-red text-white shadow-inner-button hover:bg-m-red-dark text-shadow-button",

src/components/layout/index.tsx

@@ -10,7 +10,12 @@ import {
 } from "solid-js";
 import Linkify from "./Linkify";
 import { Button, ButtonLink } from "./Button";
-import { Collapsible, Checkbox as KCheckbox, Dialog, Separator } from "@kobalte/core";
+import {
+    Collapsible,
+    Checkbox as KCheckbox,
+    Dialog,
+    Separator
+} from "@kobalte/core";
 import { useMegaStore } from "~/state/megaStore";
 import check from "~/assets/icons/check.svg";
 import { MutinyTagItem } from "~/utils/tags";
@@ -207,12 +212,26 @@ export const LoadingSpinner = (props: { big?: boolean; wide?: boolean }) => {
 
 export const Hr = () => <Separator.Root class="my-4 border-m-grey-750" />;
 
-export const LargeHeader: ParentComponent<{ action?: JSX.Element }> = (
-    props
-) => {
+export const LargeHeader: ParentComponent<{
+    action?: JSX.Element;
+    centered?: boolean;
+}> = (props) => {
     return (
-        <header class="w-full flex justify-between items-center mt-4 mb-2">
-            <h1 class="text-2xl font-semibold">{props.children}</h1>
+        <header
+            class="w-full flex justify-between items-center mt-4 mb-2"
+            classList={{
+                "justify-between": !props.centered,
+                "justify-center": props.centered
+            }}
+        >
+            <h1
+                class="text-3xl font-semibold"
+                classList={{
+                    "text-center": props.centered
+                }}
+            >
+                {props.children}
+            </h1>
             <Show when={props.action}>{props.action}</Show>
         </header>
     );

src/components/successfail/SuccessModal.tsx

@@ -1,10 +1,9 @@
 import { Dialog } from "@kobalte/core";
 import { JSX } from "solid-js";
-import { Button, LargeHeader } from "~/components/layout";
+import { Button } from "~/components/layout";
 import { DIALOG_CONTENT, DIALOG_POSITIONER } from "~/styles/dialogs";
 
 type SuccessModalProps = {
-    title: string;
     open: boolean;
     setOpen: (open: boolean) => void;
     children?: JSX.Element;
@@ -23,17 +22,11 @@ export function SuccessModal(props: SuccessModalProps) {
             <Dialog.Portal>
                 <div class={DIALOG_POSITIONER}>
                     <Dialog.Content class={DIALOG_CONTENT}>
-                        <div class="flex justify-between items-center mb-2">
-                            <Dialog.Title>
-                                <LargeHeader>{props.title}</LargeHeader>
-                            </Dialog.Title>
-                            <div />
-                        </div>
-                        <Dialog.Description class="flex flex-col items-center justify-center gap-8 pb-4 h-full w-full max-w-[400px] mx-auto">
+                        <Dialog.Description class="flex flex-col items-center justify-center gap-6 h-full w-full max-w-[400px] mx-auto">
                             {props.children}
                         </Dialog.Description>
                         <div class="w-full flex max-w-[300px] mx-auto">
-                            <Button onClick={onNice}>
+                            <Button onClick={onNice} intent="inactive">
                                 {props.confirmText ?? "Nice"}
                             </Button>
                         </div>

src/i18n/context.ts

@@ -1,12 +1,12 @@
-import { createContext, useContext } from 'solid-js';
+import { createContext, useContext } from "solid-js";
 import { i18n } from "i18next";
 
 export const I18nContext = createContext<i18n>();
 
 export function useI18n() {
     const context = useContext(I18nContext);
-    
-    if (!context) throw new ReferenceError('I18nContext');
-    
+
+    if (!context) throw new ReferenceError("I18nContext");
+
     return context;
 }