feat(#162): [Tilak|Pooja] Create Short UUID using npm lib and display it in about page

machines/settings.ts

@@ -8,6 +8,7 @@ import getAllConfigurations, {
   COMMON_PROPS_KEY,
 } from '../shared/commonprops/commonProps';
 import Storage from '../shared/storage';
+import ShortUniqueId from 'short-unique-id';
 
 const model = createModel(
   {
@@ -19,6 +20,7 @@ const model = createModel(
     } as VCLabel,
     isBiometricUnlockEnabled: false,
     credentialRegistry: HOST,
+    appId: null,
     credentialRegistryResponse: '',
   },
   {
@@ -64,7 +66,7 @@ export const settingsMachine = model.createMachine(
         },
       },
       storingDefaults: {
-        entry: ['storeContext'],
+        entry: ['updateDefaults', 'storeContext'],
         on: {
           STORE_RESPONSE: 'idle',
         },
@@ -110,6 +112,10 @@ export const settingsMachine = model.createMachine(
         to: (context) => context.serviceRefs.store,
       }),
 
+      updateDefaults: model.assign({
+        appId: generateAppId(),
+      }),
+
       storeContext: send(
         (context) => {
           const { serviceRefs, ...data } = context;
@@ -185,12 +191,20 @@ export function createSettingsMachine(serviceRefs: AppServices) {
   });
 }
 
+function generateAppId() {
+  return new ShortUniqueId({ length: 10 }).randomUUID();
+}
+
 type State = StateFrom<typeof settingsMachine>;
 
 export function selectName(state: State) {
   return state.context.name;
 }
 
+export function selectAppId(state: State) {
+  return state.context.appId;
+}
+
 export function selectVcLabel(state: State) {
   return state.context.vcLabel;
 }

package-lock.json

@@ -75,8 +75,8 @@
         "react-native-svg": "12.1.1",
         "react-native-swipe-gestures": "^1.0.5",
         "react-native-tuvali": "github:mosip/tuvali#v0.4.1",
-        "react-native-uuid": "^2.0.1",
         "react-native-vector-icons": "^8.1.0",
+        "short-unique-id": "^4.4.4",
         "xstate": "^4.35.0"
       },
       "devDependencies": {
@@ -100,6 +100,7 @@
     },
     ".yalc/react-native-tuvali": {
       "version": "0.4.1",
+      "extraneous": true,
       "license": "MIT",
       "peerDependencies": {
         "react": "*",
@@ -21814,15 +21815,6 @@
         "react-native": "*"
       }
     },
-    "node_modules/react-native-uuid": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/react-native-uuid/-/react-native-uuid-2.0.1.tgz",
-      "integrity": "sha512-cptnoIbL53GTCrWlb/+jrDC6tvb7ypIyzbXNJcpR3Vab0mkeaaVd5qnB3f0whXYzS+SMoSQLcUUB0gEWqkPC0g==",
-      "engines": {
-        "node": ">=10.0.0",
-        "npm": ">=6.0.0"
-      }
-    },
     "node_modules/react-native-vector-icons": {
       "version": "8.1.0",
       "resolved": "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-8.1.0.tgz",
@@ -23530,6 +23522,15 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/short-unique-id": {
+      "version": "4.4.4",
+      "resolved": "https://registry.npmjs.org/short-unique-id/-/short-unique-id-4.4.4.tgz",
+      "integrity": "sha512-oLF1NCmtbiTWl2SqdXZQbo5KM1b7axdp0RgQLq8qCBBLoq+o3A5wmLrNM6bZIh54/a8BJ3l69kTXuxwZ+XCYuw==",
+      "bin": {
+        "short-unique-id": "bin/short-unique-id",
+        "suid": "bin/short-unique-id"
+      }
+    },
     "node_modules/side-channel": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
@@ -45628,11 +45629,6 @@
       "from": "react-native-tuvali@github:mosip/tuvali#v0.4.1",
       "requires": {}
     },
-    "react-native-uuid": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/react-native-uuid/-/react-native-uuid-2.0.1.tgz",
-      "integrity": "sha512-cptnoIbL53GTCrWlb/+jrDC6tvb7ypIyzbXNJcpR3Vab0mkeaaVd5qnB3f0whXYzS+SMoSQLcUUB0gEWqkPC0g=="
-    },
     "react-native-vector-icons": {
       "version": "8.1.0",
       "resolved": "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-8.1.0.tgz",
@@ -46973,6 +46969,11 @@
         }
       }
     },
+    "short-unique-id": {
+      "version": "4.4.4",
+      "resolved": "https://registry.npmjs.org/short-unique-id/-/short-unique-id-4.4.4.tgz",
+      "integrity": "sha512-oLF1NCmtbiTWl2SqdXZQbo5KM1b7axdp0RgQLq8qCBBLoq+o3A5wmLrNM6bZIh54/a8BJ3l69kTXuxwZ+XCYuw=="
+    },
     "side-channel": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",

package.json

@@ -80,8 +80,8 @@
     "react-native-svg": "12.1.1",
     "react-native-swipe-gestures": "^1.0.5",
     "react-native-tuvali": "github:mosip/tuvali#v0.4.1",
-    "react-native-uuid": "^2.0.1",
     "react-native-vector-icons": "^8.1.0",
+    "short-unique-id": "^4.4.4",
     "xstate": "^4.35.0"
   },
   "devDependencies": {

screens/Settings/AboutInji.tsx

@@ -10,7 +10,7 @@ import { Linking } from 'react-native';
 import getAllConfigurations from '../../shared/commonprops/commonProps';
 import { getVersion } from 'react-native-device-info';
 
-export const AboutInji: React.FC<AboutInjiProps> = () => {
+export const AboutInji: React.FC<AboutInjiProps> = ({ appId }) => {
   const { t } = useTranslation('AboutInji');
 
   const [showAboutInji, setShowAboutInji] = useState(false);
@@ -93,6 +93,11 @@ export const AboutInji: React.FC<AboutInjiProps> = () => {
             align="space-between"
             crossAlign="center"
             style={Theme.Styles.versionContainer}>
+            <Text
+              style={Theme.TextStyles.bold}
+              color={Theme.Colors.aboutVersion}>
+              App Id: {appId}
+            </Text>
             <Text
               style={Theme.TextStyles.bold}
               color={Theme.Colors.aboutVersion}>
@@ -117,4 +122,5 @@ export const AboutInji: React.FC<AboutInjiProps> = () => {
 
 interface AboutInjiProps {
   isVisible?: boolean;
+  appId?: string;
 }

screens/Settings/SettingScreen.tsx

@@ -102,7 +102,7 @@ export const SettingScreen: React.FC<SettingProps & MainRouteProps> = (
               />
             </ListItem>
 
-            <AboutInji />
+            <AboutInji appId={controller.appId} />
 
             {CREDENTIAL_REGISTRY_EDIT === 'true' && (
               <EditableListItem

screens/Settings/SettingScreenController.ts

@@ -14,6 +14,7 @@ import {
   selectVcLabel,
   selectCredentialRegistry,
   SettingsEvents,
+  selectAppId,
 } from '../../machines/settings';
 
 import {
@@ -98,6 +99,7 @@ export function useSettingsScreen({ navigation }: MainRouteProps) {
     isVisible,
     alertMsg,
     hideAlert,
+    appId: useSelector(settingsService, selectAppId),
     backendInfo: useSelector(appService, selectBackendInfo),
     name: useSelector(settingsService, selectName),
     vcLabel: useSelector(settingsService, selectVcLabel),