Merge pull request #18 from AreaLayer/account-setup

[DEV] BTC Wallet Setup

App.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import {GluestackUIProvider} from '@gluestack-ui/themed';
-import { config } from './src/theme/config';
-
+import {config} from './src/theme/config';
 
 import {NavigationContainer} from '@react-navigation/native';
 import OnBoardingNavigation from './src/navigation/OnBoarding';

index.js

@@ -1,7 +1,7 @@
 /**
  * @format
  */
-
+import './shim';
 import {AppRegistry} from 'react-native';
 import App from './App';
 import {name as appName} from './app.json';

package.json

@@ -7,19 +7,34 @@
     "ios": "react-native run-ios",
     "lint": "eslint .",
     "start": "react-native start",
-    "test": "jest"
+    "test": "jest",
+    "postinstall": "rn-nodeify --install buffer,stream,assert,events,crypto,vm,process --hack"
   },
   "dependencies": {
+    "@bitcoin-js/tiny-secp256k1-asmjs": "^2.2.3",
     "@gluestack-style/react": "^1.0.45",
     "@gluestack-ui/config": "^1.1.2",
     "@gluestack-ui/themed": "^1.1.3",
+    "@react-native-async-storage/async-storage": "^1.22.3",
     "@react-navigation/native": "^6.1.9",
     "@react-navigation/native-stack": "^6.9.17",
+    "assert": "^1.5.1",
+    "bip39": "^3.1.0",
+    "bitcoinjs-lib": "^6.1.5",
+    "buffer": "^6.0.3",
+    "ecpair": "^2.1.0",
+    "events": "^1.1.1",
     "react": "18.2.0",
     "react-native": "0.73.2",
+    "react-native-crypto": "^2.2.0",
+    "react-native-randombytes": "^3.6.1",
     "react-native-safe-area-context": "3.3.2",
     "react-native-screens": "^3.29.0",
-    "react-native-svg": "13.4.0"
+    "react-native-storage": "^1.0.1",
+    "react-native-svg": "13.4.0",
+    "readable-stream": "^4.5.2",
+    "stream-browserify": "^1.0.0",
+    "vm-browserify": "^0.0.4"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
@@ -36,9 +51,30 @@
     "jest": "^29.6.3",
     "prettier": "2.8.8",
     "react-test-renderer": "18.2.0",
+    "rn-nodeify": "^10.3.0",
     "typescript": "5.0.4"
   },
   "engines": {
     "node": ">=18"
+  },
+  "react-native": {
+    "crypto": "react-native-crypto",
+    "_stream_transform": "readable-stream/transform",
+    "_stream_readable": "readable-stream/readable",
+    "_stream_writable": "readable-stream/writable",
+    "_stream_duplex": "readable-stream/duplex",
+    "_stream_passthrough": "readable-stream/passthrough",
+    "stream": "stream-browserify",
+    "vm": "vm-browserify"
+  },
+  "browser": {
+    "crypto": "react-native-crypto",
+    "_stream_transform": "readable-stream/transform",
+    "_stream_readable": "readable-stream/readable",
+    "_stream_writable": "readable-stream/writable",
+    "_stream_duplex": "readable-stream/duplex",
+    "_stream_passthrough": "readable-stream/passthrough",
+    "stream": "stream-browserify",
+    "vm": "vm-browserify"
   }
 }

shim.js

@@ -0,0 +1,26 @@
+if (typeof __dirname === 'undefined') global.__dirname = '/'
+if (typeof __filename === 'undefined') global.__filename = ''
+if (typeof process === 'undefined') {
+  global.process = require('process')
+} else {
+  const bProcess = require('process')
+  for (var p in bProcess) {
+    if (!(p in process)) {
+      process[p] = bProcess[p]
+    }
+  }
+}
+
+process.browser = false
+if (typeof Buffer === 'undefined') global.Buffer = require('buffer').Buffer
+
+// global.location = global.location || { port: 80 }
+const isDev = typeof __DEV__ === 'boolean' && __DEV__
+process.env['NODE_ENV'] = isDev ? 'development' : 'production'
+if (typeof localStorage !== 'undefined') {
+  localStorage.debug = isDev ? '*' : ''
+}
+
+// If using the crypto shim, uncomment the following line to ensure
+// crypto is loaded first, so it can populate global.crypto
+require('crypto')

