[FEAT]: Set nbDigits dynamic for PinCodeInput (#7553)

LedgerHQ · Aug 8, 2024 · 0407529 · 0407529
1 parent 95572e2
commit 0407529
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 29 deletions.
diff --git a/.changeset/metal-dolls-whisper.md b/.changeset/metal-dolls-whisper.md
@@ -0,0 +1,5 @@
+---
+"live-mobile": patch
+---
+
+Set nbDigits dynamic for PinCodeInput
diff --git a/...dger-live-mobile/src/newArch/features/Accounts/screens/AddAccount/components/StepFlow.tsx b/...dger-live-mobile/src/newArch/features/Accounts/screens/AddAccount/components/StepFlow.tsx
@@ -44,15 +44,15 @@ const StepFlow = ({
 }: Props) => {
   const { memberCredentials } = useInitMemberCredentials();
 
-  const { handleStart, handleSendDigits, inputCallback, digits } = useSyncWithQrCode();
+  const { handleStart, handleSendDigits, inputCallback, nbDigits } = useSyncWithQrCode();
 
   const handleQrCodeScanned = (data: string) => {
     onQrCodeScanned();
     if (memberCredentials) handleStart(data, memberCredentials, setCurrentStep);
   };
 
   const handlePinCodeSubmit = (input: string) => {
-    if (input && inputCallback && digits === input.length) handleSendDigits(inputCallback, input);
+    if (input && inputCallback && nbDigits === input.length) handleSendDigits(inputCallback, input);
   };
 
   const getScene = () => {
@@ -88,7 +88,9 @@ const StepFlow = ({
         return qrProcess.pinCode ? <PinCodeDisplay pinCode={qrProcess.pinCode} /> : null;
 
       case Steps.PinInput:
-        return <PinCodeInput handleSendDigits={handlePinCodeSubmit} />;
+        return nbDigits ? (
+          <PinCodeInput handleSendDigits={handlePinCodeSubmit} nbDigits={nbDigits} />
+        ) : null;
 
       case Steps.SyncError:
         return <SyncError tryAgain={navigateToQrCodeMethod} />;

diff --git a/...dger-live-mobile/src/newArch/features/WalletSync/components/Activation/ActivationFlow.tsx b/...dger-live-mobile/src/newArch/features/WalletSync/components/Activation/ActivationFlow.tsx
@@ -39,15 +39,15 @@ const ActivationFlow = ({
 }: Props) => {
   const { memberCredentials } = useInitMemberCredentials();
 
-  const { handleStart, handleSendDigits, inputCallback, digits } = useSyncWithQrCode();
+  const { handleStart, handleSendDigits, inputCallback, nbDigits } = useSyncWithQrCode();
 
   const handleQrCodeScanned = (data: string) => {
     onQrCodeScanned();
     if (memberCredentials) handleStart(data, memberCredentials, setCurrentStep);
   };
 
   const handlePinCodeSubmit = (input: string) => {
-    if (input && inputCallback && digits === input.length) handleSendDigits(inputCallback, input);
+    if (input && inputCallback && nbDigits === input.length) handleSendDigits(inputCallback, input);
   };
 
   const getScene = () => {
@@ -79,7 +79,9 @@ const ActivationFlow = ({
         return qrProcess.pinCode ? <PinCodeDisplay pinCode={qrProcess.pinCode} /> : null;
 
       case Steps.PinInput:
-        return <PinCodeInput handleSendDigits={handlePinCodeSubmit} />;
+        return nbDigits ? (
+          <PinCodeInput handleSendDigits={handlePinCodeSubmit} nbDigits={nbDigits} />
+        ) : null;
 
       case Steps.SyncError:
         return <SyncError tryAgain={navigateToQrCodeMethod} />;

diff --git a/...-live-mobile/src/newArch/features/WalletSync/components/ManageInstances/ListInstances.tsx b/...-live-mobile/src/newArch/features/WalletSync/components/ManageInstances/ListInstances.tsx
@@ -19,11 +19,7 @@ export function ListInstances({ onClickInstance, changeScene, members, currentIn
 
   const handleAutoRemove = () => changeScene(Scene.AutoRemove);
 
-  const handleGoDeleteInstance = (instance: TrustchainMember) => {
-    // eslint-disable-next-line no-console
-    console.log("delete instance IMPLEMENTED IN NEXT PR", instance);
-    onClickInstance(instance);
-  };
+  const handleGoDeleteInstance = (instance: TrustchainMember) => onClickInstance(instance);
 
   const renderItem = ({ item }: ListRenderItemInfo<TrustchainMember>) => {
     const instance = item;
@@ -54,7 +50,7 @@ export function ListInstances({ onClickInstance, changeScene, members, currentIn
         renderItem={renderItem}
         keyExtractor={s => s.id}
         contentContainerStyle={{
-          paddingBottom: 10,
+          paddingBottom: 20,
         }}
         ItemSeparatorComponent={() => <Flex height={12} />}
       />

diff --git a/apps/ledger-live-mobile/src/newArch/features/WalletSync/hooks/useSyncWithQrCode.ts b/apps/ledger-live-mobile/src/newArch/features/WalletSync/hooks/useSyncWithQrCode.ts
@@ -10,7 +10,7 @@ import { NavigatorName, ScreenName } from "~/const";
 import { useInstanceName } from "./useInstanceName";
 
 export const useSyncWithQrCode = () => {
-  const [digits, setDigits] = useState<number | null>(null);
+  const [nbDigits, setDigits] = useState<number | null>(null);
   const [input, setInput] = useState<string | null>(null);
   const instanceName = useInstanceName();
 
@@ -71,5 +71,5 @@ export const useSyncWithQrCode = () => {
     [],
   );
 
-  return { digits, input, handleStart, handleSendDigits, setInput, inputCallback };
+  return { nbDigits, input, handleStart, handleSendDigits, setInput, inputCallback };
 };
diff --git a/apps/ledger-live-mobile/src/newArch/features/WalletSync/screens/Synchronize/PinCodeInput.tsx b/apps/ledger-live-mobile/src/newArch/features/WalletSync/screens/Synchronize/PinCodeInput.tsx
@@ -8,12 +8,15 @@ import { NativeSyntheticEvent, TextInput, TextInputKeyPressEventData } from "rea
 
 type Props = {
   handleSendDigits: (input: string) => void;
+  nbDigits: number;
 };
 
-export default function PinCodeInput({ handleSendDigits }: Props) {
+export default function PinCodeInput({ nbDigits, handleSendDigits }: Props) {
   const { t } = useTranslation();
-  const inputRefs = [useRef<TextInput>(null), useRef<TextInput>(null), useRef<TextInput>(null)];
-  const [digits, setDigits] = useState<string[]>(["", "", ""]);
+
+  // Dynamically create refs based on the number of digits
+  const inputRefs = useRef<(TextInput | null)[]>(Array(nbDigits).fill(null));
+  const [digits, setDigits] = useState<string[]>(Array(nbDigits).fill(""));
 
   useEffect(() => {
     if (digits.every(digit => digit)) {
@@ -25,15 +28,15 @@ export default function PinCodeInput({ handleSendDigits }: Props) {
     const newDigits = [...digits];
     newDigits[index] = value;
     setDigits(newDigits);
-    if (value && index < digits.length - 1) {
-      inputRefs[index + 1].current?.focus();
+    if (value && index < nbDigits - 1) {
+      inputRefs.current[index + 1]?.focus();
     }
   };
 
   const handleKeyPress = (e: NativeSyntheticEvent<TextInputKeyPressEventData>, index: number) => {
     if (e.nativeEvent.key === "Backspace") {
       if (!digits[index] && index > 0) {
-        inputRefs[index - 1].current?.focus();
+        inputRefs.current[index - 1]?.focus();
       } else {
         const newDigits = [...digits];
         newDigits[index] = "";
@@ -59,7 +62,7 @@ export default function PinCodeInput({ handleSendDigits }: Props) {
             onChange={value => handleChange(value, index)}
             onKeyPress={e => handleKeyPress(e, index)}
             index={index}
-            ref={inputRefs[index]}
+            ref={el => (inputRefs.current[index] = el)}
           />
         ))}
       </Flex>
@@ -74,18 +77,12 @@ interface DigitInputProps {
   index: number;
 }
 
-interface TextInputRef {
-  focus: () => void;
-}
-
-const DigitInput = forwardRef<TextInputRef, DigitInputProps>(
+const DigitInput = forwardRef<TextInput, DigitInputProps>(
   ({ value, onChange, onKeyPress, index }, forwardedRef) => {
     const [isFocused, setIsFocused] = useState(false);
     const inputRef = useRef<TextInput>(null);
 
-    useImperativeHandle(forwardedRef, () => ({
-      focus: () => inputRef.current?.focus(),
-    }));
+    useImperativeHandle(forwardedRef, () => inputRef.current as TextInput);
 
     const handleChange = (text: string) => {
       if (text.length <= 1 && /^\d*$/.test(text)) {