feat: high fees modal warning

app/components/custom-modal/custom-modal.tsx

@@ -121,7 +121,7 @@ type UseStylesProps = {
 const useStyles = makeStyles(({ colors }, props: UseStylesProps) => ({
   container: {
     backgroundColor: colors.white,
-    maxHeight: "80%",
+    maxHeight: "95%",
     minHeight: props.minHeight || "auto",
     borderRadius: 16,
     padding: 20,

app/i18n/en/index.ts

@@ -2239,7 +2239,7 @@ const en: BaseTranslation = {
     unknownOnchain: "We can't parse this Bitcoin address. Please try again.",
     newBankAddressUsername:
       "{lnAddress: string} exists as a {bankName: string} address, but you've never sent money to it.",
-    confirmModal: {
+    confirmUsernameModal: {
       title: "You've never sent money to this address",
       body1: "Please make sure the recipient gave you a {bankName: string} address,",
       bold2bold: "not a username from another wallet.",
@@ -2280,6 +2280,11 @@ const en: BaseTranslation = {
       "The lnurl server responded with an invoice with an incorrect amount.",
     lnurlInvoiceIncorrectDescription:
       "The lnurl server responded with an invoice with an incorrect description hash.",
+    confirmFeesModal: {
+      title: "High fee alert!",
+      content: "Your fee is more than 50% bigger than the amount sent. Are you sure you want to proceed?\n\nTo reduce fees, ask the receiver to accept transaction via Lightning",
+      confirmButton: "I'm 100% sure",
+    },
   },
   SettingsScreen: {
     activated: "Activated",

app/i18n/i18n-types.ts

@@ -6941,7 +6941,7 @@ type RootTranslation = {
 		 * @param {string} lnAddress
 		 */
 		newBankAddressUsername: RequiredParams<'bankName' | 'lnAddress'>
-		confirmModal: {
+		confirmUsernameModal: {
 			/**
 			 * Y​o​u​'​v​e​ ​n​e​v​e​r​ ​s​e​n​t​ ​m​o​n​e​y​ ​t​o​ ​t​h​i​s​ ​a​d​d​r​e​s​s
 			 */
@@ -7082,6 +7082,22 @@ type RootTranslation = {
 		 * T​h​e​ ​l​n​u​r​l​ ​s​e​r​v​e​r​ ​r​e​s​p​o​n​d​e​d​ ​w​i​t​h​ ​a​n​ ​i​n​v​o​i​c​e​ ​w​i​t​h​ ​a​n​ ​i​n​c​o​r​r​e​c​t​ ​d​e​s​c​r​i​p​t​i​o​n​ ​h​a​s​h​.
 		 */
 		lnurlInvoiceIncorrectDescription: string
+		confirmFeesModal: {
+			/**
+			 * H​i​g​h​ ​f​e​e​ ​a​l​e​r​t​!
+			 */
+			title: string
+			/**
+			 * Y​o​u​r​ ​f​e​e​ ​i​s​ ​m​o​r​e​ ​t​h​a​n​ ​5​0​%​ ​b​i​g​g​e​r​ ​t​h​a​n​ ​t​h​e​ ​a​m​o​u​n​t​ ​s​e​n​t​.​ ​A​r​e​ ​y​o​u​ ​s​u​r​e​ ​y​o​u​ ​w​a​n​t​ ​t​o​ ​p​r​o​c​e​e​d​?​
+		​
+		​T​o​ ​r​e​d​u​c​e​ ​f​e​e​s​,​ ​a​s​k​ ​t​h​e​ ​r​e​c​e​i​v​e​r​ ​t​o​ ​a​c​c​e​p​t​ ​t​r​a​n​s​a​c​t​i​o​n​ ​v​i​a​ ​L​i​g​h​t​n​i​n​g
+			 */
+			content: string
+			/**
+			 * I​'​m​ ​1​0​0​%​ ​s​u​r​e
+			 */
+			confirmButton: string
+		}
 	}
 	SettingsScreen: {
 		/**
@@ -15654,7 +15670,7 @@ export type TranslationFunctions = {
 		 * {lnAddress} exists as a {bankName} address, but you've never sent money to it.
 		 */
 		newBankAddressUsername: (arg: { bankName: string, lnAddress: string }) => LocalizedString
-		confirmModal: {
+		confirmUsernameModal: {
 			/**
 			 * You've never sent money to this address
 			 */
@@ -15788,6 +15804,22 @@ export type TranslationFunctions = {
 		 * The lnurl server responded with an invoice with an incorrect description hash.
 		 */
 		lnurlInvoiceIncorrectDescription: () => LocalizedString
+		confirmFeesModal: {
+			/**
+			 * High fee alert!
+			 */
+			title: () => LocalizedString
+			/**
+			 * Your fee is more than 50% bigger than the amount sent. Are you sure you want to proceed?
+
+		To reduce fees, ask the receiver to accept transaction via Lightning
+			 */
+			content: () => LocalizedString
+			/**
+			 * I'm 100% sure
+			 */
+			confirmButton: () => LocalizedString
+		}
 	}
 	SettingsScreen: {
 		/**

app/i18n/raw-i18n/source/en.json

@@ -2172,7 +2172,7 @@
         "unknownLightning": "We can't parse this Lightning address. Please try again.",
         "unknownOnchain": "We can't parse this Bitcoin address. Please try again.",
         "newBankAddressUsername": "{lnAddress: string} exists as a {bankName: string} address, but you've never sent money to it.",
-        "confirmModal": {
+        "confirmUsernameModal": {
             "title": "You've never sent money to this address",
             "body1": "Please make sure the recipient gave you a {bankName: string} address,",
             "bold2bold": "not a username from another wallet.",
@@ -2206,7 +2206,12 @@
         "title": "Send Bitcoin",
         "failedToFetchLnurlInvoice": "Failed to fetch lnurl invoice",
         "lnurlInvoiceIncorrectAmount": "The lnurl server responded with an invoice with an incorrect amount.",
-        "lnurlInvoiceIncorrectDescription": "The lnurl server responded with an invoice with an incorrect description hash."
+        "lnurlInvoiceIncorrectDescription": "The lnurl server responded with an invoice with an incorrect description hash.",
+        "confirmFeesModal": {
+            "title": "High fee alert!",
+            "content": "Your fee is more than 50% bigger than the amount sent. Are you sure you want to proceed?\n\nTo reduce fees, ask the receiver to accept transaction via Lightning",
+            "confirmButton": "I'm 100% sure"
+        }
     },
     "SettingsScreen": {
         "activated": "Activated",

app/screens/send-bitcoin-screen/confirm-destination-modal.stories.tsx

@@ -6,6 +6,8 @@ import { createCache } from "../../graphql/cache"
 import { IsAuthedContextProvider } from "../../graphql/is-authed-context"
 import { ConfirmDestinationModal } from "./confirm-destination-modal"
 import mocks from "../../graphql/mocks"
+import { DestinationState } from "./send-bitcoin-reducer"
+
 import { createIntraLedgerDestination } from "@app/screens/send-bitcoin-screen/payment-destination"
 
 export default {
@@ -38,7 +40,7 @@ intraLedgerDestination.createPaymentDetail
 const params = {
   destinationState: {
     unparsedDestination: "[email protected]",
-    destinationState: "requires-confirmation",
+    destinationState: DestinationState.RequiresUsernameConfirmation,
     destination: {
       valid: true,
       validDestination: {
@@ -50,7 +52,7 @@ const params = {
       destinationDirection: "Send",
       createPaymentDetail: intraLedgerDestination.createPaymentDetail,
     },
-    confirmationType: {
+    confirmationUsernameType: {
       type: "new-username",
       username: "destination-username",
     },

app/screens/send-bitcoin-screen/confirm-destination-modal.tsx

@@ -5,6 +5,8 @@ import React, { Dispatch, useCallback, useState } from "react"
 import { View, TouchableOpacity } from "react-native"
 import { testProps } from "../../utils/testProps"
 import {
+  DestinationState,
+  SendBitcoinActions,
   SendBitcoinDestinationAction,
   SendBitcoinDestinationState,
 } from "./send-bitcoin-reducer"
@@ -30,32 +32,38 @@ export const ConfirmDestinationModal: React.FC<ConfirmDestinationModalProps> = (
   const [confirmationEnabled, setConfirmationEnabled] = useState(false)
   const confirmDestination = useCallback(() => {
     dispatchDestinationStateAction({
-      type: "set-confirmed",
+      type: SendBitcoinActions.SetConfirmed,
       payload: { unparsedDestination: destinationState.unparsedDestination },
     })
   }, [destinationState, dispatchDestinationStateAction])
 
-  if (destinationState.destinationState !== "requires-confirmation") return null
+  if (destinationState.destinationState !== DestinationState.RequiresUsernameConfirmation)
+    return null
 
-  const lnAddress = destinationState.confirmationType.username + "@" + lnDomain
+  const lnAddress = destinationState.confirmationUsernameType.username + "@" + lnDomain
 
   const goBack = () => {
     dispatchDestinationStateAction({
-      type: "set-unparsed-destination",
+      type: SendBitcoinActions.SetUnparsedDestination,
       payload: { unparsedDestination: destinationState.unparsedDestination },
     })
   }
 
   return (
     <CustomModal
-      isVisible={destinationState.destinationState === "requires-confirmation"}
+      isVisible={
+        destinationState.destinationState ===
+        DestinationState.RequiresUsernameConfirmation
+      }
       toggleModal={goBack}
-      title={LL.SendBitcoinDestinationScreen.confirmModal.title()}
+      title={LL.SendBitcoinDestinationScreen.confirmUsernameModal.title()}
       image={<GaloyIcon name="info" size={100} color={colors.primary3} />}
       body={
         <View style={styles.body}>
           <Text type={"p2"} color={colors.warning} style={styles.warningText}>
-            {LL.SendBitcoinDestinationScreen.confirmModal.warning({ bankName })}
+            {LL.SendBitcoinDestinationScreen.confirmUsernameModal.warning({
+              bankName,
+            })}
           </Text>
         </View>
       }
@@ -67,7 +75,9 @@ export const ConfirmDestinationModal: React.FC<ConfirmDestinationModalProps> = (
           <View style={styles.checkBoxContainer}>
             <CheckBox
               {...testProps(
-                LL.SendBitcoinDestinationScreen.confirmModal.checkBox({ lnAddress }),
+                LL.SendBitcoinDestinationScreen.confirmUsernameModal.checkBox({
+                  lnAddress,
+                }),
               )}
               containerStyle={styles.checkBox}
               checked={confirmationEnabled}
@@ -77,14 +87,16 @@ export const ConfirmDestinationModal: React.FC<ConfirmDestinationModalProps> = (
               onPress={() => setConfirmationEnabled(!confirmationEnabled)}
             />
             <Text type={"p2"} style={styles.checkBoxText}>
-              {LL.SendBitcoinDestinationScreen.confirmModal.checkBox({ lnAddress })}
+              {LL.SendBitcoinDestinationScreen.confirmUsernameModal.checkBox({
+                lnAddress,
+              })}
             </Text>
           </View>
         </TouchableOpacity>
       }
       primaryButtonOnPress={confirmDestination}
       primaryButtonDisabled={!confirmationEnabled}
-      primaryButtonTitle={LL.SendBitcoinDestinationScreen.confirmModal.confirmButton()}
+      primaryButtonTitle={LL.SendBitcoinDestinationScreen.confirmUsernameModal.confirmButton()}
       secondaryButtonTitle={LL.common.back()}
       secondaryButtonOnPress={goBack}
     />

app/screens/send-bitcoin-screen/confirm-fees-modal.tsx

@@ -0,0 +1,83 @@
+import { GaloyIcon } from "@app/components/atomic/galoy-icon"
+import CustomModal from "@app/components/custom-modal/custom-modal"
+import { useI18nContext } from "@app/i18n/i18n-react"
+import { Text, makeStyles, useTheme } from "@rneui/themed"
+import React from "react"
+import { View } from "react-native"
+
+export type ConfirmFeesModalProps = {
+  isVisible: boolean
+  action: () => void
+  cancel: () => void
+}
+
+export const ConfirmFeesModal: React.FC<ConfirmFeesModalProps> = ({
+  action,
+  cancel,
+  isVisible,
+}) => {
+  const styles = useStyles()
+  const {
+    theme: { colors },
+  } = useTheme()
+  const { LL } = useI18nContext()
+
+  console.log({ isVisible, action })
+
+  return (
+    <CustomModal
+      isVisible={isVisible}
+      toggleModal={cancel}
+      title={LL.SendBitcoinScreen.confirmFeesModal.title()}
+      image={<GaloyIcon name="info" size={80} color={colors.primary3} />}
+      body={
+        <View style={styles.body}>
+          <Text type={"p2"} style={styles.warningText}>
+            {LL.SendBitcoinScreen.confirmFeesModal.content()}
+          </Text>
+        </View>
+      }
+      primaryButtonOnPress={action}
+      primaryButtonTitle={LL.SendBitcoinScreen.confirmFeesModal.confirmButton()}
+      secondaryButtonTitle={LL.common.cancel()}
+      secondaryButtonOnPress={cancel}
+    />
+  )
+}
+
+const useStyles = makeStyles(({ colors }) => ({
+  modalCard: {
+    backgroundColor: colors.white,
+    borderRadius: 16,
+    padding: 18,
+  },
+  warningText: {
+    textAlign: "center",
+  },
+  body: {
+    rowGap: 12,
+  },
+  buttonContainer: {
+    rowGap: 12,
+  },
+  titleContainer: {
+    marginBottom: 12,
+  },
+  checkBox: {
+    paddingLeft: 0,
+    backgroundColor: "transparent",
+  },
+  checkBoxTouchable: {
+    marginTop: 12,
+  },
+  checkBoxContainer: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    backgroundColor: colors.grey5,
+    borderRadius: 8,
+  },
+  checkBoxText: {
+    flex: 1,
+  },
+}))

app/screens/send-bitcoin-screen/destination-information.tsx

@@ -106,11 +106,11 @@ const destinationStateToInformation = (
 
   if (
     sendBitcoinReducerState.destinationState === "valid" &&
-    sendBitcoinReducerState.confirmationType
+    sendBitcoinReducerState.confirmationUsernameType
   ) {
     return {
       warning: translate.SendBitcoinDestinationScreen.newBankAddressUsername({
-        lnAddress: toLnAddress(sendBitcoinReducerState.confirmationType.username),
+        lnAddress: toLnAddress(sendBitcoinReducerState.confirmationUsernameType.username),
         bankName,
       }),
     }

app/screens/send-bitcoin-screen/send-bitcoin-destination-screen.tsx

@@ -122,7 +122,7 @@ const SendBitcoinDestinationScreen: React.FC<Props> = ({ route }) => {
       }
 
       dispatchDestinationStateAction({
-        type: "set-validating",
+        type: SendBitcoinActions.SetValidating,
         payload: {
           unparsedDestination: rawInput,
         },
@@ -169,11 +169,11 @@ const SendBitcoinDestinationScreen: React.FC<Props> = ({ route }) => {
             .includes(destination.validDestination.handle.toLowerCase())
         ) {
           dispatchDestinationStateAction({
-            type: SendBitcoinActions.SetRequiresConfirmation,
+            type: SendBitcoinActions.SetRequiresUsernameConfirmation,
             payload: {
               validDestination: destination,
               unparsedDestination: rawInput,
-              confirmationType: {
+              confirmationUsernameType: {
                 type: "new-username",
                 username: destination.validDestination.handle,
               },
@@ -204,7 +204,7 @@ const SendBitcoinDestinationScreen: React.FC<Props> = ({ route }) => {
   const handleChangeText = useCallback(
     (newDestination: string) => {
       dispatchDestinationStateAction({
-        type: "set-unparsed-destination",
+        type: SendBitcoinActions.SetUnparsedDestination,
         payload: { unparsedDestination: newDestination },
       })
       setGoToNextScreenWhenValid(false)
@@ -279,13 +279,13 @@ const SendBitcoinDestinationScreen: React.FC<Props> = ({ route }) => {
       inputContainerStyle = styles.errorInputContainer
       break
     case "valid":
-      if (!destinationState.confirmationType) {
+      if (!destinationState.confirmationUsernameType) {
         inputContainerStyle = styles.validInputContainer
         break
       }
       inputContainerStyle = styles.warningInputContainer
       break
-    case "requires-confirmation":
+    case "requires-destination-confirmation":
       inputContainerStyle = styles.warningInputContainer
   }
 
@@ -334,7 +334,7 @@ const SendBitcoinDestinationScreen: React.FC<Props> = ({ route }) => {
               try {
                 const clipboard = await Clipboard.getString()
                 dispatchDestinationStateAction({
-                  type: "set-unparsed-destination",
+                  type: SendBitcoinActions.SetUnparsedDestination,
                   payload: {
                     unparsedDestination: clipboard,
                   },