Wallet readme and structure

wallet/wallet-app/README.md

@@ -1,10 +1,47 @@
-## Wallet
+# Wallet
 
-### Hvordan kjøre applikasjonen?
+## Starting the application
 
-1. last ned Expo Go på mobilen og node på datamaskinen
-2. cd wallet/wallet-app
-3. npm install
-4. npm start
-5. velg tunnel
-6. skann QR-koden med mobilen
+NB. The set-up should be done on a computer that can connect to a wireless LAN to work on mobile
+
+Communication with issuer and verifier requires that these servers are running. See own README-files. The IP-adress of the computer host is updated in `util/httpRequests.js`
+
+1. Download [Node](https://nodejs.org/en/), if not installed
+2. Install expo with the command line `npm install --global expo-cli`
+3. Navigate to the wallet/wallet-app folder
+4. Run the command line `npm install`, which will install dependencies
+5. Run the command line `expo start` or `npm start`.  
+   This will start the application and open the user interface for Expo in the browser.
+
+### Run on web
+
+1. Execute the steps from 'Starting the application'
+2. To open on web, press "Open in web browser"
+
+### Run on mobile
+
+1. Execute the steps from 'Starting the application'
+2. Last ned appen Expo Go på mobilen
+3. Check that the computer and phone is connected to the same LAN
+4. Check that 'LAN' is selected in the Expo user interface
+5. Scan the QR-code with the phone camera. Close app on phone and try scanning again if the app doesn't load correctly.
+
+## Structure
+
+-   components
+    -   frames
+    -   views
+    -   other
+-   redux
+-   utils
+-   App.js
+-   AppWrapper.js
+
+## Configuration
+
+This React Native project is set up with settings for VSCode:
+
+-   ESLint
+-   Prettier - Code formatter
+
+To enable these, install the extensions in VSCode.

wallet/wallet-app/components/frames/ProofOverviewFrame.jsx

@@ -6,7 +6,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { useIsFocused } from '@react-navigation/native';
 import { addCredential } from '../../redux/CredentialSlice';
-import Proof from '../Proof';
+import Proof from '../views/ProofView';
 
 /**
  * A frame with an overview of every proof the wallet has

wallet/wallet-app/components/frames/VerifierLogFrame.jsx

@@ -3,8 +3,8 @@ import React from 'react';
 import { Text, StyleSheet } from 'react-native';
 import SafeAreaView from 'react-native-safe-area-view';
 import { useSelector } from 'react-redux';
-import Verifier from '../Verifier';
-import CreateQR from '../QRcode';
+import Verifier from '../views/VerifierView';
+import CreateQR from '../other/QRCode';
 
 /**
  * Page with an overview of which verifiers who have access to a specific proof

wallet/wallet-app/components/Proof.jsx → wallet/wallet-app/components/views/ProofView.jsx

@@ -5,7 +5,7 @@ import { View, Text, Button, StyleSheet, TouchableOpacity } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { useDispatch, useSelector } from 'react-redux';
 import AsyncStorage from '@react-native-async-storage/async-storage';
-import { removeCredential } from '../redux/CredentialSlice';
+import { removeCredential } from '../../redux/CredentialSlice';
 
 /**
  * A proof object/card with info about the issuer, validity, shared with and deletion option.
@@ -40,7 +40,8 @@ export default function Proof(props) {
             <Text style={styles.textProofs}>{props.name}</Text>
             <Text> Utstedt av: {props.issuer}</Text>
             <Text>
-                Gyldig fra {new Date(props.issDate * 1000).toLocaleString()} til {new Date(props.expDate * 1000).toLocaleString()}
+                Gyldig fra {new Date(props.issDate * 1000).toLocaleString()} til{' '}
+                {new Date(props.expDate * 1000).toLocaleString()}
             </Text>
             <TouchableOpacity style={styles.proofLog} onPress={() => navigation.navigate('Delt med', { props })}>
                 <Text>Delt med</Text>

wallet/wallet-app/components/Verifier.jsx → wallet/wallet-app/components/views/VerifierView.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { View, Text, StyleSheet } from 'react-native';
-import ConsentButton from './ConsentButton';
+import ConsentButton from '../other/ConsentButton';
 
 /**
- * A card for a verifier 
+ * A card for a verifier
  * (VerifierLogFrame shows all Verifier cards that belong to a proof)
  * @param {string} props props is from VerifierLogFrame with corresponding props
  * @returns A card for a verifier