Format sign view
This commit is contained in:
Evan Kaloudis
+5
-3
@@ -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",
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -319,7 +319,9 @@ export default class Settings extends React.Component<SettingsProps, {}> {
|
||||
<View style={styles.separationLine} />
|
||||
<TouchableOpacity
|
||||
style={styles.columnField}
|
||||
onPress={() => navigation.navigate('SignVerifyMessage')}
|
||||
onPress={() =>
|
||||
navigation.navigate('SignVerifyMessage')
|
||||
}
|
||||
>
|
||||
<View>
|
||||
<SignIcon stroke={themeColor('text')} />
|
||||
@@ -330,7 +332,9 @@ export default class Settings extends React.Component<SettingsProps, {}> {
|
||||
color: themeColor('text')
|
||||
}}
|
||||
>
|
||||
Sign or verify message
|
||||
{localeString(
|
||||
'views.Settings.SignMessage.title'
|
||||
)}
|
||||
</Text>
|
||||
<View style={styles.ForwardArrow}>
|
||||
<ForwardIcon />
|
||||
|
||||
@@ -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 = () => (
|
||||
<Icon
|
||||
@@ -55,6 +75,28 @@ export default class SignVerifyMessage extends React.Component<
|
||||
/>
|
||||
);
|
||||
|
||||
const signButton = () => (
|
||||
<React.Fragment>
|
||||
<Text
|
||||
style={{ color: selectedIndex === 1 ? 'white' : 'black' }}
|
||||
>
|
||||
{localeString('views.Settings.SignMessage.sign')}
|
||||
</Text>
|
||||
</React.Fragment>
|
||||
);
|
||||
|
||||
const verifyButton = () => (
|
||||
<React.Fragment>
|
||||
<Text
|
||||
style={{ color: selectedIndex === 0 ? 'white' : 'black' }}
|
||||
>
|
||||
{localeString('views.Settings.SignMessage.verify')}
|
||||
</Text>
|
||||
</React.Fragment>
|
||||
);
|
||||
|
||||
const buttons = [{ element: signButton }, { element: verifyButton }];
|
||||
|
||||
return (
|
||||
<ScrollView
|
||||
style={{
|
||||
@@ -71,67 +113,157 @@ export default class SignVerifyMessage extends React.Component<
|
||||
backgroundColor={themeColor('secondary')}
|
||||
/>
|
||||
|
||||
<ButtonGroup
|
||||
onPress={this.updateIndex}
|
||||
selectedIndex={selectedIndex}
|
||||
buttons={buttons}
|
||||
selectedButtonStyle={{
|
||||
backgroundColor: themeColor('highlight'),
|
||||
borderRadius: 12
|
||||
}}
|
||||
containerStyle={{
|
||||
backgroundColor: themeColor('secondary'),
|
||||
borderRadius: 12,
|
||||
borderColor: themeColor('secondary')
|
||||
}}
|
||||
innerBorderStyle={{
|
||||
color: themeColor('secondary')
|
||||
}}
|
||||
/>
|
||||
|
||||
{loading && <ActivityIndicator size="large" />}
|
||||
{error && <Text style={styles.error}>{error}</Text>}
|
||||
{signature && (
|
||||
<Text style={{ color: 'green' }}>{signature}</Text>
|
||||
)}
|
||||
{signature && (
|
||||
<CopyButton
|
||||
copyValue={signature}
|
||||
title={localeString(
|
||||
'views.Settings.SignMessage.copyButton'
|
||||
|
||||
{selectedIndex === 0 && (
|
||||
<View>
|
||||
<View style={styles.form}>
|
||||
<Text style={{ color: themeColor('text') }}>
|
||||
{localeString(
|
||||
'views.Settings.SignMessage.messageToSign'
|
||||
)}
|
||||
</Text>
|
||||
<TextInput
|
||||
placeholder={localeString(
|
||||
'views.Settings.SignMessage.placeHolder'
|
||||
)}
|
||||
value={messageToSign}
|
||||
onChangeText={(text: string) =>
|
||||
this.setState({
|
||||
messageToSign: text
|
||||
})
|
||||
}
|
||||
style={{
|
||||
...styles.textInput,
|
||||
color: themeColor('text')
|
||||
}}
|
||||
editable={!loading}
|
||||
placeholderTextColor="gray"
|
||||
multiline
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View style={styles.button}>
|
||||
<Button
|
||||
title={localeString(
|
||||
'views.Settings.SignMessage.sign'
|
||||
)}
|
||||
icon={{
|
||||
name: 'create',
|
||||
size: 25,
|
||||
color: 'white'
|
||||
}}
|
||||
onPress={() => signMessage(messageToSign)}
|
||||
buttonStyle={{
|
||||
backgroundColor: '#261339',
|
||||
borderRadius: 30
|
||||
}}
|
||||
titleStyle={{
|
||||
color: 'white'
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
|
||||
{signature && (
|
||||
<View>
|
||||
<View style={styles.form}>
|
||||
<Text style={{ color: themeColor('text') }}>
|
||||
{localeString(
|
||||
'views.Settings.SignMessage.generatedSignature'
|
||||
)}
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
...styles.textInput,
|
||||
color: themeColor('text')
|
||||
}}
|
||||
>
|
||||
{signature}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.button}>
|
||||
<CopyButton copyValue={signature} />
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
|
||||
<View style={styles.form}>
|
||||
<Text
|
||||
style={{
|
||||
color: themeColor('text')
|
||||
}}
|
||||
>
|
||||
{localeString('views.Settings.SignMessage.host')}
|
||||
</Text>
|
||||
<TextInput
|
||||
placeholder={localeString(
|
||||
'views.Settings.SignMessage.placeHolder'
|
||||
)}
|
||||
value={messageToSign}
|
||||
onChangeText={(text: string) =>
|
||||
this.setState({
|
||||
messageToSign: text
|
||||
})
|
||||
}
|
||||
style={{
|
||||
fontSize: 20,
|
||||
color: themeColor('text')
|
||||
}}
|
||||
editable={!loading}
|
||||
placeholderTextColor="gray"
|
||||
multiline
|
||||
numberOfLines={3}
|
||||
/>
|
||||
</View>
|
||||
{selectedIndex === 1 && (
|
||||
<View>
|
||||
<View style={styles.form}>
|
||||
<Text
|
||||
style={{
|
||||
color: themeColor('text')
|
||||
}}
|
||||
>
|
||||
{localeString(
|
||||
'views.Settings.SignMessage.host'
|
||||
)}
|
||||
</Text>
|
||||
<TextInput
|
||||
placeholder={localeString(
|
||||
'views.Settings.SignMessage.placeHolder'
|
||||
)}
|
||||
value={messageToVerify}
|
||||
onChangeText={(text: string) =>
|
||||
this.setState({
|
||||
messageToVerify: text
|
||||
})
|
||||
}
|
||||
style={{
|
||||
...styles.textInput,
|
||||
color: themeColor('text')
|
||||
}}
|
||||
editable={!loading}
|
||||
placeholderTextColor="gray"
|
||||
multiline
|
||||
numberOfLines={3}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View style={styles.button}>
|
||||
<Button
|
||||
title={localeString('views.Settings.SignMessage.sign')}
|
||||
icon={{
|
||||
name: 'create',
|
||||
size: 25,
|
||||
color: 'white'
|
||||
}}
|
||||
onPress={() => signMessage(messageToSign)}
|
||||
buttonStyle={{
|
||||
backgroundColor: '#261339',
|
||||
borderRadius: 30
|
||||
}}
|
||||
titleStyle={{
|
||||
color: 'white'
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
<View style={styles.button}>
|
||||
<Button
|
||||
title={localeString(
|
||||
'views.Settings.SignMessage.verify'
|
||||
)}
|
||||
icon={{
|
||||
name: 'create',
|
||||
size: 25,
|
||||
color: 'white'
|
||||
}}
|
||||
onPress={() => verifyMessage(messageToVerify)}
|
||||
buttonStyle={{
|
||||
backgroundColor: '#261339',
|
||||
borderRadius: 30
|
||||
}}
|
||||
titleStyle={{
|
||||
color: 'white'
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{signature && (
|
||||
<View style={styles.button}>
|
||||
@@ -139,7 +271,7 @@ export default class SignVerifyMessage extends React.Component<
|
||||
title={localeString(
|
||||
'views.Settings.SignMessage.clear'
|
||||
)}
|
||||
onPress={() => MessageSignStore.resetSignature()}
|
||||
onPress={() => MessageSignStore.reset()}
|
||||
buttonStyle={{
|
||||
backgroundColor: '#261339',
|
||||
borderRadius: 30
|
||||
@@ -166,5 +298,14 @@ const styles = StyleSheet.create({
|
||||
paddingTop: 20,
|
||||
paddingLeft: 5,
|
||||
paddingRight: 5
|
||||
},
|
||||
textInput: {
|
||||
fontSize: 20,
|
||||
width: '100%',
|
||||
top: 10,
|
||||
backgroundColor: '#31363F',
|
||||
borderRadius: 6,
|
||||
marginBottom: 20,
|
||||
paddingLeft: 5
|
||||
}
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user