@procivis/one-react-native-components 0.1.63 → 0.2.54

package/src/utils/hooks/navigation/close-button-timeout.tsx

@@ -0,0 +1,29 @@
+import { useEffect, useState } from 'react';
+
+export const useCloseButtonTimeout = (active: boolean, closeButtonHandler: () => void) => {
+  const [closeTimeout, setCloseTimeout] = useState(5);
+
+  useEffect(() => {
+    if (!active) {
+      return;
+    }
+
+    const interval = setInterval(() => {
+      setCloseTimeout((prev) => {
+        const next = prev - 1;
+        return next > 0 ? next : 0;
+      });
+    }, 1000);
+    return () => {
+      clearInterval(interval);
+    };
+  }, [active]);
+
+  useEffect(() => {
+    if (active && closeTimeout === 0) {
+      closeButtonHandler();
+    }
+  }, [closeTimeout, active, closeButtonHandler]);
+
+  return { closeTimeout };
+};

package/src/utils/hooks/navigation/deep-link.ts

@@ -0,0 +1,40 @@
+import { useCallback, useEffect, useState } from 'react';
+import { Linking } from 'react-native';
+
+import { reportException, reportTraceInfo } from '../../reporting';
+
+export const useRuntimeDeepLinkHandling = (enabled: boolean, handleInvitationUrl: (invitationUrl: string) => void) => {
+  const [deepLinkURL, setDeepLinkURL] = useState<string>();
+  useEffect(() => {
+    const subscription = Linking.addEventListener('url', ({ url }) => {
+      reportTraceInfo('Connection', 'Runtime deep link');
+      setDeepLinkURL(url);
+    });
+    return () => subscription.remove();
+  }, []);
+
+  useEffect(() => {
+    if (!enabled || !deepLinkURL) {
+      return;
+    }
+    setDeepLinkURL(undefined);
+    handleInvitationUrl(deepLinkURL);
+  }, [deepLinkURL, enabled, handleInvitationUrl]);
+};
+
+let initialDeepLinkHandled = false;
+export const useInitialDeepLinkHandling = (handleInvitationUrl: (invitationUrl: string) => void) => {
+  return useCallback(() => {
+    if (!initialDeepLinkHandled) {
+      Linking.getInitialURL()
+        .then((url) => {
+          initialDeepLinkHandled = true;
+          if (url) {
+            reportTraceInfo('Connection', 'Initial deep link');
+            handleInvitationUrl(url);
+          }
+        })
+        .catch((e) => reportException(e, 'Failed to get initial deep link'));
+    }
+  }, [handleInvitationUrl]);
+};

package/src/utils/hooks/navigation/index.ts

@@ -0,0 +1,4 @@
+export * from './before-remove';
+export * from './close-button-timeout';
+export * from './deep-link';
+export * from './open-settings';

package/src/utils/hooks/navigation/open-settings.ts

@@ -0,0 +1,40 @@
+import { useCallback } from 'react';
+import { Linking, Platform } from 'react-native';
+import { openSettings } from 'react-native-bluetooth-state-manager';
+
+export const useOpenSettings = () => {
+  const openBleSettings = useCallback(() => {
+    if (Platform.OS === 'ios') {
+      Linking.openURL('App-prefs:root=Bluetooth').catch(() => {});
+    } else {
+      Linking.sendIntent('android.settings.BLUETOOTH_SETTINGS').catch(() => {});
+    }
+  }, []);
+
+  const openMobileNetworkSettings = useCallback(() => {
+    if (Platform.OS === 'ios') {
+      Linking.openURL('App-prefs:root=MOBILE_DATA_SETTINGS_ID').catch(() => {});
+    } else {
+      Linking.sendIntent('android.settings.WIRELESS_SETTINGS').catch(() => {});
+    }
+  }, []);
+
+  const openWiFiSettings = useCallback(() => {
+    if (Platform.OS === 'ios') {
+      Linking.openURL('App-prefs:root=WIFI').catch(() => {});
+    } else {
+      Linking.sendIntent('android.settings.WIFI_SETTINGS').catch(() => {});
+    }
+  }, []);
+
+  const openAppPermissionSettings = useCallback(() => {
+    openSettings().catch(() => {});
+  }, []);
+
+  return {
+    openAppPermissionSettings,
+    openBleSettings,
+    openMobileNetworkSettings,
+    openWiFiSettings,
+  };
+};

package/src/utils/hooks/pin-security/pin-security.ts

