Merge pull request #24 from AreaLayer/connection-provider

[DEV] [Feature] Wallet Connection
AreaLayer · Mar 13, 2024 · a3e38ad · a3e38ad
2 parents 1d9c390 + 40ae815
commit a3e38ad
Show file tree

Hide file tree

Showing 8 changed files with 362 additions and 40 deletions.
diff --git a/App.tsx b/App.tsx
@@ -4,13 +4,16 @@ import {config} from './src/theme/config';
 
 import {NavigationContainer} from '@react-navigation/native';
 import OnBoardingNavigation from './src/navigation/OnBoarding';
+import {ConnectionProvider} from './src/providers/ConnectionProvider';
 
 function App(): React.JSX.Element {
   return (
     <GluestackUIProvider config={config}>
-      <NavigationContainer>
-        <OnBoardingNavigation />
-      </NavigationContainer>
+      <ConnectionProvider>
+        <NavigationContainer>
+          <OnBoardingNavigation />
+        </NavigationContainer>
+      </ConnectionProvider>
     </GluestackUIProvider>
   );
 }

diff --git a/src/components/Splash.tsx b/src/components/Splash.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import {Box} from '@gluestack-ui/themed';
+
+export const Splash = () => {
+  return <Box bg="$primary400" flex={1} />;
+};
diff --git a/src/navigation/OnBoarding.tsx b/src/navigation/OnBoarding.tsx
@@ -1,12 +1,15 @@
 import * as React from 'react';
 import {createNativeStackNavigator} from '@react-navigation/native-stack';
-import OnBoardingHome from '../screens/onboarding/OnBoardingHome';
-import CreateWallet from '../screens/onboarding/CreateWallet';
+import OnBoardingHome from '../screens/Onboarding/OnBoardingHome';
+import CreateWallet from '../screens/Onboarding/CreateWallet';
 import {SCREEN_NAMES} from './screenNames';
-import ConfirmSeed from '../screens/onboarding/ConfirmSeed';
-import PinSetup from '../screens/onboarding/PinSetup';
-import ConfirmPin from '../screens/onboarding/ConfirmPin';
+import ConfirmSeed from '../screens/Onboarding/ConfirmSeed';
+import PinSetup from '../screens/Onboarding/PinSetup';
+import ConfirmPin from '../screens/Onboarding/ConfirmPin';
 import Dashboard from '../screens/Home/Dashboard';
