feat: [SIW-1844] Add trustmark generation functions

README.md

@@ -146,6 +146,7 @@ Different flows are provided to perform common operations. Each flow is a set of
   - [Issuance](./src/credential/issuance/README.md)
   - [Presentation](./src/credential/presentation/README.md) (TODO)
   - [Status](./src/credential/status/README.md)
+  - [Trustmark](./src/credential/trustmark/README.md)
 
 ### Example
 

example/.env.example

@@ -4,10 +4,12 @@ PRE_WALLET_PID_PROVIDER_BASE_URL='example'
 PRE_WALLET_EAA_PROVIDER_BASE_URL='example'
 PRE_REDIRECT_URI='example://cb'
 PRE_GOOGLE_CLOUD_PROJECT_NUMBER='000000000000'
+PRE_VERIFIER_BASE_URL='example'
 
 # PROD SECTION
 PROD_WALLET_PROVIDER_BASE_URL='example'
 PROD_WALLET_PID_PROVIDER_BASE_URL='example'
 PROD_WALLET_EAA_PROVIDER_BASE_URL='example'
 PROD_REDIRECT_URI='example://cb'
-PROD_GOOGLE_CLOUD_PROJECT_NUMBER='000000000000'
+PROD_GOOGLE_CLOUD_PROJECT_NUMBER='000000000000'
+PROD_VERIFIER_BASE_URL='example'

example/package.json

@@ -40,6 +40,7 @@
     "react-redux": "^9.1.2",
     "redux": "^5.0.1",
     "redux-persist": "^6.0.0",
+    "rn-qr-generator": "^1.4.2",
     "typesafe-actions": "^5.1.0",
     "url-parse": "^1.5.10"
   },

example/src/components/QrCodeImage.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import {
+  Image,
+  useWindowDimensions,
+  type ImageSourcePropType,
+} from "react-native";
+import Placeholder from "rn-placeholder";
+import RNQRGenerator from "rn-qr-generator";
+
+export type QrCodeImageProps = {
+  // Value to decode and present using a QR Code
+  value: string;
+  // Relative or absolute size of the QRCode image
+  size?: number | `${number}%`;
+  // Optional background color for the QR Code image
+  backgroundColor?: string;
+};
+
+/**
+ * This components renders a QR Code which resolves in the provided value
+ */
+const QrCodeImage = ({
+  value,
+  size = 200,
+  backgroundColor,
+}: QrCodeImageProps) => {
+  const [source, setSource] = React.useState<ImageSourcePropType>();
+  const { width } = useWindowDimensions();
+  const realSize = React.useMemo<number>(() => {
+    if (typeof size === "number") {
+      return size;
+    }
+
+    return (parseFloat(size) / 100.0) * width;
+  }, [size, width]);
+
+  React.useEffect(() => {
+    RNQRGenerator.generate({
+      value,
+      height: realSize,
+      width: realSize,
+      backgroundColor,
+      correctionLevel: "L",
+    })
+      .then((result) => setSource(result))
+      .catch((_) => undefined);
+  }, [value, realSize, backgroundColor]);
+
+  return source ? (
+    <Image source={source} />
+  ) : (
+    <Placeholder.Box
+      height={realSize}
+      width={realSize}
+      animate="fade"
+      radius={16}
+    />
+  );
+};
+
+const MemoizedQrCodeImage = React.memo(QrCodeImage);
+
+export { MemoizedQrCodeImage as QrCodeImage };

example/src/config.ts

@@ -5,10 +5,12 @@ declare module "@env" {
   export const PRE_WALLET_EAA_PROVIDER_BASE_URL: string;
   export const PRE_REDIRECT_URI: string;
   export const PRE_GOOGLE_CLOUD_PROJECT_NUMBER: string;
+  export const PRE_VERIFIER_BASE_URL: string;
   // PROD SECTION
   export const PROD_WALLET_PROVIDER_BASE_URL: string;
   export const PROD_WALLET_PID_PROVIDER_BASE_URL: string;
   export const PROD_WALLET_EAA_PROVIDER_BASE_URL: string;
   export const PROD_REDIRECT_URI: string;
   export const PROD_GOOGLE_CLOUD_PROJECT_NUMBER: string;
+  export const PROD_VERIFIER_BASE_URL: string;
 }

example/src/navigator/MainStackNavigator.tsx

@@ -1,24 +1,30 @@
-import { createNativeStackNavigator } from "@react-navigation/native-stack";
-import React, { useCallback } from "react";
-import { selectIoAuthToken } from "../store/reducers/sesssion";
-import { useSelector } from "react-redux";
-import HomeScreen from "../screens/HomeScreen";
-import IdpSelectionScreen from "../screens/login/IdpSelectionScreen";
-import IdpLoginScreen from "../screens/login/IdpLoginScreen";
+import { IconButton, IOThemeLight } from "@pagopa/io-app-design-system";
 import {
   DefaultTheme,
   NavigationContainer,
   type Theme,
 } from "@react-navigation/native";
-import { IconButton, IOThemeLight } from "@pagopa/io-app-design-system";
-import { WalletInstanceScreen } from "../screens/WalletInstanceScreen";
-import { PidScreen } from "../screens/PidScreen";
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
+import React, { useCallback } from "react";
+import { useSelector } from "react-redux";
 import { CredentialScreen } from "../screens/CredentialScreen";
