finish simple implementation with hard code mnemonic and password

Author: CodingForMoney

App.tsx

@@ -4,7 +4,7 @@
 
 import 'react-native';
 import React from 'react';
-import App from '../App';
+import App from '../app/App';
 
 // Note: import explicitly to use the types shiped with jest.
 import {it} from '@jest/globals';

__tests__/App.test.tsx

@@ -1,7 +1,7 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android">
 
     <uses-permission android:name="android.permission.INTERNET" />
-
+    <uses-permission android:name="android.permission.CAMERA" />
     <application
       android:name=".MainApplication"
       android:label="@string/app_name"

android/app/src/main/AndroidManifest.xml

@@ -0,0 +1,76 @@
+/**
+ * Sample React Native App
+ * https://github.com/facebook/react-native
+ *
+ * @format
+ */
+
+import React, {useEffect} from 'react';
+// import {
+//   SafeAreaView,
+//   ScrollView,
+//   StatusBar,
+//   StyleSheet,
+//   Text,
+//   useColorScheme,
+//   View,
+//   useWindowDimensions,
+// } from 'react-native';
+
+import HomePage from './pages/Home';
+import FindPage from './pages/Find';
+import AccountPage from './pages/Account';
+import QRScannerPage from './pages/QRScanner';
+import SignPage from './pages/Sign';
+import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
+import {NavigationContainer} from '@react-navigation/native';
+import {createNativeStackNavigator} from '@react-navigation/native-stack';
+import Routes from './routes/Routes';
+import {loadWallet} from './wallet';
+
+const Tab = createBottomTabNavigator();
+// const Stack = createNativeStackNavigator();
+
+const FindStack = createNativeStackNavigator();
+const FindStackScreen = () => (
+  <FindStack.Navigator screenOptions={{headerShown: false}}>
+    <FindStack.Group>
+      <FindStack.Screen name={Routes.FIND} component={FindPage} />
+      <FindStack.Screen name={Routes.SIGN} component={SignPage} />
+    </FindStack.Group>
+    <FindStack.Group screenOptions={{presentation: 'modal'}}>
+      <FindStack.Screen name={Routes.QR_SCANNER} component={QRScannerPage} />
+    </FindStack.Group>
+  </FindStack.Navigator>
+);
+
+// FindStack.navigationOptions = ({navigation}) => {
+//   let tabBarVisible = true;
+
+//   // let routeName = navigation.state.routes[navigation.state.index].routeName;
+
+//   // if (routeName == 'ProductDetails') {
+//   //   tabBarVisible = false;
+//   // }
+
+//   return {
+//   };
+// };
+
+function App(): JSX.Element {
+  useEffect(() => {
+    // TODO : load wallet from storage
+    loadWallet('j1io2u7$@081nf%@au0-,.,3151lijasfa');
+  }, []);
+  return (
+    <NavigationContainer>
+      <Tab.Navigator screenOptions={{headerShown: false}}>
+        <Tab.Screen name="Home" component={HomePage} />
+        <Tab.Screen name="Find" component={FindStackScreen} />
+        <Tab.Screen name="Account" component={AccountPage} />
+      </Tab.Navigator>
+    </NavigationContainer>
+  );
+}
+
+export default App;

app/App.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import {NavigationContainer} from '@react-navigation/native';
+import {
+  SafeAreaView,
+  Text,
+  View,
+  StyleSheet,
+  useWindowDimensions,
+} from 'react-native';
+import QRCode from 'react-native-qrcode-svg';
+import {Key, EVMWallet} from 'doom-wallet-core';
+const mnemonic =
+  'farm library shuffle knee equal blush disease table deliver custom farm stereo fat level dawn book advance lamp clutch crumble gaze law bird jazz';
+const password = 'j1io2u7$@081nf%@au0-,.,3151lijasfa';
+const AccountPage = () => {
+  const [ur, setUr] = React.useState('https://www.google.com');
+  const {width} = useWindowDimensions();
+  React.useEffect(() => {
+    const wallet = new EVMWallet(Key.fromMnemonic(mnemonic, password));
+    setUr(wallet.getConnectionUR());
+  }, []);
+  return (
+    // <NavigationContainer>
+    <SafeAreaView>
+      <View>
+        <Text>Account</Text>
+        <View
+          style={[
+            styles.qrCodeContainer,
+            {
+              width: width - 40,
+            },
+          ]}>
+          <QRCode size={width - 40} value={ur} />
+        </View>
+      </View>
+    </SafeAreaView>
+    // </NavigationContainer>
+  );
+};
+
+const styles = StyleSheet.create({
+  qrCodeContainer: {
+    margin: 20,
+    aspectRatio: 1,
+    // height: 100%,
+  },
+});
+export default AccountPage;

app/pages/Account/index.tsx

@@ -0,0 +1,85 @@
+import React, {useEffect} from 'react';
+import {NavigationContainer, useNavigation} from '@react-navigation/native';
+import {SafeAreaView, Text, View, Button} from 'react-native';
+import {check, request, PERMISSIONS, RESULTS} from 'react-native-permissions';
+import Routes from '../../routes/Routes';
+
+function QRCodeButton({
+  cameraPermission,
+  onPress,
+}: {
+  cameraPermission: string;
+  onPress: () => void;
+}) {
+  if (cameraPermission === RESULTS.GRANTED) {
+    return <Button title="Scan QR Code" onPress={onPress} />;
+  } else if (cameraPermission === RESULTS.DENIED) {
+    return (
+      <Button
+        title="Grant Camera Permission And Scan QR Code"
+        onPress={onPress}
+      />
+    );
+  } else {
+    return <Text>Camera permission not granted</Text>;
+  }
+}
+
+const FindPage = () => {
+  const [urText, setUrText] = React.useState<string>('');
+  const [cameraPermission, setCameraPermission] =
+    React.useState('not-determined');
+  useEffect(() => {
+    async function fetchPermission() {
+      // TODO android
+      const permission = await check(PERMISSIONS.IOS.CAMERA);
+      setCameraPermission(permission);
+    }
+
+    fetchPermission();
+  }, []);
+  const navigation = useNavigation();
+  // const cameraPermission = await Camera.getCameraPermissionStatus()
+  // const newCameraPermission = await Camera.requestCameraPermission()
+
+  const onSuccess = (ur: string) => {
+    // setUrText(ur);
+    navigation.navigate(Routes.SIGN, {ur});
+  };
+
+  const showResult = () => {
+    if (urText !== '') {
+      return <Text>{urText}</Text>;
+    } else {
+      return null;
+    }
+  };
+
+  return (
+    // <NavigationContainer>
+    <SafeAreaView>
+      <View>
+        <Text>QR Code</Text>
+        {showResult()}
+        <QRCodeButton
+          cameraPermission={cameraPermission}
+          onPress={() => {
+            if (cameraPermission === 'authorized') {
+              // Navigate to QR Scanner
+              setUrText('');
+              navigation.navigate(Routes.QR_SCANNER, {onSuccess});
+            } else {
+              request(PERMISSIONS.IOS.CAMERA).then(permission => {
+                setCameraPermission(permission);
+                navigation.navigate(Routes.QR_SCANNER, {onSuccess});
+              });
+            }
+          }}
+        />
+      </View>
+    </SafeAreaView>
+    // </NavigationContainer>
+  );
+};
+
+export default FindPage;