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

package/src/ui-components/history/{history-list-item.tsx → history-item.tsx}

@@ -6,7 +6,8 @@ import { TouchableOpacity } from '../accessibility/accessibilityHistoryWrappers'
 import Typography from '../text/typography';
 import { useAppColorScheme } from '../theme/color-scheme-context';
 
-export type HistoryListItemProps = {
+export type HistoryItemViewProps = {
+  first?: boolean;
   icon: ComponentType<any> | ReactElement;
   info?: string;
   label: string;
@@ -17,7 +18,17 @@ export type HistoryListItemProps = {
   time: string;
 };
 
-const HistoryListItem: FC<HistoryListItemProps> = ({ icon, label, info, last, style, time, onPress, testID }) => {
+const HistoryItemView: FC<HistoryItemViewProps> = ({
+  first,
+  icon,
+  label,
+  info,
+  last,
+  style,
+  time,
+  onPress,
+  testID,
+}) => {
   const colorScheme = useAppColorScheme();
 
   const iconView: ReactElement | undefined = useMemo(() => {
@@ -37,51 +48,75 @@ const HistoryListItem: FC<HistoryListItemProps> = ({ icon, label, info, last, st
         styles.historyItemContainer,
         {
           backgroundColor: colorScheme.white,
-          borderColor: colorScheme.background,
         },
-        last && styles.last,
+        first && styles.containerFirst,
+        last && styles.containerLast,
         style,
       ]}
       testID={testID}>
-      {iconView}
-      <View style={styles.labelAndInfo}>
-        <Typography
-          color={colorScheme.text}
-          numberOfLines={1}
-          preset="s"
-          style={styles.label}
-          testID={concatTestID(testID, 'label')}>
-          {label}
-        </Typography>
-        {Boolean(info) && (
+      <View
+        style={[
+          styles.historyItemWrapper,
+          {
+            backgroundColor: colorScheme.white,
+            borderColor: colorScheme.background,
+          },
+          last && styles.wrapperLast,
+        ]}>
+        {iconView}
+        <View style={styles.labelAndInfo}>
           <Typography
             color={colorScheme.text}
             numberOfLines={1}
-            preset="s/line-height-small"
-            style={styles.shaded}
-            testID={concatTestID(testID, 'info')}>
-            {info}
+            preset="s"
+            style={styles.label}
+            testID={concatTestID(testID, 'label')}>
+            {label}
           </Typography>
-        )}
+          {Boolean(info) && (
+            <Typography
+              color={colorScheme.text}
+              numberOfLines={1}
+              preset="s/line-height-small"
+              style={styles.shaded}
+              testID={concatTestID(testID, 'info')}>
+              {info}
+            </Typography>
+          )}
+        </View>
+        <Typography
+          color={colorScheme.text}
+          numberOfLines={1}
+          preset="xs/line-height-small"
+          style={styles.time}
+          testID={concatTestID(testID, 'timeLabel')}>
+          {time}
+        </Typography>
       </View>
-      <Typography
-        color={colorScheme.text}
-        numberOfLines={1}
-        preset="xs/line-height-small"
-        style={styles.shaded}
-        testID={concatTestID(testID, 'timeLabel')}>
-        {time}
-      </Typography>
     </TouchableOpacity>
   );
 };
 
 const styles = StyleSheet.create({
+  containerFirst: {
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    marginTop: 8,
+    paddingTop: 12,
+  },
+  containerLast: {
+    borderBottomLeftRadius: 20,
+    borderBottomRightRadius: 20,
+    marginBottom: 12,
+    paddingBottom: 12,
+  },
   historyItemContainer: {
+    paddingHorizontal: 12,
+  },
+  historyItemWrapper: {
     alignItems: 'center',
     borderBottomWidth: 1,
     flexDirection: 'row',
-    paddingRight: 8,
     paddingVertical: 12,
   },
   label: {
@@ -91,12 +126,16 @@ const styles = StyleSheet.create({
     flex: 1,
     marginHorizontal: 12,
   },
-  last: {
-    borderBottomWidth: 0,
-  },
   shaded: {
     opacity: 0.7,
   },
+  time: {
+    marginRight: 8,
+    opacity: 0.7,
+  },
+  wrapperLast: {
+    borderBottomWidth: 0,
+  },
 });
 
-export default HistoryListItem;
+export default HistoryItemView;

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

@@ -8,7 +8,7 @@ import { useAppColorScheme } from '../theme/color-scheme-context';
 // component used on the history section lists (Settings->History, CredentialDetail->History)
 // https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?type=design&node-id=1246-51813&mode=dev
 
-const HistorySectionHeader: FC<{
+const HistorySectionHeaderView: FC<{
   day: string;
   testID?: string;
   year?: string;
@@ -41,4 +41,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default HistorySectionHeader;
+export default HistorySectionHeaderView;

package/src/ui-components/history/history-section-list-item.tsx

@@ -2,12 +2,12 @@ import React, { FC } from 'react';
 import { StyleSheet, View } from 'react-native';
 
 import { useAppColorScheme } from '../theme/color-scheme-context';
-import HistoryListItem, { HistoryListItemProps } from './history-list-item';
+import HistoryItemView, { HistoryItemViewProps } from './history-item';
 
 // component used on the history section lists (Settings->History, CredentialDetail->History)
 // https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?type=design&node-id=1246-51813&mode=dev
 
-export interface HistorySectionListItemProps extends HistoryListItemProps {
+export interface HistorySectionListItemProps extends HistoryItemViewProps {
   first?: boolean;
 }
 
@@ -15,7 +15,7 @@ const HistorySectionListItem: FC<HistorySectionListItemProps> = ({ first, last,
   const colorScheme = useAppColorScheme();
   return (
     <View style={[styles.item, first && styles.first, last && styles.last, { backgroundColor: colorScheme.white }]}>
-      <HistoryListItem last={last} {...props} />
+      <HistoryItemView last={last} {...props} />
     </View>
   );
 };

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

@@ -1,9 +1,10 @@
 import DataItem, { DataItemProps } from './data-item';
-import HistoryListItem, { HistoryListItemProps } from './history-list-item';
-import HistorySectionHeader from './history-section-header';
+import HistoryItemView, { HistoryItemViewProps } from './history-item';
+import HistorySectionHeaderView from './history-section-header';
 import HistorySectionListItem, { HistorySectionListItemProps } from './history-section-list-item';
 
+export * from './history-details';
 export { DataItem, DataItemProps };
-export { HistoryListItem, HistoryListItemProps };
-export { HistorySectionHeader };
+export { HistoryItemView, HistoryItemViewProps };
+export { HistorySectionHeaderView };
 export { HistorySectionListItem, HistorySectionListItemProps };

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

@@ -29,3 +29,30 @@ export const EntityTrustedIcon: FC<SvgProps> = ({ ...props }) => {
     </Svg>
   );
 };
+
+// https://www.figma.com/design/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=415-5402&t=prmu1s6PuABrPg0l-0
+export const EntityNotTrustedIcon: FC<SvgProps> = ({ ...props }) => {
+  const colorScheme = useAppColorScheme();
+  return (
+    <Svg width={22} height={20} viewBox="0 0 22 20" fill="none" {...props}>
+      <Path
+        d="M4.35742 17.9673C3.87598 17.9673 3.45817 17.8621 3.104 17.6519C2.74984 17.4416 2.47591 17.1593 2.28223 16.8052C2.09408 16.451 2 16.0581 2 15.6265C2 15.2059 2.11068 14.8047 2.33203 14.4229L8.75684 3.2251C8.97266 2.83219 9.26318 2.53613 9.62842 2.33691C9.99365 2.1377 10.3755 2.03809 10.7739 2.03809C11.1724 2.03809 11.5514 2.1377 11.9111 2.33691C12.2708 2.5306 12.5641 2.82666 12.791 3.2251L19.2158 14.4229C19.3265 14.611 19.4095 14.8075 19.4648 15.0122C19.5202 15.217 19.5479 15.4217 19.5479 15.6265C19.5479 16.0581 19.451 16.451 19.2573 16.8052C19.0636 17.1593 18.7897 17.4416 18.4355 17.6519C18.0869 17.8621 17.6719 17.9673 17.1904 17.9673H4.35742Z"
+        fill={colorScheme.warning}
+      />
+      <Path
+        d="M10.7744 1.03809C11.3435 1.03817 11.884 1.18254 12.3838 1.45703L12.3848 1.45605C12.386 1.45672 12.3874 1.45831 12.3887 1.45898C12.3908 1.46017 12.3933 1.46072 12.3955 1.46191L12.3945 1.46289C12.9333 1.75557 13.3522 2.19115 13.6582 2.72754L20.0781 13.916L20.1865 14.1162C20.2888 14.3193 20.3712 14.5309 20.4307 14.751C20.5082 15.0377 20.5479 15.331 20.5479 15.627C20.5478 16.2141 20.4144 16.7738 20.1348 17.2852C19.8533 17.7998 19.4512 18.2119 18.9463 18.5117L18.9453 18.5107C18.4159 18.8284 17.818 18.9678 17.1904 18.9678H4.35742C3.72707 18.9678 3.12678 18.8281 2.59375 18.5117C2.08885 18.2119 1.68678 17.7998 1.40527 17.2852L1.39941 17.2744C1.1288 16.765 1.00007 16.2092 1 15.627C1 15.0214 1.16165 14.4473 1.4668 13.9209L7.88965 2.72754C8.1894 2.18833 8.60891 1.75383 9.14941 1.45898C9.65481 1.18331 10.2012 1.03809 10.7744 1.03809Z"
+        stroke={colorScheme.white}
+        strokeWidth={2}
+        strokeOpacity={0.2}
+      />
+      <Path
+        d="M11.5376 11.5093C11.5265 12.0239 11.2747 12.2812 10.7822 12.2812C10.2786 12.2812 10.0186 12.0267 10.002 11.5176L9.88574 7.33398C9.87467 7.08496 9.95215 6.88021 10.1182 6.71973C10.2842 6.55371 10.5028 6.4707 10.7739 6.4707C11.0396 6.4707 11.2581 6.55371 11.4297 6.71973C11.6012 6.88021 11.6815 7.08773 11.6704 7.34229L11.5376 11.5093Z"
+        fill={colorScheme.black}
+      />
+      <Path
+        d="M11.4961 14.8711C11.2969 15.0482 11.0589 15.1367 10.7822 15.1367C10.5055 15.1367 10.2648 15.0482 10.0601 14.8711C9.86084 14.694 9.76123 14.4671 9.76123 14.1904C9.76123 13.9193 9.86084 13.6924 10.0601 13.5098C10.2593 13.3271 10.5 13.2358 10.7822 13.2358C11.0589 13.2358 11.2969 13.3271 11.4961 13.5098C11.6953 13.6924 11.7949 13.9193 11.7949 14.1904C11.7949 14.4671 11.6953 14.694 11.4961 14.8711Z"
+        fill={colorScheme.black}
+      />
+    </Svg>
+  )
+}

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

@@ -1,12 +1,63 @@
 import React, { FC } from 'react';
-import { StyleProp, StyleSheet, View, ViewProps, ViewStyle } from 'react-native';
+import { StyleSheet, View, ViewProps } from 'react-native';
 import Svg, { G, Path, Rect, SvgProps } from 'react-native-svg';
 
 import { useAppColorScheme } from '../theme/color-scheme-context';
-import { CredentialWarningIcon } from './credential';
+
+export const HistoryCredentialIcon: FC<SvgProps> = (props) => {
+  const colorScheme = useAppColorScheme();
+  return (
+    <Svg width={48} height={48} viewBox="0 0 48 48" fill="none" {...props}>
+      <Rect width={48} height={48} rx={24} fill={colorScheme.background} />
+      <Path
+        d="M23.79 24.82a.728.728 0 00-.5.188.61.61 0 00-.212.476v2.461l.07 1.125-.546-.562-.61-.625a.832.832 0 00-.219-.156.63.63 0 00-.71.11.593.593 0 00-.172.436.622.622 0 00.218.485l2.125 1.945c.094.084.183.146.266.188a.67.67 0 00.29.062.62.62 0 00.28-.062c.089-.042.18-.104.274-.188l2.125-1.945a.62.62 0 00.219-.484.58.58 0 00-.18-.438.63.63 0 00-.703-.11.833.833 0 00-.22.157l-.608.625-.547.562.07-1.125v-2.46a.61.61 0 00-.21-.477.728.728 0 00-.5-.188zm-4.173 8.055c-.86 0-1.513-.224-1.96-.672-.444-.448-.665-1.104-.665-1.969V18.492c0-.86.221-1.515.664-1.969.448-.453 1.102-.68 1.961-.68h3.555v6.04c0 .958.476 1.437 1.43 1.437h5.984v6.914c0 .865-.224 1.521-.672 1.97-.448.447-1.099.671-1.953.671h-8.344zm5.211-10.758c-.307 0-.46-.15-.46-.453v-5.742c.187.02.374.099.562.234.187.13.383.3.586.508l4.242 4.29c.213.218.385.421.515.608a1.3 1.3 0 01.235.555h-5.68z"
+        fill={colorScheme.accent}
+      />
+    </Svg>
+  );
+};
+
+export const HistorySchemaIcon: FC<SvgProps> = (props) => {
+  const colorScheme = useAppColorScheme();
+  return (
+    <Svg width={48} height={48} viewBox="0 0 48 48" fill="none" {...props}>
+      <Rect width={48} height={48} rx={24} fill={colorScheme.background} />
+      <Path
+        d="M16.992 25.008v-6.516c0-.86.221-1.515.664-1.969.448-.453 1.102-.68 1.961-.68h3.555v6.04c0 .958.476 1.437 1.43 1.437h5.984v6.914c0 .865-.224 1.521-.672 1.97-.448.447-1.099.671-1.953.671h-6.54c.246-.39.433-.813.563-1.266.136-.448.203-.914.203-1.398 0-.714-.135-1.383-.406-2.008a5.184 5.184 0 00-1.125-1.656 5.184 5.184 0 00-3.664-1.54zm7.836-2.89c-.307 0-.46-.152-.46-.454v-5.742c.187.02.374.099.562.234.187.13.383.3.586.508l4.242 4.29c.213.218.385.421.515.608a1.3 1.3 0 01.235.555h-5.68zm-7.836 12.155c-.557 0-1.08-.106-1.57-.32a4.087 4.087 0 01-1.29-.883c-.374-.37-.668-.8-.882-1.289a3.885 3.885 0 01-.32-1.57c0-.563.107-1.086.32-1.57a4.18 4.18 0 01.883-1.297c.37-.375.8-.667 1.289-.875a3.884 3.884 0 011.57-.32c.557 0 1.08.106 1.57.32.49.208.922.5 1.297.875a3.982 3.982 0 011.188 2.867c0 .552-.107 1.073-.32 1.562-.209.49-.5.922-.875 1.297a4.18 4.18 0 01-1.297.883c-.49.214-1.01.32-1.563.32zm0-1.468a.56.56 0 00.414-.157.56.56 0 00.157-.414v-1.453h1.453a.55.55 0 00.57-.57.545.545 0 00-.57-.57h-1.453v-1.446a.56.56 0 00-.157-.414.56.56 0 00-.414-.156.56.56 0 00-.414.156.56.56 0 00-.156.414v1.446h-1.453a.56.56 0 00-.414.156.56.56 0 00-.157.414.545.545 0 00.57.57h1.454v1.453c0 .172.052.31.156.414a.56.56 0 00.414.157z"
+        fill={colorScheme.accent}
+      />
+    </Svg>
+  );
+};
+
+export const HistoryBackupCreatedIcon: FC<SvgProps> = (props) => {
+  const colorScheme = useAppColorScheme();
+  return (
+    <Svg width={48} height={48} viewBox="0 0 48 48" fill="none" {...props}>
+      <Rect width={48} height={48} rx={24} fill={colorScheme.background} />
+      <Path
+        d="M21.21 35.156c-.853 0-1.507-.218-1.96-.656-.448-.438-.677-1.078-.688-1.922v-.094h7.594c.787 0 1.461-.15 2.024-.453a3.102 3.102 0 001.304-1.297c.302-.562.453-1.234.453-2.015v-6.422h.29c.864 0 1.52.224 1.968.672.453.442.68 1.093.68 1.953v7.61c0 .853-.227 1.505-.68 1.952-.448.448-1.104.672-1.968.672H21.21zm-4.07-3.812c-.864 0-1.523-.224-1.976-.672-.448-.443-.672-1.094-.672-1.953v-7.61c0-.859.224-1.51.672-1.953.453-.448 1.112-.672 1.977-.672h9.015c.865 0 1.521.224 1.969.672.453.443.68 1.094.68 1.953v7.61c0 .86-.227 1.51-.68 1.953-.448.448-1.104.672-1.969.672h-9.015zm4.508-17.055a.764.764 0 00-.57.242.75.75 0 00-.234.547v7.758l.07 1.164-.39-.523-1.047-1.118a.708.708 0 00-.54-.234.702.702 0 00-.492.195.63.63 0 00-.203.485c0 .182.073.349.219.5l2.57 2.468c.104.1.206.17.305.211a.799.799 0 00.617 0c.104-.041.209-.112.313-.21l2.562-2.47a.694.694 0 00.227-.5c0-.197-.07-.359-.211-.484a.702.702 0 00-.492-.195.67.67 0 00-.532.234l-1.047 1.118-.39.523.062-1.164v-7.758a.75.75 0 00-.234-.547.739.739 0 00-.563-.242z"
+        fill={colorScheme.accent}
+      />
+    </Svg>
+  );
+};
+
+export const HistoryBackupRestoredIcon: FC<SvgProps> = (props) => {
+  const colorScheme = useAppColorScheme();
+  return (
+    <Svg width={48} height={48} viewBox="0 0 48 48" fill="none" {...props}>
+      <Rect width={48} height={48} rx={24} fill={colorScheme.background} />
+      <Path
+        d="M17.14 31.344c-.864 0-1.523-.224-1.976-.672-.448-.443-.672-1.094-.672-1.953v-7.61c0-.859.224-1.51.672-1.953.453-.448 1.112-.672 1.977-.672h9.015c.865 0 1.521.224 1.969.672.453.443.68 1.094.68 1.953v7.61c0 .86-.227 1.51-.68 1.953-.448.448-1.104.672-1.969.672h-9.015zm4.508-6.43a.75.75 0 00.563-.234.75.75 0 00.234-.547v-7.766l-.062-1.156.453.594.984 1.047a.67.67 0 00.532.234.718.718 0 00.492-.188c.14-.13.21-.294.21-.492a.677.677 0 00-.226-.5l-2.562-2.469a.848.848 0 00-.313-.21.797.797 0 00-.617 0 .872.872 0 00-.305.21l-2.57 2.47a.689.689 0 00-.219.5c0 .197.068.361.203.491.14.125.305.188.492.188a.709.709 0 00.54-.234l.976-1.047.461-.594-.07 1.156v7.766c0 .208.078.39.234.547a.777.777 0 00.57.234zm-.437 10.242c-.854 0-1.508-.218-1.961-.656-.448-.438-.677-1.078-.688-1.922v-.094h7.594c.787 0 1.461-.15 2.024-.453a3.102 3.102 0 001.304-1.297c.302-.562.453-1.234.453-2.015v-6.414h.29c.864 0 1.52.224 1.968.672.453.442.68 1.093.68 1.953v7.601c0 .854-.227 1.505-.68 1.953-.448.448-1.104.672-1.968.672H21.21z"
+        fill={colorScheme.accent}
+      />
+    </Svg>
+  );
+};
 
 // https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=454-99608
-export const HistoryShareIcon: FC<SvgProps> = (props) => {
+export const HistoryProofRequestIcon: FC<SvgProps> = (props) => {
   const colorScheme = useAppColorScheme();
   return (
     <Svg fill="none" height="48" viewBox="0 0 48 48" width="48" {...props}>
@@ -61,6 +112,25 @@ export const HistorySuspendIcon: FC<SvgProps> = (props) => {
   );
 };
 
+// TODO: replace HistoryDidIcon with icon of schema
+export const HistoryDidIcon = HistoryIssueIcon;
+export const HistoryIdentifierIcon = HistoryIssueIcon;
+export const HistoryCertificateIcon = HistoryIssueIcon;
+
+// TODO: replace HistoryKeyIcon with icon of schema
+export const HistoryKeyIcon = HistoryIssueIcon;
+
+// TODO: replace HistoryOrganisationIcon with icon of schema
+export const HistoryOrganisationIcon = HistoryIssueIcon;
+
+// TODO: replace HistoryTrustAnchorIcon with icon of schema
+export const HistoryTrustAnchorIcon = HistoryIssueIcon;
+
+// TODO: replace HistoryTrustedEntityIcon with icon of schema
+export const HistoryTrustedEntityIcon = HistoryIssueIcon;
+
+// STATUS
+
 // https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=454-100241
 export const HistoryStatusAcceptedIcon: FC<SvgProps> = (props) => {
   const colorScheme = useAppColorScheme();
@@ -85,7 +155,7 @@ export const HistoryStatusAcceptedIcon: FC<SvgProps> = (props) => {
 };
 
 // https://www.figma.com/design/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=415-5402&node-type=frame&t=MNBdPiFol0J4XsBR-0
-const HistoryStatusDeleteIcon: FC<SvgProps> = (props) => {
+export const HistoryStatusDeleteIcon: FC<SvgProps> = (props) => {
   const colorScheme = useAppColorScheme();
   return (
     <Svg fill="none" height="22" viewBox="0 0 22 22" width="22" {...props}>
@@ -109,7 +179,7 @@ const HistoryStatusDeleteIcon: FC<SvgProps> = (props) => {
 };
 
 // https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=426-27862
-const HistoryStatusErrorIcon: FC<SvgProps> = (props) => {
+export const HistoryStatusErrorIcon: FC<SvgProps> = (props) => {
   const colorScheme = useAppColorScheme();
   return (
     <Svg fill="none" height="22" viewBox="0 0 22 22" width="22" {...props}>
@@ -132,7 +202,7 @@ const HistoryStatusErrorIcon: FC<SvgProps> = (props) => {
 };
 
 // https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=544-93347
-const HistoryStatusSuspendIcon: FC<SvgProps> = (props) => {
+export const HistoryStatusSuspendIcon: FC<SvgProps> = (props) => {
   const colorScheme = useAppColorScheme();
   return (
     <Svg fill="none" height="22" viewBox="0 0 22 22" width="22" {...props}>
@@ -155,7 +225,7 @@ const HistoryStatusSuspendIcon: FC<SvgProps> = (props) => {
 };
 
 // https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=544-93350
-const HistoryStatusSuspendTemporaryIcon: FC<SvgProps> = (props) => {
+export const HistoryStatusSuspendTemporaryIcon: FC<SvgProps> = (props) => {
   const colorScheme = useAppColorScheme();
   return (
     <Svg fill="none" height="22" viewBox="0 0 22 22" width="22" {...props}>
@@ -186,7 +256,7 @@ const HistoryStatusSuspendTemporaryIcon: FC<SvgProps> = (props) => {
 };
 
 // https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=493-79830
-const HistoryStatusIndicatorIcon: FC<SvgProps> = (props) => {
+export const HistoryStatusIndicatorIcon: FC<SvgProps> = (props) => {
   const colorScheme = useAppColorScheme();
   return (
     <Svg fill="none" height="16" viewBox="0 0 16 16" width="16" {...props}>
@@ -228,135 +298,18 @@ const HistoryStatusIndicatorIcon: FC<SvgProps> = (props) => {
   );
 };
 
-export enum HistoryStatusIconType {
-  Success,
-  Warning,
-  Error,
-  Delete,
-  Suspend,
-  SuspendTemporary,
-  Indicator,
-}
-
-export interface HistoryStatusIconProps extends SvgProps {
-  type: HistoryStatusIconType;
-}
-
-export const HistoryStatusIcon: FC<HistoryStatusIconProps> = ({ type, ...props }) => {
-  let StatusIcon = HistoryStatusAcceptedIcon;
-  switch (type) {
-    case HistoryStatusIconType.Success:
-      StatusIcon = HistoryStatusAcceptedIcon;
-      break;
-    case HistoryStatusIconType.Warning:
-      StatusIcon = CredentialWarningIcon;
-      break;
-    case HistoryStatusIconType.Error:
-      StatusIcon = HistoryStatusErrorIcon;
-      break;
-    case HistoryStatusIconType.Delete:
-      StatusIcon = HistoryStatusDeleteIcon;
-      break;
-    case HistoryStatusIconType.Suspend:
-      StatusIcon = HistoryStatusSuspendIcon;
-      break;
-    case HistoryStatusIconType.SuspendTemporary:
-      StatusIcon = HistoryStatusSuspendTemporaryIcon;
-      break;
-    case HistoryStatusIconType.Indicator:
-      StatusIcon = HistoryStatusIndicatorIcon;
-      break;
-  }
-
-  return <StatusIcon {...props} />;
+export type HistoryItemIconProps = ViewProps & {
+  StatusIcon: FC<SvgProps>;
+  TypeIcon: FC<SvgProps>;
 };
 
-export enum HistoryActionIconType {
-  Issue,
-  IssueReject,
-  Request,
-  RequestDeleted,
-  RequestReject,
-  Revalidate,
-  Revoke,
-  Share,
-  ShareReject,
-  Suspend,
-  SuspendTemporary,
-  Error,
-}
-
-export type HistoryActionIconProps = ViewProps &
-  (
-    | {
-        type: HistoryActionIconType;
-      }
-    | {
-        statusIcon: HistoryStatusIconType;
-        TypeIcon: FC<SvgProps>;
-      }
-  );
-
-export const HistoryActionIcon: FC<HistoryActionIconProps> = (props) => {
-  let TypeIcon = HistoryShareIcon;
-  let statusIcon = HistoryStatusIconType.Success;
-  let style: StyleProp<ViewStyle>;
-  let viewProps: ViewProps;
-
-  if ('type' in props) {
-    const { type, style: styleProp, ...otherProps } = props;
-    style = styleProp;
-    viewProps = otherProps;
-
-    switch (type) {
-      case HistoryActionIconType.Issue:
-        TypeIcon = HistoryIssueIcon;
-        break;
-      case HistoryActionIconType.IssueReject:
-        TypeIcon = HistoryIssueIcon;
-        break;
-      case HistoryActionIconType.Revoke:
-        TypeIcon = HistoryRevokeIcon;
-        break;
-      case HistoryActionIconType.Revalidate:
-      case HistoryActionIconType.Suspend:
-      case HistoryActionIconType.SuspendTemporary:
-        TypeIcon = HistorySuspendIcon;
-        break;
-    }
-
-    switch (type) {
-      case HistoryActionIconType.IssueReject:
-        statusIcon = HistoryStatusIconType.Error;
-        break;
-      case HistoryActionIconType.ShareReject:
-      case HistoryActionIconType.Error:
-      case HistoryActionIconType.Revoke:
-      case HistoryActionIconType.RequestReject:
-        statusIcon = HistoryStatusIconType.Error;
-        break;
-      case HistoryActionIconType.Suspend:
-        statusIcon = HistoryStatusIconType.Suspend;
-        break;
-      case HistoryActionIconType.SuspendTemporary:
-        statusIcon = HistoryStatusIconType.SuspendTemporary;
-        break;
-      case HistoryActionIconType.RequestDeleted:
-        statusIcon = HistoryStatusIconType.Delete;
-        break;
-    }
-  } else {
-    const { TypeIcon: TypeIconProp, statusIcon: statusIconProp, style: styleProp, ...otherProps } = props;
-    TypeIcon = TypeIconProp;
-    statusIcon = statusIconProp;
-    style = styleProp;
-    viewProps = otherProps;
-  }
+export const HistoryItemIcon: FC<HistoryItemIconProps> = (props) => {
+  const { TypeIcon, StatusIcon, style, ...viewProps } = props;
 
   return (
     <View style={[styles.wrapper, style]} {...viewProps}>
       <TypeIcon style={styles.round} />
-      <HistoryStatusIcon style={styles.status} type={statusIcon} />
+      <StatusIcon style={styles.status} />
     </View>
   );
 };

package/src/ui-components/image/index.tsx

@@ -1,3 +1,4 @@
-import ImageOrComponent, { ImageOrComponentSource } from './image-or-component';
+import type { ImageOrComponentSource } from './image-or-component';
+import ImageOrComponent from './image-or-component';
 
 export { ImageOrComponent, ImageOrComponentSource };

package/src/ui-components/input/radio-group.stories.tsx

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React, { useState } from 'react';
+
+import RadioGroup, { RadioGroupProps } from './radio-group';
+
+const Render = ({ ...args }: RadioGroupProps) => {
+  const [selectedItem, setSelectedItem] = useState<React.Key>();
+  return <RadioGroup {...args} selectedItem={selectedItem} onSelected={({ key }) => setSelectedItem(key)} />;
+};
+
+const Basic: StoryObj<typeof RadioGroup> = {
+  args: {
+    items: [
+      { label: 'Item1', key: 1 },
+      { label: 'Item2', key: 2 },
+      { label: 'Item3', key: 3 },
+    ],
+    style: { margin: 24 },
+  },
+  render: Render,
+};
+
+export { Basic as RadioGroup };
+
+export default {
+  title: 'base/input/Radio Group',
+  component: RadioGroup,
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/Gd0Tj0234hxtl3HMcCJThW/App-Component-Library-(Design)?node-id=8-614',
+    },
+  },
+} as Meta<typeof RadioGroup>;

package/src/ui-components/input/radio-group.tsx

@@ -1,6 +1,7 @@
 import React, { FunctionComponent } from 'react';
 import { FlatList, FlatListProps, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 
+import { concatTestID } from '../../utils';
 import { TouchableOpacity } from '../accessibility/accessibilityHistoryWrappers';
 import Selector from '../credential/selector';
 import { SelectorStatus } from '../credential/selector-status';
@@ -72,10 +73,13 @@ const RadioGroup: FunctionComponent<RadioGroupProps> = ({
               }}
               style={[styles.item, item.style]}
               testID={item.testID}>
-              <Typography color={colorScheme.text}>{item.label}</Typography>
+              <Typography color={colorScheme.text} style={styles.label} numberOfLines={2}>
+                {item.label}
+              </Typography>
               <Selector
                 status={selected ? SelectorStatus.SelectedRadio : SelectorStatus.Empty}
                 style={styles.selector}
+                testID={concatTestID(item.testID, 'selector')}
               />
             </TouchableOpacity>
             <View style={[styles.divider, { backgroundColor: colorScheme.background }]} />
@@ -97,10 +101,12 @@ const styles = StyleSheet.create({
   item: {
     alignItems: 'center',
     flexDirection: 'row',
-    justifyContent: 'space-between',
     paddingVertical: 24,
     width: '100%',
   },
+  label: {
+    flex: 1,
+  },
   selector: {
     marginLeft: 4,
     paddingTop: 0,

package/src/ui-components/input/selection-input.stories.tsx

@@ -1,9 +1,9 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import React, { useState } from 'react';
 
-import SelectionInput from './selection-input';
+import SelectionInput, { SelectionInputProps } from './selection-input';
 
-const Basic: ComponentStory<typeof SelectionInput> = ({ ...args }) => {
+const Render = ({ ...args }: SelectionInputProps) => {
   const [selectedValue, setSelectedValue] = useState<string>();
   return (
     <SelectionInput
@@ -17,19 +17,22 @@ const Basic: ComponentStory<typeof SelectionInput> = ({ ...args }) => {
   );
 };
 
-Basic.args = {
-  label: 'Label',
-  values: [
-    { label: 'Item1', value: 1 },
-    { label: 'Item2', value: 2 },
-    { label: 'Item3', value: 3, shortLabel: 'I3' },
-  ],
-  pickerTitle: 'Picker Title',
-  pickerConfirmLabel: 'Select',
-  pickerCancelLabel: 'Cancel',
-  disabled: false,
-  error: '',
-  style: { margin: 24 },
+const Basic: StoryObj<typeof SelectionInput> = {
+  args: {
+    label: 'Label',
+    values: [
+      { label: 'Item1', value: 1 },
+      { label: 'Item2', value: 2 },
+      { label: 'Item3', value: 3, shortLabel: 'I3' },
+    ],
+    pickerTitle: 'Picker Title',
+    pickerConfirmLabel: 'Select',
+    pickerCancelLabel: 'Cancel',
+    disabled: false,
+    error: '',
+    style: { margin: 24 },
+  },
+  render: Render,
 };
 
 export { Basic as SelectionInput };
@@ -43,4 +46,4 @@ export default {
       url: 'https://www.figma.com/file/Gd0Tj0234hxtl3HMcCJThW/App-Component-Library-(Design)?node-id=4%3A127&t=if2gUkBSc85H9hWC-4',
     },
   },
-} as ComponentMeta<typeof SelectionInput>;
+} as Meta<typeof SelectionInput>;

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

@@ -3,3 +3,4 @@ import ListTitleHeader, { ListTitleHeaderProps } from './list-title-header';
 
 export { ListSectionHeader, ListSectionHeaderProps };
 export { ListTitleHeader, ListTitleHeaderProps };
+export * from './wallet';

package/src/ui-components/list/list-page-loading-indicator.tsx

@@ -0,0 +1,8 @@
+import React, { FC } from 'react';
+import { ActivityIndicator, ActivityIndicatorProps } from 'react-native';
+
+const ListPageLoadingIndicator: FC<ActivityIndicatorProps> = (props) => {
+  return <ActivityIndicator {...props} />;
+};
+
+export default ListPageLoadingIndicator;