@procivis/one-react-native-components 0.1.63

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

@@ -0,0 +1,44 @@
+import React, { FC } from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import Typography from '../text/typography';
+import { useAppColorScheme } from '../theme/color-scheme-context';
+import { concatTestID } from '../utils/testID';
+
+// 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<{
+  day: string;
+  testID?: string;
+  year?: string;
+}> = ({ day, year, testID }) => {
+  const colorScheme = useAppColorScheme();
+
+  return (
+    <View style={styles.header}>
+      <Typography accessibilityRole="header" color={colorScheme.text} preset="m" testID={concatTestID(testID, 'title')}>
+        {day}
+      </Typography>
+      {year && (
+        <Typography color={colorScheme.accent} preset="s/line-height-small" style={styles.year}>
+          {year}
+        </Typography>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginVertical: 16,
+    paddingHorizontal: 4,
+  },
+  year: {
+    opacity: 0.7,
+  },
+});
+
+export default HistorySectionHeader;

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

@@ -0,0 +1,41 @@
+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';
+
+// 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 {
+  first?: boolean;
+}
+
+const HistorySectionListItem: FC<HistorySectionListItemProps> = ({ first, last, ...props }) => {
+  const colorScheme = useAppColorScheme();
+  return (
+    <View style={[styles.item, first && styles.first, last && styles.last, { backgroundColor: colorScheme.white }]}>
+      <HistoryListItem last={last} {...props} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  first: {
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    marginTop: 8,
+    paddingTop: 12,
+  },
+  item: {
+    paddingHorizontal: 12,
+  },
+  last: {
+    borderBottomLeftRadius: 20,
+    borderBottomRightRadius: 20,
+    marginBottom: 12,
+    paddingBottom: 12,
+  },
+});
+
+export default HistorySectionListItem;

package/src/history/index.ts

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

package/src/icons/connectivity.tsx

