From fe22e4cc8cc2578a32272bc9e774d82ef0b08a0c Mon Sep 17 00:00:00 2001 From: Paul Miller Date: Thu, 8 Jun 2023 12:12:10 -0500 Subject: [PATCH] add a "why" to fee warnings --- src/components/AmountEditable.tsx | 9 ++--- src/components/App.tsx | 2 +- src/components/InfoBox.tsx | 4 +-- src/components/MoreInfoModal.tsx | 60 +++++++++++++++++++++++++++++++ src/components/layout/index.tsx | 2 +- src/root.css | 8 +++++ src/routes/Receive.tsx | 17 ++++----- 7 files changed, 86 insertions(+), 16 deletions(-) create mode 100644 src/components/MoreInfoModal.tsx diff --git a/src/components/AmountEditable.tsx b/src/components/AmountEditable.tsx index dca324b..77150cf 100644 --- a/src/components/AmountEditable.tsx +++ b/src/components/AmountEditable.tsx @@ -16,6 +16,7 @@ import { InlineAmount } from "./AmountCard"; import { DIALOG_CONTENT, DIALOG_POSITIONER } from "~/styles/dialogs"; import { InfoBox } from "./InfoBox"; import { Network } from "~/logic/mutinyWalletSetup"; +import { FeesModal } from "./MoreInfoModal"; const CHARACTERS = [ "1", @@ -172,9 +173,9 @@ export const AmountEditable: ParentComponent<{ if ((state.balance?.lightning || 0n) === 0n) { const network = state.mutiny_wallet?.get_network() as Network; if (network === "bitcoin") { - return "Your first lightning receive needs to be 50,000 sats or greater."; + return "Your first lightning receive needs to be 50,000 sats or greater. A setup fee will be deducted from the requested amount."; } else { - return "Your first lightning receive needs to be 10,000 sats or greater."; + return "Your first lightning receive needs to be 10,000 sats or greater. A setup fee will be deducted from the requested amount."; } } @@ -357,8 +358,8 @@ export const AmountEditable: ParentComponent<{ /> - - {warningText()} + + {warningText()}
diff --git a/src/components/App.tsx b/src/components/App.tsx index fc9416b..01a7174 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -51,7 +51,7 @@ export default function App() { -

+

Bugs? Feedback?{" "} diff --git a/src/components/InfoBox.tsx b/src/components/InfoBox.tsx index cdfa4c2..7026cad 100644 --- a/src/components/InfoBox.tsx +++ b/src/components/InfoBox.tsx @@ -9,7 +9,7 @@ export const InfoBox: ParentComponent<{ class="grid grid-cols-[auto_minmax(0,_1fr)] rounded-xl px-4 py-2 md:p-4 gap-4 bg-neutral-950/50 border" classList={{ "border-m-red": props.accent === "red", - "border-m-blue": props.accent === "blue", + "border-m-blue bg-m-blue/10": props.accent === "blue", "border-m-green": props.accent === "green", "border-white": props.accent === "white" }} @@ -18,7 +18,7 @@ export const InfoBox: ParentComponent<{ info

-

{props.children}

+

{props.children}

); diff --git a/src/components/MoreInfoModal.tsx b/src/components/MoreInfoModal.tsx new file mode 100644 index 0000000..4d2d416 --- /dev/null +++ b/src/components/MoreInfoModal.tsx @@ -0,0 +1,60 @@ +import { Dialog } from "@kobalte/core"; +import { ParentComponent, createSignal } from "solid-js"; +import { DIALOG_CONTENT, DIALOG_POSITIONER, OVERLAY } from "./DetailsModal"; +import { ModalCloseButton, SmallHeader } from "./layout"; +import { ExternalLink } from "./layout/ExternalLink"; + +export function FeesModal() { + return ( + +

+ Mutiny is a self-custodial wallet. To initiate a lightning + payment we must open a lightning channel, which requires a + minimum amount and a setup fee. +

+

+ Future payments, both send and recieve, will only incur normal + network fees and a nominal service fee unless your channel runs + out of inbound capacity. +

+

+ + Learn more about liquidity + +

+ + ); +} + +export const MoreInfoModal: ParentComponent<{ + linkText: string; + title: string; +}> = (props) => { + const [open, setOpen] = createSignal(false); + + return ( + + + + + + +
+ + + {props.title} + + + + + +
{props.children}
+ + +
+ + + ); +}; diff --git a/src/components/layout/index.tsx b/src/components/layout/index.tsx index e13c99b..8b04b05 100644 --- a/src/components/layout/index.tsx +++ b/src/components/layout/index.tsx @@ -185,7 +185,7 @@ export const SmallAmount: ParentComponent<{ }; export const NiceP: ParentComponent = (props) => { - return

{props.children}

; + return

{props.children}

; }; export const TinyText: ParentComponent = (props) => { diff --git a/src/root.css b/src/root.css index 69a220c..b942007 100644 --- a/src/root.css +++ b/src/root.css @@ -24,6 +24,14 @@ a { @apply underline decoration-light-text hover:decoration-white; } +p { + @apply font-light; +} + +p:not(:last-child) { + @apply mb-2; +} + #video-container { position: relative; width: max-content; diff --git a/src/routes/Receive.tsx b/src/routes/Receive.tsx index aaa5bf6..073285a 100644 --- a/src/routes/Receive.tsx +++ b/src/routes/Receive.tsx @@ -42,6 +42,7 @@ import { MegaCheck } from "~/components/successfail/MegaCheck"; import { ExternalLink } from "~/components/layout/ExternalLink"; import { CopyableQR } from "~/components/CopyableQR"; import { InfoBox } from "~/components/InfoBox"; +import { FeesModal } from "~/components/MoreInfoModal"; type OnChainTx = { transaction: { @@ -83,17 +84,17 @@ function FeeWarning(props: { fee: bigint; flavor: ReceiveFlavor }) { 1000n}> - + A lightning setup fee of{" "} will be charged - if paid over lightning. + if paid over lightning. - + A lightning setup fee of{" "} will be charged - for this receive. + for this receive. @@ -106,17 +107,17 @@ function FeeExplanation(props: { fee: bigint }) { // TODO: probably won't always be a fixed 2500? 1000n}> - + A lightning setup fee of{" "} was charged for this - receive. + receive. 0n}> - + A lightning service fee of{" "} was charged for this - receive. + receive.