src/components/ShowToast.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import {
+  VStack,
+  ToastTitle,
+  ToastDescription,
+  Toast,
+} from '@gluestack-ui/themed';
+
+const DEFAULT_TITLE = 'Error!';
+const DEFAULT_DESCRIPTION =
+  'There was an error processing your request. Please try again later.';
+const DEFAULT_ACTION = 'info';
+
+interface Props {
+  id: number;
+  title?: string;
+  description?: string;
+  action?: 'info' | 'error' | 'warning' | 'success' | 'attention' | undefined;
+}
+function ShowToast({
+  id,
+  title = DEFAULT_TITLE,
+  description = DEFAULT_DESCRIPTION,
+  action = DEFAULT_ACTION,
+}: Props) {
+  return (
+    <Toast nativeID={`toast-${id}`} action={action} variant="solid">
+      <VStack space="xs">
+        <ToastTitle>{title}</ToastTitle>
+        <ToastDescription>{description}</ToastDescription>
+      </VStack>
+    </Toast>
+  );
+}
+export default ShowToast;

src/navigation/OnBoarding.tsx

@@ -6,8 +6,18 @@ import {SCREEN_NAMES} from './screenNames';
 import ConfirmSeed from '../screens/onboarding/ConfirmSeed';
 import PinSetup from '../screens/onboarding/PinSetup';
 import ConfirmPin from '../screens/onboarding/ConfirmPin';
+import Dashboard from '../screens/Home/Dashboard';
 
-const Stack = createNativeStackNavigator();
+export type RootStackParamList = {
+  OnboardingHome: undefined;
+  CreateWallet: undefined;
+  ConfirmSeed: {words: string[]};
+  PinSetup: {words: string[]};
+  ConfirmPin: {words: string[]; walletPin: number[]};
+  Dashboard: undefined;
+};
+
+const Stack = createNativeStackNavigator<RootStackParamList>();
 
 function OnBoardingNavigation() {
   return (
@@ -37,6 +47,11 @@ function OnBoardingNavigation() {
         name={SCREEN_NAMES.ConfirmPin}
         component={ConfirmPin}
       />
+      <Stack.Screen
+        options={{headerShown: false}}
+        name={SCREEN_NAMES.Dashboard}
+        component={Dashboard}
+      />
     </Stack.Navigator>
   );
 }

src/navigation/screenNames.ts

@@ -1,7 +1,16 @@
-export const SCREEN_NAMES = {
+interface IScreenNames {
+  OnboardingHome: 'OnboardingHome';
+  CreateWallet: 'CreateWallet';
+  ConfirmSeed: 'ConfirmSeed';
+  PinSetup: 'PinSetup';
+  ConfirmPin: 'ConfirmPin';
+  Dashboard: 'Dashboard';
+}
+export const SCREEN_NAMES: IScreenNames = {
   OnboardingHome: 'OnboardingHome',
   CreateWallet: 'CreateWallet',
   ConfirmSeed: 'ConfirmSeed',
   PinSetup: 'PinSetup',
   ConfirmPin: 'ConfirmPin',
+  Dashboard: 'Dashboard',
 };

src/screens/Home/Dashboard.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import {Box, Image, Center, Heading} from '@gluestack-ui/themed';
+import {NavigationProp} from '@react-navigation/native';
+
+const LogoImage = require('../../assets/images/logo.png');
+
+const HEADING_TEXT_1 = 'Firebolt Wallet';
+const HEADING_TEXT_2 = 'Dashboard';
+
+interface Props {
+  navigation: NavigationProp<any, any>;
+}
+
+function Dashboard({}: Props) {
+  return (
+    <Box bg="$primary400" pb="30%" flex={1} justifyContent={'center'}>
+      <Center>
+        <Image alt="Firebolt Logo" source={LogoImage} size="xl" />
+        <Heading mt={'$4'} size="2xl" color="white" textAlign={'center'}>
+          {HEADING_TEXT_1}
+        </Heading>
+        <Heading mt={'$4'} size="md" color="white" textAlign={'center'}>
+          {HEADING_TEXT_2}
+        </Heading>
+      </Center>
+    </Box>
+  );
+}
+
+export default Dashboard;