@procivis/one-react-native-components 0.3.132 → 0.3.142

package/src/ui-components/buttons/scan-button.tsx

@@ -1,69 +1,161 @@
 import React from 'react';
-import { Insets, StyleSheet, TouchableOpacityProps, View } from 'react-native';
+import { Insets, StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { TouchableOpacity, TouchableOpacityRef } from '../accessibility/accessibilityHistoryWrappers';
 import { useAccessibilityTranslation } from '../accessibility/accessibilityLanguage';
 import BlurView from '../blur/blur-view';
-import { ScanIcon } from '../icons';
+import { IssueIcon, ScanIcon, SignIcon } from '../icons';
 import { useAppColorScheme } from '../theme';
 
-export type ScanButtonProps = TouchableOpacityProps;
+export type ScanButtonProps = {
+  onSignPress?: () => void;
+  onIssuePress?: () => void;
+  onScanPress: () => void;
+  testID?: string;
+  style?: StyleProp<ViewStyle>;
+};
 
 const hitSlop: Insets = { top: 10, left: 10, bottom: 10, right: 10 };
 
-const ScanButton = React.forwardRef<TouchableOpacityRef, ScanButtonProps>(({ style, ...props }, ref) => {
-  const t = useAccessibilityTranslation();
-  const colorScheme = useAppColorScheme();
-  const insets = useSafeAreaInsets();
+const SCAN_WIDTH = 104;
+const SCAN_HEIGHT = 80;
+const SIDE_WIDTH = 94;
+const SIDE_HEIGHT = 64;
+const OVERLAP = 50;
 
-  return (
-    <TouchableOpacity
-      accessibilityLabel={t('accessibility.icon.scan')}
-      accessibilityRole="button"
-      hitSlop={hitSlop}
-      ref={ref}
-      style={[styles.button, { bottom: Math.max(24, insets.bottom) }, style]}
-      {...props}>
-      <BlurView blurStyle="soft" style={styles.blurWrapper}>
-        <View style={[styles.iconWrapper, { backgroundColor: colorScheme.accent }]}>
-          <ScanIcon color={colorScheme.white} />
+const ScanButton = React.forwardRef<TouchableOpacityRef, ScanButtonProps>(
+  ({ style, onSignPress, onIssuePress, onScanPress, testID }, ref) => {
+    const t = useAccessibilityTranslation();
+    const colorScheme = useAppColorScheme();
+    const insets = useSafeAreaInsets();
+    const showLeftButton = onSignPress !== undefined;
+    const showRightButton = onIssuePress !== undefined;
+    const leftButtonOpacity = showLeftButton ? 1 : 0;
+    const rightButtonOpacity = showRightButton ? 1 : 0;
+
+    const bottomOffset = Math.max(24, insets.bottom);
+
+    return (
+      <View style={[styles.wrapper, { bottom: bottomOffset }, style as object]}>
+        <View
+          pointerEvents={showLeftButton ? 'auto' : 'none'}
+          style={[styles.sideButtonContainer, { opacity: leftButtonOpacity }]}>
+          <TouchableOpacity
+            accessibilityRole="button"
+            hitSlop={hitSlop}
+            testID={`${testID}.sign`}
+            onPress={onSignPress}
+            style={styles.sideButton}>
+            <View style={[styles.sideInnerLeft, { backgroundColor: colorScheme.white }]}>
+              <SignIcon color={colorScheme.black} />
+              <Text style={[styles.sideLabel, { color: colorScheme.black }]}>Sign</Text>
+            </View>
+          </TouchableOpacity>
         </View>
-      </BlurView>
-    </TouchableOpacity>
-  );
-});
+
+        <TouchableOpacity
+          accessibilityLabel={t('accessibility.icon.scan')}
+          accessibilityRole="button"
+          hitSlop={hitSlop}
+          ref={ref}
+          style={styles.scanButton}
+          testID={`${testID}.scan`}
+          onPress={onScanPress}>
+          <BlurView blurStyle="soft" style={styles.scanBlurWrapper}>
+            <View style={[styles.scanInner, { backgroundColor: colorScheme.accent }]}>
+              <ScanIcon color={colorScheme.white} />
+            </View>
+          </BlurView>
+        </TouchableOpacity>
+
+        <View
+          pointerEvents={showRightButton ? 'auto' : 'none'}
+          style={[styles.sideButtonContainer, { opacity: rightButtonOpacity }]}>
+          <TouchableOpacity
+            accessibilityRole="button"
+            testID={`${testID}.issue`}
+            hitSlop={hitSlop}
+            onPress={onIssuePress}
+            style={styles.sideButton}>
+            <View style={[styles.sideInnerRight, { backgroundColor: colorScheme.white }]}>
+              <IssueIcon color={colorScheme.black} />
+              <Text style={[styles.sideLabel, { color: colorScheme.black }]}>Issue</Text>
+            </View>
+          </TouchableOpacity>
+        </View>
+      </View>
+    );
+  },
+);
 
 ScanButton.displayName = 'ScanButton';
 export default ScanButton;
 
 const styles = StyleSheet.create({
-  blurWrapper: {
+  scanBlurWrapper: {
     borderRadius: 28,
-    borderWidth: 0,
-    height: 80,
+    flex: 1,
     padding: 8,
-    width: 104,
   },
-  button: {
+  scanButton: {
     borderRadius: 28,
-    borderWidth: 0,
-    height: 80,
-    left: '50%',
-    marginLeft: -52,
-    position: 'absolute',
+    height: SCAN_HEIGHT,
     shadowColor: '#000000',
     shadowOffset: { height: 4, width: 0 },
-    shadowOpacity: 0.2,
+    shadowOpacity: 0.25,
     shadowRadius: 24,
-    width: 104,
+    width: SCAN_WIDTH,
+    zIndex: 1,
   },
-  iconWrapper: {
+  scanInner: {
     alignItems: 'center',
     borderRadius: 20,
-    borderWidth: 0,
-    height: '100%',
+    flex: 1,
     justifyContent: 'center',
-    width: '100%',
+  },
+  sideButton: {
+    borderRadius: 24,
+    flex: 1,
+  },
+  sideButtonContainer: {
+    height: SIDE_HEIGHT,
+    marginHorizontal: -OVERLAP / 2,
+    width: SIDE_WIDTH,
+    zIndex: 0,
+  },
+  sideInnerLeft: {
+    alignItems: 'center',
+    borderBottomLeftRadius: 22,
+    borderBottomRightRadius: 0,
+    borderTopLeftRadius: 22,
+    borderTopRightRadius: 0,
+    flex: 1,
+    justifyContent: 'center',
+    paddingRight: 10,
+  },
+  sideInnerRight: {
+    alignItems: 'center',
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 22,
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 22,
+    flex: 1,
+    justifyContent: 'center',
+    paddingLeft: 10,
+  },
+  sideLabel: {
+    fontSize: 14,
+    fontWeight: '500',
+    marginTop: 6,
+  },
+  wrapper: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    height: SCAN_HEIGHT,
+    justifyContent: 'center',
+    left: 0,
+    position: 'absolute',
+    right: 0,
   },
 });

package/src/ui-components/credential/card/credential-details-card.tsx

@@ -18,6 +18,9 @@ export type CredentialDetailsCardProps = ViewProps & {
   onImagePreview?: (name: string, image: ImageSourcePropType) => void;
   onAttributeSelected?: (id: string, selected: boolean) => void;
   showAllButtonLabel?: string;
+  showLessButtonLabel?: string;
+  moreLabel?: string;
+  lessLabel?: string;
 };
 
 const PREVIEW_ATTRIBUTES_COUNT = 3;
@@ -32,7 +35,10 @@ const CredentialDetailsCard: FC<CredentialDetailsCardProps> = ({
   onImagePreview,
   onAttributeSelected,
   style,
-  showAllButtonLabel,
+  showAllButtonLabel = 'Show all',
+  showLessButtonLabel = 'Show less',
+  moreLabel = 'More',
+  lessLabel = 'Less',
   testID,
   ...viewProps
 }) => {
@@ -43,15 +49,14 @@ const CredentialDetailsCard: FC<CredentialDetailsCardProps> = ({
   const [allAttributesRendered, setAllAttributesRendered] = useState<boolean>(
     (attributes && attributes.length <= PREVIEW_ATTRIBUTES_COUNT) || !showAllButtonLabel,
   );
-
   const CaretIcon = expanded ? UpIcon : DownIcon;
-
   const cardHeight = Math.ceil(card.width / CredentialCardRatio);
   const currentHeight = useSharedValue<number | undefined>(undefined);
   const [animatedHeightSet, setAnimatedHeightSet] = useState(false);
-
   const previewAttributes = attributes ? attributes.slice(0, PREVIEW_ATTRIBUTES_COUNT) : [];
   const extraAttributes = useMemo(() => (attributes ? attributes.slice(PREVIEW_ATTRIBUTES_COUNT) : []), [attributes]);
+  const showSeeAllButton = extraAttributes.length > 0;
+  const isExpanded = allAttributesRendered;
 
   useEffect(() => {
     if (extraAttributes.length === 0) {
@@ -72,9 +77,9 @@ const CredentialDetailsCard: FC<CredentialDetailsCardProps> = ({
       return;
     }
 
-    const buttonViewHeight = !extraAttributes || allAttributesRendered ? 0 : SEE_ALL_BUTTON_HEIGHT;
+    const buttonViewHeight = showSeeAllButton ? SEE_ALL_BUTTON_HEIGHT : 0;
     const additionalAttributesHeight = fullAttributesHeight ?? 0;
-    const additionalHeight = allAttributesRendered ? additionalAttributesHeight : buttonViewHeight;
+    const additionalHeight = allAttributesRendered ? additionalAttributesHeight + buttonViewHeight : buttonViewHeight;
     const fullHeight = previewAttributesHeight + additionalHeight;
 
     setAnimatedHeightSet(true);
@@ -103,6 +108,7 @@ const CredentialDetailsCard: FC<CredentialDetailsCardProps> = ({
     fullAttributesHeight,
     previewAttributes.length,
     previewAttributesHeight,
+    showSeeAllButton,
   ]);
 
   const animatedStyle = useAnimatedStyle(() => {
@@ -160,41 +166,54 @@ const CredentialDetailsCard: FC<CredentialDetailsCardProps> = ({
             <View onLayout={onPreviewAttrContentLayout} style={styles.previewAttributesWrapper}>
               {previewAttributes.map((attribute, idx) => (
                 <CredentialAttributeItem
+                  moreLabel={moreLabel}
+                  lessLabel={lessLabel}
                   key={attribute.id}
-                  last={!footerView && !extraAttributes.length && idx === previewAttributes.length - 1}
+                  last={!footerView && !showSeeAllButton && idx === previewAttributes.length - 1}
                   testID={concatTestID(testID, 'attribute', idx.toString())}
                   onImagePreview={onImagePreview}
                   onPress={onAttributeSelected}
+                  isExpanded={isExpanded}
                   {...attribute}
                 />
               ))}
             </View>
-            {!allAttributesRendered && extraAttributes.length > 0 && (
-              <View style={styles.buttonWrapper}>
-                <Button
-                  onPress={() => setAllAttributesRendered(true)}
-                  type={ButtonType.Secondary}
-                  testID={concatTestID(testID, 'showAllAttributesButton')}
-                  title={showAllButtonLabel!}
-                />
-              </View>
-            )}
+
             {renderExtraAttributes && (
               <View
-                style={[styles.allAttributesWrapper, footerView && styles.allAttributesWrapperWithFooter]}
+                style={[
+                  styles.allAttributesWrapper,
+                  footerView && styles.allAttributesWrapperWithFooter,
+                  showSeeAllButton && styles.allAttributesWrapperWithButton,
+                  !allAttributesRendered && styles.hidden,
+                ]}
                 onLayout={onFullAttrContentLayout}>
                 {extraAttributes.map((attribute, index, { length }) => (
                   <CredentialAttributeItem
+                    moreLabel={moreLabel}
+                    lessLabel={lessLabel}
                     key={attribute.id}
-                    last={!footerView && index === length - 1}
+                    last={!footerView && !showSeeAllButton && index === length - 1}
                     testID={concatTestID(testID, 'attribute', index.toString())}
                     onImagePreview={onImagePreview}
                     onPress={onAttributeSelected}
+                    isExpanded={isExpanded}
                     {...attribute}
                   />
                 ))}
               </View>
             )}
+
+            {showSeeAllButton && (
+              <View style={styles.buttonWrapper}>
+                <Button
+                  onPress={() => setAllAttributesRendered((prev) => !prev)}
+                  type={ButtonType.Secondary}
+                  testID={concatTestID(testID, 'showAllAttributesButton')}
+                  title={isExpanded ? showLessButtonLabel : showAllButtonLabel}
+                />
+              </View>
+            )}
           </View>
         </View>
       )}
@@ -209,6 +228,9 @@ const styles = StyleSheet.create({
     paddingHorizontal: 4,
     width: '100%',
   },
+  allAttributesWrapperWithButton: {
+    paddingBottom: 0,
+  },
   allAttributesWrapperWithFooter: {
     paddingBottom: 0,
   },
@@ -218,8 +240,10 @@ const styles = StyleSheet.create({
   },
   buttonWrapper: {
     height: SEE_ALL_BUTTON_HEIGHT,
+    justifyContent: 'flex-end',
     paddingBottom: 12,
     paddingHorizontal: 4,
+    paddingTop: 0,
     width: '100%',
   },
   card: {
@@ -234,6 +258,9 @@ const styles = StyleSheet.create({
   footer: {
     marginTop: 12,
   },
+  hidden: {
+    display: 'none',
+  },
   previewAttributesWrapper: {
     paddingHorizontal: 4,
     width: '100%',

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

@@ -4,6 +4,7 @@ import { Image, ImageSourcePropType, StyleProp, StyleSheet, View, ViewStyle } fr
 import { colorWithAlphaComponent } from '../../utils/color';
 import { concatTestID } from '../../utils/testID';
 import { TouchableHighlight, TouchableOpacity } from '../accessibility/accessibilityHistoryWrappers';
+import ExpandableTypography from '../text/expandableTypography';
 import Typography from '../text/typography';
 import { useAppColorScheme } from '../theme/color-scheme-context';
 
@@ -109,6 +110,9 @@ export type CredentialAttributeItemProps = CredentialAttribute & {
   onImagePreview?: (name: string, image: ImageSourcePropType) => void;
   onPress?: (id: string, selected: boolean) => void;
   style?: StyleProp<ViewStyle>;
+  isExpanded?: boolean;
+  moreLabel?: string;
+  lessLabel?: string;
 };
 
 const CredentialAttributeItem: FC<CredentialAttributeItemProps> = ({
@@ -129,6 +133,9 @@ const CredentialAttributeItem: FC<CredentialAttributeItemProps> = ({
   value,
   values,
   valueErrorColor,
+  isExpanded,
+  moreLabel,
+  lessLabel,
 }) => {
   const colorScheme = useAppColorScheme();
 
@@ -214,14 +221,18 @@ const CredentialAttributeItem: FC<CredentialAttributeItemProps> = ({
                 </TouchableOpacity>
               )}
               {value && (
-                <Typography
+                <ExpandableTypography
                   color={valueErrorColor ? colorScheme.error : colorScheme.text}
-                  numberOfLines={10}
+                  numberOfLines={3}
+                  ellipsizeMode="tail"
                   preset="s"
+                  hideExpandButton={!isExpanded && !listValue && !nested}
                   style={listValue ? styles.listValue : undefined}
+                  moreLabel={moreLabel}
+                  lessLabel={lessLabel}
                   testID={concatTestID(testID, 'value')}>
                   {value}
-                </Typography>
+                </ExpandableTypography>
               )}
               {isObject &&
                 attributes.map((attribute, index, { length }) => (
@@ -263,6 +274,7 @@ const styles = StyleSheet.create({
   attributeItem: {
     flex: 1,
     paddingLeft: 8,
+    paddingRight: 8,
   },
   attributeItemContainer: {
     marginTop: 2,

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

@@ -17,6 +17,30 @@ export const ScanIcon: FC<SvgProps> = ({ color, ...props }) => {
   );
 };
 
+// https://www.figma.com/design/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=621-19281&t=mV98iCutPWAC5Nb4-0
+export const IssueIcon: FC<SvgProps> = ({ color, ...props }) => {
+  return (
+    <Svg width={24} height={24} viewBox="0 0 24 24" fill="none" {...props}>
+      <Path
+        d="M4.188 13.34V5.27c0-.965.239-1.692.715-2.18.482-.49 1.203-.734 2.161-.734h4.407c.347 0 .65.025.91.075.265.043.51.13.732.26.223.123.452.306.687.547l5.112 5.204c.247.254.433.495.556.724.13.223.217.47.26.742.043.272.065.61.065 1.011v8.424c0 .965-.241 1.689-.724 2.171-.476.489-1.193.733-2.152.733h-6.8c.136-.229.253-.47.352-.724.1-.247.18-.504.241-.77h6.133c.482 0 .844-.123 1.085-.37.248-.248.371-.604.371-1.068v-8.33h-5.288c-.581 0-1.017-.146-1.308-.437-.29-.29-.436-.726-.436-1.308V3.85H7.14c-.483 0-.848.127-1.095.38-.241.254-.362.61-.362 1.067v8.044a8.606 8.606 0 00-.38-.028 3.812 3.812 0 00-.752 0 7.826 7.826 0 00-.362.028zm8.48-4.276c0 .186.037.318.111.399.08.08.214.12.4.12h4.833l-5.344-5.445v4.926zM4.94 24a4.51 4.51 0 01-1.818-.37 4.698 4.698 0 01-1.503-1.012 4.828 4.828 0 01-1.02-1.503 4.533 4.533 0 01-.372-1.827c0-.65.124-1.256.371-1.819a4.828 4.828 0 011.02-1.503c.434-.439.935-.779 1.504-1.02a4.51 4.51 0 011.818-.371c.65 0 1.259.123 1.828.37.569.242 1.07.58 1.503 1.012.432.433.77.934 1.01 1.503.248.569.372 1.178.372 1.828 0 .643-.124 1.249-.371 1.818a4.751 4.751 0 01-1.03 1.503 4.828 4.828 0 01-1.503 1.02 4.488 4.488 0 01-1.81.371zm0-1.762c.173 0 .31-.053.408-.158a.552.552 0 00.158-.408v-1.819h1.818a.552.552 0 00.408-.157.533.533 0 00.158-.408.533.533 0 00-.158-.409.552.552 0 00-.408-.157H5.506v-1.819a.552.552 0 00-.158-.408.534.534 0 00-.408-.158.564.564 0 00-.418.158.572.572 0 00-.148.408v1.819H2.556a.552.552 0 00-.409.157.533.533 0 00-.157.409c0 .173.052.309.157.408a.552.552 0 00.409.157h1.818v1.819c0 .167.05.303.148.408a.564.564 0 00.418.158z"
+        fill={color}
+      />
+    </Svg>
+  );
+};
+
+// https://www.figma.com/design/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=621-19281&t=RS4pnpOH4RNYzd8j-0
+export const SignIcon: FC<SvgProps> = ({ color, ...props }) => {
+  return (
+    <Svg width={27} height={24} viewBox="0 0 27 24" fill="none" {...props}>
+      <Path
+        d="M8.807 22.913c-.827 0-1.442-.228-1.846-.686-.404-.45-.607-1.03-.607-1.74 0-.662.167-1.388.501-2.18.34-.79.818-1.576 1.433-2.355a12.083 12.083 0 012.197-2.136 11.226 11.226 0 012.84-1.564 9.352 9.352 0 013.322-.589c.568 0 1.019.132 1.353.396.34.257.51.606.51 1.046 0 .234-.033.465-.097.694a13.12 13.12 0 01-.193.615 1.384 1.384 0 00-.097.43c0 .1.044.15.132.15.123 0 .308-.1.554-.299.252-.199.539-.445.86-.738.329-.299.675-.595 1.038-.888a7.33 7.33 0 011.081-.747c.363-.199.697-.299 1.002-.299.352 0 .61.1.774.3.163.193.275.436.334.729.064.287.11.577.14.87.03.287.08.53.15.73.07.193.202.29.395.29a.815.815 0 00.43-.124.774.774 0 01.431-.131c.17 0 .305.058.405.175a.62.62 0 01.158.431.635.635 0 01-.106.36.841.841 0 01-.255.264c-.181.117-.38.202-.597.255-.217.053-.416.079-.598.079-.44 0-.773-.09-1.002-.273a1.52 1.52 0 01-.483-.685 4.234 4.234 0 01-.194-.817 7.551 7.551 0 00-.114-.686c-.04-.188-.126-.281-.255-.281-.146 0-.342.102-.588.307-.247.205-.528.46-.844.765-.317.299-.657.6-1.02.905-.363.305-.732.56-1.107.765-.37.205-.733.308-1.09.308-.322 0-.592-.094-.809-.282-.216-.193-.325-.457-.325-.79 0-.253.032-.493.097-.721l.21-.677c.071-.229.106-.472.106-.73 0-.24-.16-.36-.483-.36-1.02 0-1.978.17-2.874.51a9.486 9.486 0 00-2.435 1.327 10.996 10.996 0 00-1.88 1.793 8.956 8.956 0 00-1.214 1.916c-.28.633-.421 1.195-.421 1.687 0 .399.1.721.298.967.205.252.519.378.94.378.645 0 1.243-.237 1.794-.712.55-.468 1.031-1.122 1.441-1.96.41-.832.727-1.796.95-2.891.228-1.096.342-2.268.342-3.516 0-1.043-.102-2.021-.307-2.935-.205-.92-.501-1.729-.888-2.426-.387-.698-.853-1.245-1.398-1.644a3.023 3.023 0 00-1.828-.597c-.504 0-.958.134-1.362.404-.398.27-.715.633-.95 1.09a3.34 3.34 0 00-.35 1.547c0 .884.178 1.702.535 2.452A8.048 8.048 0 008.314 12.4a11.734 11.734 0 001.758 1.53c.61.421 1.166.756 1.67 1.002a.652.652 0 01.281.246.555.555 0 01.088.298c0 .153-.058.29-.176.414a.596.596 0 01-.439.175.738.738 0 01-.334-.079 13.678 13.678 0 01-1.828-1.046 12.83 12.83 0 01-1.661-1.37c-.516-.51-.97-1.061-1.362-1.653a8.333 8.333 0 01-.915-1.898 6.543 6.543 0 01-.333-2.083c0-.82.175-1.56.527-2.215A4.198 4.198 0 017.03 4.148a3.658 3.658 0 012.04-.588c.878 0 1.67.231 2.372.694.71.463 1.316 1.104 1.82 1.925.504.814.89 1.763 1.16 2.847.27 1.079.404 2.236.404 3.472 0 1.459-.143 2.818-.43 4.078-.282 1.26-.689 2.364-1.222 3.314-.527.949-1.16 1.69-1.899 2.223a4.12 4.12 0 01-2.47.8zM.703 19.696a.684.684 0 01-.5-.21.7.7 0 01-.203-.502.7.7 0 01.202-.5.7.7 0 01.501-.203H25.7a.7.7 0 01.501.202c.14.141.211.308.211.501 0 .194-.07.36-.21.501a.684.684 0 01-.502.211H.703zM.457 16.27a.556.556 0 01-.176-.405c0-.152.059-.287.176-.404l3.006-2.988a.54.54 0 01.395-.167.51.51 0 01.405.167.537.537 0 01.175.404.528.528 0 01-.175.396l-3.006 2.997a.583.583 0 01-.404.175.528.528 0 01-.396-.175zm3.006 0L.457 13.272a.528.528 0 01-.176-.396c0-.158.059-.293.176-.404a.528.528 0 01.396-.176c.158 0 .293.059.404.176l3.006 2.988a.556.556 0 010 .809.537.537 0 01-.405.175.528.528 0 01-.395-.175z"
+        fill={color}
+      />
+    </Svg>
+  );
+};
+
 // https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?type=design&node-id=415-10316&mode=design&t=5mm9J3ttJ4bbt2N3-4
 export const HistoryIcon: FC<SvgProps> = ({ color, ...props }) => {
   return (

package/src/ui-components/list/wallet/empty-list.tsx

@@ -9,8 +9,8 @@ import { Typography } from '../../text';
 import { useAppColorScheme } from '../../theme';
 
 type WalletEmptyListProps = {
-  onScanPress: () => void;
-  scanButtonTitle: string;
+  onScanPress?: () => void;
+  scanButtonTitle?: string;
   subtitle: string;
   testID: string;
   title: string;
@@ -19,6 +19,7 @@ type WalletEmptyListProps = {
 const WalletEmptyList: FC<WalletEmptyListProps> = ({ onScanPress, scanButtonTitle, subtitle, testID, title }) => {
   const safeAreaInsets = useSafeAreaInsets();
   const colorScheme = useAppColorScheme();
+  const showButton = Boolean(onScanPress && scanButtonTitle);
 
   return (
     <View style={styles.empty}>
@@ -38,12 +39,14 @@ const WalletEmptyList: FC<WalletEmptyListProps> = ({ onScanPress, scanButtonTitl
         {subtitle}
       </Typography>
       <NoCredentialsIcon style={styles.emptyIcon} />
-      <Button
-        onPress={onScanPress}
-        style={[styles.emptyButton, { bottom: Math.max(24, safeAreaInsets.bottom) }]}
-        testID={concatTestID(testID, 'scanQrCode')}
-        title={scanButtonTitle}
-      />
+      {showButton && (
+        <Button
+          onPress={onScanPress}
+          style={[styles.emptyButton, { bottom: Math.max(24, safeAreaInsets.bottom) }]}
+          testID={concatTestID(testID, 'scanQrCode')}
+          title={scanButtonTitle!}
+        />
+      )}
     </View>
   );
 };

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

@@ -45,10 +45,12 @@ const WalletNotice: FunctionComponent<WalletNoticeProps> = ({ accessory, icon, s
   }, [accessory]);
 
   return (
-    <View style={[styles.noticeContainer, style]}>
+    <View style={[styles.noticeContainer, style]} testID={testID}>
       <View style={styles.title}>
         {iconView}
-        <Typography color={colorScheme.white}>{text}</Typography>
+        <Typography color={colorScheme.white} testID={concatTestID(testID, 'label')}>
+          {text}
+        </Typography>
         {accessoryView}
       </View>
       {onClose && (

package/src/ui-components/text/expandableTypography.tsx

@@ -0,0 +1,71 @@
+import React, { useCallback, useState } from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import { concatTestID } from '../../utils';
+import { Button, ButtonType } from '../buttons';
+import { useAppColorScheme } from '../theme/color-scheme-context';
+import Typography, { TypographyProps } from './typography';
+
+const testID = 'expandableTypography';
+
+export type ExpandableTypographyProps = TypographyProps & {
+  numberOfLines?: number;
+  hideExpandButton?: boolean;
+  moreLabel?: string;
+  lessLabel?: string;
+};
+
+const ExpandableTypography: React.FC<ExpandableTypographyProps> = ({
+  numberOfLines = 3,
+  hideExpandButton,
+  moreLabel = 'More',
+  lessLabel = 'Less',
+  style,
+  ...props
+}) => {
+  const colorScheme = useAppColorScheme();
+  const [expanded, setExpanded] = useState(false);
+  const [isTruncated, setIsTruncated] = useState(false);
+
+  const handlePress = useCallback(() => {
+    setExpanded((prev) => !prev);
+  }, []);
+
+  return (
+    <View style={[style]}>
+      <Typography
+        {...props}
+        numberOfLines={undefined}
+        style={[styles.hiddenTypography]}
+        onTextLayout={(e) => {
+          setIsTruncated(e.nativeEvent.lines.length > numberOfLines);
+        }}
+      />
+      <Typography {...props} numberOfLines={expanded ? undefined : numberOfLines} />
+      {(isTruncated || expanded) && !hideExpandButton && (
+        <Button
+          onPress={handlePress}
+          type={ButtonType.Secondary}
+          style={[
+            styles.button,
+            {
+              backgroundColor: colorScheme.background,
+            },
+          ]}
+          testID={concatTestID(testID, 'showMore')}
+          title={expanded ? lessLabel : moreLabel}
+        />
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    marginTop: 10,
+    paddingVertical: 12,
+  },
+  hiddenTypography: { opacity: 0, position: 'absolute', zIndex: -1 },
+});
+
+export default ExpandableTypography;

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

@@ -1,4 +1,5 @@
+import ExpandableTypography, { ExpandableTypographyProps } from './expandableTypography';
 import type { TypographyProps } from './typography';
 import Typography from './typography';
 
-export { Typography, TypographyProps };
+export { ExpandableTypography, ExpandableTypographyProps, Typography, TypographyProps };

package/src/utils/hooks/core/credential-schemas.ts

@@ -43,7 +43,7 @@ export const useCredentialSchemaPreview = (url: string) => {
         if (!response.ok) {
           throw response.originalError;
         }
-        return response.data as ImportCredentialSchemaRequestSchema;
+        return prepareImportCredentialSchema(response.data);
       }),
     {
       keepPreviousData: true,
@@ -51,6 +51,28 @@ export const useCredentialSchemaPreview = (url: string) => {
   );
 };
 
+const prepareImportCredentialSchema = (data: unknown): ImportCredentialSchemaRequestSchema => {
+  if (!data || typeof data !== 'object') {
+    throw Error('Invalid credential schema data');
+  }
+
+  if ('formats' in data) {
+    // v2 schema: just return
+    return data as ImportCredentialSchemaRequestSchema;
+  }
+
+  // v1 schema: convert format
+  const schema = data as Record<string, any>;
+  const format = schema.format;
+  const schemaId = schema.schemaId;
+  const revocationMethod = schema.revocationMethod;
+  return {
+    ...schema,
+    formats: [{ format, schemaId }],
+    allowRevocation: Boolean(revocationMethod),
+  } as unknown as ImportCredentialSchemaRequestSchema;
+};
+
 export const useCredentialSchemaAccept = () => {
   const queryClient = useQueryClient();
   const { core, organisationId } = useONECore();

package/src/utils/hooks/core/wallet-unit.ts

@@ -1,4 +1,5 @@
 import {
+  HolderActivateWalletUnitRequest,
   HolderRegisterWalletUnitRequest,
   HolderWalletUnit,
   HolderWalletUnitUpdateRequest,
@@ -60,6 +61,26 @@ export const useRegisterWalletUnit = () => {
   );
 };
 
+export const useActivateWalletUnit = () => {
+  const queryClient = useQueryClient();
+  const { core } = useONECore();
+
+  return useMutation(
+    async ({ id, userIdToken }: { id: string; userIdToken: HolderActivateWalletUnitRequest['userIdToken'] }) =>
+      core.holderActivateWalletUnit(id, {
+        keyType: 'ECDSA',
+        userIdToken,
+      }),
+
+    {
+      onSuccess: async () => {
+        await queryClient.invalidateQueries(WALLET_UNIT_QUERY_KEY);
+        await queryClient.invalidateQueries(WALLET_UNIT_TRUST_COLLECTIONS_QUERY_KEY);
+      },
+    },
+  );
+};
+
 export const useWalletUnitStatus = () => {
   const queryClient = useQueryClient();
   const { core } = useONECore();

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

@@ -191,11 +191,7 @@ export const shareCredentialCardFromV2PresentationCredential = (
   const cardTestId = concatTestID(testID, 'card');
   const card = credential
     ? validityCheckedCardFromCredential(
-        {
-          ...credential,
-          claims: [],
-          type: CredentialType.SINGLE,
-        },
+        credential,
         expanded,
         selectiveDisclosureSupported,
         multipleCredentialsAvailable,