Feat: complete UI implementation

README.md

@@ -34,8 +34,7 @@ cd AriseWallet
 
 ### 3. Install Dependencies
 npm install
-# or
-yarn install
+
 
 ### 4 Run application
 Expo  - npx expo start

app.json

@@ -6,7 +6,7 @@
     "version": "1.0.0",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
-    "userInterfaceStyle": "light",
+    "userInterfaceStyle": "dark",
     "newArchEnabled": true,
     "splash": {
       "image": "./assets/splash-icon.png",

app/_layout.jsx

@@ -0,0 +1,28 @@
+import { StyleSheet, Text, useColorScheme, View } from 'react-native'
+import { Stack } from 'expo-router'
+import React from 'react'
+import { StatusBar } from 'expo-status-bar'
+import { colors } from "../constants/colors"
+
+const _layout = () => {
+    const colorScheme = useColorScheme()
+    const theme = colors[colorScheme] ?? colors.light
+
+    return (
+            <Stack screenOptions={{ headerStyle: { backgroundColor: '#0D0D0D' }, headerTintColor: '#666666' }}>
+
+                <Stack.Screen name="index" options={{ headerShown: false, }} />
+                <Stack.Screen name="secure" options={{ title: '' }} />
+                <Stack.Screen name="recovery" options={{ title: '' }} />
+                <Stack.Screen name="import" options={{ title: '' }} />
+
+            </Stack>
+
+    )
+}
+
+export default _layout
+
+const styles = StyleSheet.create({
+
+})

app/import.jsx

@@ -0,0 +1,38 @@
+import { StyleSheet, Text, TextInput, TouchableOpacity, View,} from 'react-native'
+import { Link } from 'expo-router'
+import React from 'react'
+import styles from './styles/importStyles'
+
+const Import = () => {
+
+  const [phrase, setPhrase] = React.useState("");
+  return (
+    <View style={styles.container}>
+
+      <View style={styles.layout}>
+
+        <View style={styles.textLayout}>
+
+          <View style={styles.recoveryText}>
+            <Text style={styles.title}>Recovery Phrase</Text>
+            <Text style={styles.subTitle}>Import your existing wallet with your 12 word recovery phrase</Text>
+          </View>
+
+          <View style={styles.input}>
+            <TextInput style={styles.inputText} placeholder=" Recovery Phrase" placeholderTextColor="#666666" value={phrase} onChangeText={setPhrase} multiline />
+          </View>
+
+        </View>
+
+        <TouchableOpacity style={styles.primaryButton}>
+          <Link href="#" style={styles.primaryButtonText}>Import Recovery Phrase</Link>
+        </TouchableOpacity>
+
+      </View>
+
+    </View>
+  )
+}
+
+export default Import
+

app/index.jsx

@@ -1,39 +1,53 @@
-import {StyleSheet, Text, View, TouchableOpacity, ImageBackground, Image } from 'react-native'
-import { Link } from 'expo-router'
+import { Text, View, TouchableOpacity, ImageBackground, Alert } from 'react-native'
+import { Link, useRouter } from 'expo-router';
 import styles from './styles/homeStyles';
-import React from 'react'
+import React, { useState } from 'react';
+import { createWallet } from './src/utils/wallet';
+import 'react-native-get-random-values';
+
 
 
 const Home = () => {
+
     return (
         <View style={styles.container}>
 
             <View style={styles.topContainer}>
                 <ImageBackground
-                    source={require('./assets/background.png')} // your image path
+                    source={require('./assets/background.png')}
                     style={styles.background}
                     resizeMode="cover">
                     <View style={styles.overlay} />
                 </ImageBackground>
             </View>
             <View style={styles.contentWrapper}>
                 <Text style={styles.contentText}>
-                    Secure. Simple. Bitcoin made easy.
+                    Secure. Simple. Bitcoin <Text style={styles.innerText}>made easy.</Text>
                 </Text>
             </View>
 
 
             <View style={styles.bottomLayout}>
                 <Text style={styles.bottomText}>
-                    By tapping any button you agree and consent to our Terms of Services and Privacy Policy.
+                    By tapping any button you agree and consent to our <Text style={styles.inner}>Terms of Services</Text> and <Text style={styles.inner}>Privacy Policy.</Text>
                 </Text>
 
                 <TouchableOpacity style={styles.primaryButton}>
-                    <Link href="" style={styles.primaryButtonText}>Create new wallet</Link>
+                    <Link href="/secure" style={styles.primaryButtonText}>Create new wallet</Link>
                 </TouchableOpacity>
 
+                {/* <TouchableOpacity
+                    style={styles.primaryButton}
+                    onPress={handleCreateWallet}
+                    disabled={isCreating}
+                >
+                    <Text style={styles.primaryButtonText}>
+                        {isCreating ? 'Creating Wallet...' : 'Create new wallet'}
+                    </Text>
+                </TouchableOpacity> */}
+
                 <TouchableOpacity style={styles.secondaryButton}>
-                    <Link href="/about" style={styles.secondaryButtonText}>Import existing wallet</Link>
+                    <Link href="/import" style={styles.secondaryButtonText}>Import existing wallet</Link>
                 </TouchableOpacity>
             </View>
 
@@ -44,7 +58,4 @@ const Home = () => {
 
 export default Home
 
-// {/* <Text style={styles.primaryButtonText}>Create new wallet</Text> */}
-// {/* <Text style={styles.secondaryButtonText}>Import existing wallet</Text> */}
-
 

app/recovery.jsx

@@ -0,0 +1,66 @@
+import { TouchableOpacity, Text, View, Image } from 'react-native'
+import React from 'react'
+import { Link } from 'expo-router'
+import styles from './styles/recoveryStyles';
+import { useState } from 'react'
+
+
+const recovery = () => {
+    return (
+        <View style={styles.container}>
+
+            <View style={styles.layout}>
+
+                <View style={styles.innerLayout}>
+
+                    <View style={styles.textContent}>
+                        <Text style={styles.primaryText}>Recovery Phrase</Text>
+                        <Text style={styles.secondaryText}>This is the only way you will be able to recover your account. Please store it somewhere <Text style={styles.innerText}>safe!</Text> </Text>
+
+                    </View>
+
+                    <View style={styles.seedPhraseLayout}>
+
+                        <View style={styles.seedPhrases}>
+                            <SeedPhrase number="1" phrase="" />
+                            <SeedPhrase number="2" phrase="" />
+                            <SeedPhrase number="3" phrase="" />
+                            <SeedPhrase number="4" phrase="" />
+                            <SeedPhrase number="5" phrase="" />
+                            <SeedPhrase number="6" phrase="" />
+                            <SeedPhrase number="7" phrase="" />
+                            <SeedPhrase number="8" phrase="" />
+                            <SeedPhrase number="9" phrase="" />
+                            <SeedPhrase number="10" phrase="" />
+                            <SeedPhrase number="11" phrase="" />
+                            <SeedPhrase number="12" phrase="" />
+
+                        </View>
+
+                        <TouchableOpacity style={styles.copyButton}>
+                            <Image source={require('./assets/copy.png')} style={styles.copyImg} />
+                            <Link href="" style={styles.copyText}>Copy to clipboard</Link>
+                        </TouchableOpacity>
+
+                    </View>
+
+                </View>
+
+                <TouchableOpacity style={styles.primaryButton}>
+                    <Link href="#" style={styles.primaryButtonText}>I’ve saved it somewhere</Link>
+                </TouchableOpacity>
+
+            </View>
+
+        </View>
+    )
+}
+
+const SeedPhrase = ({ number, phrase }) => (
+    <View style={styles.seedPhraseBox}>
+        <Text style={styles.seedPhraseNumber}>{number}</Text>
+        <Text style={styles.seedPhraseText}>{phrase}</Text>
+    </View>
+);
+
+export default recovery

app/secure.jsx

@@ -0,0 +1,56 @@
+import { StyleSheet, Text, View, Image, TouchableOpacity, Switch } from 'react-native'
+import { Link } from 'expo-router'
+import React, { useState } from 'react'
+import styles from './styles/secureStyles'
+
+const secure = () => {
+
+    const [isEnabled, setIsEnabled] = useState(false);
+
+    // Function to toggle the switch
+    const toggleSwitch = () => setIsEnabled(previousState => !previousState);
+
+    return (
+        <View style={styles.container}>
+
+            <View style={styles.layout}>
+
+                <View style={styles.innerContainer}>
+                    <Image source={require('./assets/lock.png')} style={styles.heroImg} />
+
+                    <View style={styles.textContent}>
+                        <Text style={styles.primaryText}>Protect your wallet</Text>
+                        <Text style={styles.secondaryText}>Adding biometric security to your  will ensure that your wallet is accessible by only you.</Text>
+                    </View>
+
+                    <View style={styles.biometrics}>
+                        <View style={styles.enable}>
+                            <Image source={require('./assets/scan-face.png')} style={styles.scanImg} />
+                            <Text style={styles.biometricText}>Enable biometrics</Text> 
+                                {/* {isEnabled ? "On" : "Off"} */}
+                        </View>
+
+                        <Switch
+                            trackColor={{ false: "#767577", true: "#4cd964" }}
+                            thumbColor={isEnabled ? "#fff" : "#f4f3f4"}
+                            ios_backgroundColor="#3e3e3e"
+                            onValueChange={toggleSwitch}
+                            value={isEnabled}
+                            style={styles.switch}
+                        />
+
+                    </View>
+
+                </View>
+
+                <TouchableOpacity style={styles.primaryButton}>
+                    <Link href="/recovery" style={styles.primaryButtonText}>Proceed</Link>
+                </TouchableOpacity>
+
+            </View>
+
+        </View>
+    )
+}
+
+export default secure

app/src/utils/wallet.js

@@ -0,0 +1,24 @@
+import * as bip39 from 'bip39';
+import * as bitcoin from 'bitcoinjs-lib';
+import * as SecureStore from 'expo-secure-store';
+
+export const createWallet = async () => {
+  // Generate the users 12 word mnemonic
+  // 128 bits entropy  12 words
+  const mnemonic = bip39.generateMnemonic(128); 
+  const seed = await bip39.mnemonicToSeed(mnemonic);
+
+  // Create he users Bitcoin HD wallet
+  const root = bitcoin.bip32.fromSeed(seed);
+  const keyPair = root.derivePath("m/44'/0'/0'/0/0");
+  const { address } = bitcoin.payments.p2pkh({ pubkey: keyPair.publicKey });
+
+  // Store mnemonic securely
+  await SecureStore.setItemAsync('mnemonic', mnemonic);
+
+  return { mnemonic, address };
+};
+
+export const getStoredMnemonic = async () => {
+  return await SecureStore.getItemAsync('mnemonic');
+};