@bifold/core 1.0.0

package/src/modules/history/ui/HistorySettings.tsx

@@ -0,0 +1,184 @@
+import { useAgent } from '@credo-ts/react-hooks'
+import { ParamListBase } from '@react-navigation/core'
+import { StackScreenProps } from '@react-navigation/stack'
+import React, { useCallback, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { StyleSheet, View } from 'react-native'
+
+// eslint-disable-next-line import/no-named-as-default
+import { ButtonType } from '../../../components/buttons/Button-api'
+import KeyboardView from '../../../components/views/KeyboardView'
+import { TOKENS, useServices } from '../../../container-api'
+import { useAnimatedComponents } from '../../../contexts/animated-components'
+import { useTheme } from '../../../contexts/theme'
+import { Screens } from '../../../types/navigators'
+import { testIdWithKey } from '../../../utils/testable'
+import { HistoryBlockSelection, IHistoryManager } from '../types'
+
+import SingleSelectBlock from './components/SingleSelectBlock'
+import { ThemedText } from '../../../components/texts/ThemedText'
+
+interface HistorySettingsProps extends StackScreenProps<ParamListBase, Screens.HistorySettings> {}
+
+const HistorySettings: React.FC<HistorySettingsProps> = () => {
+  const [continueEnabled] = useState(true)
+  const [isLoading] = useState(false)
+  const { t } = useTranslation()
+
+  const { ColorPallet } = useTheme()
+  const { ButtonLoading } = useAnimatedComponents()
+  const actionButtonLabel = t('Global.SaveSettings')
+  const actionButtonTestId = testIdWithKey('Save')
+  const [Button, logger, loadHistory] = useServices([TOKENS.COMP_BUTTON, TOKENS.UTIL_LOGGER, TOKENS.FN_LOAD_HISTORY])
+  const { agent } = useAgent()
+  const historyManager: IHistoryManager | undefined = agent ? loadHistory(agent) : undefined
+
+  //State
+  const [initialHistory, setInitialHistory] = useState<HistoryBlockSelection | undefined>() // Initial history settings option
+  const [historyOptionSelected, setHistoryOptionSelected] = useState<HistoryBlockSelection | undefined>(initialHistory) // Selected history settings option
+
+  const style = StyleSheet.create({
+    screenContainer: {
+      height: '100%',
+      backgroundColor: ColorPallet.brand.primaryBackground,
+      padding: 20,
+      justifyContent: 'space-between',
+    },
+    title: {
+      marginTop: 16,
+    },
+    deleteButtonText: {
+      alignSelf: 'flex-start',
+      color: '#CD0000', //TODO: Use Bifold alert color
+    },
+    deleteButton: {
+      marginBottom: 16,
+    },
+    gap: {
+      marginTop: 10,
+      marginBottom: 10,
+    },
+
+    // below used as helpful labels for views, no properties needed atp
+    contentContainer: {},
+    controlsContainer: {},
+  })
+
+  const onSelectHistory = (newHistoryOption: HistoryBlockSelection) => {
+    // console.log('on select history:', JSON.stringify(newHistoryOption))
+    //TODO: Impliment warning of old history clearing on the below condition
+    // if (newHistoryOption && newHistoryOption.key) {
+    //   if ((initialHistory?.key as number) > newHistoryOption.key) {
+    //     setShowWarningDisclaimer(true)
+    //   } else {
+    //     setShowWarningDisclaimer(false)
+    //   }
+    // }
+    setHistoryOptionSelected(newHistoryOption)
+    //TODO: Impliment success alert
+    // setIsSuccess(false)
+  }
+
+  const handleSaveHistorySettings = useCallback(async () => {
+    if (!historyManager) {
+      logger.error(`[${HistorySettings.name}]: historyManager undefined!`)
+      return
+    }
+    try {
+      if (!historyOptionSelected && initialHistory) {
+        await historyManager.handleStoreHistorySettings(initialHistory)
+      } else {
+        await historyManager.handleStoreHistorySettings(historyOptionSelected)
+      }
+      //TODO: Impliment Alert
+      //   setShowWarningDisclaimer(false)
+      //   setIsSuccess(true)
+      //   scrollViewRef.current?.scrollTo({
+      //     y: 0,
+      //     animated: true,
+      //   })
+      // console.log('History option saved')
+    } catch (e: unknown) {
+      //TODO: Impliment Alert
+      // console.log('Error:', e)
+      //   log(`[${SettingsActivityHistory.name}]: Handle history save: ${e}`, LogLevel.error)
+      //   Toast.show({
+      //     type: 'error',
+      //     text1: (e as Error)?.message || t('Global.Failure'),
+      //   })
+    }
+  }, [historyManager, logger, historyOptionSelected, initialHistory])
+
+  /**
+   * Find current set history
+   */
+  useEffect(() => {
+    const getSavedHistorySettingsOption = async () => {
+      if (!historyManager) {
+        logger.error(`[${HistorySettings.name}]:[getSavedHistorySettingsOption] historyManager undefined!`)
+        return
+      }
+      const storedHistorySettingsOption = await historyManager.getStoredHistorySettingsOption()
+      if (storedHistorySettingsOption === 'Never') {
+        //TODO: Impliment "Never" option
+        //   setIsActivityHistoryDisabled(true)
+      } else {
+        setInitialHistory(
+          storedHistorySettingsOption
+            ? historyManager.getHistorySettingsOptionList().find((l) => l.id === storedHistorySettingsOption)
+            : undefined
+        )
+      }
+    }
+
+    getSavedHistorySettingsOption().catch((e) => {
+      logger.error(`[${HistorySettings.name}]:[getSavedHistorySettingsOption] Error: ${e}`)
+    })
+  }, [historyManager, logger])
+
+  return (
+    <KeyboardView>
+      <View style={style.screenContainer}>
+        <View style={style.contentContainer}>
+          <View>
+            <ThemedText variant="headerTitle" style={style.title}>
+              {t('ActivityHistory.Title')}
+            </ThemedText>
+            <ThemedText style={style.title}>{t('ActivityHistory.Description')}</ThemedText>
+            <View style={style.gap} />
+            <SingleSelectBlock
+              initialSelect={initialHistory}
+              selection={historyManager?.getHistorySettingsOptionList()}
+              onSelect={onSelectHistory}
+            />
+          </View>
+        </View>
+        <View style={style.controlsContainer}>
+          <Button
+            title={actionButtonLabel}
+            testID={actionButtonTestId}
+            accessibilityLabel={actionButtonLabel}
+            buttonType={ButtonType.Primary}
+            onPress={handleSaveHistorySettings}
+          >
+            {!continueEnabled && isLoading ? <ButtonLoading /> : null}
+          </Button>
+          <View style={{ marginBottom: 10 }} />
+          <Button
+            title={t('ActivityHistory.StopKeepingHistory')}
+            testID={actionButtonTestId}
+            accessibilityLabel={actionButtonLabel}
+            buttonType={ButtonType.Secondary}
+            onPress={async () => {
+              // console.log('save history')
+            }}
+          >
+            {!continueEnabled && isLoading ? <ButtonLoading /> : null}
+          </Button>
+        </View>
+      </View>
+    </KeyboardView>
+  )
+}
+
+export default HistorySettings

package/src/modules/history/ui/assets/img/HistoryCardAcceptedIcon.svg

@@ -0,0 +1,4 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="49.5157" height="50" rx="5" fill="#917952"/>
+<path d="M26.2578 29.6H29.2578V23H35.8578V20H29.2578V13.4H26.2578V20H19.6578V23H26.2578V29.6ZM13.7578 38.5C12.9578 38.5 12.2578 38.2 11.6578 37.6C11.0578 37 10.7578 36.3 10.7578 35.5V7.5C10.7578 6.7 11.0578 6 11.6578 5.4C12.2578 4.8 12.9578 4.5 13.7578 4.5H41.7578C42.5578 4.5 43.2578 4.8 43.8578 5.4C44.4578 6 44.7578 6.7 44.7578 7.5V35.5C44.7578 36.3 44.4578 37 43.8578 37.6C43.2578 38.2 42.5578 38.5 41.7578 38.5H13.7578ZM13.7578 35.5H41.7578V7.5H13.7578V35.5ZM7.75781 44.5C6.95781 44.5 6.25781 44.2 5.65781 43.6C5.05781 43 4.75781 42.3 4.75781 41.5V10.5H7.75781V41.5H38.7578V44.5H7.75781ZM13.7578 7.5V35.5V7.5Z" fill="black"/>
+</svg>

package/src/modules/history/ui/assets/img/HistoryCardExpiredIcon.svg

@@ -0,0 +1,4 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="49.5157" height="50" rx="5" fill="#917952"/>
+<path d="M19.8078 37.6L17.6578 35.45L22.6578 30.5L17.6578 25.55L19.8078 23.4L24.7578 28.4L29.7078 23.4L31.8578 25.55L26.8578 30.5L31.8578 35.45L29.7078 37.6L24.7578 32.6L19.8078 37.6ZM9.75781 44.5C8.95781 44.5 8.25781 44.2 7.65781 43.6C7.05781 43 6.75781 42.3 6.75781 41.5V10.5C6.75781 9.7 7.05781 9 7.65781 8.4C8.25781 7.8 8.95781 7.5 9.75781 7.5H13.0078V4.5H16.2578V7.5H33.2578V4.5H36.5078V7.5H39.7578C40.5578 7.5 41.2578 7.8 41.8578 8.4C42.4578 9 42.7578 9.7 42.7578 10.5V41.5C42.7578 42.3 42.4578 43 41.8578 43.6C41.2578 44.2 40.5578 44.5 39.7578 44.5H9.75781ZM9.75781 41.5H39.7578V20H9.75781V41.5ZM9.75781 17H39.7578V10.5H9.75781V17ZM9.75781 17V10.5V17Z" fill="black"/>
+</svg>

package/src/modules/history/ui/assets/img/HistoryCardRevokedIcon.svg

@@ -0,0 +1,4 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="-0.000244141" width="49.5157" height="50" rx="5" fill="#917952"/>
+<path d="M10.7578 25.9998V22.9998H38.7578V25.9998H10.7578Z" fill="black"/>
+</svg>

package/src/modules/history/ui/assets/img/HistoryInformationSentIcon.svg

@@ -0,0 +1,4 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="-0.00012207" width="49.5157" height="50" rx="5" fill="#917952"/>
+<path d="M23.3078 32.0999H26.2578V22.3999L30.2078 26.4499L32.3578 24.2999L24.7078 16.6999L17.1078 24.2999L19.2578 26.4499L23.3078 22.3999V32.0999ZM7.75781 40.4999C6.95781 40.4999 6.25781 40.1999 5.65781 39.5999C5.05781 38.9999 4.75781 38.2999 4.75781 37.4999V11.4999C4.75781 10.6999 5.05781 9.99988 5.65781 9.39988C6.25781 8.79988 6.95781 8.49988 7.75781 8.49988H41.7578C42.5578 8.49988 43.2578 8.79988 43.8578 9.39988C44.4578 9.99988 44.7578 10.6999 44.7578 11.4999V37.4999C44.7578 38.2999 44.4578 38.9999 43.8578 39.5999C43.2578 40.1999 42.5578 40.4999 41.7578 40.4999H7.75781ZM7.75781 37.4999H41.7578V11.4999H7.75781V37.4999ZM7.75781 37.4999V11.4999V37.4999Z" fill="black"/>
+</svg>

package/src/modules/history/ui/assets/img/HistoryPinUpdatedIcon.svg

@@ -0,0 +1,4 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="49.5157" height="50" rx="5" fill="#917952"/>
+<path d="M4.75781 38.5V35.45H44.7578V38.5H4.75781ZM6.65781 25.8L4.65781 24.7L6.65781 21.3H2.75781V19.05H6.65781L4.65781 15.65L6.65781 14.55L8.55781 17.9L10.4578 14.55L12.4578 15.65L10.4578 19.05H14.3578V21.3H10.4578L12.4578 24.7L10.4578 25.8L8.55781 22.45L6.65781 25.8ZM22.8578 25.8L20.8578 24.6L22.8578 21.2H18.9578V18.95H22.8578L20.8578 15.55L22.8578 14.45L24.7578 17.8L26.6578 14.45L28.6578 15.55L26.6578 18.95H30.5578V21.2H26.6578L28.6578 24.6L26.6578 25.8L24.7578 22.45L22.8578 25.8ZM39.0578 25.8L37.0578 24.6L39.0578 21.2H35.1578V18.95H39.0578L37.0578 15.55L39.0578 14.45L40.9578 17.8L42.8578 14.45L44.8578 15.55L42.8578 18.95H46.7578V21.2H42.8578L44.8578 24.6L42.8578 25.8L40.9578 22.45L39.0578 25.8Z" fill="black"/>
+</svg>

package/src/modules/history/ui/assets/img/IconChevronRight.svg

@@ -0,0 +1,3 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.9784 6.23413L9.56836 7.64413L14.1484 12.2341L9.56836 16.8241L10.9784 18.2341L16.9784 12.2341L10.9784 6.23413Z" fill="#666666"/>
+</svg>

package/src/modules/history/ui/components/BulletPoint.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import { useTranslation, Trans } from 'react-i18next'
+import { StyleSheet, View } from 'react-native'
+
+import { ThemedText } from '../../../../components/texts/ThemedText'
+
+interface Props {
+  pointsText?: string
+  pointsTextAxsLabel?: string
+  pointsTextAxsKey?: any
+}
+
+const styles = StyleSheet.create({
+  pointsView: {
+    flexDirection: 'row',
+  },
+  pointsBullet: {
+    paddingLeft: 8,
+  },
+  pointsText: {
+    flex: 1,
+    paddingLeft: 8,
+  },
+})
+
+const BulletPoint: React.FC<Props> = ({ pointsText, pointsTextAxsLabel, pointsTextAxsKey }) => {
+  const { t } = useTranslation()
+
+  return (
+    <View style={styles.pointsView} accessible={true}>
+      <ThemedText style={styles.pointsBullet}>{'\u2022'}</ThemedText>
+      {pointsTextAxsLabel ? (
+        <ThemedText style={styles.pointsText} accessibilityLabel={pointsTextAxsLabel}>
+          <Trans
+            i18nKey={pointsTextAxsKey}
+            components={{
+              b: <ThemedText variant="bold" />,
+            }}
+            t={t}
+          />
+        </ThemedText>
+      ) : (
+        <ThemedText style={styles.pointsText}>{pointsText}</ThemedText>
+      )}
+    </View>
+  )
+}
+
+export default BulletPoint

package/src/modules/history/ui/components/HistoryListItem.tsx

@@ -0,0 +1,251 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { StyleSheet, TouchableOpacity, View } from 'react-native'
+
+import { useTheme } from '../../../../contexts/theme'
+import { CustomRecord, HistoryCardType } from '../../types'
+import { ThemedText } from '../../../../components/texts/ThemedText'
+
+interface Props {
+  item: CustomRecord
+}
+
+const styles = StyleSheet.create({
+  card: {
+    padding: 16,
+    flexDirection: 'row',
+  },
+  cardContent: {
+    flexDirection: 'column',
+    marginHorizontal: 12,
+    maxWidth: 200,
+  },
+  cardDescriptionContent: {
+    marginTop: 5,
+    marginBottom: 10,
+  },
+  cardDate: {
+    color: '#666666',
+  },
+  arrowContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'flex-end',
+  },
+  cardBottomBorder: {
+    borderBottomWidth: 0.5,
+    borderBottomColor: '#A0A4AB',
+  },
+  historyCardRevoked: {
+    color: '#D81A21',
+  },
+  successColor: {
+    color: '#118847',
+  },
+  infoBox: {
+    color: '#1080A6',
+  },
+})
+
+const HistoryListItem: React.FC<Props> = ({ item }) => {
+  const { t } = useTranslation()
+  const { Assets, ColorPallet } = useTheme()
+  //TODO: navigate to history details
+  //   const navigation = useNavigation<StackNavigationProp<RootStackParams, 'HistoryDetails'>>()
+
+  const renderCardSections = (item: CustomRecord) => {
+    switch (item.content.type) {
+      case HistoryCardType.CardAccepted: {
+        return {
+          icon: <Assets.svg.historyCardAcceptedIcon />,
+          title: <ThemedText variant="headingThree">{t('History.CardTitle.CardAccepted')}</ThemedText>,
+          description: <ThemedText>{item.content.correspondenceName}</ThemedText>,
+        }
+      }
+      case HistoryCardType.CardDeclined: {
+        return {
+          icon: <Assets.svg.historyCardDeclinedIcon />,
+          title: (
+            <ThemedText variant="headerTitle" style={{ color: styles.historyCardRevoked.color }}>
+              {t('History.CardTitle.CardDeclined')}
+            </ThemedText>
+          ),
+          description: <ThemedText>{item.content.correspondenceName}</ThemedText>,
+        }
+      }
+      case HistoryCardType.CardExpired: {
+        return {
+          icon: <Assets.svg.historyCardExpiredIcon />,
+          title: <ThemedText variant="headerTitle">{t('History.CardTitle.CardExpired')}</ThemedText>,
+          description: (
+            <ThemedText>
+              {t('History.CardDescription.CardExpired', { cardName: item.content.correspondenceName })}
+            </ThemedText>
+          ),
+        }
+      }
+      case HistoryCardType.CardRemoved: {
+        return {
+          icon: <Assets.svg.historyCardRemovedIcon />,
+          title: (
+            <ThemedText variant="headerTitle" style={{ color: styles.historyCardRevoked.color }}>
+              {t('History.CardTitle.CardRemoved')}
+            </ThemedText>
+          ),
+          description: <ThemedText>{item.content.correspondenceName}</ThemedText>,
+        }
+      }
+      case HistoryCardType.CardRevoked: {
+        return {
+          icon: <Assets.svg.historyCardRevokedIcon />,
+          title: (
+            <ThemedText variant="headerTitle" style={{ color: styles.historyCardRevoked.color }}>
+              {t('History.CardTitle.CardRevoked')}
+            </ThemedText>
+          ),
+          description: (
+            <ThemedText>
+              {t('History.CardDescription.CardRevoked', { cardName: item.content.correspondenceName })}
+            </ThemedText>
+          ),
+        }
+      }
+      case HistoryCardType.CardUpdates: {
+        return {
+          icon: <Assets.svg.historyCardUpdatesIcon />,
+          title: <ThemedText variant="headingThree">{t('History.CardTitle.CardUpdates')}</ThemedText>,
+          description: <ThemedText>{item.content.correspondenceName}</ThemedText>,
+        }
+      }
+      case HistoryCardType.PinChanged: {
+        return {
+          icon: <Assets.svg.historyPinUpdatedIcon />,
+          title: (
+            <ThemedText variant="headerTitle" style={{ color: styles.infoBox.color }}>
+              {t('History.CardTitle.WalletPinUpdated')}
+            </ThemedText>
+          ),
+          description: <ThemedText>{t('History.CardDescription.WalletPinUpdated')}</ThemedText>,
+        }
+      }
+      case HistoryCardType.InformationSent: {
+        return {
+          icon: <Assets.svg.historyInformationSentIcon />,
+          title: (
+            <ThemedText variant="headingThree" style={{ color: styles.successColor.color }}>
+              {t('History.CardTitle.InformationSent')}
+            </ThemedText>
+          ),
+          description: <ThemedText>{item.content.correspondenceName}</ThemedText>,
+        }
+      }
+      case HistoryCardType.InformationNotSent: {
+        return {
+          icon: <Assets.svg.historyInformationNotSentIcon />,
+          title: (
+            <ThemedText variant="headerTitle" style={{ color: styles.historyCardRevoked.color }}>
+              {t('History.CardTitle.InformationNotSent')}
+            </ThemedText>
+          ),
+          description: <ThemedText>{item.content.correspondenceName}</ThemedText>,
+        }
+      }
+      case HistoryCardType.Connection: {
+        return {
+          icon: <Assets.svg.historyConnectionIcon />,
+          title: <ThemedText variant="headingThree">{t('History.CardTitle.Connection')}</ThemedText>,
+          description: <ThemedText>{item.content.correspondenceName}</ThemedText>,
+        }
+      }
+      case HistoryCardType.ConnectionRemoved: {
+        return {
+          icon: <Assets.svg.historyConnectionRemovedIcon />,
+          title: (
+            <ThemedText variant="headingThree" style={{ color: styles.historyCardRevoked.color }}>
+              {t('History.CardTitle.ConnectionRemoved')}
+            </ThemedText>
+          ),
+          description: <ThemedText>{item.content.correspondenceName}</ThemedText>,
+        }
+      }
+      case HistoryCardType.ActivateBiometry: {
+        return {
+          icon: <Assets.svg.historyActivateBiometryIcon />,
+          title: <ThemedText variant="headingThree">{t('History.CardTitle.ActivateBiometry')}</ThemedText>,
+          description: <ThemedText>{item.content.correspondenceName}</ThemedText>,
+        }
+      }
+      case HistoryCardType.DeactivateBiometry: {
+        return {
+          icon: <Assets.svg.historyDeactivateBiometryIcon />,
+          title: (
+            <ThemedText variant="headingThree" style={{ color: styles.historyCardRevoked.color }}>
+              {t('History.CardTitle.DeactivateBiometry')}
+            </ThemedText>
+          ),
+          description: <ThemedText>{item.content.correspondenceName}</ThemedText>,
+        }
+      }
+      default:
+        return {
+          icon: null,
+          title: null,
+          description: null,
+        }
+    }
+  }
+
+  //TODO: move to helpers
+  function isToday(date: Date): boolean {
+    const today = new Date()
+    return (
+      date.getDate() === today.getDate() &&
+      date.getMonth() === today.getMonth() &&
+      date.getFullYear() === today.getFullYear()
+    )
+  }
+
+  const renderCardDate = (date?: Date) => {
+    if (!date) return null
+
+    const options: Intl.DateTimeFormatOptions = { year: 'numeric', month: 'short', day: 'numeric' }
+    const isDateToday = isToday(date)
+    return (
+      <ThemedText style={styles.cardDate}>
+        {isDateToday ? t('History.Today') : date.toLocaleDateString('en-US', options)}
+      </ThemedText>
+    )
+  }
+
+  const renderCard = (item: CustomRecord) => {
+    const { icon, title, description } = renderCardSections(item)
+    return (
+      <View>
+        <View style={styles.card}>
+          {icon}
+          <View style={styles.cardContent}>
+            {title}
+            <View style={styles.cardDescriptionContent}>{description}</View>
+            {renderCardDate(item.content.createdAt)}
+          </View>
+          <View style={styles.arrowContainer}>
+            <Assets.svg.iconChevronRight color={ColorPallet.brand.primary} />
+          </View>
+        </View>
+        <View style={styles.cardBottomBorder} />
+      </View>
+    )
+  }
+
+  return (
+    <TouchableOpacity
+      onPress={() => {
+        //TODO: navigate to history details
+      }}
+    >
+      {renderCard(item)}
+    </TouchableOpacity>
+  )
+}
+
+export default HistoryListItem

