feat(#608): [Bhargavi] add about inji screen in the UI

AppMetaData.md

@@ -0,0 +1 @@
+Inji is a mobile app that can be used as a digital wallet to store credentials. It also allows verification of identity in both offline and online modes, at any place and time.

components/ui/themes/DefaultTheme.ts

@@ -7,6 +7,8 @@ const Colors = {
   Grey: '#B0B0B0',
   Grey5: '#E0E0E0',
   Grey6: '#F2F2F2',
+  Gray9: '#171717',
+  DimGray: '#737373',
   Orange: '#F2811D',
   LightGrey: '#f7f5f0',
   White: '#FFFFFF',
@@ -64,6 +66,8 @@ export const DefaultTheme = {
     WarningIcon: Colors.Warning,
     ProfileIconBg: Colors.LightOrange,
     Cursor: Colors.Orange,
+    version: Colors.DimGray,
+    poweredByBLE: Colors.Gray9,
   },
   Styles: StyleSheet.create({
     title: {
@@ -426,7 +430,7 @@ export const DefaultTheme = {
       padding: 0,
     },
   }),
-  CreditsStyles: StyleSheet.create({
+  AppMetaDataStyles: StyleSheet.create({
     buttonContainer: {
       position: 'absolute',
       left: 0,
@@ -436,9 +440,24 @@ export const DefaultTheme = {
       flex: 1,
       width: Dimensions.get('screen').width,
     },
-    markdownView: {
+    contentView: {
+      flex: 1,
       padding: 20,
     },
+    header: {
+      fontSize: 20,
+      fontFamily: 'sans-serif-medium',
+      fontWeight: 'normal',
+      color: 'rgb(28,28,30)',
+    },
+  }),
+  FooterStyles: StyleSheet.create({
+    bottom: {
+      justifyContent: 'flex-end',
+      backgroundColor: Colors.Grey6,
+      borderRadius: 15,
+      padding: 10,
+    },
   }),
   ModalStyles: StyleSheet.create({
     modal: {

components/ui/themes/PurpleTheme.ts

@@ -7,6 +7,8 @@ const Colors = {
   Grey: '#B0B0B0',
   Grey5: '#E0E0E0',
   Grey6: '#F2F2F2',
+  Gray9: '#171717',
+  DimGray: '#737373',
   Orange: '#F2811D',
   LightGrey: '#FAF9FF',
   White: '#FFFFFF',
@@ -65,6 +67,8 @@ export const PurpleTheme = {
     OnboardingCloseIcon: Colors.White,
     WarningIcon: Colors.Warning,
     Cursor: Colors.Purple,
+    version: Colors.DimGray,
+    poweredByBLE: Colors.Gray9,
   },
   Styles: StyleSheet.create({
     title: {
@@ -377,7 +381,7 @@ export const PurpleTheme = {
       padding: 0,
     },
   }),
-  CreditsStyles: StyleSheet.create({
+  AppMetaDataStyles: StyleSheet.create({
     buttonContainer: {
       position: 'absolute',
       left: 0,
@@ -387,9 +391,24 @@ export const PurpleTheme = {
       flex: 1,
       width: Dimensions.get('screen').width,
     },
-    markdownView: {
+    contentView: {
+      flex: 1,
       padding: 20,
     },
+    header: {
+      fontSize: 20,
+      fontFamily: 'sans-serif-medium',
+      fontWeight: 'normal',
+      color: 'rgb(28,28,30)',
+    },
+  }),
+  FooterStyles: StyleSheet.create({
+    bottom: {
+      justifyContent: 'flex-end',
+      backgroundColor: Colors.Grey6,
+      borderRadius: 15,
+      padding: 10,
+    },
   }),
   ModalStyles: StyleSheet.create({
     modal: {

locales/ara.json

@@ -193,9 +193,11 @@
     "confirmPasscode": "تأكيد رمز المرور الخاص بك",
     "enterPasscode": "المرور الخاص بك"
   },
-    "Credits": {
+  "AppMetaData": {
-      "header": "الائتمانات والإشعارات القانونية",
+    "header": "حول إنجي",
-      "back": "رجوع"
+    "version": "الإصدار",
+    "useBle": "Powered by BLE",
+    "useGoogleNearby": "Powered by GoogleNearby"
   },
   "ProfileScreen": {
     "name": "اسم",
@@ -203,17 +205,14 @@
     "language": "اللغة",
     "bioUnlock": "افتح مع القياسات الحيوية",
     "authFactorUnlock": "إلغاء تأمين عامل المصادقة",
-      "credits": "القانونية",
+    "AppMetaData": "حول إنجي",
     "logout": "تسجيل خروج",
     "revokeLabel": "إبطال VID",
     "revokeHeader": "إبطال VID",
     "revokingVids": "({{count}}) أنت على وشك إلغاء معرّفات VID.",
     "revokingVidsAfter": "هذا يعني أنك لن تكون قادرًا على استخدام أو عرض أي من المعرفات المرتبطة بمعرف (معرفات) VID هؤلاء. \nهل انت متأكد انك تريد المتابعة?",
     "empty": "فارغة",
-      "revokeSuccessful": "تم إبطال VID بنجاح",
+    "revokeSuccessful": "تم إبطال VID بنجاح"
-      "version": "الإصدار",
-      "useBle": "Powered by BLE",
-      "useGoogleNearby": "Powered by GoogleNearby"
   },
   "QrScreen": {
     "title": "QR تسجيل الدخول",

locales/en.json

@@ -195,9 +195,11 @@
     "confirmPasscode": "Confirm your passcode",
     "enterPasscode": "Enter your passcode"
   },
-  "Credits": {
+  "AppMetaData": {
-    "header": "Credits and legal notices",
+    "header": "About Inji",
-    "back": "Back"
+    "version": "Version",
+    "useBle": "Powered by BLE",
+    "useGoogleNearby": "Powered by GoogleNearby"
   },
   "ProfileScreen": {
     "name": "Name",
@@ -205,17 +207,14 @@
     "language": "Language",
     "bioUnlock": "Unlock with biometrics",
     "authFactorUnlock": "Unlock auth factor",
-    "credits": "Credits and legal notices",
+    "AppMetaData": "About Inji",
     "logout": "Logout",
     "revokeLabel": "Revoke VID",
     "revokeHeader": "REVOKE VID",
     "revokingVids": "You are about to revoke ({{count}}) VIDs.",
     "revokingVidsAfter": "This means you will no longer be able to use or view any of the IDs linked to those VID(s). \nAre you sure you want to proceed?",
     "empty": "Empty",
-    "revokeSuccessful": "VID successfully revoked",
+    "revokeSuccessful": "VID successfully revoked"
-    "version": "Version",
-    "useBle": "Powered by BLE",
-    "useGoogleNearby": "Powered by GoogleNearby"
   },
   "QrScreen": {
     "title": "QR Login",

locales/fil.json

@@ -193,9 +193,11 @@
     "confirmPasscode": "Kumpirmahin ang iyong passcode",
     "enterPasscode": "Ilagay ang iyong passcode"
   },
-  "Credits": {
+  "AppMetaData": {
-    "header": "Mga kredito at legal na abiso",
+    "header": "Tungkol kay Inji",
-    "back": "Bumalik"
+    "version": "Bersyon",
+    "useBle": "Powered by BLE",
+    "useGoogleNearby": "Powered by GoogleNearby"
   },
   "ProfileScreen": {
     "name": "Pangalan",
@@ -203,17 +205,14 @@
     "language": "Wika",
     "bioUnlock": "I-unlock gamit ang biometrics",
     "authFactorUnlock": "Pagbukas ng auth factor",
-    "credits": "Mga kredito at legal na abiso",
+    "AppMetaData": "Tungkol kay Inji",
     "logout": "Mag-logout",
     "revokeLabel": "Kanselahin ang VID",
     "revokeHeader": "KANSELAHIN ANG VID",
     "revokingVids": "Kakanselahin mo na ang ({{count}}) na mga VID.",
     "revokingVidsAfter": "Nangangahulugan ito na hindi mo na maa-access o matitingnan ang anumang mga ID na naka-link sa mga VID na ito. Sigurado ka bang gusto mong magpatuloy?",
     "empty": "Walang laman",
-    "revokeSuccessful": "Matagumpay na nakansela ang VID",
+    "revokeSuccessful": "Matagumpay na nakansela ang VID"
-    "version": "Bersyon",
-    "useBle": "Powered by BLE",
-    "useGoogleNearby": "Powered by GoogleNearby"
   },
   "QrScreen": {
     "title": "QR Login",

locales/hin.json

@@ -195,9 +195,11 @@
       "confirmPasscode": "अपना पासकोड कन्फर्म करें",
       "enterPasscode": "अपना पासकोड दर्ज करे"
     },
-    "Credits": {
+    "AppMetaData":{
-      "header": "क्रेडिट और कानूनी नोटिस",
+      "header": "इंजी के बारे में",
-      "back": "पीछे"
+      "version": "संस्करण",
+      "useBle": "Powered by BLE",
+      "useGoogleNearby": "Powered by GoogleNearby"
     },
     "ProfileScreen": {
       "name": "नाम",
@@ -205,17 +207,14 @@
       "language": "भाषा",
       "bioUnlock": "बायोमेट्रिक्स से अनलॉक करें",
       "authFactorUnlock": "अनलॉक ऑथ फैक्टर",
-      "credits": "क्रेडिट और कानूनी नोटिस",
+      "AppMetaData": "इंजी के बारे में",
       "logout": "लॉग आउट",
       "revokeLabel": "VID रद्द करना",
       "revokeHeader": "VID रद्द करना",
       "revokingVids": "आप ({{count}}) VID's को निरस्त करने वाले हैं .",
       "revokingVidsAfter": "इसका अर्थ है कि अब आप उनसे लिंक की गई किसी भी आईडी का उपयोग या देखने में सक्षम नहीं होंगे VID(s). \nक्या आप सुनिश्चित रूप से आगे बढ़ना चाहते हैं?",
       "empty": "खाली",
-      "revokeSuccessful": "VID को सफलतापूर्वक निरस्त कर दिया गया",
+      "revokeSuccessful": "VID को सफलतापूर्वक निरस्त कर दिया गया"
-      "version": "संस्करण",
-      "useBle": "Powered by BLE",
-      "useGoogleNearby": "Powered by GoogleNearby"
     },
     "QrScreen": {
       "title": "क्यूआर लॉगिन",

locales/kan.json

@@ -195,9 +195,11 @@
     "confirmPasscode": "ನಿಮ್ಮ ಪಾಸ್ಕೋಡ್ ಅನ್ನು ದೃಢೀಕರಿಸಿ",
     "enterPasscode": "ನಿಮ್ಮ ಪಾಸ್ಕೋಡ್ ನಮೂದಿಸಿ"
   },
-    "Credits": {
+  "AppMetaData": {
-      "header": "ಕ್ರೆಡಿಟ್‌ಗಳು ಮತ್ತು ಕಾನೂನು ಸೂಚನೆಗಳು",
+    "header": "ಇಂಜಿ ಬಗ್ಗೆ",
-      "back": "ಹಿಂದೆ"
+    "version": "ಆವೃತ್ತಿ",
+    "useBle": "Powered by BLE",
+    "useGoogleNearby": "Powered by GoogleNearby"
   },
   "ProfileScreen": {
     "name": "ಹೆಸರು",
@@ -205,17 +207,14 @@
     "language": "ಭಾಷೆ",
     "bioUnlock": "ಬಯೋಮೆಟ್ರಿಕ್‌ಗಳೊಂದಿಗೆ ಅನ್‌ಲಾಕ್ ಮಾಡಿ",
     "authFactorUnlock": "ಅನ್ಲಾಕ್ ದೃಢೀಕರಣ ಅಂಶ",
-      "credits": "ಕ್ರೆಡಿಟ್ಸ್ ಮತ್ತು ಲೀಗಲ್ ನೋಟಿಸ್",
+    "AppMetaData": "ಇಂಜಿ ಬಗ್ಗೆ",
     "logout": "ಲಾಗ್ ಔಟ್",
     "revokeLabel": "ರದ್ದು VID",
     "revokeHeader": "ರದ್ದು VID",
     "revokingVids": "ನೀವು ಹಿಂತೆಗೆದುಕೊಳ್ಳಲಿದ್ದೀರಿ ({{count}}) VIDs.",
     "revokingVidsAfter": "ಇದರರ್ಥ ನೀವು ಇನ್ನು ಮುಂದೆ ಅವುಗಳಿಗೆ ಲಿಂಕ್ ಮಾಡಲಾದ ಯಾವುದೇ ID ಗಳನ್ನು ಬಳಸಲು ಅಥವಾ ವೀಕ್ಷಿಸಲು ಸಾಧ್ಯವಾಗುವುದಿಲ್ಲ VID(s). \nನೀವು ಮುಂದುವರೆಯಲು ಖಚಿತವಾಗಿ ಬಯಸುವಿರಾ?",
     "empty": "ಖಾಲಿ",
-      "revokeSuccessful": "VID ಯಶಸ್ವಿಯಾಗಿ ಹಿಂಪಡೆಯಲಾಗಿದೆ",
+    "revokeSuccessful": "VID ಯಶಸ್ವಿಯಾಗಿ ಹಿಂಪಡೆಯಲಾಗಿದೆ"
-      "version": "ಆವೃತ್ತಿ",
-      "useBle": "Powered by BLE",
-      "useGoogleNearby": "Powered by GoogleNearby"
   },
   "QrScreen": {
     "title": "QR ಲಾಗಿನ್",
@@ -331,7 +330,6 @@
       "accepted": {
         "title": "ಯಶಸ್ಸು!",
         "message": "ನಿಮ್ಮ {{vcLabel}}ನ್ನು {{receiver}} ಅವರೊಂದಿಗೆ ಯಶಸ್ವಿಯಾಗಿ ಹಂಚಿಕೊಳ್ಳಲಾಗಿದೆ"
-
       },
       "rejected": {
         "title": "ಗಮನಿಸಿ",

locales/tam.json

@@ -193,9 +193,11 @@
     "confirmPasscode": "உங்கள் கடவுக்குறியீட்டை உறுதிப்படுத்தவும்",
     "enterPasscode": "உங்கள் கடவுக்குறியீட்டை உள்ளிடவும்"
   },
-    "Credits": {
+  "AppMetaData": {
-      "header": "வரவுகள் மற்றும் சட்ட அறிவிப்புகள்",
+    "header": "இன்ஜி பற்றி",
-      "back": "பின்"
+    "version": "பதிப்பு",
+    "useBle": "Powered by BLE",
+    "useGoogleNearby": "Powered by GoogleNearby"
   },
   "ProfileScreen": {
     "name": "பெயர்",
@@ -203,17 +205,14 @@
     "language": "மொழி",
     "bioUnlock": "பயோமெட்ரிக்ஸ் மூலம் திறக்கவும்",
     "authFactorUnlock": "அங்கீகார காரணியைத் திற",
-      "credits": "வரவுகள் மற்றும் சட்ட அறிவிப்புகள்",
+    "AppMetaData": "இன்ஜி பற்றி",
     "logout": "வெளியேறு",
     "revokeLabel": "திரும்பப் பெறு VID",
     "revokeHeader": "திரும்பப் பெறு VID",
     "revokingVids": "நீங்கள் ({{count}}) ஐ ரத்து செய்ய உள்ளீர்கள் VIDs.",
     "revokingVidsAfter": "அதாவது, அந்த VID(s) உடன் இணைக்கப்பட்ட எந்த ஐடியையும் நீங்கள் இனி பயன்படுத்தவோ பார்க்கவோ முடியாது. \nநீங்கள் நிச்சயமாக தொடர விரும்புகிறீர்களா?",
     "empty": "காலியாக",
-      "revokeSuccessful": "VID வெற்றிகரமாக ரத்து செய்யப்பட்டது",
+    "revokeSuccessful": "VID வெற்றிகரமாக ரத்து செய்யப்பட்டது"
-      "version": "பதிப்பு",
-      "useBle": "Powered by BLE",
-      "useGoogleNearby": "Powered by GoogleNearby"
   },
   "QrScreen": {
     "title": "QR உள்நுழைவு",

screens/Profile/AppMetaData.strings.json

@@ -0,0 +1,6 @@
+{
+  "header": "About Inji",
+  "version": "Version",
+  "useBle": "Powered by BLE",
+  "useGoogleNearby": "Powered by GoogleNearby"
+}

screens/Profile/AppMetaData.tsx

@@ -0,0 +1,117 @@
+import React, { useState } from 'react';
+import Markdown from 'react-native-simple-markdown';
+import { useTranslation } from 'react-i18next';
+import { I18nManager, Image, SafeAreaView, View } from 'react-native';
+import { Divider, Icon, ListItem, Overlay } from 'react-native-elements';
+
+import { Button, Text, Row, Column } from '../../components/ui';
+import { Theme } from '../../components/ui/styleUtils';
+import appMetaData from '../../AppMetaData.md';
+import { getVersion } from 'react-native-device-info';
+import { isBLEEnabled } from '../../lib/smartshare';
+
+export const AppMetaData: React.FC<AppMetaDataProps> = (props) => {
+  const { t } = useTranslation('AppMetaData');
+  const [isViewing, setIsViewing] = useState(false);
+
+  const dependencies = require('../../package-lock.json').dependencies;
+  let packageVersion, packageCommitId;
+
+  Object.keys(dependencies).forEach((dependencyName) => {
+    const dependencyData = dependencies[dependencyName];
+
+    if (dependencyName == 'react-native-openid4vp-ble') {
+      packageVersion = dependencyData.from
+        ? dependencyData.from.split('#')[1]
+        : 'unknown';
+      if (packageVersion != 'unknown') {
+        packageCommitId = dependencyData.version.split('#')[1].substring(0, 7);
+      }
+    }
+  });
+
+  const markdownStyles = {
+    text: {
+      fontSize: 18,
+    },
+    view: {
+      flex: 1,
+    },
+  };
+
+  return (
+    <ListItem bottomDivider onPress={() => setIsViewing(true)}>
+      <Icon
+        name="filetext1"
+        type="antdesign"
+        size={20}
+        style={Theme.Styles.profileIconBg}
+        color={Theme.Colors.Icon}
+      />
+      <ListItem.Content>
+        <ListItem.Title>
+          <Text color={props.color}>{props.label}</Text>
+        </ListItem.Title>
+      </ListItem.Content>
+      <Overlay
+        overlayStyle={{ padding: 24 }}
+        isVisible={isViewing}
+        onBackdropPress={() => setIsViewing(false)}>
+        <SafeAreaView>
+          <View style={Theme.AppMetaDataStyles.view}>
+            <Row align="center" crossAlign="center" margin="0 0 10 0">
+              <View style={Theme.AppMetaDataStyles.buttonContainer}>
+                <Button
+                  type="clear"
+                  icon={
+                    <Icon
+                      name={
+                        I18nManager.isRTL ? 'chevron-right' : 'chevron-left'
+                      }
+                      color={Theme.Colors.Icon}
+                    />
+                  }
+                  title=""
+                  onPress={() => setIsViewing(false)}
+                />
+              </View>
+              <Text style={Theme.AppMetaDataStyles.header}>
+                {t('header').toUpperCase()}
+              </Text>
+            </Row>
+            <Divider />
+            <View style={Theme.AppMetaDataStyles.contentView}>
+              <Markdown styles={markdownStyles}>{appMetaData}</Markdown>
+              <View style={Theme.FooterStyles.bottom}>
+                <Text
+                  weight="semibold"
+                  margin="5 0 0 0"
+                  align="center"
+                  size="small"
+                  color={Theme.Colors.version}>
+                  {t('version')}: {getVersion()}
+                </Text>
+                {packageVersion != 'unknown' && (
+                  <Text
+                    weight="semibold"
+                    margin="32 0 5 0"
+                    align="center"
+                    size="small"
+                    color={Theme.Colors.version}>
+                    {t('Tuvali-version')}:{' '}
+                    {packageVersion + '-' + packageCommitId}
+                  </Text>
+                )}
+              </View>
+            </View>
+          </View>
+        </SafeAreaView>
+      </Overlay>
+    </ListItem>
+  );
+};
+
+interface AppMetaDataProps {
+  label: string;
+  color?: string;
+}

screens/Profile/Credits.strings.json

@@ -1,4 +0,0 @@
-{
-  "header": "Credits and legal notices",
-  "back": "Back"
-}

screens/Profile/Credits.tsx

@@ -1,106 +0,0 @@
-import React, { useState } from 'react';
-import Markdown from 'react-native-simple-markdown';
-import { useTranslation } from 'react-i18next';
-import { I18nManager, Image, SafeAreaView, View } from 'react-native';
-import { Divider, Icon, ListItem, Overlay } from 'react-native-elements';
-
-import { Button, Text, Row, Column } from '../../components/ui';
-import { Theme } from '../../components/ui/styleUtils';
-import creditsContent from '../../Credits.md';
-
-// Intentionally hidden using {display:'none'} - Refer mosip/inji/issue#607
-export const Credits: React.FC<CreditsProps> = (props) => {
-  const { t } = useTranslation('Credits');
-  const [isViewing, setIsViewing] = useState(false);
-  const images = {
-    'docs/images/newlogic_logo.png': require('../../docs/images/newlogic_logo.png'),
-    'docs/images/id_pass_logo.png': require('../../docs/images/id_pass_logo.png'),
-  };
-
-  const markdownStyles = {
-    heading1: {
-      fontSize: 24,
-      textAlign: 'left',
-    },
-    heading2: {
-      fontSize: 24,
-      textAlign: 'left',
-    },
-    image: {
-      maxWidth: 150,
-      margin: 0,
-    },
-  };
-
-  const rules = {
-    image: {
-      react: (node, output, state) => (
-        <View key={`image-${state.key}`}>
-          <Image
-            style={{ maxWidth: 150, height: 100 }}
-            source={images[node.target]}
-            resizeMode="contain"
-          />
-        </View>
-      ),
-    },
-  };
-
-  return (
-    <ListItem
-      bottomDivider
-      onPress={() => setIsViewing(true)}
-      style={{ display: 'none' }}>
-      <Icon
-        name="filetext1"
-        type="antdesign"
-        size={20}
-        style={Theme.Styles.profileIconBg}
-        color={Theme.Colors.Icon}
-      />
-      <ListItem.Content>
-        <ListItem.Title>
-          <Text color={props.color}>{props.label}</Text>
-        </ListItem.Title>
-      </ListItem.Content>
-      <Overlay
-        overlayStyle={{ padding: 24 }}
-        isVisible={isViewing}
-        onBackdropPress={() => setIsViewing(false)}>
-        <SafeAreaView>
-          <View style={Theme.CreditsStyles.view}>
-            <Row align="center" crossAlign="center" margin="0 0 10 0">
-              <View style={Theme.CreditsStyles.buttonContainer}>
-                <Button
-                  type="clear"
-                  icon={
-                    <Icon
-                      name={
-                        I18nManager.isRTL ? 'chevron-right' : 'chevron-left'
-                      }
-                      color={Theme.Colors.Icon}
-                    />
-                  }
-                  title=""
-                  onPress={() => setIsViewing(false)}
-                />
-              </View>
-              <Text size="small">{t('header')}</Text>
-            </Row>
-            <Divider />
-            <View style={Theme.CreditsStyles.markdownView}>
-              <Markdown rules={rules} styles={markdownStyles}>
-                {creditsContent}
-              </Markdown>
-            </View>
-          </View>
-        </SafeAreaView>
-      </Overlay>
-    </ListItem>
-  );
-};
-
-interface CreditsProps {
-  label: string;
-  color?: string;
-}

screens/Profile/ProfileScreen.strings.json

@@ -4,15 +4,12 @@
   "language": "Language",
   "bioUnlock": "Unlock with biometrics",
   "authFactorUnlock": "Unlock auth factor",
-  "credits": "Credits and legal notices",
+  "AppMetaData": "About Inji",
   "logout": "Log-out",
   "revokeLabel": "Revoke VID",
   "revokeHeader": "REVOKE VID",
   "revokingVids": "You are about to revoke ({{count}}) VIDs.",
   "revokingVidsAfter": "This means you will no longer be able to use or view any of the IDs linked to those VID(s). \nAre you sure you want to proceed?",
   "empty": "Empty",
-  "revokeSuccessful": "VID successfully revoked",
+  "revokeSuccessful": "VID successfully revoked"
-  "version": "Version",
-  "useBle": "Powered by BLE",
-  "useGoogleNearby": "Powered by GoogleNearby"
 }

screens/Profile/ProfileScreen.tsx

@@ -7,14 +7,13 @@ import { Theme } from '../../components/ui/styleUtils';
 import { MainRouteProps } from '../../routes/main';
 import { EditableListItem } from '../../components/EditableListItem';
 import { MessageOverlay } from '../../components/MessageOverlay';
-import { Credits } from './Credits';
 import { Revoke } from './Revoke';
 import { useProfileScreen } from './ProfileScreenController';
 import { useTranslation } from 'react-i18next';
 import { LanguageSelector } from '../../components/LanguageSelector';
 import i18next, { SUPPORTED_LANGUAGES } from '../../i18n';
-import { isBLEEnabled } from '../../lib/smartshare';
 import { ScrollView } from 'react-native-gesture-handler';
+import { AppMetaData } from './AppMetaData';
 
 const LanguageSetting: React.FC = () => {
   const { t } = useTranslation('ProfileScreen');
@@ -44,21 +43,6 @@ const LanguageSetting: React.FC = () => {
 
 export const ProfileScreen: React.FC<MainRouteProps> = (props) => {
   const { t } = useTranslation('ProfileScreen');
-  const dependencies = require('../../package-lock.json').dependencies;
-  let packageVersion, packageCommitId;
-
-  Object.keys(dependencies).forEach((dependencyName) => {
-    const dependencyData = dependencies[dependencyName];
-
-    if (dependencyName == 'react-native-openid4vp-ble') {
-      packageVersion = dependencyData.from
-        ? dependencyData.from.split('#')[1]
-        : 'unknown';
-      if (packageVersion != 'unknown') {
-        packageCommitId = dependencyData.version.split('#')[1].substring(0, 7);
-      }
-    }
-  });
 
   const controller = useProfileScreen(props);
   return (
@@ -132,7 +116,10 @@ export const ProfileScreen: React.FC<MainRouteProps> = (props) => {
             </ListItem.Title>
           </ListItem.Content>
         </ListItem>
-        <Credits label={t('credits')} color={Theme.Colors.profileLabel} />
+        <AppMetaData
+          label={t('AppMetaData')}
+          color={Theme.Colors.profileLabel}
+        />
         <ListItem bottomDivider onPress={controller.LOGOUT}>
           <Icon
             name="logout"
@@ -147,32 +134,6 @@ export const ProfileScreen: React.FC<MainRouteProps> = (props) => {
             </ListItem.Title>
           </ListItem.Content>
         </ListItem>
-        <Text
-          weight="semibold"
-          margin="32 0 0 0"
-          align="center"
-          size="smaller"
-          color={Theme.Colors.profileVersion}>
-          {isBLEEnabled ? t('useBle') : t('useGoogleNearby')}
-        </Text>
-        <Text
-          weight="semibold"
-          margin="32 0 0 0"
-          align="center"
-          size="smaller"
-          color={Theme.Colors.profileVersion}>
-          {t('version')}: {getVersion()}
-        </Text>
-        {packageVersion != 'unknown' && (
-          <Text
-            weight="semibold"
-            margin="32 0 0 0"
-            align="center"
-            size="smaller"
-            color={Theme.Colors.profileVersion}>
-            {t('tuvali-version')}: {packageVersion + '-' + packageCommitId}
-          </Text>
-        )}
         {controller.backendInfo.application.name !== '' ? (
           <View>
             <Text