From 9bd968b0516335e535a22fa84975f79dffb33c63 Mon Sep 17 00:00:00 2001
From: Paul Miller <paul@paul.lol>
Date: Wed, 27 Mar 2024 12:09:58 -0500
Subject: [PATCH] 200k sat warning

---
 public/i18n/en.json            |  6 ++++-
 src/components/BigMoney.tsx    |  2 +-
 src/components/FeeDisplay.tsx  |  2 +-
 src/components/layout/Misc.tsx |  4 ++--
 src/routes/Receive.tsx         | 41 ++++++++++++++++++++++++++++++++--
 5 files changed, 48 insertions(+), 7 deletions(-)

diff --git a/public/i18n/en.json b/public/i18n/en.json
index 1ad431c..9a3d0cf 100644
--- a/public/i18n/en.json
+++ b/public/i18n/en.json
@@ -142,7 +142,11 @@
       "gift": "Lightning Gift"
     },
     "remember_choice": "Remember my choice next time",
-    "what_for": "What's this for?"
+    "what_for": "What's this for?",
+    "method_help": {
+      "title": "Receive Method",
+      "body": "Lightning receives under 200,000 sats go into your federation by default. Anything higher than that goes into a lightning channel."
+    }
   },
   "send": {
     "search": {
diff --git a/src/components/BigMoney.tsx b/src/components/BigMoney.tsx
index 7d89ea2..48c91c2 100644
--- a/src/components/BigMoney.tsx
+++ b/src/components/BigMoney.tsx
@@ -51,7 +51,7 @@ function SmallSubtleAmount(props: {
 
     return (
         <h2
-            class="flex flex-row items-center whitespace-nowrap text-xl font-light text-neutral-400"
+            class="flex flex-row items-center whitespace-nowrap text-xl font-light text-m-grey-350"
             tabIndex={0}
         >
             <Show when={!props.loading || props.mode === "fiat"} fallback="…">
diff --git a/src/components/FeeDisplay.tsx b/src/components/FeeDisplay.tsx
index b99335d..3f9c312 100644
--- a/src/components/FeeDisplay.tsx
+++ b/src/components/FeeDisplay.tsx
@@ -11,7 +11,7 @@ const AmountKeyValue: ParentComponent<{ key: string; gray?: boolean }> = (
     return (
         <div
             class="flex items-center justify-between"
-            classList={{ "text-neutral-400": props.gray }}
+            classList={{ "text-m-grey-350": props.gray }}
         >
             <div class="font-semibold uppercase">{props.key}</div>
             <div class="font-light">{props.children}</div>
diff --git a/src/components/layout/Misc.tsx b/src/components/layout/Misc.tsx
index 716818b..1a260e7 100644
--- a/src/components/layout/Misc.tsx
+++ b/src/components/layout/Misc.tsx
@@ -160,7 +160,7 @@ const FullscreenLoader = () => {
         <div class="flex w-full flex-col items-center justify-center gap-4 h-device">
             <LoadingSpinner wide />
             <Show when={waitedTooLong()}>
-                <p class="max-w-[20rem] text-neutral-400">
+                <p class="max-w-[20rem] text-m-grey-350">
                     {i18n.t("error.load_time.stuck")}{" "}
                     <A class="text-white" href="/settings/emergencykit">
                         {i18n.t("error.emergency_link")}
@@ -266,7 +266,7 @@ export const NiceP: ParentComponent = (props) => {
 };
 
 export const TinyText: ParentComponent = (props) => {
-    return <p class="text-sm text-neutral-400">{props.children}</p>;
+    return <p class="text-sm text-m-grey-350">{props.children}</p>;
 };
 
 export const TinyButton: ParentComponent<{
diff --git a/src/routes/Receive.tsx b/src/routes/Receive.tsx
index 5505e9c..c8815fd 100644
--- a/src/routes/Receive.tsx
+++ b/src/routes/Receive.tsx
@@ -3,7 +3,7 @@ import {
     MutinyInvoice
 } from "@mutinywallet/mutiny-wasm";
 import { useNavigate } from "@solidjs/router";
-import { ArrowLeftRight } from "lucide-solid";
+import { ArrowLeftRight, CircleHelp, Users, Zap } from "lucide-solid";
 import {
     createEffect,
     createMemo,
@@ -102,6 +102,33 @@ function FeeWarning(props: { fee: bigint; flavor: ReceiveFlavor }) {
     );
 }
 
+function ReceiveMethodHelp(props: { amountSats: bigint }) {
+    const i18n = useI18n();
+    const [open, setOpen] = createSignal(false);
+    return (
+        <>
+            <button class="flex gap-2 self-end" onClick={() => setOpen(true)}>
+                <Switch>
+                    <Match when={props.amountSats < 200000n}>
+                        <Users class="w-[18px]" />
+                    </Match>
+                    <Match when={true}>
+                        <Zap class="w-[18px]" />
+                    </Match>
+                </Switch>
+                <CircleHelp class="w-[18px] text-m-grey-350" />
+            </button>
+            <SimpleDialog
+                open={open()}
+                setOpen={setOpen}
+                title={i18n.t("receive.method_help.title")}
+            >
+                <p>{i18n.t("receive.method_help.body")}</p>
+            </SimpleDialog>
+        </>
+    );
+}
+
 export function Receive() {
     const [state, actions] = useMegaStore();
     const navigate = useNavigate();
@@ -382,6 +409,16 @@ export function Receive() {
                         </VStack>
                         <div class="flex-1" />
                         <VStack>
+                            <Show
+                                when={
+                                    state.federations &&
+                                    state.federations.length
+                                }
+                            >
+                                <ReceiveMethodHelp
+                                    amountSats={amount() || 0n}
+                                />
+                            </Show>
                             <form onSubmit={onSubmit}>
                                 <SimpleInput
                                     type="text"
@@ -414,7 +451,7 @@ export function Receive() {
                             amountSats={amount() ? amount().toString() : "0"}
                             kind={flavor()}
                         />
-                        <p class="text-center text-neutral-400">
+                        <p class="text-center text-m-grey-350">
                             {i18n.t("receive.keep_mutiny_open")}
                         </p>
                         {/* Only show method chooser when we have an invoice */}