package/src/modules/history/ui/components/HistoryMenu.tsx

@@ -0,0 +1,25 @@
+import { useNavigation } from '@react-navigation/core'
+import { StackNavigationProp } from '@react-navigation/stack'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+import IconButton, { ButtonLocation } from '../../../../components/buttons/IconButton'
+import { RootStackParams, Screens, Stacks } from '../../../../types/navigators'
+import { testIdWithKey } from '../../../../utils/testable'
+
+const HistoryMenu: React.FC = () => {
+  const navigation = useNavigation<StackNavigationProp<RootStackParams>>()
+  const { t } = useTranslation()
+
+  return (
+    <IconButton
+      buttonLocation={ButtonLocation.Right}
+      accessibilityLabel={t('Screens.Settings')}
+      testID={testIdWithKey('Settings')}
+      onPress={() => navigation.navigate(Stacks.HistoryStack, { screen: Screens.HistoryPage })}
+      icon="history"
+    />
+  )
+}
+
+export default HistoryMenu

package/src/modules/history/ui/components/SingleSelectBlock.tsx

@@ -0,0 +1,72 @@
+import React, { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { StyleSheet, TouchableOpacity } from 'react-native'
+import Icon from 'react-native-vector-icons/MaterialIcons'
+
+import { TextTheme } from '../../../../theme'
+import { HistoryBlockSelection } from '../../types'
+import { ThemedText } from '../../../../components/texts/ThemedText'
+
+const styles = StyleSheet.create({
+  flexView: {
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    minWidth: 24,
+    minHeight: 48,
+  },
+  languageText: {
+    marginLeft: 8,
+  },
+})
+
+interface Props {
+  selection: HistoryBlockSelection[] | undefined
+  onSelect: (selected: HistoryBlockSelection) => void
+  initialSelect?: HistoryBlockSelection
+  color?: string
+}
+
+const SingleSelectBlock: React.FC<Props> = ({ selection, onSelect, initialSelect, color = TextTheme.normal.color }) => {
+  const { t } = useTranslation()
+
+  const [selected, setSelected] = useState<HistoryBlockSelection>()
+
+  const handleSelect = (selected: HistoryBlockSelection) => {
+    setSelected(selected)
+    onSelect(selected)
+  }
+
+  useEffect(() => {
+    if (initialSelect) {
+      setSelected(initialSelect)
+    }
+  }, [initialSelect])
+
+  return (
+    <>
+      {selection?.map((item) => (
+        <TouchableOpacity
+          accessible={true}
+          accessibilityLabel={
+            (item.id === selected?.id ? t('SelectionAxs.RadioChecked') : t('SelectionAxs.RadioUnchecked')) + item.value
+          }
+          accessibilityRole="radio"
+          accessibilityState={{ selected: item.id === selected?.id }}
+          key={item.id}
+          style={styles.flexView}
+          onPress={() => handleSelect(item)}
+        >
+          <Icon
+            name={item.id === selected?.id ? 'radio-button-checked' : 'radio-button-unchecked'}
+            size={36}
+            color={color}
+          />
+          <ThemedText style={styles.languageText}>{item.value}</ThemedText>
+        </TouchableOpacity>
+      ))}
+    </>
+  )
+}
+
+export default SingleSelectBlock

package/src/modules/openid/components/CredentialRowCard.tsx

@@ -0,0 +1,64 @@
+import { Image, StyleSheet, Text, useWindowDimensions, View, TouchableOpacity } from 'react-native'
+import { useTheme } from '../../../contexts/theme'
+
+interface CredentialRowCardProps {
+  name: string
+  issuer?: string
+  onPress?(): void
+  bgColor?: string
+  bgImage?: string
+  txtColor?: string
+  hideBorder?: boolean
+  showFullText?: boolean
+}
+
+export function OpenIDCredentialRowCard({ name, issuer, bgColor, bgImage, txtColor, onPress }: CredentialRowCardProps) {
+  const { TextTheme } = useTheme()
+  const { width } = useWindowDimensions()
+
+  const badgeWidth = 0.25 * width
+  const badgeHeight = 0.6 * badgeWidth
+
+  const style = StyleSheet.create({
+    container: {},
+    rowContainer: {
+      flexDirection: 'row',
+      borderRadius: 8,
+      backgroundColor: '#202020',
+      padding: 5,
+      minHeight: 0.2 * width,
+    },
+    issuerBadge: {
+      borderRadius: 8,
+      width: badgeHeight,
+      height: badgeHeight,
+      backgroundColor: 'red',
+      marginRight: 10,
+      overflow: 'hidden',
+    },
+    infoContainer: {
+      flex: 1,
+      justifyContent: 'space-between',
+    },
+    imageStyle: { width: badgeWidth, height: badgeHeight, borderRadius: 8 },
+  })
+  //
+  return (
+    <View style={style.container}>
+      <TouchableOpacity
+        onPress={onPress}
+        style={style.rowContainer}
+        accessibilityLabel={name}
+        accessibilityRole="button"
+      >
+        <View style={[style.issuerBadge, bgColor ? { backgroundColor: bgColor } : {}]}>
+          {bgImage ? <Image style={style.imageStyle} source={{ uri: bgImage }} resizeMode="cover" /> : null}
+        </View>
+        <View style={[style.infoContainer, issuer ? { justifyContent: 'center' } : {}]}>
+          <Text style={[TextTheme.title, txtColor ? { color: txtColor } : {}]}>{name}</Text>
+          {issuer && <Text style={[TextTheme.labelSubtitle, txtColor ? { color: txtColor } : {}]}>{issuer}</Text>}
+        </View>
+      </TouchableOpacity>
+    </View>
+  )
+}