@@ -0,0 +1,114 @@
+import React, { FC } from 'react';
+import Svg, { G, Path } from 'react-native-svg';
+
+import { useAppColorScheme } from '../theme';
+
+export type ConnectivityIconProps = {
+  testID?: string;
+};
+
+export type ConnectivityStatusIconProps = ConnectivityIconProps & {
+  status: boolean;
+};
+
+// https://www.figma.com/design/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=415-5402&node-type=frame&t=KNaBp0XLna0p48rq-0
+export const ConnectivityStatusIcon: FC<ConnectivityStatusIconProps> = ({ status, testID }) => {
+  const colorScheme = useAppColorScheme();
+  const color = status ? colorScheme.success : colorScheme.error;
+  return (
+    <Svg testID={testID} fill="none" height={16} viewBox="0 0 16 16" width={16}>
+      <G opacity={0.1}>
+        <Path
+          d="M7.997 14c-.82 0-1.593-.157-2.316-.47a6.05 6.05 0 01-1.916-1.296 6.184 6.184 0 01-1.295-1.916A5.77 5.77 0 012 8c0-.82.157-1.593.47-2.318A6.15 6.15 0 015.675 2.47 5.762 5.762 0 017.99 2c.825 0 1.599.157 2.322.47a6.129 6.129 0 011.916 1.302c.554.55.987 1.186 1.3 1.91A5.77 5.77 0 0114 8a5.77 5.77 0 01-.47 2.318 6.134 6.134 0 01-3.216 3.212 5.762 5.762 0 01-2.317.47z"
+          fill={color}
+        />
+        <Path
+          d="M3.055 12.939l.003.002a7.048 7.048 0 002.227 1.507c.854.37 1.761.552 2.712.552.951 0 1.858-.182 2.712-.552a7.133 7.133 0 003.738-3.733A6.77 6.77 0 0015 8a6.77 6.77 0 00-.553-2.715 7.063 7.063 0 00-1.512-2.222 7.13 7.13 0 00-2.224-1.51A6.776 6.776 0 007.991 1c-.951 0-1.86.183-2.714.553h0-.002a7.15 7.15 0 00-3.722 3.732l.917.397-.917-.397A6.77 6.77 0 001 8c0 .952.183 1.86.553 2.715l.917-.397-.917.397c.362.837.864 1.58 1.502 2.224z"
+          stroke={colorScheme.white}
+          strokeOpacity={0.2}
+          strokeWidth={2}
+        />
+      </G>
+      <G opacity={0.2}>
+        <Path
+          d="M7.998 12a3.841 3.841 0 01-1.544-.314 4.033 4.033 0 01-1.277-.863 4.12 4.12 0 01-.863-1.278A3.847 3.847 0 014 8c0-.547.104-1.062.314-1.545A4.1 4.1 0 016.45 4.314C6.932 4.104 7.447 4 7.994 4c.55 0 1.066.105 1.548.314.483.209.909.498 1.277.867.37.367.658.791.867 1.274.21.483.314.998.314 1.545 0 .547-.104 1.062-.313 1.545a4.087 4.087 0 01-2.145 2.141c-.482.21-.997.314-1.544.314z"
+          fill={color}
+        />
+        <Path
+          d="M4.467 11.527h0l.002.003c.46.46.991.819 1.59 1.075a4.841 4.841 0 001.94.395c.676 0 1.326-.13 1.939-.395a5.088 5.088 0 002.666-2.662A4.846 4.846 0 0013 8c0-.678-.13-1.33-.396-1.942a5.043 5.043 0 00-1.078-1.585A5.086 5.086 0 009.94 3.396 4.85 4.85 0 007.994 3c-.678 0-1.329.13-1.942.396h0-.001a5.1 5.1 0 00-1.582 1.078l.708.707-.708-.707a5.075 5.075 0 00-1.073 1.584A4.846 4.846 0 003 8c0 .678.13 1.33.396 1.942a5.121 5.121 0 001.07 1.585z"
+          stroke={colorScheme.white}
+          strokeOpacity={0.2}
+          strokeWidth={2}
+        />
+      </G>
+      <Path
+        d="M7.999 10a1.92 1.92 0 01-.772-.157 2.016 2.016 0 01-1.07-1.07A1.923 1.923 0 016 8c0-.274.052-.531.157-.773a2.038 2.038 0 011.068-1.07A1.92 1.92 0 017.997 6c.275 0 .533.052.774.157a2.043 2.043 0 011.072 1.07c.105.242.157.5.157.773 0 .274-.052.531-.157.773a2.044 2.044 0 01-1.072 1.07A1.92 1.92 0 018 10z"
+        fill={color}
+      />
+      <Path
+        d="M5.879 10.116h0l.002.002c.275.275.593.49.95.644.372.16.764.238 1.168.238.404 0 .797-.078 1.168-.238A3.045 3.045 0 0010.76 9.17C10.92 8.798 11 8.405 11 8c0-.405-.078-.798-.24-1.17a3.043 3.043 0 00-1.592-1.59A2.925 2.925 0 007.999 5a2.92 2.92 0 00-1.17.24h0-.002a3.05 3.05 0 00-.945.644l.707.707-.707-.707a3.037 3.037 0 00-.642.946C5.08 7.202 5 7.595 5 8c0 .405.078.798.24 1.17.153.354.366.672.639.946z"
+        stroke={colorScheme.white}
+        strokeOpacity={0.2}
+        strokeWidth={2}
+      />
+    </Svg>
+  );
+};
+
+// https://www.figma.com/design/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=4236-31963&node-type=frame&t=YdbLaKqcnnWN4fBV-0
+export const ConnectivityInternetOnIcon: FC<ConnectivityIconProps> = ({ testID }) => {
+  const colorScheme = useAppColorScheme();
+  return (
+    <Svg testID={testID} fill="none" height={20} viewBox="0 0 20 20" width={20}>
+      <Path
+        d="M2.744 9.542c0-.592.068-1.164.205-1.716a6.932 6.932 0 01.608-1.565c.264-.497.586-.95.964-1.36.132-.146.28-.22.444-.22a.506.506 0 01.417.185c.11.124.15.26.123.41a.866.866 0 01-.218.438 5.44 5.44 0 00-1.06 1.75 5.833 5.833 0 00-.37 2.078c0 .734.124 1.429.37 2.085.246.652.6 1.233 1.06 1.743a.866.866 0 01.218.438.466.466 0 01-.123.41.525.525 0 01-.417.191.615.615 0 01-.444-.225 6.615 6.615 0 01-1.32-2.12 6.994 6.994 0 01-.457-2.522zm2.878 0c0-.501.082-.98.246-1.435.164-.46.394-.875.69-1.244a.533.533 0 01.438-.233.54.54 0 01.437.185.44.44 0 01.116.403 1.11 1.11 0 01-.205.444c-.196.26-.346.55-.45.869a3.22 3.22 0 00-.158 1.011c0 .356.05.695.15 1.019.1.319.253.606.458.861.11.15.178.299.205.444a.44.44 0 01-.116.404.553.553 0 01-.875-.048 4.277 4.277 0 01-.936-2.68zm3.151 0a1.24 1.24 0 01.602-1.066c.186-.114.396-.171.628-.171.228 0 .433.057.616.17a1.222 1.222 0 01.608 1.067c0 .246-.066.47-.198.67a1.23 1.23 0 01-.506.438v6.145a.604.604 0 01-.144.424.463.463 0 01-.376.164.496.496 0 01-.382-.164.62.62 0 01-.144-.424V10.65a1.22 1.22 0 01-.513-.438 1.222 1.222 0 01-.191-.67zm3.794 2.728a.457.457 0 01-.123-.403c.032-.146.102-.295.212-.445.205-.255.357-.542.458-.861.1-.324.15-.663.15-1.019 0-.355-.052-.692-.157-1.011a2.97 2.97 0 00-.451-.869c-.11-.15-.18-.298-.212-.444a.457.457 0 01.123-.403.533.533 0 01.43-.185.54.54 0 01.445.233c.296.369.526.783.69 1.244.164.455.246.934.246 1.435a4.263 4.263 0 01-.936 2.68.553.553 0 01-.875.048zm2.05 1.948a.485.485 0 01-.13-.41.918.918 0 01.226-.438c.46-.51.814-1.091 1.06-1.743.246-.656.37-1.351.37-2.085 0-.733-.124-1.426-.37-2.078a5.438 5.438 0 00-1.06-1.75.918.918 0 01-.225-.437.484.484 0 01.13-.41.506.506 0 01.417-.185c.168 0 .316.073.444.219a6.705 6.705 0 011.565 2.926c.142.55.212 1.123.212 1.715 0 .884-.155 1.725-.465 2.523a6.517 6.517 0 01-1.312 2.119.6.6 0 01-.444.226.525.525 0 01-.417-.192z"
+        fill={colorScheme.text}
+      />
+    </Svg>
+  );
+};
+
+// https://www.figma.com/design/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=4236-31963&node-type=frame&t=YdbLaKqcnnWN4fBV-0
+export const ConnectivityInternetOffIcon: FC<ConnectivityIconProps> = ({ testID }) => {
+  const colorScheme = useAppColorScheme();
+  return (
+    <Svg testID={testID} fill="none" height={20} viewBox="0 0 20 20" width={20}>
+      <Path
+        d="M5.382 14.218a.525.525 0 01-.417.191.615.615 0 01-.444-.225 6.615 6.615 0 01-1.32-2.12 6.994 6.994 0 01-.457-2.522c0-.752.111-1.472.335-2.16a6.594 6.594 0 01.957-1.88l.8.8c-.315.46-.557.964-.725 1.51a5.837 5.837 0 00-.253 1.73c0 .734.123 1.429.37 2.085.245.652.598 1.233 1.059 1.743a.866.866 0 01.218.438.466.466 0 01-.123.41zm2.051-1.948a.553.553 0 01-.875-.048 4.277 4.277 0 01-.451-4.655l.854.854c-.072.173-.13.353-.17.54-.037.187-.055.38-.055.581 0 .356.05.695.15 1.019.1.319.253.606.458.861.11.15.178.299.205.444a.44.44 0 01-.116.404zm2.57 5.113a.496.496 0 01-.382-.164.62.62 0 01-.144-.424v-5.851l1.046 1.045v4.806a.604.604 0 01-.144.424.463.463 0 01-.376.164zm3.958-6.009l-.875-.868c.06-.146.103-.3.13-.465.032-.164.048-.33.048-.499 0-.355-.052-.692-.157-1.011a2.97 2.97 0 00-.451-.869c-.11-.15-.18-.298-.212-.444a.457.457 0 01.123-.403.532.532 0 01.43-.185.54.54 0 01.445.233c.296.369.526.783.69 1.244.164.455.246.934.246 1.435 0 .328-.036.647-.109.957a3.91 3.91 0 01-.308.875zm2.092 2.099l-.813-.814a5.61 5.61 0 00.67-1.462 5.807 5.807 0 00.232-1.655c0-.733-.123-1.426-.37-2.078a5.438 5.438 0 00-1.059-1.75.918.918 0 01-.225-.437.484.484 0 01.13-.41.506.506 0 01.417-.185c.168 0 .316.073.444.219a6.705 6.705 0 011.565 2.926c.142.55.212 1.123.212 1.715 0 .725-.105 1.42-.314 2.085a7.046 7.046 0 01-.889 1.846zm-.089 2.687L3.701 3.896a.502.502 0 01-.15-.37c0-.15.05-.275.15-.375A.49.49 0 014.077 3c.145 0 .27.05.376.15l12.256 12.263c.105.1.158.224.158.37a.513.513 0 01-.158.376.488.488 0 01-.369.15.525.525 0 01-.376-.15z"
+        fill={colorScheme.text}
+      />
+    </Svg>
+  );
+};
+
+// https://www.figma.com/design/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=4236-31968&node-type=frame&t=YdbLaKqcnnWN4fBV-0
+export const ConnectivityBluetoothOnIcon: FC<ConnectivityIconProps> = ({ testID }) => {
+  const colorScheme = useAppColorScheme();
+  return (
+    <Svg testID={testID} fill="none" height={20} viewBox="0 0 20 20" width={20}>
+      <Path
+        d="M13.823 12.406L11.064 10l2.756-2.378a.492.492 0 00.035-.716l-3.65-3.793A.376.376 0 009.935 3a.344.344 0 00-.346.337v5.288l-2.697-2.29a.549.549 0 00-.753.046.518.518 0 00.05.753L9.589 10l-3.378 2.84a.516.516 0 00-.053.748l.01.009c.196.219.54.24.765.047l2.656-2.3v5.306c0 .194.16.35.36.35.1 0 .193-.04.262-.11l3.647-3.765a.496.496 0 00-.035-.719zm-3.097-7.253l1.96 2.06c.025.024.022.065-.006.09L10.72 8.96c-.04.035-.106.007-.106-.046V5.196c.003-.06.075-.085.112-.044zm-.109 9.656v-3.696c0-.054.066-.082.106-.047l1.96 1.656c.028.022.028.062.006.09l-1.96 2.041c-.04.04-.112.013-.112-.044z"
+        fill={colorScheme.text}
+      />
+    </Svg>
+  );
+};
+
+// https://www.figma.com/design/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=4236-31968&node-type=frame&t=YdbLaKqcnnWN4fBV-0
+export const ConnectivityBluetoothOffIcon: FC<ConnectivityIconProps> = ({ testID }) => {
+  const colorScheme = useAppColorScheme();
+  return (
+    <Svg testID={testID} fill="none" height={20} viewBox="0 0 20 20" width={20}>
+      <Path
+        d="M13.82 7.622l-1.897 1.637-.772-.664 1.529-1.292c.028-.025.03-.066.006-.09l-1.96-2.06c-.037-.04-.109-.015-.112.044v2.936l-1.025-.88V3.337c0-.184.156-.337.347-.337.1 0 .2.04.269.112l3.65 3.794a.492.492 0 01-.035.716z"
+        fill={colorScheme.text}
+      />
+      <Path
+        clipRule="evenodd"
+        d="M13.552 13.44l2.957 2.54c.112.091.24.132.386.121a.488.488 0 00.357-.178.513.513 0 00.128-.387.49.49 0 00-.185-.356L4.045 3.88a.525.525 0 00-.386-.122.49.49 0 00-.364.179.51.51 0 00-.121.386c.01.146.07.264.178.357l2.75 2.362a.537.537 0 00.087.092l1.108.934 2.27 1.95-3.356 2.823a.516.516 0 00-.053.747l.01.009c.196.219.54.24.765.047l2.656-2.3v5.306c0 .194.16.35.36.35.1 0 .193-.04.262-.11l3.341-3.45zm-2.935 1.37v-3.697c0-.054.066-.082.106-.047l1.96 1.656c.028.022.028.062.006.09l-1.96 2.041c-.04.04-.112.013-.112-.044z"
+        fill={colorScheme.text}
+        fillRule="evenodd"
+      />
+    </Svg>
+  );
+};

