feat: note input separate and expires in info

app/components/amount-input/amount-input-button.tsx

@@ -72,7 +72,7 @@ export const AmountInputButton: React.FC<AmountInputButtonProps> = ({
     <Pressable {...props} style={pressableStyle} disabled={disabled}>
       <View style={styles.contentContainerStyle}>
         <Text
-          type="p1"
+          type="p2"
           color={error ? colors.error : undefined}
           numberOfLines={1}
           ellipsizeMode="middle"

app/components/note-input/index.ts

@@ -0,0 +1 @@
+export * from "./note-input"

app/components/note-input/note-input.tsx

@@ -0,0 +1,86 @@
+import React from "react"
+
+import { makeStyles } from "@rneui/themed"
+import { View, TextInput, StyleProp, ViewStyle } from "react-native"
+
+import { useI18nContext } from "@app/i18n/i18n-react"
+import NoteIcon from "@app/assets/icons/note.svg"
+import { useTheme } from "@rneui/themed"
+
+export type NoteInputProps = {
+  onBlur?: (() => void) | undefined
+  onChangeText?: ((text: string) => void) | undefined
+  value?: string | undefined
+  editable?: boolean | undefined
+  style?: StyleProp<ViewStyle>
+  disabled?: boolean | undefined
+}
+
+export const NoteInput: React.FC<NoteInputProps> = ({
+  onChangeText,
+  value,
+  editable,
+  onBlur,
+  style,
+}) => {
+  const styles = useStyles(Boolean(editable))
+  const {
+    theme: { colors },
+  } = useTheme()
+  const { LL } = useI18nContext()
+
+  return (
+    <View style={[styles.fieldBackground, style]}>
+      <View style={styles.noteContainer}>
+        <TextInput
+          style={styles.noteInput}
+          placeholder={"Add Note"}
+          placeholderTextColor={colors.black}
+          onChangeText={onChangeText}
+          onBlur={onBlur}
+          value={value}
+          editable={editable}
+          selectTextOnFocus
+          maxLength={500}
+        />
+        <View style={styles.noteIconContainer}>
+          <NoteIcon style={styles.noteIcon} />
+        </View>
+      </View>
+    </View>
+  )
+}
+
+const useStyles = makeStyles(({ colors }, editable: boolean) => ({
+  fieldBackground: {
+    flexDirection: "row",
+    borderStyle: "solid",
+    overflow: "hidden",
+    backgroundColor: colors.grey5,
+    paddingHorizontal: 10,
+    borderRadius: 10,
+    alignItems: "center",
+    height: 60,
+    opacity: editable ? 1 : 0.5,
+  },
+  fieldContainer: {
+    marginBottom: 12,
+  },
+  noteContainer: {
+    flex: 1,
+    flexDirection: "row",
+  },
+  noteIconContainer: {
+    justifyContent: "center",
+    alignItems: "flex-start",
+  },
+  noteIcon: {
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  noteInput: {
+    flex: 1,
+    color: colors.black,
+    fontSize: 16,
+  },
+}))

app/screens/receive-bitcoin-screen/payment/helpers.ts

@@ -37,3 +37,15 @@ export const satsToBTC = (satsAmount: number): number => satsAmount / 10 ** 8
 export const getDefaultMemo = (bankName: string) => {
   return `Pay to ${bankName} Wallet user`
 }
+
+export const secondsToHMS = (seconds: number): string => {
+  const h = Math.floor(seconds / 3600)
+  const m = Math.floor((seconds % 3600) / 60)
+  const s = seconds % 60
+
+  const hDisplay = h > 0 ? h + "h" : ""
+  const mDisplay = m > 0 ? m + "m" : ""
+  const sDisplay = s > 0 ? s + "s" : ""
+
+  return hDisplay + mDisplay + sDisplay
+}

app/screens/receive-bitcoin-screen/receive-screen.tsx

@@ -23,6 +23,7 @@ import { GaloyTertiaryButton } from "@app/components/atomic/galoy-tertiary-butto
 import { QRView } from "./qr-view"
 import { AmountInput } from "@app/components/amount-input"
 import NoteIcon from "@app/assets/icons/note.svg"
+import { NoteInput } from "@app/components/note-input"
 
 const ReceiveScreen = () => {
   const {
@@ -78,7 +79,7 @@ const ReceiveScreen = () => {
     setReceivingWallet,
   } = request
 
-  console.log(request.memo)
+  console.log({ memoChangeText: request.memoChangeText, memo: request.memo })
 
   return (
     <MyLnUpdateSub>
@@ -106,6 +107,9 @@ const ReceiveScreen = () => {
           err={state === PaymentRequestState.Error ? LL.ReceiveScreen.error() : ""}
           style={styles.qrView}
         />
+        <View style={styles.extraDetails}>
+          <Text>{request.extraDetails}</Text>
+        </View>
         <ButtonGroup
           selectedId={type}
           buttons={[
@@ -124,27 +128,14 @@ const ReceiveScreen = () => {
           walletCurrency={receivingWalletDescriptor.currency}
           overridePlaceholderText={"Add Amount"}
         />
-        <View style={styles.fieldContainer}>
-          <Text style={styles.fieldTitleText}>{LL.SendBitcoinScreen.note()}</Text>
-          <View style={styles.fieldBackground}>
-            <View style={styles.noteContainer}>
-              <View style={styles.noteIconContainer}>
-                <NoteIcon style={styles.noteIcon} />
-              </View>
-              <TextInput
-                style={styles.noteInput}
-                placeholder={LL.SendBitcoinScreen.note()}
-                placeholderTextColor={colors.grey3}
-                onBlur={request.setMemo}
-                onChangeText={request.setMemoChangeText}
-                value={request.memoChangeText || ""}
-                editable={canSetMemo}
-                selectTextOnFocus
-                maxLength={500}
-              />
-            </View>
-          </View>
-        </View>
+        <NoteInput
+          onBlur={request.setMemo}
+          onChangeText={request.setMemoChangeText}
+          value={request.memoChangeText || ""}
+          editable={canSetMemo}
+          style={styles.note}
+          disabled={!canSetMemo}
+        />
       </Screen>
     </MyLnUpdateSub>
   )
@@ -198,40 +189,14 @@ const useStyles = makeStyles(({ colors }) => ({
   invoiceTypePicker: {
     marginBottom: 10,
   },
-
-  fieldBackground: {
-    flexDirection: "row",
-    borderStyle: "solid",
-    overflow: "hidden",
-    backgroundColor: colors.grey5,
-    paddingHorizontal: 14,
-    borderRadius: 10,
-    alignItems: "center",
-    height: 60,
-  },
-  fieldTitleText: {
-    fontWeight: "bold",
-    marginBottom: 4,
-  },
-  fieldContainer: {
-    marginBottom: 12,
+  note: {
+    marginTop: 10,
   },
-  noteContainer: {
-    flex: 1,
+  extraDetails: {
     flexDirection: "row",
-  },
-  noteIconContainer: {
-    marginRight: 12,
-    justifyContent: "center",
-    alignItems: "flex-start",
-  },
-  noteIcon: {
     justifyContent: "center",
     alignItems: "center",
-  },
-  noteInput: {
-    flex: 1,
-    color: colors.black,
+    marginBottom: 15,
   },
 }))
 

app/screens/receive-bitcoin-screen/use-receive-bitcoin.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react"
+import { memo, useEffect, useState } from "react"
 import {
   BaseCreatePaymentRequestCreationDataParams,
   Invoice,
@@ -26,6 +26,7 @@ import { getBtcWallet, getDefaultWallet, getUsdWallet } from "@app/graphql/walle
 import { createPaymentRequest } from "./payment/payment-request"
 import { MoneyAmount, WalletOrDisplayCurrency } from "@app/types/amounts"
 import { useLnUpdateHashPaid } from "@app/graphql/ln-update-context"
+import { secondsToHMS } from "./payment/helpers"
 
 gql`
   query paymentRequest {
@@ -260,9 +261,31 @@ export const useReceiveBitcoin = () => {
     }
   }, [pr?.info?.data, setExpiresInSeconds])
 
+  // Clean Memo
+  useEffect(() => {
+    if (memoChangeText === "") {
+      setPRCD((pr) => {
+        if (pr && pr.setMemo) {
+          return pr.setMemo("")
+        }
+        return pr
+      })
+    }
+  }, [memoChangeText, setPRCD])
+
   if (!prcd) return null
 
-  const setType = (type: InvoiceType) => setPRCD((pr) => pr && pr.setType(type))
+  const setType = (type: InvoiceType) => {
+    setPRCD((pr) => pr && pr.setType(type))
+    setPRCD((pr) => {
+      if (pr && pr.setMemo) {
+        return pr.setMemo("")
+      }
+      return pr
+    })
+    setMemoChangeText("")
+  }
+
   const setMemo = () => {
     setPRCD((pr) => {
       if (pr && memoChangeText && pr.setMemo) {
@@ -298,11 +321,24 @@ export const useReceiveBitcoin = () => {
     })
   }
 
+  let extraDetails = ""
+  if (prcd.type === "Lightning" && expiresInSeconds) {
+    extraDetails = `Single Use | Expires In: ${secondsToHMS(expiresInSeconds)}`
+  } else if (
+    prcd.type === "OnChain" &&
+    pr?.info?.data?.invoiceType === "OnChain" &&
+    pr.info.data.address
+  ) {
+    extraDetails = `${pr.info.data.address.slice(0, 6)}......${pr.info.data.address.slice(
+      -6,
+    )}`
+  }
+
   return {
     ...prcd,
     setType,
     ...pr,
-    expiresInSeconds,
+    extraDetails,
     regenerateInvoice,
     setMemo,
     setReceivingWallet,