Pin support (LUD-21)

package.json

@@ -47,6 +47,7 @@
     "react-dom": "18.2.0",
     "react-i18next": "13.2.2",
     "react-native": "0.73.2",
+    "react-native-animated-bottom-drawer": "0.0.23",
     "react-native-animated-linear-gradient": "1.3.0",
     "react-native-bars": "2.3.0",
     "react-native-blur-effect": "1.1.3",
@@ -58,6 +59,7 @@
     "react-native-dotenv": "3.4.9",
     "react-native-linear-gradient": "2.8.3",
     "react-native-nfc-manager": "3.14.11",
+    "react-native-pin-view": "3.0.3",
     "react-native-progress": "5.0.1",
     "react-native-qrcode-svg": "^6.3.0",
     "react-native-safe-area-context": "4.7.2",

src/components/PinPad/PinPad.tsx

@@ -0,0 +1,79 @@
+import { useRef, useState, useEffect } from 'react';
+import ReactNativePinView from "react-native-pin-view";
+import BottomDrawer, {
+  BottomDrawerMethods,
+} from 'react-native-animated-bottom-drawer';
+import { Icon } from "@components";
+import { faDeleteLeft } from "@fortawesome/free-solid-svg-icons";
+import * as S from "./styled";
+
+type PinViewFunctions = {
+  clearAll: () => void;
+};
+
+type PinPadProps = {
+  onPinEntered: (pin: string) => void;
+}
+
+const LeftButton = () => <Icon icon={faDeleteLeft} size={36} color={"#FFF"} />;
+
+export const PinPad = (props: PinPadProps) => {
+  const pinView = useRef<PinViewFunctions>(null);
+  const bottomDrawerRef = useRef<BottomDrawerMethods>(null);
+  const [showRemoveButton, setShowRemoveButton] = useState(false);
+  const [enteredPin, setEnteredPin] = useState("");
+  const [buttonPressed, setButtonPressed] = useState("");
+
+  useEffect(() => {
+    if (enteredPin.length > 0) {
+      setShowRemoveButton(true)
+    } else {
+      setShowRemoveButton(false)
+    }
+    if (enteredPin.length === 4) {
+        props.onPinEntered(enteredPin)
+    }
+  }, [enteredPin]);
+
+  useEffect(() => {
+      if (buttonPressed === "custom_left" && pinView.current) {
+        pinView.current.clearAll()
+      }
+  }, [buttonPressed]);
+
+  return (
+    <>
+        <BottomDrawer
+            ref={bottomDrawerRef}
+            openOnMount gestureMode={"none"}
+            closeOnBackdropPress={false}
+            initialHeight={535}
+            backdropOpacity={0}
+            customStyles={S.BottomDrawerStyles}
+        >
+            <S.PinPadContainer>
+              <S.PinPadTitle>
+                Boltcard PIN
+              </S.PinPadTitle>
+              <ReactNativePinView
+                inputSize={32}
+                // @ts-ignore
+                ref={pinView}
+                pinLength={4}
+                buttonSize={60}
+                onValueChange={value => setEnteredPin(value)}
+                buttonAreaStyle={{ marginTop: 24 }}
+                inputAreaStyle={{ marginBottom: 24 }}
+                inputViewEmptyStyle={S.PinViewStyles.whiteBorderTransparent}
+                inputViewFilledStyle={{ backgroundColor: "#FFF" }}
+                buttonViewStyle={S.PinViewStyles.whiteBorder}
+                buttonTextStyle={{ color: "#FFF" }}
+                onButtonPress={key => setButtonPressed(key)}
+                // @ts-ignore
+                customLeftButton={showRemoveButton ? <LeftButton /> : undefined}
+              />
+            </S.PinPadContainer>
+        </BottomDrawer >
+    </>
+  );
+}

src/components/PinPad/index.ts

@@ -0,0 +1 @@
+export { PinPad } from "./PinPad";

src/components/PinPad/styled.ts

