From 242eec11042585141e87b9438953c79768d37a3e Mon Sep 17 00:00:00 2001 From: Adwait Gharpure <69599306+Adw8@users.noreply.github.com> Date: Tue, 13 Feb 2024 15:45:57 +0530 Subject: [PATCH] Add new page for signing message (#8) * Add navigation * Remove navigation * Change accordian title * Add page to sign message * Call sign page on button click * Change variable name * Change app title * Change create button color * Delete Cosmos component * Fix imports * Add line * Change sign message title * Ask for confirmation before resetting wallet * Make review changes * Hide dialog on clicking outside * Change dialog options * Make review changes * Remove import * Change title * Change default state --------- Co-authored-by: Adw8 --- App.tsx | 19 +++--- android/app/build.gradle | 6 +- components/Header.tsx | 29 ++++++++-- components/HomeScreen.tsx | 116 +++++++++++++++++++++++-------------- components/SignMessage.tsx | 28 +++++++++ package.json | 3 + yarn.lock | 99 ++++++++++++++++++++++++++++++- 7 files changed, 237 insertions(+), 63 deletions(-) create mode 100644 components/SignMessage.tsx diff --git a/App.tsx b/App.tsx index f58d8a0..3d62345 100644 --- a/App.tsx +++ b/App.tsx @@ -1,19 +1,22 @@ import React from 'react'; -import type { PropsWithChildren } from 'react'; -import { - View, -} from 'react-native'; import { HomeScreen } from './components/HomeScreen'; import { Header } from './components/Header'; +import { NavigationContainer } from '@react-navigation/native'; +import { createNativeStackNavigator } from '@react-navigation/native-stack'; +import SignMessage from './components/SignMessage'; + +const Stack = createNativeStackNavigator(); const App = (): React.JSX.Element => { - return ( - +
- - + + + + + ); }; diff --git a/android/app/build.gradle b/android/app/build.gradle index fcc41f2..0b9f1c8 100644 --- a/android/app/build.gradle +++ b/android/app/build.gradle @@ -1,6 +1,7 @@ apply plugin: "com.android.application" apply plugin: "org.jetbrains.kotlin.android" apply plugin: "com.facebook.react" +apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle") /** * This is the configuration block to customize your React Native Android app. @@ -115,9 +116,6 @@ dependencies { implementation jscFlavor } } -project.ext.vectoricons = [ - iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf' ] // Specify font files -] -apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle") + apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project) diff --git a/components/Header.tsx b/components/Header.tsx index 02b8b1d..5acf787 100644 --- a/components/Header.tsx +++ b/components/Header.tsx @@ -1,14 +1,35 @@ -import React from 'react'; +import React, { useState } from 'react'; import { View } from 'react-native'; -import { Appbar } from 'react-native-paper'; +import { Appbar, List } from 'react-native-paper'; const Header = () => { + const [expanded, setExpanded] = useState(false); + + const handlePress = () => setExpanded(!expanded); return ( - - + + + + + { + setExpanded(false); + }} + /> + { + setExpanded(false); + }} + /> + ); }; diff --git a/components/HomeScreen.tsx b/components/HomeScreen.tsx index 2c87c6c..0553c62 100644 --- a/components/HomeScreen.tsx +++ b/components/HomeScreen.tsx @@ -1,95 +1,121 @@ -import React, { useState } from "react"; -import { View } from "react-native"; -import { Text, Button, TextInput } from "react-native-paper"; -import { HDNode } from "ethers/lib/utils"; +import React, { useState } from 'react'; +import { View } from 'react-native'; +import { Text, Button, Dialog, Portal } from 'react-native-paper'; +import { HDNode } from 'ethers/lib/utils'; -import { generateWallet, resetWallet, signMessage } from '../utils'; -import { DialogComponent } from "./Dialog"; +import { useNavigation } from '@react-navigation/native'; + +import { generateWallet, resetWallet } from '../utils'; +import { DialogComponent } from './Dialog'; const HomeScreen = () => { - const [message, setMessage] = useState(''); + const navigation = useNavigation(); + const [isWalletCreated, setIsWalletCreated] = useState(false); const [wallet, setWallet] = useState(); const [isWalletCreating, setIsWalletCreating] = useState(false); const [walletDialog, setWalletDialog] = useState(false); + const [resetWalletDialog, setResetWalletDialog] = useState(false); - const hideWalletDialog = () => setWalletDialog(false); + const hideWalletDialog = () => setWalletDialog(false); + const hideResetDialog = () => setResetWalletDialog(false); const createWallet = async () => { setIsWalletCreating(true); await new Promise(resolve => setTimeout(resolve, 200)); - const wallet = await generateWallet(); + const etherWallet = await generateWallet(); setWalletDialog(true); - if (wallet) { - setWallet(wallet); + if (etherWallet) { + setWallet(etherWallet); setIsWalletCreated(true); } }; + const confirmResetWallet = async () => { + await resetWallet(); + setIsWalletCreated(false); + setWallet(null); + setIsWalletCreating(false); + hideResetDialog(); + }; + return ( - + + + + Reset Wallet + + Are you sure? + + + + + + + {isWalletCreated ? ( - Account1 + Account1 - Address: {wallet && wallet.address.toString()} + Address: + {wallet && wallet.address.toString()} - - Public Key: {wallet && wallet.publicKey.toString()} + + Public Key: + {wallet && wallet.publicKey.toString()} - - Sign a Message - - setMessage(text)} - value={message} - /> + + style={{ + marginTop: 20, + marginRight: 10, + width: 150, + alignSelf: 'center', + }}> + navigation.navigate('Sign Message' as never); + }}> + Sign Message + - - - - + + setResetWalletDialog(true); + }}> + Reset Wallet + ) : ( - Create Wallet + Create Wallet + onPress={createWallet}> + {isWalletCreating ? 'Creating' : 'Create'}{' '} + )} - ) -} + ); +}; export { HomeScreen }; diff --git a/components/SignMessage.tsx b/components/SignMessage.tsx new file mode 100644 index 0000000..ba654ab --- /dev/null +++ b/components/SignMessage.tsx @@ -0,0 +1,28 @@ +import { View } from 'react-native'; +import { Button, TextInput } from 'react-native-paper'; +import React, { useState } from 'react'; + +import { signMessage } from '../utils'; + +export default function SignMessage() { + const [message, setMessage] = useState(''); + return ( + + setMessage(text)} + value={message} + /> + + + + + ); +} diff --git a/package.json b/package.json index 96c2690..38549e3 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,8 @@ }, "dependencies": { "@ethersproject/shims": "^5.7.0", + "@react-navigation/native": "^6.1.10", + "@react-navigation/native-stack": "^6.9.18", "ethers": "5", "metro-react-native-babel-preset": "^0.77.0", "react": "18.2.0", @@ -19,6 +21,7 @@ "react-native-keychain": "^8.1.2", "react-native-paper": "^5.12.3", "react-native-safe-area-context": "^4.9.0", + "react-native-screens": "^3.29.0", "react-native-vector-icons": "^10.0.3" }, "devDependencies": { diff --git a/yarn.lock b/yarn.lock index e5d62f9..9eae817 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2212,6 +2212,48 @@ invariant "^2.2.4" nullthrows "^1.1.1" +"@react-navigation/core@^6.4.10": + version "6.4.10" + resolved "https://registry.yarnpkg.com/@react-navigation/core/-/core-6.4.10.tgz#0c52621968b35e3a75e189e823d3b9e3bad77aff" + integrity sha512-oYhqxETRHNHKsipm/BtGL0LI43Hs2VSFoWMbBdHK9OqgQPjTVUitslgLcPpo4zApCcmBWoOLX2qPxhsBda644A== + dependencies: + "@react-navigation/routers" "^6.1.9" + escape-string-regexp "^4.0.0" + nanoid "^3.1.23" + query-string "^7.1.3" + react-is "^16.13.0" + use-latest-callback "^0.1.7" + +"@react-navigation/elements@^1.3.22": + version "1.3.22" + resolved "https://registry.yarnpkg.com/@react-navigation/elements/-/elements-1.3.22.tgz#37e25e46ca4715049795471056a9e7e58ac4a14e" + integrity sha512-HYKucs0TwQT8zMvgoZbJsY/3sZfzeP8Dk9IDv4agst3zlA7ReTx4+SROCG6VGC7JKqBCyQykHIwkSwxhapoc+Q== + +"@react-navigation/native-stack@^6.9.18": + version "6.9.18" + resolved "https://registry.yarnpkg.com/@react-navigation/native-stack/-/native-stack-6.9.18.tgz#60380b058bf916f69db46cdb32b3127d0589f055" + integrity sha512-PSe0qjROy8zD78ehW048NSuzWRktioSCJmB8LzWSR65ndgVaC2rO+xvgyjhHjqm01YdyVM1XTct2EorSjDV2Ow== + dependencies: + "@react-navigation/elements" "^1.3.22" + warn-once "^0.1.0" + +"@react-navigation/native@^6.1.10": + version "6.1.10" + resolved "https://registry.yarnpkg.com/@react-navigation/native/-/native-6.1.10.tgz#d108423ae3acbe13f11d9b7351c1f5522d8391a5" + integrity sha512-jDG89TbZItY7W7rIcS1RqT63vWOPD4XuQLNKqZO0DY7mKnKh/CGBd0eg3nDMXUl143Qp//IxJKe2TfBQRDEU4A== + dependencies: + "@react-navigation/core" "^6.4.10" + escape-string-regexp "^4.0.0" + fast-deep-equal "^3.1.3" + nanoid "^3.1.23" + +"@react-navigation/routers@^6.1.9": + version "6.1.9" + resolved "https://registry.yarnpkg.com/@react-navigation/routers/-/routers-6.1.9.tgz#73f5481a15a38e36592a0afa13c3c064b9f90bed" + integrity sha512-lTM8gSFHSfkJvQkxacGM6VJtBt61ip2XO54aNfswD+KMw6eeZ4oehl7m0me3CR9hnDE4+60iAZR8sAhvCiI3NA== + dependencies: + nanoid "^3.1.23" + "@sideway/address@^4.1.5": version "4.1.5" resolved "https://registry.yarnpkg.com/@sideway/address/-/address-4.1.5.tgz#4bc149a0076623ced99ca8208ba780d65a99b9d5" @@ -3214,6 +3256,11 @@ decamelize@^1.2.0: resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290" integrity sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA== +decode-uri-component@^0.2.2: + version "0.2.2" + resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.2.tgz#e69dbe25d37941171dd540e024c444cd5188e1e9" + integrity sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ== + dedent@^1.0.0: version "1.5.1" resolved "https://registry.yarnpkg.com/dedent/-/dedent-1.5.1.tgz#4f3fc94c8b711e9bb2800d185cd6ad20f2a90aff" @@ -3834,6 +3881,11 @@ fill-range@^7.0.1: dependencies: to-regex-range "^5.0.1" +filter-obj@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/filter-obj/-/filter-obj-1.1.0.tgz#9b311112bc6c6127a16e016c6c5d7f19e0805c5b" + integrity sha512-8rXg1ZnX7xzy2NGDVkBVaAy+lSlPNwad13BtgSlLuxfIslyt5Vg64U7tFcCt4WS1R0hvtnQybT/IyCkGZ3DpXQ== + finalhandler@1.1.2: version "1.1.2" resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.1.2.tgz#b7e7d000ffd11938d0fdb053506f6ebabe9f587d" @@ -5561,6 +5613,11 @@ ms@2.1.3: resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2" integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA== +nanoid@^3.1.23: + version "3.3.7" + resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8" + integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g== + natural-compare-lite@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/natural-compare-lite/-/natural-compare-lite-1.4.0.tgz#17b09581988979fddafe0201e931ba933c96cbb4" @@ -5986,6 +6043,16 @@ pure-rand@^6.0.0: resolved "https://registry.yarnpkg.com/pure-rand/-/pure-rand-6.0.4.tgz#50b737f6a925468679bff00ad20eade53f37d5c7" integrity sha512-LA0Y9kxMYv47GIPJy6MI84fqTd2HmYZI83W/kM/SkKfDlajnZYfmXFTxkbY+xSBPkLJxltMa9hIkmdc29eguMA== +query-string@^7.1.3: + version "7.1.3" + resolved "https://registry.yarnpkg.com/query-string/-/query-string-7.1.3.tgz#a1cf90e994abb113a325804a972d98276fe02328" + integrity sha512-hh2WYhq4fi8+b+/2Kg9CEge4fDPvHS534aOOvOZeQ3+Vf2mCFsaFBYj0i+iXcAq6I9Vzp5fjMFBlONvayDC1qg== + dependencies: + decode-uri-component "^0.2.2" + filter-obj "^1.1.0" + split-on-first "^1.0.0" + strict-uri-encode "^2.0.0" + queue-microtask@^1.2.2: version "1.2.3" resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243" @@ -6011,12 +6078,17 @@ react-devtools-core@^4.27.7: shell-quote "^1.6.1" ws "^7" +react-freeze@^1.0.0: + version "1.0.3" + resolved "https://registry.yarnpkg.com/react-freeze/-/react-freeze-1.0.3.tgz#5e3ca90e682fed1d73a7cb50c2c7402b3e85618d" + integrity sha512-ZnXwLQnGzrDpHBHiC56TXFXvmolPeMjTn1UOm610M4EXGzbEDR7oOIyS2ZiItgbs6eZc4oU/a0hpk8PrcKvv5g== + "react-is@^16.12.0 || ^17.0.0 || ^18.0.0", react-is@^18.0.0, react-is@^18.2.0: version "18.2.0" resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b" integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w== -react-is@^16.13.1, react-is@^16.7.0: +react-is@^16.13.0, react-is@^16.13.1, react-is@^16.7.0: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== @@ -6052,6 +6124,14 @@ react-native-safe-area-context@^4.9.0: resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-4.9.0.tgz#21a570ca3594cb4259ba65f93befaa60d91bcbd0" integrity sha512-/OJD9Pb8IURyvn+1tWTszWPJqsbZ4hyHBU9P0xhOmk7h5owSuqL0zkfagU0pg7Vh0G2NKQkaPpUKUMMCUMDh/w== +react-native-screens@^3.29.0: + version "3.29.0" + resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-3.29.0.tgz#1dee0326defbc1d4ef4e68287abb32a8e6b76b29" + integrity sha512-yB1GoAMamFAcYf4ku94uBPn0/ani9QG7NdI98beJ5cet2YFESYYzuEIuU+kt+CNRcO8qqKeugxlfgAa3HyTqlg== + dependencies: + react-freeze "^1.0.0" + warn-once "^0.1.0" + react-native-vector-icons@^10.0.3: version "10.0.3" resolved "https://registry.yarnpkg.com/react-native-vector-icons/-/react-native-vector-icons-10.0.3.tgz#369824a3b17994b2cd65edbaa32dbf9540d49678" @@ -6558,6 +6638,11 @@ source-map@^0.7.3: resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.4.tgz#a9bbe705c9d8846f4e08ff6765acf0f1b0898656" integrity sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA== +split-on-first@^1.0.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/split-on-first/-/split-on-first-1.1.0.tgz#f610afeee3b12bce1d0c30425e76398b78249a5f" + integrity sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw== + sprintf-js@~1.0.2: version "1.0.3" resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c" @@ -6592,6 +6677,11 @@ statuses@~1.5.0: resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c" integrity sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA== +strict-uri-encode@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546" + integrity sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ== + string-length@^4.0.1: version "4.0.2" resolved "https://registry.yarnpkg.com/string-length/-/string-length-4.0.2.tgz#a8a8dc7bd5c1a82b9b3c8b87e125f66871b6e57a" @@ -6962,7 +7052,7 @@ uri-js@^4.2.2: dependencies: punycode "^2.1.0" -use-latest-callback@^0.1.5: +use-latest-callback@^0.1.5, use-latest-callback@^0.1.7: version "0.1.9" resolved "https://registry.yarnpkg.com/use-latest-callback/-/use-latest-callback-0.1.9.tgz#10191dc54257e65a8e52322127643a8940271e2a" integrity sha512-CL/29uS74AwreI/f2oz2hLTW7ZqVeV5+gxFeGudzQrgkCytrHw33G4KbnQOrRlAEzzAFXi7dDLMC9zhWcVpzmw== @@ -7003,6 +7093,11 @@ walker@^1.0.7, walker@^1.0.8: dependencies: makeerror "1.0.12" +warn-once@^0.1.0: + version "0.1.1" + resolved "https://registry.yarnpkg.com/warn-once/-/warn-once-0.1.1.tgz#952088f4fb56896e73fd4e6a3767272a3fccce43" + integrity sha512-VkQZJbO8zVImzYFteBXvBOZEl1qL175WH8VmZcxF2fZAoudNhNDvHi+doCaAEdU2l2vtcIwa2zn0QK5+I1HQ3Q== + wcwidth@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/wcwidth/-/wcwidth-1.0.1.tgz#f0b0dcf915bc5ff1528afadb2c0e17b532da2fe8"