From 8ee78a4e80a70c85909a0843208ad2d17a52b7be Mon Sep 17 00:00:00 2001 From: Evan Kaloudis Date: Tue, 7 Dec 2021 22:21:27 -0500 Subject: [PATCH] Format sign view --- locales/en.json | 8 +- stores/MessageSignStore.ts | 26 ++- views/Settings/Settings.tsx | 8 +- views/Settings/SignVerifyMessage.tsx | 263 ++++++++++++++++++++------- 4 files changed, 237 insertions(+), 68 deletions(-) diff --git a/locales/en.json b/locales/en.json index 217c8eaf1..913580dcb 100644 --- a/locales/en.json +++ b/locales/en.json @@ -347,12 +347,14 @@ "views.Settings.Dark": "Dark", "views.Settings.newPassword": "New Password", "views.Settings.confirmPassword": "Confirm New Password", - "views.Settings.SignMessage.title" : "Sign Message", + "views.Settings.SignMessage.title" : "Sign or verify message", "views.Settings.SignMessage.sign" : "Sign", + "views.Settings.SignMessage.verify" : "Verify", "views.Settings.signMessage.button": "Sign Message", - "views.Settings.SignMessage.copyButton": "Copy Button", "views.Settings.SignMessage.placeHolder": "The Times 03/Jan/2009 Chancellor on brink of second bailout for banks", - "views.Settings.SignMessage.clear": "Clear signature", + "views.Settings.SignMessage.clear": "Clear", + "views.Settings.SignMessage.messageToSign": "Message to sign", + "views.Settings.SignMessage.generatedSignature": "Generated signature", "views.Settings.Language.title": "Language", "views.Settings.Currency.title": "Currency", "views.Settings.Theme.title": "Theme", diff --git a/stores/MessageSignStore.ts b/stores/MessageSignStore.ts index f34ac492a..e8a7d74b7 100644 --- a/stores/MessageSignStore.ts +++ b/stores/MessageSignStore.ts @@ -6,9 +6,12 @@ export default class MessageSignStore { @observable public loading = false; @observable public error = false; @observable public signature: string | null; + @observable public verification: string | null; - resetSignature() { + @action + public reset() { this.signature = null; + this.verification = null; this.error = false; } @@ -25,7 +28,26 @@ export default class MessageSignStore { }) .catch((error: any) => { this.error = error.toString(); - this.resetSignature; + this.resetSignature(); + }) + .finally(() => { + this.loading = false; + }); + }; + + @action + public verifyMessage = (text: string) => { + this.loading = true; + const body = Base64Utils.btoa(text); + + RESTUtils.verifyMessage(body) + .then((data: any) => { + this.verification = data.signature; + this.error = false; + }) + .catch((error: any) => { + this.error = error.toString(); + this.resetVerification(); }) .finally(() => { this.loading = false; diff --git a/views/Settings/Settings.tsx b/views/Settings/Settings.tsx index b24e020ee..f473c10aa 100644 --- a/views/Settings/Settings.tsx +++ b/views/Settings/Settings.tsx @@ -319,7 +319,9 @@ export default class Settings extends React.Component { navigation.navigate('SignVerifyMessage')} + onPress={() => + navigation.navigate('SignVerifyMessage') + } > @@ -330,7 +332,9 @@ export default class Settings extends React.Component { color: themeColor('text') }} > - Sign or verify message + {localeString( + 'views.Settings.SignMessage.title' + )} diff --git a/views/Settings/SignVerifyMessage.tsx b/views/Settings/SignVerifyMessage.tsx index 2ea16818f..8337f8492 100644 --- a/views/Settings/SignVerifyMessage.tsx +++ b/views/Settings/SignVerifyMessage.tsx @@ -7,7 +7,7 @@ import { ScrollView, TextInput } from 'react-native'; -import { Header, Icon } from 'react-native-elements'; +import { ButtonGroup, Header, Icon } from 'react-native-elements'; import { inject, observer } from 'mobx-react'; import Button from './../../components/Button'; import { themeColor } from './../../utils/ThemeUtils'; @@ -22,6 +22,8 @@ interface SignVerifyMessageProps { interface SignVerifyMessageState { messageToSign: string; + messageToVerify: string; + selectedIndex: number; } @inject('SettingsStore', 'MessageSignStore') @@ -31,18 +33,36 @@ export default class SignVerifyMessage extends React.Component< SignVerifyMessageState > { state = { - messageToSign: '' + messageToSign: '', + messageToVerify: '', + selectedIndex: 0 }; componentDidMount() { const { MessageSignStore } = this.props; - MessageSignStore.resetSignature(); + MessageSignStore.reset(); } + reset = () => { + this.setState({ + messageToSign: '', + messageToVerify: '' + }); + + MessageSignStore.reset(); + }; + + updateIndex = (selectedIndex: number) => { + this.setState({ + selectedIndex + }); + }; + render() { const { navigation, MessageSignStore } = this.props; - const { messageToSign } = this.state; - const { loading, signMessage, error, signature } = MessageSignStore; + const { messageToSign, messageToVerify, selectedIndex } = this.state; + const { loading, signMessage, verifyMessage, error, signature } = + MessageSignStore; const BackButton = () => ( ); + const signButton = () => ( + + + {localeString('views.Settings.SignMessage.sign')} + + + ); + + const verifyButton = () => ( + + + {localeString('views.Settings.SignMessage.verify')} + + + ); + + const buttons = [{ element: signButton }, { element: verifyButton }]; + return ( + + {loading && } {error && {error}} - {signature && ( - {signature} - )} - {signature && ( - + + + {localeString( + 'views.Settings.SignMessage.messageToSign' + )} + + + this.setState({ + messageToSign: text + }) + } + style={{ + ...styles.textInput, + color: themeColor('text') + }} + editable={!loading} + placeholderTextColor="gray" + multiline + /> + + + +