feat(example): add malware demo

example/src/App.tsx

@@ -1,21 +1,45 @@
 import * as React from 'react';
 
 import { Platform } from 'react-native';
-import { useFreeRasp } from 'freerasp-react-native';
+import {
+  addToWhitelist,
+  useFreeRasp,
+  type SuspiciousAppInfo,
+} from 'freerasp-react-native';
 import { DemoApp } from './DemoApp';
 import { commonChecks, iosChecks, androidChecks } from './checks';
+import { useEffect } from 'react';
 
 const App = () => {
   const [appChecks, setAppChecks] = React.useState([
     ...commonChecks,
     ...(Platform.OS === 'ios' ? iosChecks : androidChecks),
   ]);
+  const [suspiciousApps, setSuspiciousApps] = React.useState<
+    SuspiciousAppInfo[]
+  >([]);
+
+  useEffect(() => {
+    (async () => {
+      Platform.OS === 'android' && (await addItemsToMalwareWhitelist());
+    })();
+  }, []);
 
   const config = {
     androidConfig: {
       packageName: 'com.freeraspreactnativeexample',
       certificateHashes: ['AKoRuyLMM91E7lX/Zqp3u4jMmd0A7hH/Iqozu0TMVd0='],
       // supportedAlternativeStores: ['storeOne', 'storeTwo'],
+      malware: {
+        blocklistedHashes: ['FgvSehLMM91E7lX/Zqp3u4jMmd0A7hH/Iqozu0TMVd0u'],
+        blocklistedPackageNames: ['com.wultra.app.screenlogger'],
+        blocklistedPermissions: [
+          ['android.permission.BLUETOOTH', 'android.permission.INTERNET'],
+          ['android.permission.INTERNET'],
+          ['android.permission.BATTERY_STATS'],
+        ],
+        whitelistedInstallationSources: ['com.apkpure.aegon'],
+      },
     },
     iosConfig: {
       appBundleId: 'com.freeraspreactnativeexample',
@@ -144,11 +168,37 @@ const App = () => {
         )
       );
     },
+    // Android only
+    malware: (detectedApps: SuspiciousAppInfo[]) => {
+      setSuspiciousApps(detectedApps);
+      setAppChecks((currentState) =>
+        currentState.map((threat) =>
+          threat.name === 'Malware' ? { ...threat, status: 'nok' } : threat
+        )
+      );
+    },
+  };
+
+  const addItemsToMalwareWhitelist = async () => {
+    const appsToWhitelist = [
+      'com.talsecreactnativesecuritypluginexample',
+      'com.example.myApp',
+    ];
+    appsToWhitelist.forEach(async (app) => {
+      try {
+        const whitelistResponse = await addToWhitelist(app);
+        console.info(
+          `Malware Whitelist response for ${app}: ${whitelistResponse}`
+        );
+      } catch (error: any) {
+        console.info('Error while adding app to malware whitelist: ', error);
+      }
+    });
   };
 
   useFreeRasp(config, actions);
 
-  return <DemoApp checks={appChecks} />;
+  return <DemoApp checks={appChecks} suspiciousApps={suspiciousApps} />;
 };
 
 export default App;

example/src/DemoApp.tsx

@@ -6,8 +6,16 @@ import CloseCircle from '../assets/close-circle-outline.png';
 import TalsecLogo from '../assets/talsec-logo.png';
 import { Image } from 'react-native';
 import { Colors } from './styles';
+import { MalwareModal } from './MalwareModal';
+import type { SuspiciousAppInfo } from 'freerasp-react-native';
 