package/src/icons/credential.tsx

@@ -0,0 +1,118 @@
+import React, { FC } from 'react';
+import Svg, { Path, SvgProps } from 'react-native-svg';
+
+import { useAppColorScheme } from '../theme/color-scheme-context';
+
+// https://www.figma.com/design/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=426-27862&m=dev
+export const CredentialErrorIcon: FC<SvgProps> = ({ ...props }) => (
+  <Svg fill="none" height={22} viewBox="0 0 22 22" width={22} {...props}>
+    <Path
+      d="M10.575 20a8.241 8.241 0 01-3.312-.672 8.649 8.649 0 01-2.74-1.851 8.837 8.837 0 01-1.85-2.74A8.242 8.242 0 012 11.425c0-1.173.224-2.277.672-3.312a8.793 8.793 0 014.582-4.59 8.243 8.243 0 013.312-.672c1.18 0 2.286.224 3.32.672a8.766 8.766 0 012.74 1.86 8.667 8.667 0 011.86 2.73 8.243 8.243 0 01.672 3.312 8.243 8.243 0 01-.673 3.312 8.768 8.768 0 01-4.598 4.59 8.241 8.241 0 01-3.312.673z"
+      fill="#D90D0D"
+    />
+    <Path
+      d="M3.814 18.181l.002.003c.882.881 1.9 1.57 3.051 2.062a9.242 9.242 0 003.708.754c1.303 0 2.542-.25 3.707-.754a9.766 9.766 0 005.12-5.111 9.244 9.244 0 00.756-3.71c0-1.304-.25-2.544-.755-3.71a9.666 9.666 0 00-2.071-3.041 9.765 9.765 0 00-3.048-2.069 9.263 9.263 0 00-3.718-.754c-1.304 0-2.544.25-3.71.754v.001a9.793 9.793 0 00-5.101 5.11A9.242 9.242 0 001 11.426c0 1.304.25 2.543.755 3.709a9.836 9.836 0 002.059 3.046z"
+      stroke="#fff"
+      strokeOpacity={0.2}
+      strokeWidth={2}
+    />
+    <Path
+      d="M8.433 14.712a.822.822 0 01-.58.225.773.773 0 01-.557-.225.773.773 0 01-.224-.556c0-.216.077-.398.232-.548l2.167-2.174-2.167-2.159a.768.768 0 01-.232-.547c0-.227.074-.413.224-.557a.773.773 0 01.556-.224c.216 0 .401.072.556.216l2.175 2.167 2.183-2.167a.759.759 0 01.556-.232c.216 0 .399.077.548.232.155.15.232.332.232.548 0 .21-.077.396-.232.556l-2.175 2.167 2.167 2.166c.155.144.232.33.232.556a.759.759 0 01-.232.556.755.755 0 01-.556.225.765.765 0 01-.565-.225l-2.158-2.166-2.15 2.166z"
+      fill="#fff"
+    />
+  </Svg>
+);
+
+// https://www.figma.com/design/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=415-5641&m=dev
+export const CredentialWarningIcon: 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>
+);
+
+// https://www.figma.com/design/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=542-90920&m=dev
+export const CredentialNoticInfoIcon: FC<SvgProps> = ({ ...props }) => {
+  const colorScheme = useAppColorScheme();
+  return (
+    <Svg width={24} height={24} viewBox="0 0 24 24" fill="none" {...props}>
+      <Path
+        d="M12.36 10.732c.111 0 .2.09.2.2V15.8a.2.2 0 01-.2.2h-.66a.2.2 0 01-.2-.2v-4.868c0-.11.09-.2.2-.2h.66zM11.5 8.2c0-.11.09-.2.2-.2h.66c.111 0 .2.09.2.2v.699a.2.2 0 01-.2.2h-.66a.2.2 0 01-.2-.2V8.2z"
+        fill={colorScheme.text}
+      />
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12 19a7 7 0 100-14 7 7 0 000 14zm0 1a8 8 0 100-16 8 8 0 000 16z"
+        fill={colorScheme.text}
+      />
+    </Svg>
+  );
+};
+
+// https://www.figma.com/design/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=542-93002&m=dev
+export const CredentialNoticeWarningIcon: FC<SvgProps> = ({ ...props }) => {
+  const colorScheme = useAppColorScheme();
+  return (
+    <Svg width={24} height={24} viewBox="0 0 24 24" fill="none" {...props}>
+      <Path
+        d="M12.36 13.268a.2.2 0 00.2-.2V8.2a.2.2 0 00-.2-.2h-.66a.2.2 0 00-.2.2v4.868c0 .11.09.2.2.2h.66zM11.5 15.8c0 .11.09.2.2.2h.66a.2.2 0 00.2-.2v-.699a.2.2 0 00-.2-.2h-.66a.2.2 0 00-.2.2v.699z"
+        fill={colorScheme.text}
+      />
+      <Path
+        d="M9.835 6.75c.962-1.667 3.368-1.667 4.33 0l4.33 7.5c.962 1.667-.24 3.75-2.165 3.75H7.67c-1.925 0-3.127-2.083-2.165-3.75l4.33-7.5z"
+        stroke={colorScheme.text}
+      />
+    </Svg>
+  );
+};
+
+// https://www.figma.com/file/S3WwgTMHuqxAsfu5zElCzq/App-Icon-Library-(Design)?type=design&node-id=41-478&t=yVRMjIPtDiBwq5Ax-4
+export const UpIcon: FC<SvgProps> = ({ color, ...props }) => {
+  const colorScheme = useAppColorScheme();
+  return (
+    <Svg fill="none" height={24} viewBox="0 0 24 24" width={24} {...props}>
+      <Path
+        d="M5.60988 14.8705C5.53977 14.805 5.5 14.7135 5.5 14.6177C5.5 14.522 5.53977 14.4305 5.60988 14.3649L11.4841 8.5L17.4018 14.3649C17.5327 14.5082 17.5327 14.7272 17.4018 14.8705L16.8796 15.3906C16.8138 15.4604 16.722 15.5 16.6258 15.5C16.5297 15.5 16.4378 15.4604 16.372 15.3906L11.5131 10.5513L6.62518 15.3906C6.55937 15.4604 6.46751 15.5 6.37135 15.5C6.2752 15.5 6.18333 15.4604 6.11753 15.3906L5.60988 14.8705Z"
+        fill={color ?? colorScheme.text}
+      />
+    </Svg>
+  );
+};
+
+// https://www.figma.com/file/S3WwgTMHuqxAsfu5zElCzq/App-Icon-Library-(Design)?type=design&node-id=41-477&t=yVRMjIPtDiBwq5Ax-4
+export const DownIcon: FC<SvgProps> = ({ color, ...props }) => {
+  const colorScheme = useAppColorScheme();
+  return (
+    <Svg fill="none" height={24} viewBox="0 0 24 24" width={24} {...props}>
+      <Path
+        d="M17.8901 9.12948C17.9602 9.19502 18 9.28652 18 9.38228C18 9.47804 17.9602 9.56954 17.8901 9.63508L12.0159 15.5L6.09821 9.63508C5.96726 9.49178 5.96726 9.27278 6.09821 9.12948L6.62036 8.60944C6.68616 8.53961 6.77803 8.5 6.87418 8.5C6.97034 8.5 7.06221 8.53961 7.12801 8.60944L11.9869 13.4487L16.8748 8.60944C16.9406 8.53961 17.0325 8.5 17.1286 8.5C17.2248 8.5 17.3167 8.53961 17.3825 8.60944L17.8901 9.12948Z"
+        fill={color ?? colorScheme.text}
+      />
+    </Svg>
+  );
+};
+
+export const RequiredAttributeIcon: FC<SvgProps> = ({ color, ...props }) => {
+  const colorScheme = useAppColorScheme();
+  return (
+    <Svg fill="none" height={24} viewBox="0 0 24 24" width={24} {...props}>
+      <Path
+        d="M16.767 8.11a.432.432 0 00-.576 0l-6.013 5.941-3.109-3.149-.001-.001a.411.411 0 00-.576 0l-.375.364-.007.008a.432.432 0 000 .576l4.065 4.098 6.963-6.878.005-.005a.421.421 0 000-.568l-.368-.38-.008-.006z"
+        fill={color ?? colorScheme.text}
+      />
+    </Svg>
+  );
+};

