Skip to content

Commit

Permalink
feat: add send to lightning address (#520)
Browse files Browse the repository at this point in the history
* feat: add send to lightning address

* chore: update csp in http_service

* chore: refactor

* chore: remove regexes

* chore: pass lnurlpresponse in state

* chore: remove comments

* chore: avoid multiple calls to fetch

* chore: rename Send folder

* chore: get recipient from param

* fix: rename send

* fix: balance card

* chore: change error message

* chore: dry up lnurlpay and redirect if state is empty

* chore: simplify numberformat usage

* fix: amount formatting on confirm payment page

* chore: ensure preimage in pay response

* fix: unreliable multi pay invoice controller test

* fix: unreliable multi pay invoice controller test

* chore: remove recipient param

---------

Co-authored-by: Roland Bewick <roland.bewick@gmail.com>
  • Loading branch information
im-adithya and rolznz authored Aug 27, 2024
1 parent 4ab48ed commit 7e8da27
Show file tree
Hide file tree
Showing 14 changed files with 449 additions and 280 deletions.
51 changes: 51 additions & 0 deletions frontend/src/components/BalanceCard.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
import { LucideIcon } from "lucide-react";
import { Link } from "react-router-dom";
import { Button } from "src/components/ui/button";
import {
Card,
CardContent,
CardFooter,
CardHeader,
CardTitle,
} from "src/components/ui/card";

type BalanceCardProps = {
title: string;
balance: number;
buttonTitle: string;
buttonLink: string;
hasChannelManagement: boolean;
BalanceCardIcon: LucideIcon;
};

function BalanceCard({
title,
balance,
buttonTitle,
buttonLink,
hasChannelManagement,
BalanceCardIcon,
}: BalanceCardProps) {
return (
<Card className="w-full hidden md:block self-start">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">{title}</CardTitle>
<BalanceCardIcon className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold balance sensitive">
{new Intl.NumberFormat().format(Math.floor(balance / 1000))} sats
</div>
</CardContent>
{hasChannelManagement && (
<CardFooter className="flex justify-end">
<Link to={buttonLink}>
<Button variant="outline">{buttonTitle}</Button>
</Link>
</CardFooter>
)}
</Card>
);
}

export default BalanceCard;
2 changes: 1 addition & 1 deletion frontend/src/components/PodcastingInfo.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ function PodcastingInfo({ boost }: { boost: Boostagram }) {
<div className="mt-6">
<p>Total amount</p>
<p className="text-muted-foreground break-all">
{new Intl.NumberFormat(undefined, {}).format(
{new Intl.NumberFormat().format(
Math.floor(boost.valueMsatTotal / 1000)
)}{" "}
{Math.floor(boost.valueMsatTotal / 1000) == 1 ? "sat" : "sats"}
Expand Down
8 changes: 3 additions & 5 deletions frontend/src/components/TransactionItem.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ function TransactionItem({ tx }: Props) {
)}
>
{type == "outgoing" ? "-" : "+"}
{new Intl.NumberFormat(undefined, {}).format(
{new Intl.NumberFormat().format(
Math.floor(tx.amount / 1000)
)}{" "}
</p>
Expand Down Expand Up @@ -147,9 +147,7 @@ function TransactionItem({ tx }: Props) {
</div>
<div className="ml-4">
<p className="text-xl md:text-2xl font-semibold">
{new Intl.NumberFormat(undefined, {}).format(
Math.floor(tx.amount / 1000)
)}{" "}
{new Intl.NumberFormat().format(Math.floor(tx.amount / 1000))}{" "}
{Math.floor(tx.amount / 1000) == 1 ? "sat" : "sats"}
</p>
{/* <p className="text-sm md:text-base text-muted-foreground">
Expand All @@ -169,7 +167,7 @@ function TransactionItem({ tx }: Props) {
<div className="mt-6">
<p>Fee</p>
<p className="text-muted-foreground">
{new Intl.NumberFormat(undefined, {}).format(
{new Intl.NumberFormat().format(
Math.floor(tx.feesPaid / 1000)
)}{" "}
{Math.floor(tx.feesPaid / 1000) == 1 ? "sat" : "sats"}
Expand Down
41 changes: 41 additions & 0 deletions frontend/src/components/layouts/SendLayout.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import { ArrowUp } from "lucide-react";
import { Outlet } from "react-router-dom";
import AppHeader from "src/components/AppHeader";
import BalanceCard from "src/components/BalanceCard";
import Loading from "src/components/Loading";
import { useBalances } from "src/hooks/useBalances";
import { useChannels } from "src/hooks/useChannels";

import { useInfo } from "src/hooks/useInfo";

export default function Send() {
const { hasChannelManagement } = useInfo();
const { data: balances } = useBalances();
const { data: channels } = useChannels();

if (!balances || !channels) {
return <Loading />;
}

return (
<div className="grid gap-5">
<AppHeader
title="Send"
description="Pay a lightning invoice created by any bitcoin lightning wallet"
/>
<div className="flex gap-12 w-full">
<div className="w-full max-w-lg">
<Outlet />
</div>
<BalanceCard
balance={balances.lightning.totalSpendable}
title="Spending Balance"
buttonTitle="Top Up"
buttonLink="/channels/outgoing"
BalanceCardIcon={ArrowUp}
hasChannelManagement={!!hasChannelManagement}
/>
</div>
</div>
);
}
24 changes: 23 additions & 1 deletion frontend/src/routes.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { Navigate } from "react-router-dom";
import AppLayout from "src/components/layouts/AppLayout";
import SendLayout from "src/components/layouts/SendLayout";
import SettingsLayout from "src/components/layouts/SettingsLayout";
import TwoColumnFullScreenLayout from "src/components/layouts/TwoColumnFullScreenLayout";
import { DefaultRedirect } from "src/components/redirects/DefaultRedirect";
Expand Down Expand Up @@ -57,6 +58,9 @@ import Receive from "src/screens/wallet/Receive";
import Send from "src/screens/wallet/Send";
import SignMessage from "src/screens/wallet/SignMessage";
import WithdrawOnchainFunds from "src/screens/wallet/WithdrawOnchainFunds";
import ConfirmPayment from "src/screens/wallet/send/ConfirmPayment";
import LnurlPay from "src/screens/wallet/send/LnurlPay";
import PaymentSuccess from "src/screens/wallet/send/PaymentSuccess";

const routes = [
{
Expand Down Expand Up @@ -95,8 +99,26 @@ const routes = [
},
{
path: "send",
element: <Send />,
element: <SendLayout />,
handle: { crumb: () => "Send" },
children: [
{
index: true,
element: <Send />,
},
{
path: "lnurl-pay",
element: <LnurlPay />,
},
{
path: "confirm-payment",
element: <ConfirmPayment />,
},
{
path: "success",
element: <PaymentSuccess />,
},
],
},
{
path: "sign-message",
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/screens/channels/Channels.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -387,7 +387,7 @@ export default function Channels() {
)}
{balances && (
<div className="text-2xl font-bold balance sensitive">
{new Intl.NumberFormat(undefined, {}).format(
{new Intl.NumberFormat().format(
Math.floor(balances.lightning.totalSpendable / 1000)
)}{" "}
sats
Expand Down
43 changes: 9 additions & 34 deletions frontend/src/screens/wallet/Receive.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { AlertTriangle, ArrowDown, CircleCheck, CopyIcon } from "lucide-react";
import React from "react";
import { Link } from "react-router-dom";
import AppHeader from "src/components/AppHeader";
import BalanceCard from "src/components/BalanceCard";
import Loading from "src/components/Loading";
import QRCode from "src/components/QRCode";
import {
Expand All @@ -14,7 +15,6 @@ import { Button } from "src/components/ui/button";
import {
Card,
CardContent,
CardFooter,
CardHeader,
CardTitle,
} from "src/components/ui/card";
Expand Down Expand Up @@ -237,39 +237,14 @@ export default function Receive() {
)}
</div>
{hasChannelManagement && (
<Card className="w-full hidden md:block self-start">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">
Receiving Capacity
</CardTitle>
<ArrowDown className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
{!balances && (
<div>
<div className="animate-pulse d-inline ">
<div className="h-2.5 bg-primary rounded-full w-12 my-2"></div>
</div>
</div>
)}
<div className="text-2xl font-bold">
{balances && (
<>
{new Intl.NumberFormat().format(
Math.floor(balances.lightning.totalReceivable / 1000)
)}{" "}
sats
</>
)}
</div>
</CardContent>

<CardFooter className="flex justify-end">
<Link to="/channels/incoming">
<Button variant="outline">Increase</Button>
</Link>
</CardFooter>
</Card>
<BalanceCard
balance={balances.lightning.totalReceivable}
title="Receiving Capacity"
buttonTitle="Increase"
buttonLink="/channels/incoming"
BalanceCardIcon={ArrowDown}
hasChannelManagement
/>
)}
</div>
</div>
Expand Down
Loading

0 comments on commit 7e8da27

Please sign in to comment.