Add: scaling function for multi-device

packages/mobile/src/components/pincode/pincode-component.tsx

@@ -1,4 +1,10 @@
-import React, { FunctionComponent, useEffect, useRef, useState } from "react";
+import React, {
+  FunctionComponent,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import {
   View,
   StyleSheet,
@@ -82,22 +88,25 @@ export const Pincode: FunctionComponent<{
     setPrevPad("alphabet");
     appInitStore.updateKeyboardType("alphabet");
 
-    if (password.length >= 6) {
-      if (needConfirmation) {
-        if (!confirmCode) {
-          setConfirmCode(password);
-          setPassword("");
-        } else {
-          handleCheckConfirm(password);
-        }
-      } else {
-        onVerifyPincode(password);
-      }
-    } else {
+    const isPasswordValid = password.length >= 6;
+    const shouldSetConfirmCode = needConfirmation && !confirmCode;
+    const shouldCheckConfirm = needConfirmation && confirmCode;
+    const shouldVerifyPincode = !needConfirmation;
+
+    if (!isPasswordValid) {
       showToast({
         message: "*The password must be at least 6 characters",
         type: "danger",
       });
+      return;
+    }
+    if (shouldSetConfirmCode) {
+      setConfirmCode(password);
+      setPassword("");
+    } else if (shouldCheckConfirm) {
+      handleCheckConfirm(password);
+    } else if (shouldVerifyPincode) {
+      onVerifyPincode(password);
     }
   };
 
@@ -153,23 +162,22 @@ export const Pincode: FunctionComponent<{
     }
   };
 
-  useEffect(() => {
-    if (needConfirmation) {
-      if (code.length >= 6) {
-        if (confirmCode) {
-          handleConfirm();
-        } else {
-          handleSetPassword();
-        }
-      }
-    } else {
-      if (code.length >= 6) {
-        numpadRef?.current?.clearAll();
-        onVerifyPincode(code);
-      }
+  const handleLogicAfterCodeChange = useCallback(() => {
+    if (code.length <= 6) return;
+    const needHandleConfirm = needConfirmation && confirmCode;
+    const needResetPassword = needConfirmation && !confirmCode;
+    needHandleConfirm && handleConfirm();
+    needResetPassword && handleSetPassword();
+    if (!needConfirmation) {
+      numpadRef?.current?.clearAll();
+      onVerifyPincode(code);
     }
   }, [code]);
 
+  useEffect(() => {
+    handleLogicAfterCodeChange();
+  }, [handleLogicAfterCodeChange]);
+
   const renderPassword = ({ field: {} }) => {
     return (
       <TextInput

packages/mobile/src/styles/builder/utils.ts

@@ -1,4 +1,5 @@
-import { Platform } from "react-native";
+import { Dimensions, Platform, StyleSheet } from "react-native";
+const { height, width } = Dimensions.get("window");
 
 type FontWeightNumbers =
   | "100"
@@ -34,6 +35,57 @@ const FontWeightTypesMap: { [key in FontWeightTypes]: FontWeightNumbers } = {
   black: "900",
 };
 
+//iphone 13
+const baseWidth = 390;
+const baseHeight = 844;
+
+export const isTablet = height / width < 1.6;
+
+/**
+ *
+ * @param {number} size
+ * @returns {number}
+ * ex: paddingTop: scale(16), fontSize: scale(16), marginLeft: scale(8)
+ */
+export const scale = (size: number): number => {
+  if (isTablet) {
+    return (height / baseHeight) * size;
+  } else {
+    return (width / baseWidth) * size;
+  }
+};
+
+/**
+ * Apply scale to numeric values ​​in style
+ * @param {Record<string, unknown>} style - The style object needs to have scale applied
+ * @param {boolean} [isScale=true] - Flag to determine whether scaling is applied or not (optional), default is true
+ * @returns {Record<string, unknown> | undefined} - The style object has scale applied or undefined if the style is undefined
+ * ex: 
+ * <OWButton
+    style={styleWithScale(styles.btnOW)}
+    size="default"
+    label="Create a new wallet"
+    onPress={handleCreateANewWallet}
+  />
+ */
+export const styleWithScale = (
+  style: Record<string, unknown>,
+  isScale = true
+) => {
+  if (style === undefined) {
+    return undefined;
+  }
+  const flattenedStyle = StyleSheet.flatten(style);
+  const scaledEntries = Object.entries(flattenedStyle).map(([key, value]) => {
+    if (typeof value === "number" && !["flex", "opacity"].includes(key)) {
+      return [key, isScale ? scale(value) : value];
+    }
+    return [key, value];
+  });
+
+  return Object.fromEntries(scaledEntries);
+};
+
 export function getPlatformFontWeight(
   fontWeight: FontWeightTypes | FontWeightNumbers
 ): {