-import { StatusAttestationScreen } from "../screens/StatusAttestationScreen";
-import { useAppDispatch } from "../store/utils";
-import { setDebugVisibility } from "../store/reducers/debug";
+import HomeScreen from "../screens/HomeScreen";
+import IdpLoginScreen from "../screens/login/IdpLoginScreen";
+import IdpSelectionScreen from "../screens/login/IdpSelectionScreen";
 import PidSpidLoginScreen from "../screens/login/PidSpidLoginScreen";
+import { PidScreen } from "../screens/PidScreen";
 import SettingsScreen from "../screens/SettingsScreen";
+import { StatusAttestationScreen } from "../screens/StatusAttestationScreen";
+import {
+  TrustmarkQrCodeScreen,
+  TrustmarkScreen,
+} from "../screens/TrustmarkScreen";
+import { WalletInstanceScreen } from "../screens/WalletInstanceScreen";
+import { setDebugVisibility } from "../store/reducers/debug";
+import { selectIoAuthToken } from "../store/reducers/sesssion";
+import type { SupportedCredentialsWithoutPid } from "../store/types";
+import { useAppDispatch } from "../store/utils";
+import { labelByCredentialType } from "../utils/ui";
 
 /**
  * MainStackNav parameters list for each defined screen.
@@ -29,6 +35,8 @@ export type MainStackNavParamList = {
   Pid: undefined;
   Credentials: undefined;
   StatusAttestation: undefined;
+  Trustmark: undefined;
+  TrustmarkQrCode: { credentialType: SupportedCredentialsWithoutPid };
   Login: undefined;
   IdpSelection: undefined;
   IdpLogin: { idp: string };
@@ -104,6 +112,20 @@ export const MainStackNavigator = () => {
               component={StatusAttestationScreen}
               options={{ title: "Test credentials attestations" }}
             />
+            <Stack.Screen
+              name="Trustmark"
+              component={TrustmarkScreen}
+              options={{ title: "Test credentials trustmark" }}
+            />
+            <Stack.Screen
+              name="TrustmarkQrCode"
+              component={TrustmarkQrCodeScreen}
+              options={({ route }) => ({
+                title: `${
+                  labelByCredentialType[route.params.credentialType]
+                } trustmark`,
+              })}
+            />
             <Stack.Screen
               name="Settings"
               component={SettingsScreen}

example/src/screens/HomeScreen.tsx

@@ -1,19 +1,19 @@
 /* eslint-disable react-native/no-inline-styles */
-import React, { useMemo } from "react";
-import { Alert, FlatList, SafeAreaView } from "react-native";
-import { selectIoAuthToken } from "../store/reducers/sesssion";
-import { useAppSelector } from "../store/utils";
 import {
   IOVisualCostants,
   ModuleSummary,
   VSpacer,
 } from "@pagopa/io-app-design-system";
 import { useNavigation } from "@react-navigation/native";
 import type { ComponentProps } from "react";
+import React, { useMemo } from "react";
+import { Alert, FlatList, SafeAreaView } from "react-native";
 import { useDebugInfo } from "../hooks/useDebugInfo";
-import { selectCredential } from "../store/reducers/credential";
+import { selectCredentials } from "../store/reducers/credential";
 import { selectHasInstanceKeyTag } from "../store/reducers/instance";
 import { selectPid } from "../store/reducers/pid";
+import { selectIoAuthToken } from "../store/reducers/sesssion";
+import { useAppSelector } from "../store/utils";
 
 type ModuleSummaryProps = ComponentProps<typeof ModuleSummary>;
 
@@ -26,12 +26,17 @@ const HomeScreen = () => {
   const hasIntegrityKeyTag = useAppSelector(selectHasInstanceKeyTag);
   const pid = useAppSelector(selectPid);
   const session = useAppSelector(selectIoAuthToken);
-  const mdl = useAppSelector(selectCredential("MDL"));
+  const credentials = useAppSelector(selectCredentials);
 
   useDebugInfo({
     session,
   });
 
+  const hasSomeCredential = React.useMemo(
+    () => Object.values(credentials).filter((_) => !!_).length > 0,
+    [credentials]
+  );
+
   const sections: Array<ModuleSummaryProps> = useMemo(
     () => [
       {
@@ -63,18 +68,27 @@ const HomeScreen = () => {
         description: "Obtain the status attestation of a credential",
         icon: "chevronRight",
         onPress: () =>
-          mdl
+          credentials.MDL
             ? navigation.navigate("StatusAttestation")
             : Alert.alert("Obtain a MDL first"),
       },
+      {
+        label: "Trustmark",
+        description: "Obtain the trustmark of a credential",
+        icon: "chevronRight",
+        onPress: () =>
+          hasSomeCredential
+            ? navigation.navigate("Trustmark")
+            : Alert.alert("Obtain a credential first"),
+      },
       {
         label: "Settings",
         description: "Change the environment and logout",
         icon: "chevronRight",
         onPress: () => navigation.navigate("Settings"),
       },
     ],
-    [hasIntegrityKeyTag, mdl, navigation, pid]
+    [hasIntegrityKeyTag, navigation, pid, credentials, hasSomeCredential]
   );
 
   return (