aljaz/mutiny-web
1
0
Fork 0
mirror of https://github.com/aljazceru/mutiny-web.git synced 2025-12-30 04:14:25 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix alignment of fee display

Browse Source
This commit is contained in:
Paul Miller
2023-08-01 16:39:00 -05:00
parent 3d38d2a65f
commit 11ce48414f
4 changed files with 35 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/Fee.tsx Normal file
View File

@@ -0,0 +1,29 @@
import { useI18n } from "~/i18n/context";
import { AmountFiat, AmountSats } from "~/components/Amount";
import { FeesModal } from "~/components/MoreInfoModal";
export function Fee(props: { amountSats?: bigint | number }) {
const i18n = useI18n();
return (
<div class="flex gap-3">
<p class="text-m-grey-400 text-sm">{i18n.t("common.fee")}</p>
<div class="flex gap-1">
<div class="flex flex-col gap-1">
<div class="text-right text-sm">
<AmountSats
amountSats={props.amountSats}
denominationSize="sm"
/>
</div>
<div class="text-xs text-white/70">
<AmountFiat amountSats={props.amountSats} />
</div>
</div>
<div>
<FeesModal icon />
</div>
</div>
</div>
);
}

26
src/routes/Receive.tsx
View File

@@ -47,6 +47,7 @@ import side2side from "~/assets/icons/side-to-side.svg";
import { useI18n } from "~/i18n/context";
import eify from "~/utils/eify";
import { matchError } from "~/logic/errorDispatch";
import { Fee } from "~/components/Fee";
type OnChainTx = {
transaction: {
@@ -486,30 +487,7 @@ export default function Receive() {
paidState() === "lightning_paid"
}
>
<div class="flex flex-row items-start gap-3">
<p class="text-m-grey-400 text-sm leading-[17px] items-center">
{i18n.t("common.fee")}
</p>
<div class="flex items-start gap-1">
<div class="flex flex-col gap-1 items-end">
<div class="text-right text-sm">
<AmountSats
amountSats={lspFee()}
denominationSize="sm"
/>
</div>
<div class="text-xs text-white/70">
<AmountFiat
amountSats={lspFee()}
/>
</div>
</div>
<div class="flex items-start py-[1px]">
{/*TODO: Add different fee hints insode of <FeesModal />*/}
<FeesModal icon />
</div>
</div>
</div>
<Fee amountSats={lspFee()} />
</Show>
{/*TODO: Confirmation time estimate still not possible needs to be implemented in mutiny-node first
{/*TODO: add internal payment detail page* for lightning*/}

32
src/routes/Send.tsx
View File

@@ -44,10 +44,10 @@ import { ExternalLink } from "~/components/layout/ExternalLink";
import { InfoBox } from "~/components/InfoBox";
import { useI18n } from "~/i18n/context";
import { ParsedParams, toParsedParams } from "~/logic/waila";
import { FeesModal } from "~/components/MoreInfoModal";
import { Clipboard } from "@capacitor/clipboard";
import { Capacitor } from "@capacitor/core";
import { FeedbackLink } from "./Feedback";
import { Fee } from "~/components/Fee";
export type SendSource = "lightning" | "onchain";
@@ -623,35 +623,7 @@ export default function Send() {
</div>
</div>
<hr class="w-16 bg-m-grey-400" />
<div class="flex flex-row items-start gap-3">
<p class="text-m-grey-400 text-sm leading-[17px] text-center">
{i18n.t("common.fee")}
</p>
<div class="flex items-start gap-1">
<div class="flex flex-col gap-1 items-end">
<div class="text-right text-sm">
<AmountSats
amountSats={
sentDetails()
?.fee_estimate
}
denominationSize="sm"
/>
</div>
<div class="text-xs text-white/70">
<AmountFiat
amountSats={
sentDetails()
?.fee_estimate
}
/>
</div>
</div>
<div class="flex items-start py-[1px]">
<FeesModal icon />
</div>
</div>
</div>
<Fee amountSats={sentDetails()?.fee_estimate} />
<Show when={sentDetails()?.txid}>
<ExternalLink
href={mempoolTxUrl(

2
src/routes/Storybook.tsx
View File

@@ -1,4 +1,5 @@
import { AmountCard } from "~/components/AmountCard";
import { Fee } from "~/components/Fee";
import NavBar from "~/components/NavBar";
import { OnboardWarning } from "~/components/OnboardWarning";
import { ShareCard } from "~/components/ShareCard";
@@ -24,6 +25,7 @@ export default function Admin() {
<Button loading intent="blue">
Button
</Button>
<Fee amountSats={15000n} />
</VStack>
</DefaultMain>
<NavBar activeTab="none" />