+import {useConnectionContext} from '../providers/ConnectionProvider';
+import {Splash} from '../components/Splash';
+import VerifyPin from '../screens/Home/VerifyPin';
 
 export type RootStackParamList = {
   OnboardingHome: undefined;
@@ -15,43 +18,65 @@ export type RootStackParamList = {
   PinSetup: {words: string[]};
   ConfirmPin: {words: string[]; walletPin: number[]};
   Dashboard: undefined;
+  VerifyPin: undefined;
 };
 
 const Stack = createNativeStackNavigator<RootStackParamList>();
 
 function OnBoardingNavigation() {
+  const {loading, isWalletConnected} = useConnectionContext();
+  if (loading) {
+    return <Splash />;
+  }
   return (
     <Stack.Navigator>
-      <Stack.Screen
-        options={{headerShown: false}}
-        name={SCREEN_NAMES.OnboardingHome}
-        component={OnBoardingHome}
-      />
-      <Stack.Screen
-        options={{headerShown: false}}
-        name={SCREEN_NAMES.CreateWallet}
-        component={CreateWallet}
-      />
-      <Stack.Screen
-        options={{headerShown: false}}
-        name={SCREEN_NAMES.ConfirmSeed}
-        component={ConfirmSeed}
-      />
-      <Stack.Screen
-        options={{headerShown: false}}
-        name={SCREEN_NAMES.PinSetup}
-        component={PinSetup}
-      />
-      <Stack.Screen
-        options={{headerShown: false}}
-        name={SCREEN_NAMES.ConfirmPin}
-        component={ConfirmPin}
-      />
-      <Stack.Screen
-        options={{headerShown: false}}
-        name={SCREEN_NAMES.Dashboard}
-        component={Dashboard}
-      />
+      {isWalletConnected ? (
+        <Stack.Group>
+          <Stack.Screen
+            options={{headerShown: false}}
+            name={SCREEN_NAMES.VerifyPin}
+            component={VerifyPin}
+          />
+          <Stack.Screen
+            options={{headerShown: false}}
+            name={SCREEN_NAMES.Dashboard}
+            component={Dashboard}
+          />
+        </Stack.Group>
+      ) : (
+        <Stack.Group>
+          <Stack.Screen
+            options={{headerShown: false}}
+            name={SCREEN_NAMES.OnboardingHome}
+            component={OnBoardingHome}
+          />
+          <Stack.Screen
+            options={{headerShown: false}}
+            name={SCREEN_NAMES.CreateWallet}
+            component={CreateWallet}
+          />
+          <Stack.Screen
+            options={{headerShown: false}}
+            name={SCREEN_NAMES.ConfirmSeed}
+            component={ConfirmSeed}
+          />
+          <Stack.Screen
+            options={{headerShown: false}}
+            name={SCREEN_NAMES.PinSetup}
+            component={PinSetup}
+          />
+          <Stack.Screen
+            options={{headerShown: false}}
+            name={SCREEN_NAMES.ConfirmPin}
+            component={ConfirmPin}
+          />
+          <Stack.Screen
+            options={{headerShown: false}}
+            name={SCREEN_NAMES.Dashboard}
+            component={Dashboard}
+          />
+        </Stack.Group>
+      )}
     </Stack.Navigator>
   );
 }

diff --git a/src/navigation/screenNames.ts b/src/navigation/screenNames.ts
@@ -5,6 +5,7 @@ interface IScreenNames {
   PinSetup: 'PinSetup';
   ConfirmPin: 'ConfirmPin';
   Dashboard: 'Dashboard';
+  VerifyPin: 'VerifyPin';
 }
 export const SCREEN_NAMES: IScreenNames = {
   OnboardingHome: 'OnboardingHome',
@@ -13,4 +14,5 @@ export const SCREEN_NAMES: IScreenNames = {
   PinSetup: 'PinSetup',
   ConfirmPin: 'ConfirmPin',
   Dashboard: 'Dashboard',
+  VerifyPin: 'VerifyPin',
 };
diff --git a/src/providers/ConnectionProvider.tsx b/src/providers/ConnectionProvider.tsx
@@ -0,0 +1,68 @@
+import React, {useContext, createContext, useEffect, useState} from 'react';
+import storage from '../utils/storage';
+import {STORAGE_KEYS} from '../utils/storage/storageKeys';
+import {decryptAesGcm} from '../utils/encryption';
+
+interface Props {
+  children: React.ReactNode;
+}
+interface ContextProps {
+  loading: boolean;
+  isWalletConnected: boolean;
+  validatePin: (pin: string) => boolean;
+  seed: string | undefined;
+}
+const ConnectionContext = createContext<ContextProps>({
+  loading: false,
+  isWalletConnected: false,
+  validatePin: () => false,
+  seed: undefined,
+});
+
+export const ConnectionProvider = ({children}: Props) => {
+  const [loading, setLoading] = useState(false);
+  const [encryptedSeed, setEncryptedSeed] = useState();
+  const [seed, setSeed] = useState<string | undefined>();
+
+  useEffect(() => {
+    const loadWallet = async () => {
+      setLoading(true);
+      try {
+        const data = await storage.load({key: STORAGE_KEYS.seedCipher});
+        setEncryptedSeed(data);
+      } catch (error) {
+        console.log(error);
+      }
+
+      setLoading(false);
+    };
+    loadWallet();
+  }, []);
+
+  const validatePin = (pin: string) => {
+    if (encryptedSeed) {
+      const decryptedSeed = decryptAesGcm(encryptedSeed, pin);
+      if (decryptedSeed) {
+        setSeed(decryptedSeed);
+        return true;
+      }
+    }
+    return false;
+  };
+  return (
+    <ConnectionContext.Provider
+      value={{loading, isWalletConnected: !!encryptedSeed, validatePin, seed}}>
+      {children}
+    </ConnectionContext.Provider>
+  );
+};
+
+export const useConnectionContext = () => {
+  const context = useContext(ConnectionContext);
+  if (context === undefined) {
+    throw new Error(
+      'useConnectionContext must be used within ConnectionProvider',
+    );
+  }
+  return context;
+};
diff --git a/src/screens/Home/Dashboard.tsx b/src/screens/Home/Dashboard.tsx
@@ -5,7 +5,7 @@ import {NavigationProp} from '@react-navigation/native';
 const LogoImage = require('../../assets/images/logo.png');
 
 const HEADING_TEXT_1 = 'Firebolt Wallet';
-const HEADING_TEXT_2 = 'Dashboard';
+const HEADING_TEXT_2 = 'Connected!';
 
 interface Props {
   navigation: NavigationProp<any, any>;