-export const DemoApp = (props: any) => {
+export const DemoApp: React.FC<{
+  checks: {
+    name: string;
+    status: string;
+  }[];
+  suspiciousApps: SuspiciousAppInfo[];
+}> = ({ checks, suspiciousApps }) => {
   return (
     <>
       <Flex
@@ -30,7 +38,7 @@ export const DemoApp = (props: any) => {
           >
             freeRASP checks:
           </Text>
-          {props.checks.map((check: any, idx: number) => (
+          {checks.map((check: any, idx: number) => (
             <Box
               key={idx}
               style={{
@@ -60,6 +68,12 @@ export const DemoApp = (props: any) => {
                 >
                   {check.name}
                 </Text>
+                {check.name === 'Malware' && (
+                  <MalwareModal
+                    isDisabled={check.status === 'ok'}
+                    suspiciousApps={suspiciousApps}
+                  />
+                )}
                 {check.status === 'ok' ? (
                   <Image
                     source={CheckmarkCircle}

example/src/MalwareItem.tsx

@@ -0,0 +1,157 @@
+import { Button, HStack } from '@react-native-material/core';
+import { addToWhitelist, type SuspiciousAppInfo } from 'freerasp-react-native';
+import ArrowUp from '../assets/arrow-up.png';
+import ArrowDown from '../assets/arrow-down.png';
+import React from 'react';
+import { useState } from 'react';
+import { TouchableOpacity, View, Text, Image, StyleSheet } from 'react-native';
+import { Colors } from './styles';
+
+export const MalwareItem: React.FC<{ app: SuspiciousAppInfo }> = ({ app }) => {
+  const [expanded, setExpanded] = useState(false);
+
+  const appUninstall = async () => {
+    alert('Implement yourself!');
+  };
+
+  const whitelistApp = async (packageName: string) => {
+    try {
+      const whitelistResponse = await addToWhitelist(packageName);
+      console.info(
+        `Malware Whitelist response for ${app}: ${whitelistResponse}`
+      );
+      alert('Restart app for whitelist to take effect');
+    } catch (error: any) {
+      console.info('Error while adding app to malware whitelist: ', error);
+    }
+  };
+
+  return (
+    <View style={styles.item}>
+      <TouchableOpacity onPress={() => setExpanded(!expanded)}>
+        <HStack>
+          <Image
+            style={styles.iconSmall}
+            source={{
+              uri: `data:image/png;base64,${app.packageInfo.appIcon}`,
+            }}
+          />
+          <View style={styles.textView}>
+            <Text numberOfLines={1} style={styles.titleText}>
+              {app.packageInfo.appName}
+            </Text>
+          </View>
+
+          <View style={styles.buttonView}>
+            <Image
+              source={expanded ? ArrowUp : ArrowDown}
+              style={{
+                tintColor: Colors.grey,
+                width: 30,
+                height: 30,
+              }}
+            />
+          </View>
+        </HStack>
+      </TouchableOpacity>
+      {expanded && (
+        <>
+          <View style={styles.spacer} />
+          <Text style={styles.listItemTitle}>Package name:</Text>
+          <Text style={styles.listItem}>{app.packageInfo.packageName}</Text>
+          <Text style={styles.listItemTitle}>App name:</Text>
+          <Text style={styles.listItem}>
+            {app.packageInfo.appName ?? 'Not specified'}
+          </Text>
+          <Text style={styles.listItemTitle}>App version:</Text>
+          <Text style={styles.listItem}>
+            {app.packageInfo.version ?? 'Not specified'}
+          </Text>
+          <Text style={styles.listItemTitle}>App Icon:</Text>
+          {app.packageInfo.appIcon ? (
+            <Image
+              style={styles.icon}
+              source={{
+                uri: `data:image/png;base64,${app.packageInfo.appIcon}`,
+              }}
+            />
+          ) : (
+            <Text style={styles.listItem}>Not specified</Text>
+          )}
+          <Text style={styles.listItemTitle}>Installer store:</Text>
+          <Text style={styles.listItem}>
+            {app.packageInfo.installerStore ?? 'Not specified'}
+          </Text>
+          <Text style={styles.listItemTitle}>Detection reason:</Text>
+          <Text style={styles.listItem}>{app.reason}</Text>
+          <HStack style={styles.buttonGroup}>
+            <Button
+              title={'Add to whitelist'}
+              onPress={() => whitelistApp(app.packageInfo.packageName)}
+            ></Button>
+            <Button title={'Uninstall'} onPress={appUninstall}></Button>
+          </HStack>
+        </>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    borderRadius: 20,
+    paddingHorizontal: 30,
+    paddingVertical: 10,
+    marginTop: 15,
+    elevation: 2,
+  },
+  buttonOpen: {
+    backgroundColor: '#F194FF',
+  },
+  buttonClose: {
+    backgroundColor: '#2196F3',
+  },
+  item: {
+    backgroundColor: '#d4e4ff',
+    borderRadius: 20,
+    padding: 20,
+    marginVertical: 8,
+  },
+  listItemTitle: {
+    fontSize: 20,
+    fontWeight: 'bold',
+  },
+  listItem: {
+    fontSize: 16,
+    paddingBottom: 5,
+  },
+  titleText: {
+    fontSize: 20,
+  },
+  icon: {
+    marginTop: 5,
+    marginBottom: 5,
+    width: 50,
+    height: 50,
+  },
+  iconSmall: {
+    width: 40,
+    height: 40,
+  },
+  textView: {
+    justifyContent: 'center',
+    flex: 1,
+    marginLeft: 20,
+    marginRight: 30,
+  },
+  buttonView: {
+    justifyContent: 'center',
+  },
+  spacer: {
+    height: 15,
+  },
+  buttonGroup: {
+    marginTop: 10,
+    justifyContent: 'space-between',
+  },
+});