From 6059109fcddbf18a0110f6b5d8b6c772e12b91ee Mon Sep 17 00:00:00 2001
From: hzrd149 <github@hzrd149.com>
Date: Tue, 7 Feb 2023 17:04:18 -0600
Subject: [PATCH] handle parsing invoice error

---
 src/components/invoice-button.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/invoice-button.tsx b/src/components/invoice-button.tsx
index 954caf775..ffd59103b 100644
--- a/src/components/invoice-button.tsx
+++ b/src/components/invoice-button.tsx
@@ -2,12 +2,15 @@ import { useState } from "react";
 import { Button } from "@chakra-ui/react";
 import { requestProvider } from "webln";
 import { getReadableAmount, parsePaymentRequest } from "../helpers/bolt11";
+import { useAsync } from "react-use";
 
 export type InvoiceButtonProps = {
   paymentRequest: string;
 };
 export const InvoiceButton = ({ paymentRequest }: InvoiceButtonProps) => {
-  const invoice = parsePaymentRequest(paymentRequest);
+  const { value: invoice, error } = useAsync(async () =>
+    parsePaymentRequest(paymentRequest)
+  );
   const [loading, setLoading] = useState(false);
   const handleClick = async () => {
     setLoading(true);
@@ -25,6 +28,10 @@ export const InvoiceButton = ({ paymentRequest }: InvoiceButtonProps) => {
     setLoading(false);
   };
 
+  if (error) {
+    <>{paymentRequest}</>;
+  }
+
   return (
     <Button
       colorScheme="yellow"
@@ -32,7 +39,8 @@ export const InvoiceButton = ({ paymentRequest }: InvoiceButtonProps) => {
       onClick={handleClick}
       isLoading={loading}
     >
-      ⚡ Invoice for {invoice.amount ? getReadableAmount(invoice.amount) : "♾️"}
+      ⚡ Invoice for{" "}
+      {invoice?.amount ? getReadableAmount(invoice.amount) : "♾️"}
     </Button>
   );
 };