diff --git a/src/components/ActivityItem.tsx b/src/components/ActivityItem.tsx index d2ea69c..8d48195 100644 --- a/src/components/ActivityItem.tsx +++ b/src/components/ActivityItem.tsx @@ -9,8 +9,8 @@ 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"; import { useI18n } from "~/i18n/context"; +import { AmountFiat, AmountSats } from "~/components/Amount"; export const ActivityAmount: ParentComponent<{ amount: string; @@ -20,19 +20,27 @@ export const ActivityAmount: ParentComponent<{ }> = (props) => { return (
- +
+ +
+
+ +
); }; diff --git a/src/components/Amount.tsx b/src/components/Amount.tsx index 16e5391..892494b 100644 --- a/src/components/Amount.tsx +++ b/src/components/Amount.tsx @@ -12,114 +12,84 @@ function prettyPrintAmount(n?: number | bigint): string { return n.toLocaleString(); } -export function Amount(props: { +export function AmountSats(props: { amountSats: bigint | number | undefined; - showFiat?: boolean; loading?: boolean; - whiteBg?: boolean; - align?: "left" | "center" | "right"; icon?: "lightning" | "chain" | "plus" | "minus"; - size?: "small" | "large" | "xl"; - green?: boolean; + denominationSize?: "sm" | "lg" | "xl"; }) { - const [state, _] = useMegaStore(); const i18n = useI18n(); + return ( +
+ + lightning + + + chain + +

+ + + + + + - + + {props.loading ? "..." : prettyPrintAmount(props.amountSats)} +   + + 1 || + Number(props.amountSats) === 0 + } + > + {i18n.t("common.sats")} + + + {i18n.t("common.sat")} + + +

+
+ ); +} + +export function AmountFiat(props: { + amountSats: bigint | number | undefined; + loading?: boolean; + denominationSize?: "sm" | "lg" | "xl"; +}) { + const i18n = useI18n() + const [state, _] = useMegaStore(); const amountInUsd = () => satsToUsd(state.price, Number(props.amountSats) || 0, true); return ( -
-
- - lightning - - - chain - -

- - + - - - - - - {props.loading - ? "..." - : prettyPrintAmount(props.amountSats)} -   - - 1 || - Number(props.amountSats) === 0 - } - > - {i18n.t("common.sats")} - - - {i18n.t("common.sat")} - - -

-
- -

- ~ - -   - - {props.loading ? "..." : amountInUsd()} - -  {i18n.t("common.usd")} - -

- -
+

+ ~{props.loading ? "..." : amountInUsd()} + +  {i18n.t("common.usd")} + +

); } @@ -132,8 +102,8 @@ export function AmountSmall(props: { {prettyPrintAmount(props.amountSats)}  {props.amountSats === 1 || props.amountSats === 1n - ? `${i18n.t("common.sat")}` - : `${i18n.t("common.sats")}`} + ? i18n.t("common.sat") + : i18n.t("common.sats")} ); diff --git a/src/components/AmountFiat.tsx b/src/components/AmountFiat.tsx deleted file mode 100644 index f1e2a76..0000000 --- a/src/components/AmountFiat.tsx +++ /dev/null @@ -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 ( -
-

- ~{props.loading ? "..." : amountInUsd()} -  USD -

-
- ); -} diff --git a/src/components/BalanceBox.tsx b/src/components/BalanceBox.tsx index 9856f3b..54eba82 100644 --- a/src/components/BalanceBox.tsx +++ b/src/components/BalanceBox.tsx @@ -1,7 +1,7 @@ import { Show } from "solid-js"; import { Button, FancyCard, Indicator } from "~/components/layout"; import { useMegaStore } from "~/state/megaStore"; -import { Amount } from "./Amount"; +import { AmountSats, AmountFiat } from "./Amount"; import { A, useNavigate } from "solid-start"; import shuffle from "~/assets/icons/shuffle.svg"; import { useI18n } from "~/i18n/context"; @@ -43,22 +43,40 @@ export default function BalanceBox(props: { loading?: boolean }) { <> }> - +
+
+ +
+
+ +
+
}>
- +
+
+ +
+
+ +
+
Pending diff --git a/src/components/IntegratedQR.tsx b/src/components/IntegratedQR.tsx index 0687a83..9e89b05 100644 --- a/src/components/IntegratedQR.tsx +++ b/src/components/IntegratedQR.tsx @@ -2,7 +2,7 @@ import { Match, Show, Switch } from "solid-js"; import { QRCodeSVG } from "solid-qr-code"; import { ReceiveFlavor } from "~/routes/Receive"; import { useCopy } from "~/utils/useCopy"; -import { Amount } from "./Amount"; +import { AmountSats, AmountFiat } from "./Amount"; import { TruncateMiddle } from "./ShareCard"; import copyBlack from "~/assets/icons/copy-black.svg"; import shareBlack from "~/assets/icons/share-black.svg"; @@ -76,11 +76,14 @@ export function IntegratedQr(props: { }} > - +
+
+ +
+
+ +
+
diff --git a/src/routes/Receive.tsx b/src/routes/Receive.tsx index f40c54b..6b30aed 100644 --- a/src/routes/Receive.tsx +++ b/src/routes/Receive.tsx @@ -27,7 +27,7 @@ import NavBar from "~/components/NavBar"; import { useMegaStore } from "~/state/megaStore"; import { objectToSearchParams } from "~/utils/objectToSearchParams"; 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 { TagEditor } from "~/components/TagEditor"; import { StyledRadioGroup } from "~/components/layout/Radio"; @@ -453,18 +453,32 @@ export default function Receive() { ? i18n.t("receive.payment_received") : i18n.t("receive.payment_initiated")} - +
+
+ +
+
+ +
+
- +
+
+ +
+
+ +
+
{/*TODO: Add different fee hints insode of */} diff --git a/src/routes/Redshift.tsx b/src/routes/Redshift.tsx index 61965c8..2753e7f 100644 --- a/src/routes/Redshift.tsx +++ b/src/routes/Redshift.tsx @@ -41,7 +41,7 @@ import { Button } from "~/components/layout/Button"; import { ProgressBar } from "~/components/layout/ProgressBar"; import { MutinyChannel } from "@mutinywallet/mutiny-wasm"; import mempoolTxUrl from "~/utils/mempoolTxUrl"; -import { Amount } from "~/components/Amount"; +import { AmountSats } from "~/components/Amount"; import { getRedshifted, setRedshifted } from "~/utils/fakeLabels"; import { Network } from "~/logic/mutinyWalletSetup"; @@ -165,17 +165,17 @@ function RedshiftReport(props: { redshift: RedshiftResult; utxo: UtxoItem }) { */} - - - diff --git a/src/routes/Send.tsx b/src/routes/Send.tsx index f44b619..c801d04 100644 --- a/src/routes/Send.tsx +++ b/src/routes/Send.tsx @@ -7,7 +7,7 @@ import { createSignal, onMount } from "solid-js"; -import { Amount } from "~/components/Amount"; +import { AmountSats, AmountFiat } from "~/components/Amount"; import NavBar from "~/components/NavBar"; import { Button, @@ -610,27 +610,45 @@ export default function Send() { ? "Payment Initiated" : sentDetails()?.failure_reason} - +
+
+ +
+
+ +
+

{i18n.t("common.fee")}

- +
+
+ +
+
+ +
+
diff --git a/src/routes/Swap.tsx b/src/routes/Swap.tsx index 6c57323..19e670d 100644 --- a/src/routes/Swap.tsx +++ b/src/routes/Swap.tsx @@ -35,7 +35,7 @@ import { SuccessModal } from "~/components/successfail/SuccessModal"; import { ExternalLink } from "~/components/layout/ExternalLink"; import { Network } from "~/logic/mutinyWalletSetup"; import { useI18n } from "~/i18n/context"; -import { AmountFiat } from "~/components/AmountFiat"; +import { AmountFiat } from "~/components/Amount"; const CHANNEL_FEE_ESTIMATE_ADDRESS = "bc1qf7546vg73ddsjznzq57z3e8jdn6gtw6au576j07kt6d9j7nz8mzsyn6lgf"; @@ -305,13 +305,14 @@ export default function Swap() { "0"}{" "} {i18n.t("swap.sats_added")}

- +
+ +