From 5dd97e38607df0761d863f6886c81c78c3c149c0 Mon Sep 17 00:00:00 2001 From: shreerang6921 <68148922+shreerang6921@users.noreply.github.com> Date: Thu, 8 Feb 2024 12:05:32 +0530 Subject: [PATCH] Generate HD wallet and sign message (#3) * Generate ethers wallet * Store wallet private key and mnemonic using react-native-keychain * Add semicolons * Edit ui heading * Make review changes * Use consistent pattern for functions * Add method to sign message * Change title * Improve signing time * Hide button on wallet initilisation --------- Co-authored-by: Adw8 --- App.tsx | 122 ++++++----- package.json | 5 +- styles/stylesheet.js | 32 +++ utils.ts | 34 ++++ yarn.lock | 468 +++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 605 insertions(+), 56 deletions(-) create mode 100644 styles/stylesheet.js create mode 100644 utils.ts diff --git a/App.tsx b/App.tsx index 125fe1b..c22f21a 100644 --- a/App.tsx +++ b/App.tsx @@ -1,35 +1,26 @@ -/** - * Sample React Native App - * https://github.com/facebook/react-native - * - * @format - */ - -import React from 'react'; -import type {PropsWithChildren} from 'react'; +import React, { useState } from 'react'; +import type { PropsWithChildren } from 'react'; import { + Alert, + Button, SafeAreaView, ScrollView, StatusBar, - StyleSheet, Text, + TextInput, useColorScheme, View, } from 'react-native'; +import { Colors } from 'react-native/Libraries/NewAppScreen'; -import { - Colors, - DebugInstructions, - Header, - LearnMoreLinks, - ReloadInstructions, -} from 'react-native/Libraries/NewAppScreen'; +import styles from './styles/stylesheet'; +import { generateWallet, signMessage } from './utils'; type SectionProps = PropsWithChildren<{ title: string; }>; -function Section({children, title}: SectionProps): React.JSX.Element { +const Section = ({children, title}: SectionProps): React.JSX.Element => { const isDarkMode = useColorScheme() === 'dark'; return ( @@ -53,9 +44,18 @@ function Section({children, title}: SectionProps): React.JSX.Element { ); -} +}; + +const App = (): React.JSX.Element => { + const [message, setMessage] = useState(''); + const [isWalletCreated, setIsWalletCreated] = useState(false); + + const createWallet = async () => { + Alert.alert('Creating Wallet...'); + await generateWallet(); + setIsWalletCreated(true); + }; -function App(): React.JSX.Element { const isDarkMode = useColorScheme() === 'dark'; const backgroundStyle = { @@ -71,48 +71,60 @@ function App(): React.JSX.Element { -
+ + Laconic Wallet + -
- Edit App.tsx to change this - screen and then come back to see your edits. -
-
- -
-
- -
-
- Read the docs to discover what to do next: -
- + + {isWalletCreated ? ( + +
Wallet Created!
+ + ) : ( + +
+ Click the button to generate the wallet +
+ +