@@ -0,0 +1,99 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { getTime } from 'react-native-system-time';
+
+import { reportException } from '../../reporting';
+
+const getSecureSystemTime = async () => {
+  // converting nanoseconds to seconds
+  return Math.floor((await getTime()) / 1000000000);
+};
+
+export const usePinCodeSecurity = (
+  failedAttempts: number,
+  lastAttemptTimestamp: number | undefined,
+  setPinCodeSecurity: (failedAttempts: number, lastAttemptTimestamp: number | undefined) => void,
+  allowedAttempts = 3,
+) => {
+  const [attempts, setAttempts] = useState(failedAttempts);
+  const [lastTimestamp, setLastTimestamp] = useState(lastAttemptTimestamp);
+  const [isBlocked, setIsBlocked] = useState(failedAttempts >= allowedAttempts && lastAttemptTimestamp !== undefined);
+  const [blockRemainingTime, setBlockRemainingTime] = useState(0);
+  const timer = useRef<ReturnType<typeof setInterval>>();
+
+  const calculateBlockTime = useCallback(() => {
+    if (!lastTimestamp) {
+      return;
+    }
+    // Get seconds since device boot
+    getSecureSystemTime()
+      .then((currentTime) => {
+        // Compute how long should the user wait
+        const waitingtime = Math.pow(2, attempts - allowedAttempts) * 60;
+
+        // Get how much time passed since the last attempt
+        const timepassed = currentTime - lastTimestamp;
+
+        let blockTime = waitingtime - timepassed;
+
+        if (timepassed < 0) {
+          // Device was rebooted since the last attempt
+          // Current time goes from zero again
+          blockTime = waitingtime - currentTime;
+        }
+
+        setIsBlocked(blockTime > 0);
+        setBlockRemainingTime(Math.max(0, blockTime));
+        if (blockTime <= 0) {
+          setPinCodeSecurity(attempts, undefined);
+          setLastTimestamp(undefined);
+        }
+      })
+      .catch((e) => {
+        reportException(e, 'failed to get secure system time');
+      });
+  }, [allowedAttempts, attempts, lastTimestamp, setPinCodeSecurity]);
+
+  const addFailedAttempt = useCallback(() => {
+    getSecureSystemTime()
+      .then((currentTime) => {
+        const newAttempts = attempts + 1;
+        setPinCodeSecurity(newAttempts, currentTime);
+        setAttempts(newAttempts);
+        setLastTimestamp(currentTime);
+        if (newAttempts === allowedAttempts) {
+          calculateBlockTime();
+        }
+      })
+      .catch((e) => {
+        reportException(e, 'failed to get secure system time');
+      });
+  }, [allowedAttempts, attempts, calculateBlockTime, setPinCodeSecurity]);
+
+  const resetPinSecurity = useCallback(() => {
+    setPinCodeSecurity(0, undefined);
+    setLastTimestamp(undefined);
+    setAttempts(0);
+  }, [setPinCodeSecurity]);
+
+  useEffect(() => {
+    if (isBlocked && timer.current === undefined) {
+      timer.current = setInterval(calculateBlockTime, 500);
+    } else if (!isBlocked && timer.current !== undefined) {
+      clearInterval(timer.current);
+      timer.current = undefined;
+    }
+  }, [isBlocked, calculateBlockTime]);
+
+  useEffect(() => {
+    if (attempts >= allowedAttempts && lastAttemptTimestamp && !isBlocked) {
+      calculateBlockTime();
+    }
+  }, [allowedAttempts, attempts, calculateBlockTime, isBlocked, lastAttemptTimestamp]);
+
+  return {
+    addFailedAttempt,
+    blockRemainingTime,
+    isBlocked,
+    resetPinSecurity,
+  };
+};

package/src/utils/hooks/revocation/credential-status.ts

@@ -0,0 +1,44 @@
+import { CredentialStateEnum } from '@procivis/react-native-one-core';
+import { useIsFocused } from '@react-navigation/native';
+import { useCallback, useRef } from 'react';
+
+import { reportException } from '../../reporting';
+import { useCredentialRevocationCheck, useCredentials } from '../core/credentials';
+
+/**
+ * Runs revocation check on background for all potential updates
+ *
+ * Navigates to the result page if some credential states were updated
+ * @param {string[]} credentialIds if specified only those credentials get checked, otherwise all potentially eligible credentials
+ */
+export const useCredentialStatusCheck = (credentialIds?: string[]) => {
+  const isFocused = useIsFocused();
+  const checkDone = useRef(false);
+  const { mutateAsync: check } = useCredentialRevocationCheck();
+  const { data: credentials } = useCredentials({
+    ids: credentialIds,
+    status: [CredentialStateEnum.ACCEPTED, CredentialStateEnum.SUSPENDED],
+  });
+
+  const checkCredentialsStatus = useCallback(async () => {
+    if (!credentials || !credentials.length || checkDone.current || !isFocused) {
+      return [];
+    }
+
+    const results = await check(credentials.map(({ id }) => id)).catch((e) => {
+      reportException(e, 'Revocation check failed');
+      return [];
+    });
+
+    const updatedCredentialIds = results
+      .filter(
+        ({ credentialId, status: newStatus, success }) =>
+          success && credentials.find(({ id }) => id === credentialId)?.state !== newStatus,
+      )
+      .map(({ credentialId }) => credentialId);
+
+    return updatedCredentialIds;
+  }, [check, credentials, isFocused]);
+
+  return checkCredentialsStatus;
+};