package/src/icons/entity.tsx

@@ -0,0 +1,21 @@
+import React, { FC } from 'react';
+import Svg, { Path, SvgProps } from 'react-native-svg';
+
+import { useAppColorScheme } from '../theme/color-scheme-context';
+
+// https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?type=design&node-id=415-5402&mode=design&t=YI1oD2BfBie5HcvJ-0
+export const EntityTrustedIcon: FC<SvgProps> = ({ ...props }) => {
+  const colorScheme = useAppColorScheme();
+  return (
+    <Svg width={16} height={19} viewBox="0 0 16 19" fill="none" {...props}>
+      <Path
+        d="M9.265 1.255a4 4 0 00-2.53 0l-3 1A4 4 0 001 6.05v4.117a7 7 0 007 7 7 7 0 007-7V6.05a4 4 0 00-2.735-3.795l-3-1z"
+        fill={colorScheme.success}
+      />
+      <Path
+        d="M9.265 1.255l-.316.949.316-.949zm-2.53 0l.316.949-.316-.949zm-3 1l-.316-.949.316.949zm8.53 0l.316-.949-.316.949zM9.58.306a5 5 0 00-3.162 0l.632 1.898a3 3 0 011.898 0L9.58.306zm-3.162 0l-3 1 .632 1.898 3-1L6.42.306zm-3 1A5 5 0 000 6.05h2a3 3 0 012.051-2.846L3.42 1.306zM0 6.05v4.117h2V6.05H0zm0 4.117a8 8 0 008 8v-2a6 6 0 01-6-6H0zm8 8a8 8 0 008-8h-2a6 6 0 01-6 6v2zm8-8V6.05h-2v4.117h2zm0-4.117a5 5 0 00-3.419-4.744l-.632 1.898A3 3 0 0114 6.05h2zm-3.419-4.744l-3-1-.632 1.898 3 1 .632-1.898zM6.914 12.383c.156 0 .3-.037.43-.11a1.06 1.06 0 00.343-.32l3.649-5.64c.057-.089.104-.183.14-.282a.761.761 0 00.063-.297.652.652 0 00-.25-.53.839.839 0 00-.555-.204c-.276 0-.507.148-.695.445l-3.148 5.032-1.446-1.813a.98.98 0 00-.312-.273.717.717 0 00-.352-.086.742.742 0 00-.554.234.754.754 0 00-.227.555c0 .104.018.205.055.304.041.094.099.19.172.29l1.882 2.265c.115.146.237.255.368.328.13.068.276.102.437.102z"
+        fill={colorScheme.white}
+      />
+    </Svg>
+  );
+};