aljaz/mutiny-web
1
0
Fork 0
mirror of https://github.com/aljazceru/mutiny-web.git synced 2025-12-18 06:44:27 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: separate amountsats and amountfiat

Browse Source
This commit is contained in:
benalleng
2023-07-24 10:25:43 -04:00
committed by Paul Miller
parent 386c2dc081
commit 36a6f7c84e
9 changed files with 214 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/ActivityItem.tsx
View File

@@ -9,8 +9,8 @@ import { timeAgo } from "~/utils/prettyPrintTime";
import { generateGradient } from "~/utils/gradientHash"; import { generateGradient } from "~/utils/gradientHash";
import { useMegaStore } from "~/state/megaStore"; import { useMegaStore } from "~/state/megaStore";
import { Contact } from "@mutinywallet/mutiny-wasm"; import { Contact } from "@mutinywallet/mutiny-wasm";
import { Amount } from "~/components/Amount";
import { useI18n } from "~/i18n/context"; import { useI18n } from "~/i18n/context";
import { AmountFiat, AmountSats } from "~/components/Amount";
export const ActivityAmount: ParentComponent<{ export const ActivityAmount: ParentComponent<{
amount: string; amount: string;
@@ -20,19 +20,27 @@ export const ActivityAmount: ParentComponent<{
}> = (props) => { }> = (props) => {
return ( return (
<div <div
class="flex flex-col" class="flex flex-col gap-1"
classList={{ classList={{
"items-end": !props.center, "items-end": !props.center,
"items-center": props.center "items-center": props.center
}} }}
> >
<Amount <div
amountSats={Number(props.amount)} class="justify-end"
align="right" classList={{ "text-m-green": props.positive }}
icon={props.positive ? "plus" : undefined} >
showFiat <AmountSats
green={props.positive ? true : false} amountSats={Number(props.amount)}
/> icon={props.positive ? "plus" : undefined}
/>
</div>
<div class="text-sm text-white/70">
<AmountFiat
amountSats={Number(props.amount)}
denominationSize="sm"
/>
</div>
</div> </div>
); );
}; };

170
src/components/Amount.tsx
View File

@@ -12,114 +12,84 @@ function prettyPrintAmount(n?: number | bigint): string {
return n.toLocaleString(); return n.toLocaleString();
} }
export function Amount(props: { export function AmountSats(props: {
amountSats: bigint | number | undefined; amountSats: bigint | number | undefined;
showFiat?: boolean;
loading?: boolean; loading?: boolean;
whiteBg?: boolean;
align?: "left" | "center" | "right";
icon?: "lightning" | "chain" | "plus" | "minus"; icon?: "lightning" | "chain" | "plus" | "minus";
size?: "small" | "large" | "xl"; denominationSize?: "sm" | "lg" | "xl";
green?: boolean;
}) { }) {
const [state, _] = useMegaStore();
const i18n = useI18n(); const i18n = useI18n();
return (
<div class="flex gap-2 items-center">
<Show when={props.icon === "lightning"}>
<img src={bolt} alt="lightning" class="h-[18px]" />
</Show>
<Show when={props.icon === "chain"}>
<img src={chain} alt="chain" class="h-[18px]" />
</Show>
<h1 class="font-light text-right">
<Show when={props.icon === "plus"}>
<span>+</span>
</Show>
<Show when={props.icon === "minus"}>
<span>-</span>
</Show>
{props.loading ? "..." : prettyPrintAmount(props.amountSats)}
&nbsp;
<span
class="font-light text-base"
classList={{
"text-sm": props.denominationSize === "sm",
"text-lg": props.denominationSize === "lg",
"text-xl": props.denominationSize === "xl"
}}
>
<Show
when={
!props.amountSats ||
Number(props.amountSats) > 1 ||
Number(props.amountSats) === 0
}
>
{i18n.t("common.sats")}
</Show>
<Show
when={
props.amountSats && Number(props.amountSats) === 1
}
>
{i18n.t("common.sat")}
</Show>
</span>
</h1>
</div>
);
}
export function AmountFiat(props: {
amountSats: bigint | number | undefined;
loading?: boolean;
denominationSize?: "sm" | "lg" | "xl";
}) {
const i18n = useI18n()
const [state, _] = useMegaStore();
const amountInUsd = () => const amountInUsd = () =>
satsToUsd(state.price, Number(props.amountSats) || 0, true); satsToUsd(state.price, Number(props.amountSats) || 0, true);
return ( return (
<div <h2 class="font-light">
class="flex flex-col gap-1" ~{props.loading ? "..." : amountInUsd()}
classList={{ <span
"items-start": props.align === "left", classList={{
"items-center": props.align === "center", "text-sm": props.denominationSize === "sm",
"items-end": props.align === "right" "text-lg": props.denominationSize === "lg",
}} "text-xl": props.denominationSize === "xl"
> }}
<div class="flex gap-2 items-center"> >
<Show when={props.icon === "lightning"}> &nbsp;{i18n.t("common.usd")}
<img src={bolt} alt="lightning" class="h-[18px]" /> </span>
</Show> </h2>
<Show when={props.icon === "chain"}>
<img src={chain} alt="chain" class="h-[18px]" />
</Show>
<h1
class="font-light text-right"
classList={{
"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="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
}
>
{i18n.t("common.sats")}
</Show>
<Show
when={
props.amountSats &&
Number(props.amountSats) === 1
}
>
{i18n.t("common.sat")}
</Show>
</span>
</h1>
</div>
<Show when={props.showFiat}>
<h2
class="font-light text-white/70"
classList={{
"text-black": 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"
}}
>
~
<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;{i18n.t("common.usd")}
</span>
</h2>
</Show>
</div>
); );
} }
@@ -132,8 +102,8 @@ export function AmountSmall(props: {
{prettyPrintAmount(props.amountSats)}&nbsp; {prettyPrintAmount(props.amountSats)}&nbsp;
<span class="text-sm"> <span class="text-sm">
{props.amountSats === 1 || props.amountSats === 1n {props.amountSats === 1 || props.amountSats === 1n
? `${i18n.t("common.sat")}` ? i18n.t("common.sat")
: `${i18n.t("common.sats")}`} : i18n.t("common.sats")}
</span> </span>
</span> </span>
); );

22
src/components/AmountFiat.tsx
View File

@@ -1,22 +0,0 @@
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>
);
}

