From c160e7b97d96bcd6f78ab4c395adb192656026c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Aaron?= <rene@twentyuno.net>
Date: Tue, 24 Sep 2024 23:02:15 +0200
Subject: [PATCH] fix: receiver component

---
 components/Receiver.tsx       | 29 +++++++++++++++++++++++++++++
 pages/send/ConfirmPayment.tsx | 19 ++-----------------
 pages/send/LNURLPay.tsx       | 34 ++++++++++++----------------------
 pages/send/PaymentSuccess.tsx | 12 ++----------
 pages/send/Send.tsx           |  8 +-------
 5 files changed, 46 insertions(+), 56 deletions(-)
 create mode 100644 components/Receiver.tsx

diff --git a/components/Receiver.tsx b/components/Receiver.tsx
new file mode 100644
index 0000000..feb26c5
--- /dev/null
+++ b/components/Receiver.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+import { View } from "react-native";
+import { Text } from "~/components/ui/text";
+
+interface ReceiverProps {
+    originalText: string;
+    invoice?: string;
+}
+
+export function Receiver({ originalText, invoice }: ReceiverProps) {
+    const shouldShowReceiver =
+        originalText !== invoice &&
+        originalText.toLowerCase().replace("lightning:", "").includes("@");
+
+    if (!shouldShowReceiver) {
+        return null;
+    }
+
+    return (
+        <View className="flex flex-col gap-2">
+            <Text className="text-muted-foreground text-center font-semibold2">
+                To
+            </Text>
+            <Text className="text-center text-foreground text-2xl font-medium2">
+                {originalText.toLowerCase().replace("lightning:", "")}
+            </Text>
+        </View>
+    );
+}
\ No newline at end of file
diff --git a/pages/send/ConfirmPayment.tsx b/pages/send/ConfirmPayment.tsx
index 098730a..7e4642d 100644
--- a/pages/send/ConfirmPayment.tsx
+++ b/pages/send/ConfirmPayment.tsx
@@ -5,6 +5,7 @@ import React from "react";
 import { View } from "react-native";
 import { 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 { Text } from "~/components/ui/text";
@@ -94,23 +95,7 @@ export function ConfirmPayment() {
             </View>
           )
         )}
-        {
-          /* only show "To" for lightning addresses */ originalText !==
-          invoice &&
-          originalText
-            .toLowerCase()
-            .replace("lightning:", "")
-            .includes("@") && (
-            <View className="flex flex-col gap-2">
-              <Text className="text-muted-foreground text-center font-semibold2">
-                To
-              </Text>
-              <Text className="text-center text-foreground text-2xl font-medium2">
-                {originalText.toLowerCase().replace("lightning:", "")}
-              </Text>
-            </View>
-          )
-        }
+        <Receiver originalText={originalText} invoice={invoice} />
       </View>
       <View className="p-6">
         <Button
diff --git a/pages/send/LNURLPay.tsx b/pages/send/LNURLPay.tsx
index ec32bbb..95c0d02 100644
--- a/pages/send/LNURLPay.tsx
+++ b/pages/send/LNURLPay.tsx
@@ -10,13 +10,13 @@ import { errorToast } from "~/lib/errorToast";
 import Loading from "~/components/Loading";
 import { DualCurrencyInput } from "~/components/DualCurrencyInput";
 import DismissableKeyboardView from "~/components/DismissableKeyboardView";