@@ -0,0 +1,37 @@
+import styled from "styled-components";
+import { View, Text } from "@components";
+import { StyleSheet } from "react-native";
+
+export const PinPadContainer = styled(View)`
+  backgroundColor: transparent;
+  alignItems: center;
+  flex: 1;
+`;
+
+export const PinPadTitle = styled(Text)`
+  paddingTop: 48px;
+  paddingBottom: 24px;
+  color: rgba(255,255,255,1);
+  fontSize: 48px;
+`;
+
+export const BottomDrawerStyles = StyleSheet.create({
+    container: {
+        backgroundColor:  "rgba(0,0,0,0.5)",
+    },
+    handleContainer: {
+      backgroundColor:  "transparent",
+    }
+});
+
+export const PinViewStyles = StyleSheet.create({
+    whiteBorder: {
+      borderWidth: 1,
+      borderColor: "#FFF",
+    },
+    whiteBorderTransparent: {
+      borderWidth: 1,
+      borderColor: "#FFF",
+      backgroundColor: "transparent"
+    },
+});

src/components/index.ts

@@ -39,3 +39,4 @@ export { SplashScreen } from "./SplashScreen";
 export { StatusBar } from "./StatusBar";
 export { CircleProgress } from "./CircleProgress";
 export { BitcoinIcon } from "./BitcoinIcon";
+export { PinPad } from "./PinPad";

src/hooks/useNfc.ts

