@procivis/one-react-native-components 0.3.53 → 0.3.71

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

@@ -16,12 +16,14 @@ const Render = ({ onBack, withBackButton, withRightButton, ...args }: Args) => {
     <Header
       {...args}
       onBack={withBackButton ? onBack : undefined}
-      rightButton={
-        withRightButton ? (
-          <TouchableOpacity>
-            <Placeholder id="R" style={styles.rightButton} />
-          </TouchableOpacity>
-        ) : undefined
+      rightButtons={
+        withRightButton
+          ? [
+              <TouchableOpacity>
+                <Placeholder id="R" style={styles.rightButton} />
+              </TouchableOpacity>,
+            ]
+          : undefined
       }
     />
   );

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

@@ -8,7 +8,7 @@ import { useAppColorScheme } from '../theme';
 
 export interface HeaderProps extends ViewProps {
   onBack?: () => void;
-  rightButton?: ReactNode;
+  rightButtons?: ReactNode[];
   style?: StyleProp<ViewStyle>;
   titleRowStyle?: StyleProp<ViewStyle>;
   title: ReactNode;
@@ -22,7 +22,7 @@ const backButtonHitSlop: Insets = { top: 12, bottom: 12, left: 20, right: 20 };
  * Following the design: https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=425-18624
  * states (Default + Dashboard)
  */
-const Header: FC<HeaderProps> = ({ onBack, rightButton, style, titleRowStyle, testID, title, ...viewProps }) => {
+const Header: FC<HeaderProps> = ({ onBack, rightButtons, style, titleRowStyle, testID, title, ...viewProps }) => {
   const colorScheme = useAppColorScheme();
 
   return (
@@ -31,7 +31,7 @@ const Header: FC<HeaderProps> = ({ onBack, rightButton, style, titleRowStyle, te
         <View style={styles.backButtonRow}>
           <BackButton hitSlop={backButtonHitSlop} onPress={onBack} testID={concatTestID(testID, 'back')} />
           <View />
-          {rightButton}
+          {rightButtons}
         </View>
       )}
 
@@ -39,7 +39,7 @@ const Header: FC<HeaderProps> = ({ onBack, rightButton, style, titleRowStyle, te
         style={[
           styles.titleRow,
           onBack ? styles.titleRow2nd : styles.titleRowNoBackButton,
-          (onBack || !rightButton) && styles.titleRowNoRightButton,
+          (onBack || !rightButtons) && styles.titleRowNoRightButton,
           titleRowStyle,
         ]}>
         {typeof title === 'string' ? (
@@ -55,7 +55,7 @@ const Header: FC<HeaderProps> = ({ onBack, rightButton, style, titleRowStyle, te
           <View style={styles.title}>{title}</View>
         )}
 
-        {!onBack && rightButton && <View style={styles.rightButtonWrapper}>{rightButton}</View>}
+        {!onBack && rightButtons && <View style={styles.rightButtonWrapper}>{rightButtons}</View>}
       </View>
     </View>
   );
@@ -75,6 +75,8 @@ const styles = StyleSheet.create({
   },
   rightButtonWrapper: {
     alignItems: 'center',
+    flexDirection: 'row',
+    gap: '16',
     height: 48,
     justifyContent: 'center',
     paddingHorizontal: 12,

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

@@ -1,5 +1,5 @@
 import React, { ComponentType, FC, ReactElement, useEffect, useMemo } from 'react';
-import { ColorValue, ImageSourcePropType, StyleSheet, View } from 'react-native';
+import { ColorValue, Dimensions, ImageSourcePropType, StyleSheet, View } from 'react-native';
 
 import { CredentialDetails, CredentialDetailsProps, EntityDetails, EntityDetailsProps } from '../../components';
 import { HeaderInfoButton } from '../../components/navigation/header-buttons';
@@ -92,6 +92,7 @@ export const HistoryDetailsView: FC<HistoryDetailsViewProps> = ({
 }) => {
   const colorScheme = useAppColorScheme();
   const { expandedCredential, onHeaderPress, setInitialCredential } = useCredentialListExpandedCard();
+  const cardWidth = useMemo(() => Dimensions.get('window').width - 32, []);
 
   // Expand the first credential
   useEffect(() => {
@@ -199,6 +200,7 @@ export const HistoryDetailsView: FC<HistoryDetailsViewProps> = ({
             card: {
               ...props.credentialCard.card,
               onHeaderPress: props.credentialCard.headerPressable === false ? undefined : onHeaderPress,
+              width: cardWidth,
             },
           };
           return (

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

@@ -145,3 +145,110 @@ export const PlusIcon: FC<SvgProps> = ({ color, ...props }) => {
     </Svg>
   );
 };
+
+// https://www.figma.com/design/S3WwgTMHuqxAsfu5zElCzq/App-Icon-Library--Design-?node-id=660-148&t=vEKCP9Mq209PFHFX-0
+export const WalletUnitAttestationIcon: FC<SvgProps> = ({ color, ...props }) => {
+  const colorScheme = useAppColorScheme();
+  const iconColor = color ?? colorScheme.text;
+
+  return (
+    <Svg width={24} height={24} viewBox="0 0 24 24" fill="none" {...props}>
+      <Rect x={7.5} y={7.5} width={8} height={11} rx={1.5} stroke={iconColor} />
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12.176 4.882h5.295c.487 0 .882.395.882.883v8.823a.882.882 0 01-.882.883v.882c.974 0 1.764-.79 1.764-1.765V5.765c0-.975-.79-1.765-1.764-1.765h-5.295c-.974 0-1.764.79-1.764 1.765h.882c0-.488.395-.883.882-.883z"
+        fill={iconColor}
+      />
+      <Path d="M10 17h3" stroke={iconColor} />
+    </Svg>
+  );
+};
+
+// https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=426-27862
+export const StatusErrorIcon: FC<SvgProps> = (props) => {
+  const colorScheme = useAppColorScheme();
+  return (
+    <Svg fill="none" height="22" viewBox="0 0 22 22" width="22" {...props}>
+      <Path
+        d="M10.5747 20C9.40153 20 8.29753 19.7759 7.2627 19.3276C6.22786 18.8849 5.31478 18.2679 4.52344 17.4766C3.73763 16.6852 3.12061 15.7721 2.67236 14.7373C2.22412 13.7025 2 12.5985 2 11.4253C2 10.2521 2.22412 9.14811 2.67236 8.11328C3.12061 7.07845 3.73763 6.16813 4.52344 5.38232C5.31478 4.59098 6.2251 3.97119 7.25439 3.52295C8.28923 3.07471 9.39323 2.85059 10.5664 2.85059C11.7451 2.85059 12.8519 3.07471 13.8867 3.52295C14.9215 3.97119 15.8346 4.59098 16.626 5.38232C17.4173 6.16813 18.0371 7.07845 18.4854 8.11328C18.9336 9.14811 19.1577 10.2521 19.1577 11.4253C19.1577 12.5985 18.9336 13.7025 18.4854 14.7373C18.0371 15.7721 17.4173 16.6852 16.626 17.4766C15.8346 18.2679 14.9215 18.8849 13.8867 19.3276C12.8519 19.7759 11.7479 20 10.5747 20Z"
+        fill={colorScheme.error}
+      />
+      <Path
+        d="M3.81385 18.1812L3.81633 18.1837C4.69776 19.0651 5.71679 19.7536 6.86722 20.2461C8.032 20.7503 9.27117 21 10.5747 21C11.8782 21 13.1174 20.7503 14.2821 20.2461C15.4326 19.7537 16.4516 19.0651 17.3331 18.1837C18.2142 17.3026 18.9051 16.2842 19.403 15.1348C19.9077 13.9694 20.1577 12.7296 20.1577 11.4253C20.1577 10.121 19.9077 8.88117 19.403 7.71581C18.905 6.56624 18.2138 5.55009 17.3318 4.67398C16.451 3.79349 15.4331 3.103 14.2842 2.60533C13.1182 2.10029 11.8755 1.85059 10.5664 1.85059C9.26213 1.85059 8.02228 2.10055 6.85692 2.60533L6.85513 2.60611C5.71136 3.10421 4.69653 3.79502 3.81633 4.67522C2.94015 5.5514 2.25228 6.56718 1.75475 7.71581C1.24997 8.88117 1 10.121 1 11.4253C1 12.7296 1.24997 13.9694 1.75475 15.1348C2.252 16.2828 2.93915 17.3003 3.81385 18.1812Z"
+        stroke={colorScheme.white}
+        strokeOpacity="0.2"
+        strokeWidth="2"
+      />
+      <Path
+        d="M8.43311 14.7124C8.27262 14.8618 8.07894 14.9365 7.85205 14.9365C7.63623 14.9365 7.45085 14.8618 7.2959 14.7124C7.14648 14.5575 7.07178 14.3721 7.07178 14.1562C7.07178 13.9404 7.14925 13.7578 7.3042 13.6084L9.4707 11.4336L7.3042 9.27539C7.14925 9.11491 7.07178 8.93229 7.07178 8.72754C7.07178 8.50065 7.14648 8.31527 7.2959 8.17139C7.45085 8.02197 7.63623 7.94727 7.85205 7.94727C8.06787 7.94727 8.25326 8.01921 8.4082 8.16309L10.583 10.3296L12.7661 8.16309C12.9211 8.00814 13.1064 7.93066 13.3223 7.93066C13.5381 7.93066 13.7207 8.00814 13.8701 8.16309C14.0251 8.3125 14.1025 8.49512 14.1025 8.71094C14.1025 8.92122 14.0251 9.10661 13.8701 9.26709L11.6953 11.4336L13.8618 13.6001C14.0168 13.744 14.0942 13.9294 14.0942 14.1562C14.0942 14.3721 14.0168 14.5575 13.8618 14.7124C13.7124 14.8618 13.527 14.9365 13.3057 14.9365C13.0788 14.9365 12.8906 14.8618 12.7412 14.7124L10.583 12.5459L8.43311 14.7124Z"
+        fill={colorScheme.white}
+      />
+    </Svg>
+  );
+};
+
+// https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=454-100241
+export const StatusSuccessIcon: FC<SvgProps> = (props) => {
+  const colorScheme = useAppColorScheme();
+  return (
+    <Svg fill="none" height="22" viewBox="0 0 22 22" width="22" {...props}>
+      <Path
+        d="M10.5747 20C9.40153 20 8.29753 19.7759 7.2627 19.3276C6.22786 18.8849 5.31478 18.2679 4.52344 17.4766C3.73763 16.6852 3.12061 15.7721 2.67236 14.7373C2.22412 13.7025 2 12.5985 2 11.4253C2 10.2521 2.22412 9.14811 2.67236 8.11328C3.12061 7.07845 3.73763 6.16813 4.52344 5.38232C5.31478 4.59098 6.2251 3.97119 7.25439 3.52295C8.28923 3.07471 9.39323 2.85059 10.5664 2.85059C11.7451 2.85059 12.8519 3.07471 13.8867 3.52295C14.9215 3.97119 15.8346 4.59098 16.626 5.38232C17.4173 6.16813 18.0371 7.07845 18.4854 8.11328C18.9336 9.14811 19.1577 10.2521 19.1577 11.4253C19.1577 12.5985 18.9336 13.7025 18.4854 14.7373C18.0371 15.7721 17.4173 16.6852 16.626 17.4766C15.8346 18.2679 14.9215 18.8849 13.8867 19.3276C12.8519 19.7759 11.7479 20 10.5747 20Z"
+        fill={colorScheme.success}
+      />
+      <Path
+        d="M3.81385 18.1812L3.81633 18.1837C4.69776 19.0651 5.71679 19.7536 6.86722 20.2461C8.032 20.7503 9.27117 21 10.5747 21C11.8782 21 13.1174 20.7503 14.2821 20.2461C15.4326 19.7537 16.4516 19.0651 17.3331 18.1837C18.2142 17.3026 18.9051 16.2842 19.403 15.1348C19.9077 13.9694 20.1577 12.7296 20.1577 11.4253C20.1577 10.121 19.9077 8.88117 19.403 7.71581C18.905 6.56624 18.2138 5.55009 17.3318 4.67398C16.451 3.79349 15.4331 3.103 14.2842 2.60533C13.1182 2.10029 11.8755 1.85059 10.5664 1.85059C9.26213 1.85059 8.02228 2.10055 6.85692 2.60533L6.85513 2.60611C5.71136 3.10421 4.69653 3.79502 3.81633 4.67522C2.94015 5.5514 2.25228 6.56718 1.75475 7.71581C1.24997 8.88117 1 10.121 1 11.4253C1 12.7296 1.24997 13.9694 1.75475 15.1348C2.252 16.2828 2.93915 17.3003 3.81385 18.1812Z"
+        stroke="white"
+        strokeOpacity="0.2"
+        strokeWidth="2"
+      />
+      <Path
+        d="M9.91406 15.3828C10.0703 15.3828 10.2135 15.3464 10.3438 15.2734C10.4792 15.1953 10.5938 15.0885 10.6875 14.9531L14.3359 9.3125C14.3932 9.22396 14.4401 9.13021 14.4766 9.03125C14.5182 8.93229 14.5391 8.83333 14.5391 8.73438C14.5391 8.51562 14.4557 8.33854 14.2891 8.20312C14.1276 8.06771 13.9427 8 13.7344 8C13.4583 8 13.2266 8.14844 13.0391 8.44531L9.89062 13.4766L8.44531 11.6641C8.34115 11.5339 8.23698 11.4427 8.13281 11.3906C8.02865 11.3333 7.91146 11.3047 7.78125 11.3047C7.5625 11.3047 7.3776 11.3828 7.22656 11.5391C7.07552 11.6901 7 11.875 7 12.0938C7 12.1979 7.01823 12.2995 7.05469 12.3984C7.09635 12.4922 7.15365 12.5885 7.22656 12.6875L9.10938 14.9531C9.22396 15.099 9.34635 15.2083 9.47656 15.2812C9.60677 15.349 9.7526 15.3828 9.91406 15.3828Z"
+        fill="white"
+      />
+    </Svg>
+  );
+};
+
+// https://www.figma.com/design/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=415-5641&m=dev
+export const StatusWarningIcon: FC<SvgProps> = ({ ...props }) => (
+  <Svg fill="none" height={20} viewBox="0 0 22 20" width={22} {...props}>
+    <Path
+      d="M4.357 17.967c-.481 0-.899-.105-1.253-.315a2.196 2.196 0 01-.822-.847A2.473 2.473 0 012 15.627c0-.421.11-.822.332-1.204L8.757 3.225c.216-.393.506-.689.871-.888a2.36 2.36 0 011.146-.299c.398 0 .777.1 1.137.299.36.194.653.49.88.888l6.425 11.198a2.384 2.384 0 01.332 1.204c0 .431-.097.824-.29 1.178a2.196 2.196 0 01-.822.847c-.35.21-.764.315-1.246.315H4.357z"
+      fill="#F7BF0B"
+    />
+    <Path
+      d="M1.4 17.274h-.001l.006.011c.281.515.683.927 1.188 1.227.534.316 1.134.455 1.764.455H17.19c.63 0 1.229-.138 1.759-.457.504-.3.905-.711 1.186-1.225.28-.512.413-1.071.413-1.659a3.345 3.345 0 00-.467-1.705L13.66 2.73v-.002a3.226 3.226 0 00-1.27-1.27 3.312 3.312 0 00-1.616-.42 3.36 3.36 0 00-1.624.42 3.172 3.172 0 00-1.265 1.276L1.467 13.92l-.001.002A3.364 3.364 0 001 15.627c0 .582.128 1.138.4 1.647z"
+      stroke="#fff"
+      strokeOpacity={0.2}
+      strokeWidth={2}
+    />
+    <Path
+      d="M11.538 11.51c-.011.514-.263.771-.756.771-.503 0-.763-.254-.78-.763l-.116-4.184a.766.766 0 01.232-.614c.166-.166.385-.25.656-.25.266 0 .484.084.656.25.171.16.252.368.24.622l-.132 4.167zM11.496 14.871c-.2.177-.437.266-.714.266-.277 0-.517-.089-.722-.266a.87.87 0 01-.299-.68c0-.272.1-.499.3-.681.198-.183.439-.274.721-.274.277 0 .515.091.714.274.2.182.299.41.299.68a.87.87 0 01-.299.681z"
+      fill="#000"
+    />
+  </Svg>
+);
+
+export const NFCIcon: FC<SvgProps> = ({ color, ...props }) => {
+  const colorScheme = useAppColorScheme();
+  const iconColor = color ?? colorScheme.black;
+
+  return (
+    <Svg fill="none" height={64} viewBox="0 0 65 64" width={65} {...props}>
+      <Path
+        d="M37.459 53.317c12.2-12.201 12.2-31.984 0-44.186A1.6 1.6 0 0139.72 6.87c13.451 13.45 13.451 35.26 0 48.71a1.601 1.601 0 01-2.262-2.262z"
+        fill={iconColor}
+      />
+      <Path
+        d="M31.653 47.508c8.994-8.994 8.994-23.576 0-32.57a1.6 1.6 0 012.262-2.263c10.245 10.244 10.244 26.852 0 37.096a1.6 1.6 0 11-2.262-2.263z"
+        fill={iconColor}
+      />
+      <Path
+        d="M25.847 41.705c5.788-5.789 5.788-15.174 0-20.962a1.6 1.6 0 012.262-2.263c7.038 7.038 7.038 18.45 0 25.487a1.6 1.6 0 01-2.262-2.262zM21.172 33.159a2.737 2.737 0 11-3.87-3.87 2.737 2.737 0 013.87 3.87z"
+        fill={iconColor}
+      />
+    </Svg>
+  );
+};

package/src/ui-components/index.ts

@@ -16,6 +16,7 @@ export * from './input';
 export * from './list';
 export * from './loader';
 export * from './nerd-view';
+export * from './nfc';
 export * from './pin';
 export * from './screens';
 export * from './searchbar';

package/src/ui-components/loader/loading-result.stories.tsx

@@ -13,13 +13,15 @@ type Args = {
   withButton2: boolean;
   withButton3: boolean;
   withHeader: boolean;
+  withShareButton: boolean;
 };
 
-const Render = ({ label, state, withButton1, withButton2, withButton3, withHeader }: Args) => {
+const Render = ({ label, state, withButton1, withButton2, withButton3, withHeader, withShareButton }: Args) => {
   return (
     <LoadingResultScreen
       button={withButton1 ? { title: 'Button 1' } : undefined}
       secondaryButton={withButton2 ? { type: ButtonType.Secondary, title: 'Button 2' } : undefined}
+      shareButton={withShareButton ? { title: 'qr-code-date.com' } : undefined}
       tertiaryButton={withButton3 ? { type: ButtonType.Secondary, title: 'Button 3' } : undefined}
       header={
         withHeader
@@ -46,6 +48,7 @@ const Basic: StoryObj<Args> = {
     withButton2: false,
     withButton3: false,
     withHeader: true,
+    withShareButton: false,
   },
   render: Render,
 };

package/src/ui-components/loader/loading-result.tsx

@@ -7,6 +7,7 @@ import NavigationHeader, { NavigationHeaderProps } from '../header/navigation-he
 import Typography from '../text/typography';
 import { useAppColorScheme } from '../theme/color-scheme-context';
 import LoaderView, { LoaderViewProps } from './loader';
+import ShareButton, { ShareButtonProps } from '../buttons/share-button';
 
 export type LoadingResultScreenProps = ViewProps & {
   button?: ButtonProps;
@@ -15,6 +16,7 @@ export type LoadingResultScreenProps = ViewProps & {
     label?: string;
   };
   secondaryButton?: ButtonProps;
+  shareButton?: ShareButtonProps;
   tertiaryButton?: ButtonProps;
 };
 
@@ -23,6 +25,7 @@ const LoadingResultScreen: FC<LoadingResultScreenProps> = ({
   header,
   loader: { label, ...loaderProps },
   secondaryButton: button2,
+  shareButton,
   style,
   tertiaryButton: button3,
   ...viewProps
@@ -55,6 +58,7 @@ const LoadingResultScreen: FC<LoadingResultScreenProps> = ({
         </Typography>
       </View>
       <View style={[styles.buttonWrapper, buttonsWrapperMarginStyle]}>
+        {shareButton && <ShareButton {...shareButton} style={styles.shareButton} />}
         {button && <Button {...button}>{button.title}</Button>}
         {button2 && <Button {...button2}>{button2.title}</Button>}
         {button3 && <Button {...button3}>{button3.title}</Button>}
@@ -92,6 +96,9 @@ const styles = StyleSheet.create({
   modalHeaderWithoutHandle: {
     paddingTop: 15,
   },
+  shareButton: {
+    alignSelf: 'center',
+  },
 });
 
 export default LoadingResultScreen;

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

@@ -0,0 +1,3 @@
+import NFCProcess from './nfc-process';
+
+export { NFCProcess };

package/src/ui-components/nfc/nfc-process.tsx

@@ -0,0 +1,80 @@
+import React, { FC, memo } from 'react';
+import { Platform, StyleSheet, View } from 'react-native';
+
+import { HeaderCloseButton } from '../../components';
+import { useAppColorScheme } from '../../ui-components';
+import { concatTestID } from '../../utils';
+import { Typography } from '..';
+import { Button, ButtonType } from '../buttons';
+import { NFCIcon, StatusWarningIcon } from '../icons';
+import { LoaderViewState } from '../loader';
+import { ScrollViewScreen } from '../screens';
+
+interface NFCProcessProps {
+  testID: string;
+  processState: LoaderViewState;
+  handleButtonClick: () => void;
+  labels: {
+    share: string;
+    connectivity: string;
+    close: string;
+    tryAgain: string;
+    conectivityInfo: string;
+    shareInfo: string;
+  };
+}
+
+const NFCProcess: FC<NFCProcessProps> = ({ testID, processState, labels, handleButtonClick }) => {
+  const colorScheme = useAppColorScheme();
+
+  return (
+    <ScrollViewScreen
+      header={{
+        leftItem: <HeaderCloseButton testID={concatTestID(testID, 'header.back')} />,
+        modalHandleVisible: Platform.OS === 'ios',
+        static: true,
+        testID: concatTestID(testID, 'header'),
+        title: processState === LoaderViewState.InProgress ? labels.share : labels.connectivity,
+      }}
+      scrollView={{
+        testID: concatTestID(testID, 'scroll'),
+      }}
+      testID={testID}>
+      <View style={styles.content} testID={concatTestID(testID, 'content')}>
+        <View style={styles.info}>
+          {processState === LoaderViewState.InProgress ? <NFCIcon width={50} height={50} /> : <StatusWarningIcon />}
+          <Typography align="center" color={colorScheme.black}>
+            {processState === LoaderViewState.InProgress ? labels.shareInfo : labels.conectivityInfo}
+          </Typography>
+        </View>
+      </View>
+      <View style={styles.bottom}>
+        <Button
+          onPress={handleButtonClick}
+          testID={concatTestID(testID, 'button')}
+          title={processState === LoaderViewState.InProgress ? labels.close : labels.tryAgain}
+          type={processState === LoaderViewState.InProgress ? ButtonType.Secondary : ButtonType.Primary}
+        />
+      </View>
+    </ScrollViewScreen>
+  );
+};
+
+const styles = StyleSheet.create({
+  bottom: {
+    paddingHorizontal: 12,
+    paddingTop: 16,
+  },
+  content: {
+    flex: 1,
+    paddingHorizontal: 16,
+  },
+  info: {
+    alignItems: 'center',
+    flex: 1,
+    gap: 20,
+    justifyContent: 'center',
+  },
+});
+
+export default memo(NFCProcess);

package/src/ui-components/screens/section-list-screen.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SectionList, SectionListProps, StyleSheet, View, ViewProps } from 'react-native';
+import { Platform, SectionList, SectionListProps, StyleSheet, View, ViewProps, ViewStyle } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { useOnScrollHeaderState } from '../../utils/hooks/header/on-scroll-header-state';
@@ -14,19 +14,33 @@ export type SectionListScreenProps<ItemT, SectionT> = ViewProps & {
     title: string;
   };
   list: Omit<SectionListProps<ItemT, SectionT>, 'ListHeaderComponent' | 'onScroll'>;
+  modalPresentation?: boolean;
 };
 
 const SectionListScreen = <ItemT, SectionT>({
   header,
   list: { contentContainerStyle, stickySectionHeadersEnabled, ...listProps },
+  modalPresentation,
   style,
   ...viewProps
 }: SectionListScreenProps<ItemT, SectionT>) => {
   const colorScheme = useAppColorScheme();
-  const safeAreaInsets = useSafeAreaInsets();
-  const contentInsetsStyle = useListContentInset();
+  const { top } = useSafeAreaInsets();
+  const contentInsetsStyle = useListContentInset({
+    headerHeight: modalPresentation && Platform.OS === 'ios' ? 63 : 48,
+    modalPresentation,
+  });
   const { titleVisible, onScroll } = useOnScrollHeaderState();
 
+  let headerPaddingStyle: ViewStyle | undefined;
+  if (!modalPresentation || Platform.OS === 'android') {
+    headerPaddingStyle = {
+      paddingTop: top,
+    };
+  } else if (modalPresentation && !header.modalHandleVisible && Platform.OS === 'ios') {
+    headerPaddingStyle = styles.modalHeaderWithoutHandle;
+  }
+
   return (
     <View style={[styles.container, { backgroundColor: colorScheme.background }, style]} {...viewProps}>
       <SectionList<ItemT, SectionT>
@@ -40,7 +54,7 @@ const SectionListScreen = <ItemT, SectionT>({
       <NavigationHeader
         animate
         blurred
-        style={[styles.header, { paddingTop: safeAreaInsets.top }]}
+        style={[styles.header, headerPaddingStyle]}
         titleVisible={header.static || titleVisible}
         {...header}
       />
@@ -56,6 +70,9 @@ const styles = StyleSheet.create({
     position: 'absolute',
     width: '100%',
   },
+  modalHeaderWithoutHandle: {
+    paddingTop: 15,
+  },
 });
 
 export default SectionListScreen;

package/src/ui-components/searchbar/animated-search-bar.tsx

@@ -5,7 +5,7 @@ import SearchBar, { SearchBarProps } from './search-bar';
 
 export type AnimatedSearchBarProps = {
   collapsed: boolean;
-  rightButton?: ReactNode;
+  rightButtons?: ReactNode[];
   rightButtonAlwaysVisible?: boolean;
   searchBarProps: SearchBarProps;
 };
@@ -17,10 +17,10 @@ const AnimatedSearchBar = ({
   collapsed,
   rightButtonAlwaysVisible = false,
   searchBarProps,
-  rightButton,
+  rightButtons = [],
 }: AnimatedSearchBarProps) => {
   const [rightIconFadeAnimation] = useState(
-    () => new Animated.Value(rightButton && rightButtonAlwaysVisible ? 1.5 : 0),
+    () => new Animated.Value(rightButtons && rightButtonAlwaysVisible ? 1.5 : 0),
   );
   const [searchPaddingAnimation] = useState(() => new Animated.Value(0));
 
@@ -39,10 +39,10 @@ const AnimatedSearchBar = ({
 
     Animated.timing(rightIconFadeAnimation, {
       duration: 250,
-      toValue: collapsed && rightButton ? 1.5 : 0,
+      toValue: collapsed && rightButtons ? 1.5 : 0,
       useNativeDriver: false,
     }).start();
-  }, [rightButtonAlwaysVisible, rightIconFadeAnimation, rightButton, collapsed]);
+  }, [rightButtonAlwaysVisible, rightIconFadeAnimation, rightButtons, collapsed]);
 
   const searchBarContainerAnimatedStyle = {
     paddingHorizontal: searchPaddingAnimation.interpolate({
@@ -64,7 +64,7 @@ const AnimatedSearchBar = ({
     width: rightIconFadeAnimation.interpolate({
       extrapolate: 'clamp',
       inputRange: [0, 1],
-      outputRange: ['100%', '88%'],
+      outputRange: ['100%', `${100 - 12 * rightButtons.length}%`],
     }),
   };
 
@@ -74,8 +74,8 @@ const AnimatedSearchBar = ({
       <Animated.View style={searchBarAnimatedStyle}>
         <SearchBar {...searchProps} />
       </Animated.View>
-      {rightButton && (
-        <Animated.View style={[styles.rightButtonWrapper, optionsIconAnimatedStyle]}>{rightButton}</Animated.View>
+      {rightButtons && (
+        <Animated.View style={[styles.rightButtonWrapper, optionsIconAnimatedStyle]}>{rightButtons}</Animated.View>
       )}
     </Animated.View>
   );
@@ -83,7 +83,9 @@ const AnimatedSearchBar = ({
 
 const styles = StyleSheet.create({
   rightButtonWrapper: {
-    alignItems: 'flex-end',
+    alignItems: 'center',
+    flexDirection: 'row',
+    gap: '16',
     justifyContent: 'center',
   },
   searchBarContainer: {

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

@@ -70,7 +70,10 @@ export const useRollbackImport = () => {
  * @param {IdentifiersInitializationConfig} config Select desired keys/dids to be restored/created
  * @returns [hwIdentifierId, swIdentifierId]
  */
-export const useBackupFinalizeImportProcedure = ({ generateHwKey, generateSwKey }: IdentifiersInitializationConfig) => {
+export const useBackupFinalizeImportProcedure = ({
+  generateHwKey,
+  generateSwKey,
+}: IdentifiersInitializationConfig) => {
   const { mutateAsync: finalizeImport } = useFinalizeImport();
   const { core, organisationId } = useONECore();
 
@@ -98,5 +101,5 @@ export const useBackupFinalizeImportProcedure = ({ generateHwKey, generateSwKey
       reportException(err, 'Failed to create base identifiers');
       throw err;
     });
-  }, [core, organisationId, finalizeImport, generateHwKey, generateSwKey]);
+  }, [finalizeImport, generateSwKey, generateHwKey, core, organisationId]);
 };

package/src/utils/hooks/core/core-init.ts

@@ -7,6 +7,7 @@ import { OneErrorCode } from './error-code';
 
 export const SW_DID_NAME_PREFIX = 'holder-did-sw-key';
 export const HW_DID_NAME_PREFIX = 'holder-did-hw-key';
+export const ATTESTATION_DID_NAME_PREFIX = 'holder-did-attestation-key';
 
 export const generateHwIdentifier = async (core: ONECore, organisationId: string) => {
   const hwKeyId = await core
@@ -86,7 +87,10 @@ export interface IdentifiersInitializationConfig {
  * @param {IdentifiersInitializationConfig} config Select desired keys/dids to be created
  * @returns [hwIdentifierId, swIdentifierId]
  */
-export const useInitializeONECoreIdentifiers = ({ generateHwKey, generateSwKey }: IdentifiersInitializationConfig) => {
+export const useInitializeONECoreIdentifiers = ({
+  generateHwKey,
+  generateSwKey,
+}: IdentifiersInitializationConfig) => {
   const { core, organisationId } = useONECore();
 
   return useCallback(async () => {

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

@@ -1,6 +1,7 @@
 import {
   CredentialListQuery,
   CredentialStateEnum,
+  HandleInvitationRequest,
   InitiateIssuanceRequest,
   InvitationResult,
   OneError,
@@ -8,7 +9,6 @@ import {
 import { useInfiniteQuery, useMutation, useQuery, useQueryClient } from 'react-query';
 
 import { getQueryKeyFromCredentialListQueryParams } from '../../parsers/query';
-import { Transport } from '../connectivity/connectivity';
 import { useONECore } from './core-context';
 import { CREDENTIAL_SCHEMA_LIST_QUERY_KEY } from './credential-schemas';
 import { OneErrorCode } from './error-code';
@@ -83,8 +83,8 @@ export const useInvitationHandler = () => {
   const { core, organisationId } = useONECore();
 
   return useMutation(
-    async ({ invitationUrl, transport }: { invitationUrl: string; transport: Transport }) =>
-      core.handleInvitation(invitationUrl, organisationId, [transport]),
+    async (request: Omit<HandleInvitationRequest, 'organisationId'>) =>
+      core.handleInvitation({ organisationId, ...request }),
     {
       onSuccess: async (result: InvitationResult) => {
         if ('credentialIds' in result) {

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

@@ -13,6 +13,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useMutation, useQuery, useQueryClient } from 'react-query';
 
 import { getQueryKeyFromProofListQueryParams } from '../../parsers/query';
+import { reportException } from '../../reporting';
 import { Transport } from '../connectivity/connectivity';
 import { useCoreConfig } from './core-config';
 import { useONECore } from './core-context';
@@ -85,7 +86,8 @@ export const useProofAccept = () => {
       keyId?: string;
     }) => core.holderSubmitProof(interactionId, credentials, didId, identifierId, keyId),
     {
-      onError: async () => {
+      onError: async (err) => {
+        reportException(err, 'Proof submission failure');
         await queryClient.invalidateQueries(PROOF_DETAIL_QUERY_KEY);
       },
       onSuccess: async () => {
@@ -129,15 +131,28 @@ export enum VerificationProtocol {
   SCAN_TO_VERIFY = 'SCAN_TO_VERIFY',
 }
 
+export enum VerificationEngagement {
+  QR_CODE = 'QR_CODE',
+  NFC = 'NFC',
+}
+
+export interface ProposeProofRequest {
+  exchange: VerificationProtocol;
+  engagement: VerificationEngagement[];
+}
+
 export const useProposeProof = () => {
   const queryClient = useQueryClient();
   const { core, organisationId } = useONECore();
 
-  return useMutation(async (exchange: VerificationProtocol) => core.proposeProof(exchange, organisationId), {
-    onSuccess: async () => {
-      await queryClient.invalidateQueries(HISTORY_LIST_QUERY_KEY);
+  return useMutation(
+    async ({ exchange, engagement }: ProposeProofRequest) => core.proposeProof(exchange, organisationId, engagement),
+    {
+      onSuccess: async () => {
+        await queryClient.invalidateQueries(HISTORY_LIST_QUERY_KEY);
+      },
     },
-  });
+  );
 };
 
 export const useProofDelete = () => {

package/src/utils/hooks/index.ts

@@ -4,5 +4,6 @@ export * from './credential-card/credential-card-expanding';
 export * from './header/on-scroll-header-state';
 export * from './list/list-content-inset';
 export * from './navigation';
+export * from './nfc/nfc-status';
 export * from './pin-security/pin-security';
 export * from './revocation/credential-status';

package/src/utils/hooks/nfc/nfc-status.ts

@@ -0,0 +1,31 @@
+import { useCallback, useEffect, useState } from 'react';
+import NfcManager from 'react-native-nfc-manager';
+
+export const useNFCStatus = () => {
+  const [isNFCEnabled, setIsNFCEnabled] = useState<boolean>();
+  const [isLoading, setIsLoading] = useState<boolean>();
+  const [error, setError] = useState<unknown>();
+
+  const checkNFCStatus = useCallback(async () => {
+    try {
+      setIsLoading(true);
+      const isEnabled = await NfcManager.isEnabled();
+      setIsNFCEnabled(isEnabled);
+      setIsLoading(false);
+    } catch (e) {
+      setError(e);
+    }
+  }, []);
+
+  useEffect(() => {
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    checkNFCStatus();
+  }, [checkNFCStatus]);
+
+  const recheck = useCallback(() => {
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    checkNFCStatus();
+  }, [checkNFCStatus]);
+
+  return { error, isLoading, isNFCEnabled, recheck };
+};