fix: receiver component

getAlby · Sep 25, 2024 · c160e7b · c160e7b
1 parent 63c3240
commit c160e7b
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 56 deletions.
diff --git a/components/Receiver.tsx 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>
+    );
+}
diff --git 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
@@ -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
@@ -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
@@ -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,23 +118,20 @@ 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,
         });
 
         router.replace({
           pathname: "/send/confirm",
-          params: { invoice: text, originalText, humanReadablePaymentInfo },
+          params: { invoice: text, originalText },
         });
 
         return true;