package/src/utils/index.ts

@@ -1,19 +1,16 @@
 import ContrastingStatusBar from './contrasting-status-bar';
-import { formatDate, formatDateTime, formatTime } from './date';
-import { useBlockOSBackNavigation } from './navigation';
-import { useForwardedRef } from './ref';
 import { concatTestID } from './testID';
-import { useMemoAsync } from './useMemoAsync';
 
-export {
-  concatTestID,
-  ContrastingStatusBar,
-  formatDate,
-  formatDateTime,
-  formatTime,
-  useBlockOSBackNavigation,
-  useForwardedRef,
-  useMemoAsync,
-};
+export { concatTestID, ContrastingStatusBar };
 
+export * from './backup';
+export * from './color';
+export * from './date';
 export * from './hooks';
+export * from './navigation';
+export * from './parsers';
+export * from './ref';
+export * from './reporting';
+export * from './string';
+export * from './useMemoAsync';
+export * from './uuid';

package/src/utils/parsers/credential-images.tsx

@@ -0,0 +1,78 @@
+import { Claim, CredentialSchemaCodeType, CredentialSchemaLayoutProperties } from '@procivis/react-native-one-core';
+import React from 'react';
+import { StyleSheet } from 'react-native';
+
+import { Barcode, CarouselImage, CarouselImageType, Mrz, QrCode } from '../../ui-components/credential';
+import { ImageOrComponent } from '../../ui-components/image';
+import { isASCII } from '../string';
+import { concatTestID } from '../testID';
+import { findClaimByPath } from './credential';
+
+const styles = StyleSheet.create({
+  container: {
+    height: '100%',
+    justifyContent: 'center',
+    width: '100%',
+  },
+});
+
+export const getCarouselImagesFromClaims = (
+  claims: Claim[],
+  layoutProperties?: CredentialSchemaLayoutProperties,
+  testID?: string,
+): CarouselImage[] => {
+  const result: CarouselImage[] = [];
+
+  if (!layoutProperties) {
+    return result;
+  }
+
+  const { code, pictureAttribute } = layoutProperties;
+
+  if (pictureAttribute) {
+    const pictureClaim = findClaimByPath(pictureAttribute, claims);
+    if (pictureClaim) {
+      result.push({
+        element: (
+          <ImageOrComponent
+            source={{ imageSource: { uri: pictureClaim.value as string } }}
+            style={styles.container}
+            testID={concatTestID(testID, CarouselImageType.Photo)}
+          />
+        ),
+        type: CarouselImageType.Photo,
+      });
+    }
+  }
+
+  if (code) {
+    const claim = findClaimByPath(code.attribute, claims);
+
+    if (claim && typeof claim.value === 'number') {
+      claim.value = String(claim.value);
+    }
+
+    if (!claim || typeof claim.value !== 'string') {
+      return result;
+    }
+
+    if (code.type === CredentialSchemaCodeType.QR_CODE) {
+      result.push({
+        element: <QrCode content={claim.value} testID={concatTestID(testID, CarouselImageType.QrCode)} />,
+        type: CarouselImageType.QrCode,
+      });
+    } else if (code.type === CredentialSchemaCodeType.BARCODE && isASCII(claim.value)) {
+      result.push({
+        element: <Barcode content={claim.value} testID={concatTestID(testID, CarouselImageType.Barcode)} />,
+        type: CarouselImageType.Barcode,
+      });
+    } else if (code.type === CredentialSchemaCodeType.MRZ) {
+      result.push({
+        element: <Mrz content={claim.value} testID={concatTestID(testID, CarouselImageType.MRZ)} />,
+        type: CarouselImageType.MRZ,
+      });
+    }
+  }
+
+  return result;
+};