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;
 }