From d810ff69db9b891ea08ed2c570beaf7d78725f23 Mon Sep 17 00:00:00 2001 From: Paul Miller Date: Mon, 5 Feb 2024 17:39:52 +0000 Subject: [PATCH] fedi swap edit and "stages" --- src/components/Failure.tsx | 51 +----- src/i18n/en/translations.ts | 3 + src/routes/Send.tsx | 8 +- src/routes/SwapLightning.tsx | 290 ++++++++++++++++++++--------------- 4 files changed, 175 insertions(+), 177 deletions(-) diff --git a/src/components/Failure.tsx b/src/components/Failure.tsx index 7c4465bbb..6aefbbf91 100644 --- a/src/components/Failure.tsx +++ b/src/components/Failure.tsx @@ -1,53 +1,8 @@ -import { MutinyInvoice } from "@mutinywallet/mutiny-wasm"; -import { A, useNavigate, useSearchParams } from "@solidjs/router"; -import { - createEffect, - createMemo, - createResource, - createSignal, - JSX, - Match, - onMount, - Show, - Suspense, - Switch -} from "solid-js"; +import { A } from "@solidjs/router"; +import { Match, Switch } from "solid-js"; -import bolt from "~/assets/icons/bolt.svg"; -import chain from "~/assets/icons/chain.svg"; -import close from "~/assets/icons/close.svg"; -import { - ActivityDetailsModal, - AmountEditable, - AmountFiat, - AmountSats, - BackPop, - Button, - DefaultMain, - Fee, - FeeDisplay, - HackActivityType, - InfoBox, - LabelCircle, - LoadingShimmer, - MegaCheck, - MegaClock, - MegaEx, - MethodChoice, - MutinyWalletGuard, - NavBar, - showToast, - SimpleInput, - SmallHeader, - StringShower, - SuccessModal, - UnstyledBackPop, - VStack -} from "~/components"; +import { InfoBox, MegaClock, MegaEx } from "~/components"; import { useI18n } from "~/i18n/context"; -import { ParsedParams } from "~/logic/waila"; -import { useMegaStore } from "~/state/megaStore"; -import { eify, vibrateSuccess } from "~/utils"; export function Failure(props: { reason: string }) { const i18n = useI18n(); diff --git a/src/i18n/en/translations.ts b/src/i18n/en/translations.ts index 22e1fb818..1bdb96e21 100644 --- a/src/i18n/en/translations.ts +++ b/src/i18n/en/translations.ts @@ -603,7 +603,10 @@ export default { swap_lightning: { insufficient_funds: "You don't have enough funds to swap to lightning", header: "Swap to Lightning", + header_preview: "Preview Swap", initiated: "Swap Initiated", + too_small: + "Invalid amount entered. You need to swap at least 100k sats.", sats_added: "+{{amount}} sats will be added to your Lightning balance", sats_fee: "+{{amount}} sats fee", confirm_swap: "Confirm Swap", diff --git a/src/routes/Send.tsx b/src/routes/Send.tsx index 14c76f0f5..6438ce518 100644 --- a/src/routes/Send.tsx +++ b/src/routes/Send.tsx @@ -1,5 +1,5 @@ import { MutinyInvoice, TagItem } from "@mutinywallet/mutiny-wasm"; -import { A, useNavigate, useSearchParams } from "@solidjs/router"; +import { useNavigate, useSearchParams } from "@solidjs/router"; import { createEffect, createMemo, @@ -33,8 +33,6 @@ import { LabelCircle, LoadingShimmer, MegaCheck, - MegaClock, - MegaEx, MethodChoice, MutinyWalletGuard, NavBar, @@ -236,8 +234,8 @@ export function Send() { ? sentDetails()?.txid : undefined : sentDetails() - ? sentDetails()?.payment_hash - : undefined; + ? sentDetails()?.payment_hash + : undefined; const kind = sentDetails()?.txid ? "OnChain" : "Lightning"; console.log("Opening details modal: ", paymentTxId, kind); diff --git a/src/routes/SwapLightning.tsx b/src/routes/SwapLightning.tsx index 43c5a96a9..3b0c88e0b 100644 --- a/src/routes/SwapLightning.tsx +++ b/src/routes/SwapLightning.tsx @@ -1,23 +1,13 @@ -import { createForm, required } from "@modular-forms/solid"; import { FedimintSweepResult } from "@mutinywallet/mutiny-wasm"; import { useNavigate } from "@solidjs/router"; -import { - createMemo, - createResource, - createSignal, - For, - Match, - Show, - Switch -} from "solid-js"; +import { createMemo, createSignal, Match, Show, Switch } from "solid-js"; import { - ActivityDetailsModal, AmountEditable, AmountFiat, + BackButton, BackLink, Button, - Card, DefaultMain, Failure, Fee, @@ -25,17 +15,13 @@ import { InfoBox, LargeHeader, MegaCheck, - MegaEx, MutinyWalletGuard, NavBar, ReceiveWarnings, - showToast, SuccessModal, - TextField, VStack } from "~/components"; import { useI18n } from "~/i18n/context"; -import { Network } from "~/logic/mutinyWalletSetup"; import { useMegaStore } from "~/state/megaStore"; import { eify, vibrateSuccess } from "~/utils"; @@ -49,11 +35,14 @@ export function SwapLightning() { const navigate = useNavigate(); const i18n = useI18n(); + const [stage, setStage] = createSignal<"start" | "preview" | "done">( + "start" + ); + const [amountSats, setAmountSats] = createSignal(0n); const [feeSats, setFeeSats] = createSignal(0n); const [maxFederationBalanceBeforeSwap, setMaxFederationBalanceBeforeSwap] = createSignal(0n); - const [previewFee, setPreviewFee] = createSignal(false); const [loading, setLoading] = createSignal(false); @@ -62,49 +51,46 @@ export function SwapLightning() { function resetState() { setAmountSats(0n); setFeeSats(0n); - setPreviewFee(false); setMaxFederationBalanceBeforeSwap(0n); setLoading(false); setSweepResult(undefined); + setStage("start"); } const handleSwap = async () => { - if (canSwap()) { - try { - setLoading(true); + try { + setLoading(true); + setFeeEstimateWarning(undefined); - if (isMax()) { - const result = - await state.mutiny_wallet?.sweep_federation_balance( - undefined - ); + if (isMax()) { + const result = + await state.mutiny_wallet?.sweep_federation_balance( + undefined + ); - setSweepResult({ result: result }); - } else { - const result = - await state.mutiny_wallet?.sweep_federation_balance( - amountSats() - ); + setSweepResult({ result: result }); + } else { + const result = + await state.mutiny_wallet?.sweep_federation_balance( + amountSats() + ); - setSweepResult({ result: result }); - } - - await vibrateSuccess(); - } catch (e) { - const error = eify(e); - setSweepResult({ failure_reason: error.message }); - console.error(e); - } finally { - setLoading(false); + setSweepResult({ result: result }); } + + await vibrateSuccess(); + } catch (e) { + const error = eify(e); + setSweepResult({ failure_reason: error.message }); + console.error(e); + } finally { + setLoading(false); } }; const canSwap = () => { const balance = state.balance?.federation || 0n; - const network = state.mutiny_wallet?.get_network() as Network; - - return amountSats() <= balance; + return amountSats() > 0n && amountSats() <= balance; }; const amountWarning = () => { @@ -135,43 +121,53 @@ export function SwapLightning() { return feeSats() !== 0n; }); + const [feeEstimateWarning, setFeeEstimateWarning] = createSignal(); + const feeEstimate = async () => { - if (canSwap()) { - try { - setLoading(true); - if (isMax()) { - const fee = - await state.mutiny_wallet?.estimate_sweep_federation_fee( - undefined - ); - setFeeSats(fee); - setMaxFederationBalanceBeforeSwap(calculateMaxFederation()); - setPreviewFee(true); - } else { - const fee = - await state.mutiny_wallet?.estimate_sweep_federation_fee( - amountSats() - ); - setFeeSats(fee); - setMaxFederationBalanceBeforeSwap(calculateMaxFederation()); - setPreviewFee(true); - } - } catch (e) { - console.error(e); - return undefined; - } finally { - setLoading(false); + try { + setLoading(true); + setFeeEstimateWarning(undefined); + + const fee = + await state.mutiny_wallet?.estimate_sweep_federation_fee( + isMax() ? undefined : amountSats() + ); + + if (fee) { + setFeeSats(fee); } - } + setMaxFederationBalanceBeforeSwap(calculateMaxFederation()); - return undefined; + setStage("preview"); + } catch (e) { + console.error(e); + setFeeEstimateWarning(i18n.t("swap_lightning.too_small")); + } finally { + setLoading(false); + } }; return ( - - {i18n.t("swap_lightning.header")} + + + + + {i18n.t("swap_lightning.header")} + + + + setStage("start")} + showOnDesktop + /> + + {i18n.t("swap_lightning.header_preview")} + + + - + @@ -221,55 +217,101 @@ export function SwapLightning() {
- - - - - - - 0n}> - {amountWarning()} - - -
- - - + + + + + + 0n} + > + + {amountWarning()} + + + + + {feeEstimateWarning()} + + + +
+ + + + + + + + + + + 0n} + > + + {amountWarning()} + + + +
+ + + + +