@@ -17,6 +17,31 @@ export const useNfc = () => {
   const [isNfcNeedsTap, setIsNfcNeedsTap] = useState(false);
   const [isNfcNeedsPermission, setIsNfcNeedsPermission] = useState(false);
   const [isNfcActionSuccess, setIsNfcActionSuccess] = useState(false);
+  const [isPinRequired, setIsPinRequired] = useState(false);
+  const [isPinConfirmed, setIsPinConfirmed] = useState(false);
+
+  const [ pinResolver, setPinResolver ] = useState<{
+    resolve: (v: string) => void;
+  }>();
+
+  const setPin = (pin: string) => {
+    if(pinResolver?.resolve) {
+      pinResolver.resolve(pin);
+    }
+  }
+
+  const getPin = useCallback(async () => {
+    const pinInputPromise = () => {
+      let _pinResolver;
+      return [ new Promise<string>(( resolve ) => {
+          _pinResolver = resolve
+      }), _pinResolver]
+    }
+
+    const [ promise, resolve ] = pinInputPromise()
+    setPinResolver({ resolve } as unknown as { resolve: (v: string) => void })
+    return promise as Promise<string>;
+  }, []);
 
   const setupNfc = useCallback(async () => {
     if (await getIsNfcSupported()) {
@@ -49,7 +74,8 @@ export const useNfc = () => {
   }, []);
 
   const readingNfcLoop = useCallback(
-    async (pr: string) => {
+    async (pr: string, amount?: number | null) => {
+
       setIsNfcActionSuccess(false);
       await NFC.stopRead();
 
@@ -73,7 +99,7 @@ export const useNfc = () => {
           });
 
           if (!isIos) {
-            readingNfcLoop(pr);
+            readingNfcLoop(pr, amount);
           } else {
             setIsNfcAvailable(false);
           }
@@ -114,19 +140,41 @@ export const useNfc = () => {
               tag: "withdrawRequest";
               callback: string;
               k1: string;
+              pinLimit?: number;
             }>(cardData);
 
-            const { data: callbackResponseData } = await axios.get<{
-              reason: { detail: string };
-              status: "OK" | "ERROR";
-            }>(cardDataResponse.callback, {
-              params: {
-                k1: cardDataResponse.k1,
-                pr
+            let pin = "";
+            if (cardDataResponse.pinLimit !== undefined) {
+
+              if (!amount) {
+                error = { reason: "No amount set. Can't make withdrawRequest"}
+              } else {
+                //if the card has pin enabled
+                //check the amount didn't exceed the limit
+                const limitSat = cardDataResponse.pinLimit;
+                if (limitSat <= amount) {
+                  setIsPinRequired(true);
+                  pin = await getPin();
+                  setIsPinConfirmed(true);
+                }
               }
-            });
+            } else {
+              setIsPinRequired(false);
+            }
 
-            debitCardData = callbackResponseData;
+            if (!error) {
+              const { data: callbackResponseData } = await axios.get<{
+                reason: { detail: string };
+                status: "OK" | "ERROR";
+              }>(cardDataResponse.callback, {
+                params: {
+                  k1: cardDataResponse.k1,
+                  pr,
+                  pin
+                }
+              })
+              debitCardData = callbackResponseData;
+            }
           } else {
             // const { data: cardRequest } = await axios.get<{ payLink?: string }>(
             //   lnHttpsRequest
@@ -190,9 +238,14 @@ export const useNfc = () => {
         await NFC.stopRead();
 
         setIsNfcLoading(false);
+        setIsPinConfirmed(false);
+        setIsPinRequired(false);
         if (debitCardData?.status === "OK" && !error) {
           setIsNfcActionSuccess(true);
         } else {
+          if (debitCardData?.status === "ERROR" && !error) {
+            error = debitCardData;
+          }
           toast.show(
             typeof error?.reason === "string"
               ? error.reason
@@ -203,7 +256,7 @@ export const useNfc = () => {
           );
 
           if (!isIos) {
-            readingNfcLoop(pr);
+            readingNfcLoop(pr, amount);
           }
         }
 
@@ -213,7 +266,7 @@ export const useNfc = () => {
         }
       });
     },
-    [toast, t]
+    [toast, t, getPin]
   );
 
   const stopNfc = useCallback(() => {
@@ -233,6 +286,9 @@ export const useNfc = () => {
     isNfcNeedsTap,
     isNfcNeedsPermission,
     isNfcActionSuccess,
+    isPinRequired,
+    isPinConfirmed,
+    setPin,
     setupNfc,
     stopNfc,
     readingNfcLoop

src/screens/Invoice/Invoice.tsx

@@ -6,7 +6,8 @@ import {
   CheckboxField,
   ComponentStack,
   Loader,
-  Text
+  Text,
+  PinPad
 } from "@components";
 import {
   faBolt,
@@ -61,7 +62,10 @@ export const Invoice = () => {
     isNfcScanning,
     isNfcLoading,
     isNfcNeedsTap,
-    isNfcActionSuccess
+    isNfcActionSuccess,
+    isPinRequired,
+    isPinConfirmed,
+    setPin
   } = useNfc();
 
   const {
@@ -98,9 +102,9 @@ export const Invoice = () => {
 
   useEffect(() => {
     if (isNfcAvailable && !isNfcNeedsTap && lightningInvoice) {
-      void readingNfcLoop(lightningInvoice);
+      void readingNfcLoop(lightningInvoice, satoshis);
     }
-  }, [readingNfcLoop, isNfcAvailable, isNfcNeedsTap, lightningInvoice]);
+  }, [readingNfcLoop, isNfcAvailable, isNfcNeedsTap, lightningInvoice, satoshis]);
 
   useEffect(() => {
     if (isNfcActionSuccess) {
@@ -164,7 +168,7 @@ export const Invoice = () => {
                 type: "bitcoin",
                 title: t("startScanning"),
                 onPress: () => {
-                  void readingNfcLoop(lightningInvoice);
+                  void readingNfcLoop(lightningInvoice, satoshis);
                 }
               }
             }
@@ -280,6 +284,8 @@ export const Invoice = () => {
             onPress={onReturnToHome}
           />
         </S.SuccessComponentStack>
+      ) : isPinRequired && !isPinConfirmed ? (
+            <PinPad onPinEntered={setPin}/>
       ) : isNfcLoading || isNfcScanning ? (
         <Loader
           reason={t(isNfcLoading ? "payingInvoice" : "tapYourBoltCard")}