Merge pull request #208 from getAlby/feat/failed-pending-transactions

Feat: show failed and pending transactions
getAlby · Dec 10, 2024 · fe9dbaf · fe9dbaf
2 parents 9d9af68 + c514b22
commit fe9dbaf
Show file tree

Hide file tree

Showing 6 changed files with 127 additions and 46 deletions.
diff --git a/hooks/useTransactions.ts b/hooks/useTransactions.ts
@@ -18,6 +18,7 @@ const fetcher = async (...args: FetchArgs) => {
     const transactions = await nwcClient.listTransactions({
       limit: TRANSACTIONS_PAGE_SIZE,
       offset: (page - 1) * TRANSACTIONS_PAGE_SIZE,
+      unpaid_outgoing: true,
     });
     return transactions;
   } catch (error) {

diff --git a/package.json b/package.json
@@ -26,7 +26,7 @@
   },
   "dependencies": {
     "@getalby/lightning-tools": "^5.1.1",
-    "@getalby/sdk": "^3.8.1",
+    "@getalby/sdk": "^3.8.2",
     "@react-native-async-storage/async-storage": "1.23.1",
     "@rn-primitives/dialog": "^1.0.3",
     "@rn-primitives/portal": "^1.0.3",

diff --git a/pages/Transaction.tsx b/pages/Transaction.tsx
@@ -6,7 +6,7 @@ import { useLocalSearchParams } from "expo-router";
 import React from "react";
 import { ScrollView, TouchableOpacity, View } from "react-native";
 import Toast from "react-native-toast-message";
-import { MoveDownLeft, MoveUpRight } from "~/components/Icons";
+import { MoveDownLeft, MoveUpRight, X } from "~/components/Icons";
 import Screen from "~/components/Screen";
 import { Text } from "~/components/ui/text";
 import { useGetFiatAmount } from "~/hooks/useGetFiatAmount";
@@ -63,18 +63,43 @@ export function Transaction() {
       <ScrollView className="p-6">
         <View className="flex flex-col gap-5 justify-center items-center mb-12">
           <View
-            className="my-8 bg-muted rounded-full p-8"
+            className={cn(
+              "my-8 bg-muted rounded-full p-8",
+              transaction.state === "pending" && "animate-pulse",
+            )}
             style={{ elevation: 2 }}
           >
-            {transaction.type === "incoming" && (
-              <MoveDownLeft className="text-receive" width={100} height={100} />
+            {transaction.state !== "failed" && (
+              <>
+                {transaction.type === "incoming" && (
+                  <MoveDownLeft
+                    className="text-receive"
+                    width={100}
+                    height={100}
+                  />
+                )}
+                {transaction.type === "outgoing" && (
+                  <MoveUpRight className="text-send" width={100} height={100} />
+                )}
+              </>
             )}
-            {transaction.type === "outgoing" && (
-              <MoveUpRight className="text-send" width={100} height={100} />
+            {transaction.state === "failed" && (
+              <X className="text-destructive" width={100} height={100} />
             )}
           </View>
-          <Text className="text-3xl font-bold2 text-foreground">
-            {transaction.type === "incoming" ? "Received" : "Sent"}
+          <Text
+            className={cn(
+              "text-3xl font-bold2 text-foreground",
+              transaction.state === "pending" && "animate-pulse",
+            )}
+          >
+            {transaction.type === "incoming"
+              ? "Received"
+              : transaction.state === "failed"
+                ? "Failed"
+                : transaction.state === "pending"
+                  ? "Sending"
+                  : "Sent"}
           </Text>
           <View className="flex flex-col items-center justify-center gap-2">
             <View className="flex flex-row items-end mt-5">
@@ -103,7 +128,9 @@ export function Transaction() {
           <View className="flex flex-col gap-2 w-full mt-8">
             <TransactionDetailRow
               title="Date & Time"
-              content={dayjs.unix(transaction.settled_at).fromNow()}
+              content={dayjs
+                .unix(transaction.settled_at || transaction.created_at)
+                .fromNow()}
             />
             <TransactionDetailRow
               title="Description"
@@ -112,27 +139,33 @@ export function Transaction() {
 
             {boostagram && <PodcastingInfo boost={boostagram} />}
 
+            {transaction.state === "settled" &&
+              transaction.type === "outgoing" && (
+                <TransactionDetailRow
+                  title="Fee"
+                  content={
+                    Math.floor(transaction.fees_paid / 1000).toString() +
+                    " sats (" +
+                    (
+                      (transaction.fees_paid / transaction.amount) *
+                      100
+                    ).toFixed(2) +
+                    "%)"
+                  }
+                />
+              )}
             <TransactionDetailRow
               title="Payment Hash"
               content={transaction.payment_hash}
               copy
             />
-            <TransactionDetailRow
-              title="Preimage"
-              content={transaction.preimage}
-              copy
-            />
-            <TransactionDetailRow
-              title="Fee"
-              content={
-                Math.floor(transaction.fees_paid / 1000).toString() +
-                " sats (" +
-                ((transaction.fees_paid / transaction.amount) * 100).toFixed(
-                  2,
-                ) +
-                "%)"
-              }
-            />
+            {transaction.state === "settled" && (
+              <TransactionDetailRow
+                title="Preimage"
+                content={transaction.preimage}
+                copy
+              />
+            )}
           </View>
         </View>
       </ScrollView>

diff --git a/pages/Transactions.tsx b/pages/Transactions.tsx
@@ -116,26 +116,47 @@ export function Transactions() {
                 })
               }
             >
-              <View className="flex flex-row items-center gap-3 px-4 py-3">
+              <View
+                className={cn(
+                  "flex flex-row items-center gap-3 px-4 py-3",
+                  transaction.state === "pending" && "animate-pulse",
+                )}
+              >
                 <View className="w-10 h-10 bg-muted rounded-full flex flex-col items-center justify-center">
-                  {transaction.type === "incoming" && (
-                    <MoveDownLeft className="text-receive" size={20} />
+                  {transaction.state !== "failed" && (
+                    <>
+                      {transaction.type === "incoming" && (
+                        <MoveDownLeft className="text-receive" size={20} />
+                      )}
+                      {transaction.type === "outgoing" && (
+                        <MoveUpRight className="text-send" size={20} />
+                      )}
+                    </>
                   )}
-                  {transaction.type === "outgoing" && (
-                    <MoveUpRight className="text-send" size={20} />
+                  {transaction.state === "failed" && (
+                    <X className="text-destructive" size={20} />
                   )}
                 </View>
                 <View className="flex flex-col flex-1">
-                  <Text numberOfLines={1} className="font-medium2">
-                    {transaction.description
-                      ? transaction.description
-                      : transaction.type === "incoming"
+                  <View className="flex flex-row flex-1 items-center gap-2">
+                    <Text numberOfLines={1} className="font-medium2">
+                      {transaction.type === "incoming"
                         ? "Received"
-                        : "Sent"}
-                  </Text>
-                  <Text className="text-muted-foreground text-sm">
-                    {dayjs.unix(transaction.settled_at).fromNow()}
-                  </Text>
+                        : transaction.state === "failed"
+                          ? "Failed"
+                          : transaction.state === "pending"
+                            ? "Sending"
+                            : "Sent"}
+                    </Text>
+                    <Text className="text-muted-foreground text-sm">
+                      {dayjs
+                        .unix(transaction.settled_at || transaction.created_at)
+                        .fromNow()}
+                    </Text>
+                  </View>
+                  {transaction.description && (
+                    <Text numberOfLines={1}>{transaction.description}</Text>
+                  )}
                 </View>
                 <View>
                   <Text

diff --git a/pages/send/ConfirmPayment.tsx b/pages/send/ConfirmPayment.tsx
@@ -1,20 +1,28 @@
 import { Invoice } from "@getalby/lightning-tools";
 
-import { router, useLocalSearchParams } from "expo-router";
+import { Link, router, useLocalSearchParams } from "expo-router";
 import React from "react";
 import { View } from "react-native";
-import { ZapIcon } from "~/components/Icons";
+import { TriangleAlert, ZapIcon } from "~/components/Icons";
 import Loading from "~/components/Loading";
 import { Receiver } from "~/components/Receiver";
 import Screen from "~/components/Screen";
 import { Button } from "~/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardTitle,
+} from "~/components/ui/card";
 import { Text } from "~/components/ui/text";
 import { useGetFiatAmount } from "~/hooks/useGetFiatAmount";
+import { useTransactions } from "~/hooks/useTransactions";
 import { ALBY_LIGHTNING_ADDRESS } from "~/lib/constants";
 import { errorToast } from "~/lib/errorToast";
 import { useAppStore } from "~/lib/state/appStore";
 
 export function ConfirmPayment() {
+  const { data: transactions } = useTransactions();
   const { invoice, originalText, comment, successAction } =
     useLocalSearchParams() as {
       invoice: string;
@@ -108,6 +116,24 @@ export function ConfirmPayment() {
         <Receiver originalText={originalText} invoice={invoice} />
       </View>
       <View className="p-6">
+        {!transactions?.transactions.some(
+          (transaction) => transaction.state === "pending",
+        ) && (
+          <Link href="/transactions" className="mb-6">
+            <Card className="w-full">
+              <CardContent className="flex flex-row items-center gap-4">
+                <TriangleAlert className="text-muted-foreground" />
+                <View className="flex flex-1 flex-col">
+                  <CardTitle>One or more pending payments</CardTitle>
+                  <CardDescription>
+                    Please check your transaction list before paying to ensure
+                    you do not make a payment twice.
+                  </CardDescription>
+                </View>
+              </CardContent>
+            </Card>
+          </Link>
+        )}
         <Button
           size="lg"
           onPress={pay}

diff --git a/yarn.lock b/yarn.lock
@@ -1257,10 +1257,10 @@
   resolved "https://registry.yarnpkg.com/@getalby/lightning-tools/-/lightning-tools-5.1.1.tgz#51125b2c58ef9372ae9efa93d0808d2205914b91"
   integrity sha512-qiGWY7AMnQXywNlpEUTm/2u7Qx0C0qV0i3vlAV5ip8xV2quo4hkesHuAh6dBg/p3VC7t1fa9YUe9677hvQ3fVA==
 
-"@getalby/sdk@^3.8.1":
-  version "3.8.1"
-  resolved "https://registry.yarnpkg.com/@getalby/sdk/-/sdk-3.8.1.tgz#24a8229d694c13b76fdff687df4145464ed6cf08"
-  integrity sha512-YjeiD3hId8DxuSm2eU9XPzuSb4ijF4tqmy1v42AWbjTsGXFERIt2NHqiJ4CnxvGPrmu9scxLwmKi3bJw8ln6NA==
+"@getalby/sdk@^3.8.2":
+  version "3.8.2"
+  resolved "https://registry.yarnpkg.com/@getalby/sdk/-/sdk-3.8.2.tgz#84a184c46fdebf18652d6c06b92f07ed36129d3d"
+  integrity sha512-0F4ub/e+t93V9wzR5Vr+Xdfhhy5kK+ZKls/J3yX2YBT27X1Rd3QIPLCTUFCb4RaV6a/e17aZAVJF8Af7r9BeAg==
   dependencies:
     emittery "^1.0.3"
     nostr-tools "2.9.4"