@procivis/one-react-native-components 0.3.99 → 0.3.106

package/src/ui-components/credential/card/credential-image-carousel.tsx

@@ -78,7 +78,7 @@ const CarouselComponent: FC<CarouselProps> = ({ carouselSize, imagesToRender, st
 
 const styles = StyleSheet.create({
   // eslint-disable-next-line react-native/no-unused-styles
-  Barcode: { borderRadius: 4, height: '50%', width: '80%' },
+  Barcode: { borderRadius: 4, borderWidth: 0, height: '50%', width: '80%' },
   // eslint-disable-next-line react-native/no-unused-styles
   MRZ: {
     height: '50%',
@@ -94,7 +94,7 @@ const styles = StyleSheet.create({
     overflow: 'hidden',
   },
   // eslint-disable-next-line react-native/no-unused-styles
-  QrCode: { aspectRatio: 1, borderRadius: 4, height: '70%' },
+  QrCode: { aspectRatio: 1, borderRadius: 4, borderWidth: 0, height: '70%' },
   carouselItem: {
     alignItems: 'center',
     height: '100%',

package/src/ui-components/credential/credential-attribute-item.tsx

@@ -367,6 +367,7 @@ const styles = StyleSheet.create({
   },
   touchableAttribute: {
     borderRadius: 8,
+    borderWidth: 0,
     flex: 1,
     paddingVertical: 11,
   },

package/src/ui-components/credential/credential-carousel-images.tsx

@@ -12,6 +12,7 @@ const styles = StyleSheet.create({
     alignSelf: 'center',
     backgroundColor: 'white',
     borderRadius: 5,
+    borderWidth: 0,
   },
   barcodeContent: {
     margin: 12,

package/src/ui-components/credential/selector.tsx

@@ -55,6 +55,7 @@ const styles = StyleSheet.create({
   wrapper: {
     alignItems: 'center',
     borderRadius: 12,
+    borderWidth: 0,
     height: 24,
     justifyContent: 'center',
     width: 24,

package/src/ui-components/entity/avatar.tsx

@@ -86,6 +86,7 @@ const styles = StyleSheet.create({
   },
   imageWrapper: {
     borderRadius: 36,
+    borderWidth: 0,
     height: '100%',
     overflow: 'hidden',
     width: '100%',

package/src/ui-components/header/foldable-header.tsx

@@ -27,8 +27,9 @@ const FoldableSearchHeader: FunctionComponent<FoldableHeaderProps> = ({
   const [collapsed, setCollapsed] = useState(header ? false : true);
   const [headerHeight, setHeaderHeight] = useState<number>();
 
+  const containerPaddingTop = withNotice ? 15 : safeAreaInsets.top;
   const containerPaddingStyle = {
-    paddingTop: withNotice ? 15 : safeAreaInsets.top,
+    paddingTop: containerPaddingTop,
   };
 
   useEffect(() => {
@@ -52,11 +53,13 @@ const FoldableSearchHeader: FunctionComponent<FoldableHeaderProps> = ({
 
   const scrollHeaderAnimatedStyle: Animated.WithAnimatedObject<ViewStyle> | undefined = playHeaderFoldAnimation
     ? {
-        paddingTop: scrollOffset.interpolate({
-          extrapolate: 'clamp',
-          inputRange: [0, headerHeight],
-          outputRange: [headerHeight, 0],
-        }),
+        transform: [{
+          translateY: scrollOffset.interpolate({
+            extrapolate: 'clamp',
+            inputRange: [0, headerHeight],
+            outputRange: [0, -headerHeight],
+          }),
+        }],
       }
     : undefined;
 
@@ -80,32 +83,36 @@ const FoldableSearchHeader: FunctionComponent<FoldableHeaderProps> = ({
   return (
     <Animated.View
       style={[styles.headerContainer, containerPaddingStyle, withNotice ? styles.noticeBorderRadius : undefined]}>
-      <View style={[styles.blurWrapper, StyleSheet.absoluteFill]}>
-        <BlurView
-          blurStyle={'header'}
-          color={colorScheme.background}
-          style={[StyleSheet.absoluteFill, withNotice ? styles.noticeBorderRadius : undefined]}
-        />
-      </View>
-      <View>
-        <Animated.View style={scrollHeaderAnimatedStyle}>
-          {searchBar && <AnimatedSearchBar {...searchBar} collapsed={collapsed} />}
-        </Animated.View>
+      <Animated.View style={scrollHeaderAnimatedStyle}>
+        <View
+          style={[styles.blurFill, { top: -containerPaddingTop }]}>
+          <BlurView
+            blurStyle={'header'}
+            color={colorScheme.background}
+            style={[StyleSheet.absoluteFill, withNotice ? styles.noticeBorderRadius : undefined]}
+          />
+        </View>
         {header && (
-          <Animated.View onLayout={onHeaderLayout} style={[styles.headerContainer, fadeHeaderOutAnimatedStyle]}>
+          <Animated.View onLayout={onHeaderLayout} style={fadeHeaderOutAnimatedStyle}>
             {header}
           </Animated.View>
         )}
-      </View>
+        {searchBar && <AnimatedSearchBar {...searchBar} collapsed={collapsed} />}
+      </Animated.View>
     </Animated.View>
   );
 };
 
 const styles = StyleSheet.create({
-  blurWrapper: {
+  blurFill: {
+    bottom: 0,
+    left: 0,
     overflow: 'hidden',
+    position: 'absolute',
+    right: 0,
   },
   headerContainer: {
+    overflow: 'hidden',
     position: 'absolute',
     width: '100%',
   },

package/src/ui-components/header/navigation-header.tsx

@@ -129,6 +129,7 @@ const styles = StyleSheet.create({
   },
   modalHandle: {
     borderRadius: 2.5,
+    borderWidth: 0,
     height: 5,
     marginVertical: 5,
     width: 36,

package/src/ui-components/history/history-details.tsx

@@ -222,6 +222,7 @@ export const HistoryDetailsView: FC<HistoryDetailsViewProps> = ({
 const styles = StyleSheet.create({
   assetsHeader: {
     borderRadius: 8,
+    borderWidth: 0,
   },
   content: {
     paddingHorizontal: 16,
@@ -242,6 +243,7 @@ const styles = StyleSheet.create({
   },
   section: {
     borderRadius: 8,
+    borderWidth: 0,
     marginBottom: 12,
     padding: 12,
   },

package/src/ui-components/icons/history.tsx

@@ -317,6 +317,7 @@ export const HistoryItemIcon: FC<HistoryItemIconProps> = (props) => {
 const styles = StyleSheet.create({
   round: {
     borderRadius: 24,
+    borderWidth: 0,
     overflow: 'hidden',
   },
   status: {

package/src/ui-components/index.ts

@@ -17,6 +17,7 @@ export * from './list';
 export * from './loader';
 export * from './nerd-view';
 export * from './nfc';
+export * from './notice';
 export * from './pin';
 export * from './proof-request';
 export * from './screens';

package/src/ui-components/notice/index.ts

@@ -0,0 +1,3 @@
+import WalletNotice from './wallet-notice';
+
+export { WalletNotice };

package/src/ui-components/notice/wallet-notice.tsx

@@ -0,0 +1,82 @@
+import React, { ComponentType, FunctionComponent, JSXElementConstructor, ReactElement, useMemo } from 'react';
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+
+import { concatTestID } from '../../utils';
+import { TouchableOpacity } from '../accessibility/accessibilityHistoryWrappers';
+import { CloseIcon } from '../icons';
+import { Typography } from '../text';
+import { useAppColorScheme } from '../theme';
+
+export type WalletNoticeProps = {
+  accessory?: ComponentType<any> | ReactElement;
+  icon?: ComponentType<any> | ReactElement;
+  onClose?: () => void;
+  style?: StyleProp<ViewStyle>;
+  text: string;
+};
+
+const testID = 'WalletNotice';
+
+const WalletNotice: FunctionComponent<WalletNoticeProps> = ({ accessory, icon, style, text, onClose }) => {
+  const colorScheme = useAppColorScheme();
+
+  const iconView: React.ReactElement | undefined = useMemo(() => {
+    if (!icon) {
+      return undefined;
+    }
+    if (React.isValidElement(icon)) {
+      return icon;
+    } else {
+      const IconComponent = icon as JSXElementConstructor<any>;
+      return <IconComponent />;
+    }
+  }, [icon]);
+
+  const accessoryView: React.ReactElement | undefined = useMemo(() => {
+    if (!accessory) {
+      return undefined;
+    }
+    if (React.isValidElement(accessory)) {
+      return accessory;
+    } else {
+      const AccessoryComponent = accessory as JSXElementConstructor<any>;
+      return <AccessoryComponent />;
+    }
+  }, [accessory]);
+
+  return (
+    <View style={[styles.noticeContainer, style]}>
+      <View style={styles.title}>
+        {iconView}
+        <Typography color={colorScheme.white}>{text}</Typography>
+        {accessoryView}
+      </View>
+      {onClose && (
+        <TouchableOpacity onPress={onClose} style={styles.closeIcon} testID={concatTestID(testID, 'close')}>
+          <CloseIcon color="white" />
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  closeIcon: {
+    position: 'absolute',
+    right: 20,
+    top: 5,
+  },
+  noticeContainer: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    position: 'relative',
+  },
+  title: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    gap: 5,
+    justifyContent: 'center',
+  },
+});
+
+export default WalletNotice;

package/src/ui-components/pin/keypad.tsx

@@ -155,6 +155,7 @@ const styles = StyleSheet.create({
   key: {
     alignItems: 'center',
     borderRadius: KEY_SIZE / 2,
+    borderWidth: 0,
     height: KEY_SIZE,
     justifyContent: 'center',
     width: KEY_SIZE,

package/src/ui-components/pin/pins.tsx

@@ -37,6 +37,7 @@ export const Pins: FC<PinsProps> = ({ enteredLength, maxLength, style, ...props
 const styles = StyleSheet.create({
   pin: {
     borderRadius: 3,
+    borderWidth: 0,
     height: 10,
     width: 10,
   },

package/src/ui-components/settings/setting-item.tsx

@@ -15,6 +15,7 @@ const styles = StyleSheet.create({
   icon: {
     alignItems: 'center',
     borderRadius: 18,
+    borderWidth: 0,
     height: 36,
     justifyContent: 'center',
     marginRight: 12,

package/src/ui-components/settings/settings-button.tsx

@@ -14,6 +14,7 @@ const SettingsButton: FC<SettingsButtonProps> = ({ style, ...props }) => {
 const styles = StyleSheet.create({
   button: {
     borderRadius: 12,
+    borderWidth: 0,
     height: 68,
     marginHorizontal: 0,
     paddingHorizontal: 12,

package/src/utils/hooks/core/proofs.ts

@@ -151,7 +151,6 @@ export enum VerificationProtocol {
   OPENID4VP_DRAFT20 = 'OPENID4VP_DRAFT20',
   OPENID4VP_DRAFT25 = 'OPENID4VP_DRAFT25',
   OPENID4VP_PROXIMITY_DRAFT00 = 'OPENID4VP_PROXIMITY_DRAFT00',
-  SCAN_TO_VERIFY = 'SCAN_TO_VERIFY',
 }
 
 export enum VerificationEngagement {
@@ -284,6 +283,15 @@ export const useProofForSchemaIdWithTransport = (
     setProofIdState(id);
   }, []);
 
+  const retract = useCallback(async () => {
+    const id = proofIdRef.current;
+    if (!id) {
+      return;
+    }
+    setProofId(undefined);
+    await deleteProof(id).catch(() => {});
+  }, [deleteProof, setProofId]);
+
   useEffect(() => {
     if (!proofIdRef.current) {
       return;
@@ -341,7 +349,7 @@ export const useProofForSchemaIdWithTransport = (
       .catch(() => {});
   }, [proofSchemaId, identifiers, identifierFilter, createProof, enabled, transport, proofId, setProofId, deleting]);
 
-  return deleting ? undefined : proofId;
+  return { proofId: deleting ? undefined : proofId, retract };
 };
 
 export const useCleanupUnusedProofs = () => {

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

@@ -54,7 +54,7 @@ export const getCarouselImagesFromClaims = (
 
     let claimValue = '';
 
-    if (claim && (claim.value.type_ === 'FLOAT' || claim.value.type_ === 'INTEGER')) {
+    if (claim && (claim.value.type_ === 'FLOAT' || claim.value.type_ === 'INTEGER' || claim.value.type_ === 'STRING')) {
       claimValue = String(claim.value.value);
     }
 

package/src/utils/parsers/credential-sharing-v2.tsx

@@ -181,7 +181,6 @@ export const shareCredentialCardFromV2PresentationCredential = (
           ...credential,
           claims: [],
         },
-        false,
         expanded,
         multipleCredentialsAvailable,
         config,

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

@@ -30,7 +30,6 @@ import {
 
 export const validityCheckedCardFromCredential = (
   credential: CredentialDetailBindingDto,
-  invalidLVVC: boolean,
   expanded: boolean,
   multipleCredentialsAvailable: boolean,
   config: Config,
@@ -48,13 +47,7 @@ export const validityCheckedCardFromCredential = (
         | 'statusIcon'
       >
     | undefined;
-  if (invalidLVVC) {
-    credentialHeaderDetail = {
-      credentialDetailErrorColor: true,
-      credentialDetailPrimary: labels.revoked,
-      credentialDetailTestID: concatTestID(testID, 'header.invalid'),
-    };
-  } else if (!expanded && multipleCredentialsAvailable) {
+  if (!expanded && multipleCredentialsAvailable) {
     credentialHeaderDetail = {
       credentialDetailPrimary: labels.multipleCredentials,
       credentialDetailTestID: concatTestID(testID, 'header.multiple'),
@@ -258,7 +251,6 @@ export type ShareCredentialCardLabels = CardLabels & {
 
 export const shareCredentialCardFromCredential = (
   credential: CredentialDetailBindingDto | undefined,
-  invalidLVVC: boolean,
   expanded: boolean,
   multipleCredentialsAvailable: boolean,
   request: PresentationDefinitionRequestedCredentialBindingDto,
@@ -282,7 +274,6 @@ export const shareCredentialCardFromCredential = (
   const card = credential
     ? validityCheckedCardFromCredential(
         credential,
-        invalidLVVC,
         expanded,
         multipleCredentialsAvailable,
         config,

package/src/utils/parsers/credential.ts

@@ -3,7 +3,7 @@ import {
   Config,
   CredentialDetailBindingDto,
   CredentialListItemBindingDto,
-  CredentialSchemaDetailBindingDto,
+  CredentialSchemaBindingDto,
   CredentialStateBindingEnum,
   DataTypeEnum,
   FormatFeatureEnum,
@@ -402,7 +402,7 @@ function parseBase64Image(image: string | undefined) {
   return image ? '__BASE64IMAGE__' : '';
 }
 
-export function getCredentialSchemaWithoutImages(credentialSchema: CredentialSchemaDetailBindingDto) {
+export function getCredentialSchemaWithoutImages<T extends CredentialSchemaBindingDto>(credentialSchema: T): T {
   return {
     ...credentialSchema,
     layoutProperties: {