44
src/components/BalanceBox.tsx
View File

@@ -1,7 +1,7 @@
import { Show } from "solid-js"; import { Show } from "solid-js";
import { Button, FancyCard, Indicator } from "~/components/layout"; import { Button, FancyCard, Indicator } from "~/components/layout";
import { useMegaStore } from "~/state/megaStore"; import { useMegaStore } from "~/state/megaStore";
import { Amount } from "./Amount"; import { AmountSats, AmountFiat } from "./Amount";
import { A, useNavigate } from "solid-start"; import { A, useNavigate } from "solid-start";
import shuffle from "~/assets/icons/shuffle.svg"; import shuffle from "~/assets/icons/shuffle.svg";
import { useI18n } from "~/i18n/context"; import { useI18n } from "~/i18n/context";
@@ -43,22 +43,40 @@ export default function BalanceBox(props: { loading?: boolean }) {
<> <>
<FancyCard> <FancyCard>
<Show when={!props.loading} fallback={<LoadingShimmer />}> <Show when={!props.loading} fallback={<LoadingShimmer />}>
<Amount <div class="flex flex-col gap-1">
amountSats={state.balance?.lightning || 0} <div class="text-2xl">
showFiat <AmountSats
icon="lightning" amountSats={state.balance?.lightning || 0}
size="xl" icon="lightning"
/> denominationSize="lg"
/>
</div>
<div class="text-lg text-white/70">
<AmountFiat
amountSats={state.balance?.lightning || 0}
denominationSize="sm"
/>
</div>
</div>
</Show> </Show>
<hr class="my-2 border-m-grey-750" /> <hr class="my-2 border-m-grey-750" />
<Show when={!props.loading} fallback={<LoadingShimmer />}> <Show when={!props.loading} fallback={<LoadingShimmer />}>
<div class="flex justify-between"> <div class="flex justify-between">
<Amount <div class="flex flex-col gap-1">
amountSats={totalOnchain()} <div class="text-2xl">
showFiat <AmountSats
icon="chain" amountSats={totalOnchain()}
size="xl" icon="chain"
/> denominationSize="lg"
/>
</div>
<div class="text-lg text-white/70">
<AmountFiat
amountSats={totalOnchain()}
denominationSize="sm"
/>
</div>
</div>
<div class="flex flex-col items-end gap-1 justify-between"> <div class="flex flex-col items-end gap-1 justify-between">
<Show when={state.balance?.unconfirmed != 0n}> <Show when={state.balance?.unconfirmed != 0n}>
<Indicator>Pending</Indicator> <Indicator>Pending</Indicator>

15
src/components/IntegratedQR.tsx
View File

@@ -2,7 +2,7 @@ import { Match, Show, Switch } from "solid-js";
import { QRCodeSVG } from "solid-qr-code"; import { QRCodeSVG } from "solid-qr-code";
import { ReceiveFlavor } from "~/routes/Receive"; import { ReceiveFlavor } from "~/routes/Receive";
import { useCopy } from "~/utils/useCopy"; import { useCopy } from "~/utils/useCopy";
import { Amount } from "./Amount"; import { AmountSats, AmountFiat } from "./Amount";
import { TruncateMiddle } from "./ShareCard"; import { TruncateMiddle } from "./ShareCard";
import copyBlack from "~/assets/icons/copy-black.svg"; import copyBlack from "~/assets/icons/copy-black.svg";
import shareBlack from "~/assets/icons/share-black.svg"; import shareBlack from "~/assets/icons/share-black.svg";
@@ -76,11 +76,14 @@ export function IntegratedQr(props: {
}} }}
> >
<Show when={props.kind !== "onchain"}> <Show when={props.kind !== "onchain"}>
<Amount <div class="flex flex-col gap-1">
amountSats={Number(props.amountSats)} <div class="text-black">
showFiat <AmountSats amountSats={Number(props.amountSats)} />
whiteBg </div>
/> <div class="text-black text-sm">
<AmountFiat amountSats={Number(props.amountSats)} />
</div>
</div>
</Show> </Show>
<KindIndicator kind={props.kind} /> <KindIndicator kind={props.kind} />
</div> </div>

