Loading spinner

wallet/wallet-app/App.js

@@ -1,27 +1,11 @@
 import React from 'react';
 import { Provider } from 'react-redux';
-import { Colors } from 'react-native-ui-lib';
+import { LogBox } from 'react-native';
 import store from './redux/configureStore';
 import AppWrapper from './AppWrapper';
 
-Colors.loadSchemes({
-    light: {
-        screenBG: 'transparent',
-        textColor: Colors.yellow10,
-        moonOrSun: Colors.yellow30,
-        mountainForeground: Colors.green30,
-        mountainBackground: Colors.green50,
-    },
-    dark: {
-        screenBG: Colors.grey10,
-        textColor: Colors.yellow10,
-        moonOrSun: Colors.grey80,
-        mountainForeground: Colors.violet10,
-        mountainBackground: Colors.violet20,
-    },
-});
-
 export default function App() {
+    LogBox.ignoreAllLogs(true);
     return (
         <Provider store={store}>
             <AppWrapper />

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

@@ -1,15 +1,17 @@
 import React, { useState, useEffect } from 'react';
-import { View, StyleSheet, ActivityIndicator, Button, TouchableOpacity } from 'react-native';
+import { View, StyleSheet, Button, TouchableOpacity } from 'react-native';
 import { BarCodeScanner } from 'expo-barcode-scanner';
 import jwtDecode from 'jwt-decode';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { useNavigation } from '@react-navigation/native';
 import { Text } from 'react-native-ui-lib';
 import SafeAreaView from 'react-native-safe-area-view';
-
 import Icon from 'react-native-vector-icons/FontAwesome';
+import { useDispatch, useSelector } from 'react-redux';
+import Spinner from 'react-native-loading-spinner-overlay';
 import { generateKeys } from '../../utils/sign';
 import Access from './Access';
+import { activateSpinner } from '../../redux/SpinnerSlice';
 
 export async function skipOnboarding() {
     const exampleBaseVc =
@@ -23,8 +25,10 @@ export default function Onboarding() {
     const [hasPermission, setHasPermission] = useState(null);
     const [scanned, setScanned] = useState(false);
     const [verified, setVerified] = useState(false);
-    const [loading, setLoading] = useState(false);
     const navigation = useNavigation();
+    const dispatch = useDispatch();
+
+    const { active } = useSelector((state) => state.spinnerStatus);
 
     useEffect(() => {
         (async () => {
@@ -34,17 +38,17 @@ export default function Onboarding() {
     }, []);
 
     const handleBarCodeScanned = async ({ data }) => {
-        setLoading(true);
+        dispatch(activateSpinner(true));
         setScanned(true);
         const baseId = jwtDecode(data);
         const types = baseId.vc.type;
 
         if (types.includes('BaseCredential')) {
             await AsyncStorage.setItem('baseId', data);
-            generateKeys();
+            await generateKeys();
             setVerified(true);
         }
-        setLoading(false);
+        dispatch(activateSpinner(false));
     };
 
     if (hasPermission === null) {
@@ -55,16 +59,15 @@ export default function Onboarding() {
         return <Access />;
     }
 
-    return loading ? (
-        <View
-            style={{
-                flex: 1,
-                justifyContent: 'center',
-            }}>
-            <ActivityIndicator size="large" color="rgb(0,98,184)" />
-        </View>
-    ) : (
+    return (
         <SafeAreaView style={styles.container}>
+            <Spinner
+                visible={active}
+                textContent="Vent litt..."
+                textStyle={{ color: 'rgb(30,46,60)' }}
+                color="rgb(0,98, 184)"
+                overlayColor="rgba(0,0,0,0.1)"
+            />
             {!scanned ? (
                 <View
                     style={{
@@ -89,18 +92,7 @@ export default function Onboarding() {
                 </View>
             ) : null}
 
-            {scanned && verified ? (
-                <View style={styles.done}>
-                    <Text style={styles.verifiedText}>
-                        Grunnidentitet verifisert
-                        <Icon name="check" size={25} color="rgb(0,98,184)" />
-                    </Text>
-
-                    <TouchableOpacity style={styles.button} onPress={() => navigation.navigate('Adgangskontroll')}>
-                        <Text style={styles.text}>Fortsett registrering</Text>
-                    </TouchableOpacity>
-                </View>
-            ) : null}
+            {scanned && verified ? navigation.navigate('Adgangskontroll') : null}
         </SafeAreaView>
     );
 }

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

@@ -21,6 +21,7 @@ export default function RequestFrame() {
     const [vcType, setVcType] = useState('');
     const [issuerTypes, setIssuerTypes] = useState([]);
     const [availableIssuers, setAvailableIssuers] = useState([]);
+    // const { active } = useSelector((state) => state.spinnerStatus);
 
     async function getAllIssuers() {
         setAvailableIssuers(JSON.parse(await httpGetAllIssuers()));
@@ -45,7 +46,7 @@ export default function RequestFrame() {
      */
     async function retrieveCredential() {
         const baseVC = await AsyncStorage.getItem('baseId');
-
+        //   dispatch(activateSpinner(true));
         const response = await httpGetCredential(vcType, baseVC, selectedIssuer);
         try {
             const decode = jwtDecode(response);
@@ -64,6 +65,7 @@ export default function RequestFrame() {
             setFeedback(response);
         } finally {
             alert(feedback);
+            //     dispatch(activateSpinner(false));
         }
     }
 
@@ -81,6 +83,15 @@ export default function RequestFrame() {
 
     return (
         <ScrollView style={styles.container}>
+            {/*
+          <Spinner
+                visible={active}
+                textContent="Vent litt..."
+                textStyle={{ color: 'rgb(30,46,60)' }}
+                color="rgb(0,98, 184)"
+                overlayColor="rgba(0,0,0,0.1)"
+            />
+          */}
             <Text text40 style={{ paddingBottom: 30, paddingTop: 20 }}>
                 Forespør et nytt bevis
             </Text>

wallet/wallet-app/package.json

@@ -40,6 +40,7 @@
         "react-native-keyboard-tracking-view": "^5.7.0",
         "react-native-keychain": "^7.0.0",
         "react-native-keycode": "^1.1.2",
+        "react-native-loading-spinner-overlay": "^2.0.0",
         "react-native-permissions": "^3.0.5",
         "react-native-pin-view": "^3.0.2",
         "react-native-qrcode-scanner": "^1.5.4",

wallet/wallet-app/redux/SpinnerSlice.js

@@ -0,0 +1,16 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+export const SpinnerSlice = createSlice({
+    name: 'spinnerStatus',
+    initialState: { active: false },
+    reducers: {
+        activateSpinner: (state, action) => ({ ...state, active: action.payload }),
+        deactivateSpinner: (state, action) => ({ ...state, active: action.payload }),
+    },
+});
+
+const { actions, reducer } = SpinnerSlice;
+
+export const { activateSpinner, deactivateSpinner } = actions;
+
+export default reducer;

wallet/wallet-app/redux/configureStore.js

@@ -3,11 +3,13 @@ import { combineReducers } from 'redux';
 import CredentialReducer from './CredentialSlice';
 import CredentialShareReducer from './CredentialShareSlice';
 import SignedInReducer from './SignedInSlice';
+import SpinnerReducer from './SpinnerSlice';
 
 const reducer = combineReducers({
     credentials: CredentialReducer,
     credentialShares: CredentialShareReducer,
     signedInStatus: SignedInReducer,
+    spinnerStatus: SpinnerReducer,
 });
 
 const store = configureStore({