Merge pull request #245 from getAlby/feat/pay-0-amount-invoices

feat: pay 0-amount invoices

app/(app)/send/0-amount.js

@@ -0,0 +1,5 @@
+import { ZeroAmount } from "../../../pages/send/ZeroAmount";
+
+export default function Page() {
+  return <ZeroAmount />;
+}

package.json

@@ -25,7 +25,7 @@
     "test:ci": "jest"
   },
   "dependencies": {
-    "@getalby/lightning-tools": "^5.1.1",
+    "@getalby/lightning-tools": "^5.1.2",
     "@getalby/sdk": "^3.8.2",
     "@popicons/react-native": "^0.0.20",
     "@react-native-async-storage/async-storage": "1.23.1",

pages/send/ConfirmPayment.tsx

@@ -18,17 +18,22 @@ import { useAppStore } from "~/lib/state/appStore";
 
 export function ConfirmPayment() {
   const { data: transactions } = useTransactions();
-  const { invoice, originalText, comment, successAction } =
+  const { invoice, originalText, comment, successAction, amount } =
     useLocalSearchParams() as {
       invoice: string;
       originalText: string;
       comment: string;
       successAction: string;
+      amount?: string;
     };
   const getFiatAmount = useGetFiatAmount();
   const [isLoading, setLoading] = React.useState(false);
   const wallets = useAppStore((store) => store.wallets);
   const selectedWalletId = useAppStore((store) => store.selectedWalletId);
+  const decodedInvoice = new Invoice({
+    pr: invoice,
+  });
+  const amountToPaySats = amount ? +amount : decodedInvoice.satoshi;
 
   async function pay() {
     setLoading(true);
@@ -39,6 +44,7 @@ export function ConfirmPayment() {
       }
       const response = await nwcClient.payInvoice({
         invoice,
+        amount: amount ? amountToPaySats * 1000 : undefined,
       });
 
       console.info("payInvoice Response", response);
@@ -54,7 +60,7 @@ export function ConfirmPayment() {
           preimage: response.preimage,
           originalText,
           invoice,
-          amount: decodedInvoice.satoshi,
+          amount: amountToPaySats,
           successAction,
         },
       });
@@ -65,27 +71,22 @@ export function ConfirmPayment() {
     setLoading(false);
   }
 
-  const decodedInvoice = new Invoice({
-    pr: invoice,
-  });
   return (
     <>
       <Screen title="Confirm Payment" />
       <View className="flex-1 justify-center items-center gap-8 p-6">
         <View className="flex flex-col gap-2">
           <View className="flex flex-row items-center justify-center gap-2">
             <Text className="text-5xl font-bold2 text-foreground">
-              {new Intl.NumberFormat().format(
-                Math.ceil(decodedInvoice.satoshi),
-              )}
+              {new Intl.NumberFormat().format(Math.ceil(amountToPaySats))}
             </Text>
             <Text className="text-3xl font-bold2 text-muted-foreground">
               sats
             </Text>
           </View>
           {getFiatAmount && (
             <Text className="text-center text-muted-foreground text-3xl font-semibold2">
-              {getFiatAmount(decodedInvoice.satoshi)}
+              {getFiatAmount(amountToPaySats)}
             </Text>
           )}
         </View>

pages/send/Send.tsx

@@ -132,7 +132,20 @@ export function Send() {
           return true;
         } else {
           // Check if this is a valid invoice
-          new Invoice({ pr: text });
+          const invoice = new Invoice({ pr: text });
+
+          if (invoice.satoshi === 0) {
+            router.replace({
+              pathname: "/send/0-amount",
+              params: {
+                invoice: text,
+                originalText,
+                comment: invoice.description,
+              },
+            });
+            return true;
+          }
+
           router.replace({
             pathname: "/send/confirm",
             params: { invoice: text, originalText },

pages/send/ZeroAmount.tsx

@@ -0,0 +1,83 @@
+import { router, useLocalSearchParams } from "expo-router";
+import React from "react";
+import { View } from "react-native";
+import DismissableKeyboardView from "~/components/DismissableKeyboardView";
+import { DualCurrencyInput } from "~/components/DualCurrencyInput";
+import Loading from "~/components/Loading";
+import { Receiver } from "~/components/Receiver";
+import Screen from "~/components/Screen";
+import { Button } from "~/components/ui/button";
+import { Text } from "~/components/ui/text";
+import { errorToast } from "~/lib/errorToast";
+
+export function ZeroAmount() {
+  const { invoice, originalText, comment } =
+    useLocalSearchParams() as unknown as {
+      invoice: string;
+      originalText: string;
+      comment: string;
+    };
+  const [isLoading, setLoading] = React.useState(false);
+  const [amount, setAmount] = React.useState("");
+
+  async function submit() {
+    setLoading(true);
+    try {
+      router.push({
+        pathname: "/send/confirm",
+        params: {
+          invoice,
+          originalText,
+          amount,
+        },
+      });
+    } catch (error) {
+      console.error(error);
+      errorToast(error);
+    }
+    setLoading(false);
+  }
+
+  return (
+    <>
+      <Screen title="Send" />
+      <DismissableKeyboardView>
+        <View className="flex-1 flex flex-col">
+          <View className="flex-1 justify-center items-center p-6 gap-6">
+            <DualCurrencyInput
+              amount={amount}
+              setAmount={setAmount}
+              autoFocus
+              min={1}
+            />
+            <View className="w-full">
+              <Text className="text-muted-foreground text-center font-semibold2"></Text>
+            </View>
+            {comment && (
+              <View className="w-full">
+                <Text className="text-muted-foreground text-center font-semibold2">
+                  Comment
+                </Text>
+                <Text className="w-full text-center text-2xl font-semibold2 mt-2">
+                  {comment}
+                </Text>
+              </View>
+            )}
+            <Receiver originalText={originalText} />
+          </View>
+          <View className="p-6">
+            <Button
+              size="lg"
+              className="flex flex-row gap-2"
+              onPress={submit}
+              disabled={isLoading}
+            >
+              {isLoading && <Loading className="text-primary-foreground" />}
+              <Text>Next</Text>
+            </Button>
+          </View>
+        </View>
+      </DismissableKeyboardView>
+    </>
+  );
+}

yarn.lock

@@ -1247,10 +1247,10 @@
     find-up "^5.0.0"
     js-yaml "^4.1.0"
 
-"@getalby/lightning-tools@^5.1.1":
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/@getalby/lightning-tools/-/lightning-tools-5.1.1.tgz#51125b2c58ef9372ae9efa93d0808d2205914b91"
-  integrity sha512-qiGWY7AMnQXywNlpEUTm/2u7Qx0C0qV0i3vlAV5ip8xV2quo4hkesHuAh6dBg/p3VC7t1fa9YUe9677hvQ3fVA==
+"@getalby/lightning-tools@^5.1.2":
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/@getalby/lightning-tools/-/lightning-tools-5.1.2.tgz#8a018e98d5c13097dd98d93192cf5e4e455f4c20"
+  integrity sha512-BwGm8eGbPh59BVa1gI5yJMantBl/Fdps6X4p1ZACnmxz9vDINX8/3aFoOnDlF7yyA2boXWCsReVQSr26Q2yjiQ==
 
 "@getalby/sdk@^3.8.2":
   version "3.8.2"