+import { Receiver } from "~/components/Receiver";
 
 export function LNURLPay() {
-  const { lnurlDetailsJSON, originalText, humanReadablePaymentInfo } =
+  const { lnurlDetailsJSON, originalText } =
     useLocalSearchParams() as unknown as {
       lnurlDetailsJSON: string;
       originalText: string;
-      humanReadablePaymentInfo: string;
     };
   const lnurlDetails: LNURLPayServiceResponse = JSON.parse(lnurlDetailsJSON);
   const [isLoading, setLoading] = React.useState(false);
@@ -66,29 +66,19 @@ export function LNURLPay() {
               readOnly={isAmountReadOnly}
               autoFocus={!isAmountReadOnly}
             />
-            {lnurlDetails.commentAllowed &&
-              <View className="w-full">
-                <Text className="text-muted-foreground text-center font-semibold2">
-                  Comment
-                </Text>
-                <Input
-                  className="w-full border-transparent bg-transparent text-center native:text-2xl font-semibold2"
-                  placeholder="Enter an optional comment"
-                  value={comment}
-                  onChangeText={setComment}
-                  returnKeyType="done"
-                  maxLength={lnurlDetails.commentAllowed}
-                />
-              </View>
-            }
-            <View>
+            <View className="w-full">
               <Text className="text-muted-foreground text-center font-semibold2">
-                To
-              </Text>
-              <Text className="text-center text-foreground text-2xl font-medium2">
-                {humanReadablePaymentInfo}
+                Comment
               </Text>
+              <Input
+                className="w-full border-transparent bg-transparent text-center native:text-2xl font-semibold2"
+                placeholder="Enter an optional comment"
+                value={comment}
+                onChangeText={setComment}
+                returnKeyType="done"
+              />
             </View>
+            <Receiver originalText={originalText} />
           </View>
           <View className="p-6">
             <Button
diff --git a/pages/send/PaymentSuccess.tsx b/pages/send/PaymentSuccess.tsx
index 6eef670..ebae105 100644
--- a/pages/send/PaymentSuccess.tsx
+++ b/pages/send/PaymentSuccess.tsx
@@ -5,6 +5,7 @@ import { Button } from "~/components/ui/button";
 import { Text } from "~/components/ui/text";
 import Screen from "~/components/Screen";
 import { useGetFiatAmount } from "~/hooks/useGetFiatAmount";
+import { Receiver } from "~/components/Receiver";
 
 export function PaymentSuccess() {
   const getFiatAmount = useGetFiatAmount();
@@ -30,16 +31,7 @@ export function PaymentSuccess() {
             <Text className="text-2xl text-muted-foreground font-semibold2">{getFiatAmount(+amount)}</Text>
           }
         </View>
-        {originalText !== invoice &&
-          <View>
-            <Text className="text-muted-foreground text-center font-semibold2">
-              Sent to
-            </Text>
-            <Text className="text-foreground text-center text-2xl font-medium2">
-              {originalText.toLowerCase().replace("lightning:", "")}
-            </Text>
-          </View>
-        }
+        <Receiver originalText={originalText} invoice={invoice} />
       </View>
       <View className="p-6">
         <Button
diff --git a/pages/send/Send.tsx b/pages/send/Send.tsx
index 13d58f9..aea87ac 100644
--- a/pages/send/Send.tsx
+++ b/pages/send/Send.tsx
@@ -74,7 +74,6 @@ export function Send() {
     }
     console.log("loading payment", text);
     const originalText = text;
-    let humanReadablePaymentInfo = text;
     setLoading(true);
     try {
       if (text.startsWith("bitcoin:")) {
@@ -99,8 +98,6 @@ export function Send() {
           throw new Error("LNURL tag " + lnurlDetails.tag + " not supported");
         }
 
-        humanReadablePaymentInfo = lnurlValue;
-
         // Handle fixed amount LNURLs
         if (lnurlDetails.minSendable === lnurlDetails.maxSendable && !lnurlDetails.commentAllowed) {
           try {
@@ -121,15 +118,12 @@ export function Send() {
             params: {
               lnurlDetailsJSON: JSON.stringify(lnurlDetails),
               originalText,
-              humanReadablePaymentInfo
             },
           });
         }
 
         return true;
       } else {
-        humanReadablePaymentInfo = text;
-
         // Check if this is a valid invoice
         new Invoice({
           pr: text,
@@ -137,7 +131,7 @@ export function Send() {
 
         router.replace({
           pathname: "/send/confirm",
-          params: { invoice: text, originalText, humanReadablePaymentInfo },
+          params: { invoice: text, originalText },
         });
 
         return true;