59
src/routes/Receive.tsx
View File

@@ -27,7 +27,7 @@ import NavBar from "~/components/NavBar";
import { useMegaStore } from "~/state/megaStore"; import { useMegaStore } from "~/state/megaStore";
import { objectToSearchParams } from "~/utils/objectToSearchParams"; import { objectToSearchParams } from "~/utils/objectToSearchParams";
import mempoolTxUrl from "~/utils/mempoolTxUrl"; import mempoolTxUrl from "~/utils/mempoolTxUrl";
import { Amount, AmountSmall } from "~/components/Amount"; import { AmountSats, AmountFiat, AmountSmall } from "~/components/Amount";
import { BackLink } from "~/components/layout/BackLink"; import { BackLink } from "~/components/layout/BackLink";
import { TagEditor } from "~/components/TagEditor"; import { TagEditor } from "~/components/TagEditor";
import { StyledRadioGroup } from "~/components/layout/Radio"; import { StyledRadioGroup } from "~/components/layout/Radio";
@@ -453,18 +453,32 @@ export default function Receive() {
? i18n.t("receive.payment_received") ? i18n.t("receive.payment_received")
: i18n.t("receive.payment_initiated")} : i18n.t("receive.payment_initiated")}
</h1> </h1>
<Amount <div class="flex flex-col gap-1 items-center">
amountSats={ <div class="text-xl">
receiveState() === "paid" && <AmountSats
paidState() === "lightning_paid" amountSats={
? paymentInvoice()?.amount_sats receiveState() === "paid" &&
: paymentTx()?.received paidState() === "lightning_paid"
} ? paymentInvoice()
showFiat ?.amount_sats
align="center" : paymentTx()?.received
size="large" }
icon="plus" icon="plus"
/> />
</div>
<div class="text-white/70">
<AmountFiat
amountSats={
receiveState() === "paid" &&
paidState() === "lightning_paid"
? paymentInvoice()
?.amount_sats
: paymentTx()?.received
}
denominationSize="sm"
/>
</div>
</div>
<hr class="w-16 bg-m-grey-400" /> <hr class="w-16 bg-m-grey-400" />
<Show <Show
when={ when={
@@ -477,12 +491,19 @@ export default function Receive() {
{i18n.t("common.fee")} {i18n.t("common.fee")}
</p> </p>
<div class="flex items-start gap-1"> <div class="flex items-start gap-1">
<Amount <div class="flex flex-col gap-1 items-end">
amountSats={lspFee()} <div class="text-right text-sm">
align="right" <AmountSats
size="small" amountSats={lspFee()}
showFiat denominationSize="sm"
/> />
</div>
<div class="text-xs text-white/70">
<AmountFiat
amountSats={lspFee()}
/>
</div>
</div>
<div class="flex items-start py-[1px]"> <div class="flex items-start py-[1px]">
{/*TODO: Add different fee hints insode of <FeesModal />*/} {/*TODO: Add different fee hints insode of <FeesModal />*/}
<FeesModal icon /> <FeesModal icon />

8
src/routes/Redshift.tsx
View File

@@ -41,7 +41,7 @@ import { Button } from "~/components/layout/Button";
import { ProgressBar } from "~/components/layout/ProgressBar"; import { ProgressBar } from "~/components/layout/ProgressBar";
import { MutinyChannel } from "@mutinywallet/mutiny-wasm"; import { MutinyChannel } from "@mutinywallet/mutiny-wasm";
import mempoolTxUrl from "~/utils/mempoolTxUrl"; import mempoolTxUrl from "~/utils/mempoolTxUrl";
import { Amount } from "~/components/Amount"; import { AmountSats } from "~/components/Amount";
import { getRedshifted, setRedshifted } from "~/utils/fakeLabels"; import { getRedshifted, setRedshifted } from "~/utils/fakeLabels";
import { Network } from "~/logic/mutinyWalletSetup"; import { Network } from "~/logic/mutinyWalletSetup";
@@ -165,17 +165,17 @@ function RedshiftReport(props: { redshift: RedshiftResult; utxo: UtxoItem }) {
</Show> </Show>
</KV> */} </KV> */}
<KV key="Starting amount"> <KV key="Starting amount">
<Amount <AmountSats
amountSats={redshiftResource()!.amount_sats} amountSats={redshiftResource()!.amount_sats}
/> />
</KV> </KV>
<KV key="Fees paid"> <KV key="Fees paid">
<Amount <AmountSats
amountSats={redshiftResource()!.fees_paid} amountSats={redshiftResource()!.fees_paid}
/> />
</KV> </KV>
<KV key="Change"> <KV key="Change">
<Amount <AmountSats
amountSats={redshiftResource()!.change_amt} amountSats={redshiftResource()!.change_amt}
/> />
</KV> </KV>

50
src/routes/Send.tsx
View File

@@ -7,7 +7,7 @@ import {
createSignal, createSignal,
onMount onMount
} from "solid-js"; } from "solid-js";
import { Amount } from "~/components/Amount"; import { AmountSats, AmountFiat } from "~/components/Amount";
import NavBar from "~/components/NavBar"; import NavBar from "~/components/NavBar";
import { import {
Button, Button,
@@ -610,27 +610,45 @@ export default function Send() {
? "Payment Initiated" ? "Payment Initiated"
: sentDetails()?.failure_reason} : sentDetails()?.failure_reason}
</h1> </h1>
<Amount <div class="flex flex-col gap-1 items-center">
amountSats={sentDetails()?.amount} <div class="text-xl">
showFiat <AmountSats
align="center" amountSats={sentDetails()?.amount}
size="large" icon="minus"
icon="minus" />
/> </div>
<div class="text-white/70">
<AmountFiat
amountSats={sentDetails()?.amount}
denominationSize="sm"
/>
</div>
</div>
<hr class="w-16 bg-m-grey-400" /> <hr class="w-16 bg-m-grey-400" />
<div class="flex flex-row items-start gap-3"> <div class="flex flex-row items-start gap-3">
<p class="text-m-grey-400 text-sm leading-[17px] text-center"> <p class="text-m-grey-400 text-sm leading-[17px] text-center">
{i18n.t("common.fee")} {i18n.t("common.fee")}
</p> </p>
<div class="flex items-start gap-1"> <div class="flex items-start gap-1">
<Amount <div class="flex flex-col gap-1 items-end">
amountSats={ <div class="text-right text-sm">
sentDetails()?.fee_estimate <AmountSats
} amountSats={
align="right" sentDetails()
size="small" ?.fee_estimate
showFiat }
/> denominationSize="sm"
/>
</div>
<div class="text-xs text-white/70">
<AmountFiat
amountSats={
sentDetails()
?.fee_estimate
}
/>
</div>
</div>
<div class="flex items-start py-[1px]"> <div class="flex items-start py-[1px]">
<FeesModal icon /> <FeesModal icon />
</div> </div>

17
src/routes/Swap.tsx
View File

@@ -35,7 +35,7 @@ import { SuccessModal } from "~/components/successfail/SuccessModal";
import { ExternalLink } from "~/components/layout/ExternalLink"; import { ExternalLink } from "~/components/layout/ExternalLink";
import { Network } from "~/logic/mutinyWalletSetup"; import { Network } from "~/logic/mutinyWalletSetup";
import { useI18n } from "~/i18n/context"; import { useI18n } from "~/i18n/context";
import { AmountFiat } from "~/components/AmountFiat"; import { AmountFiat } from "~/components/Amount";
const CHANNEL_FEE_ESTIMATE_ADDRESS = const CHANNEL_FEE_ESTIMATE_ADDRESS =
"bc1qf7546vg73ddsjznzq57z3e8jdn6gtw6au576j07kt6d9j7nz8mzsyn6lgf"; "bc1qf7546vg73ddsjznzq57z3e8jdn6gtw6au576j07kt6d9j7nz8mzsyn6lgf";
@@ -305,13 +305,14 @@ export default function Swap() {
"0"}{" "} "0"}{" "}
{i18n.t("swap.sats_added")} {i18n.t("swap.sats_added")}
</p> </p>
<AmountFiat <div class="text-sm text-center text-white/70">
amountSats={ <AmountFiat
channelOpenResult()?.channel amountSats={
?.balance channelOpenResult()?.channel
} ?.balance
classes="text-sm text-center" }
/> />
</div>
</div> </div>
<hr class="w-16 bg-m-grey-400" /> <hr class="w-16 bg-m-grey-400" />
<Show <Show