Added sign action

src/actions/SignVerifyActions.js

@@ -0,0 +1,25 @@
+/* @flow */
+import TrezorConnect from 'trezor-connect';
+
+import type {
+    GetState,
+    Dispatch,
+} from 'flowtype';
+
+export const sign = (path: Array<number>, message: string, hex: boolean = false): AsyncAction => async (dispatch: Dispatch, getState: GetState): Promise<void> => {
+    const selected = getState().wallet.selectedDevice;
+    const devicePath = selected.path;
+
+    const device = {
+        path: devicePath,
+        instance: selected.instance,
+        state: selected.state,
+    };
+
+    const response = await TrezorConnect
+        .ethereumSignMessage({
+            device, path, hex, message, useEmptyPassphrase: selected.useEmptyPassphrase,
+        });
+
+    console.log(response);
+};

src/actions/constants/signVerify.js

@@ -0,0 +1,4 @@
+/* @flow */
+
+export const SIGN: 'send__init' = 'send__init';
+export const VERYFI: 'send__change' = 'send__change';

src/components/Textarea/index.js

@@ -114,6 +114,7 @@ const TextArea = ({
     onFocus,
     onBlur,
     isDisabled,
+    name,
     onChange,
     topLabel,
     state = '',
@@ -128,6 +129,7 @@ const TextArea = ({
         <StyledTextarea
             className={className}
             disabled={isDisabled}
+            name={name}
             style={customStyle}
             onFocus={onFocus}
             onBlur={onBlur}
@@ -154,6 +156,7 @@ TextArea.propTypes = {
     customStyle: PropTypes.string,
     placeholder: PropTypes.string,
     value: PropTypes.string,
+    name: PropTypes.string,
     isDisabled: PropTypes.bool,
     topLabel: PropTypes.node,
     state: PropTypes.string,

src/reducers/SignVerifyReducer.js

@@ -0,0 +1,25 @@
+/* @flow */
+
+import type { Action } from 'flowtype';
+import type { NetworkToken } from './LocalStorageReducer';
+
+export type State = {
+    details: boolean;
+    selectedToken: ?NetworkToken;
+}
+
+const SIGN = 'sign';
+
+export const initialState: State = {
+
+};
+
+export default (state: State = initialState, action: Action): State => {
+    switch (action.type) {
+        case SIGN.SUCCESS:
+            return initialState;
+
+        default:
+            return state;
+    }
+};

src/views/Wallet/views/Account/SignVerify/Container.js

@@ -0,0 +1,35 @@
+/* @flow */
+
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+
+import * as SignVerifyActions from 'actions/SignVerifyActions';
+import type { MapStateToProps, MapDispatchToProps } from 'react-redux';
+import type { State, Dispatch } from 'flowtype';
+import Component from './index';
+
+type OwnProps = {}
+
+export type StateProps = {
+    selectedAccount: $ElementType<State, 'selectedAccount'>,
+    sendForm: $ElementType<State, 'sendForm'>,
+    wallet: $ElementType<State, 'wallet'>,
+    fiat: $ElementType<State, 'fiat'>,
+    localStorage: $ElementType<State, 'localStorage'>,
+}
+
+export type Props = StateProps & DispatchProps;
+
+const mapStateToProps: MapStateToProps<State, OwnProps, StateProps> = (state: State): StateProps => ({
+    selectedAccount: state.selectedAccount,
+    sendForm: state.sendForm,
+    wallet: state.wallet,
+    fiat: state.fiat,
+    localStorage: state.localStorage,
+});
+
+const mapDispatchToProps: MapDispatchToProps<Dispatch, OwnProps, DispatchProps> = (dispatch: Dispatch): DispatchProps => ({
+    signVerifyActions: bindActionCreators(SignVerifyActions, dispatch),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(Component);

src/views/Wallet/views/Account/SignVerify/index.js

@@ -1,6 +1,7 @@
-import React from 'react';
+import React, { Component } from 'react';
 import styled from 'styled-components';
 import Input from 'components/inputs/Input';
+import PropTypes from 'prop-types';
 import Textarea from 'components/Textarea';
 import Title from 'views/Wallet/components/Title';
 import Button from 'components/Button';
@@ -47,48 +48,109 @@ const Label = styled.div`
     padding: 5px 0px 10px 0;
 `;
 
-const AccountSignVerify = () => (
+class SignVerify extends Component {
-    <Content>
+    constructor(props) {
-        <Title>Sign & Verify</Title>
+        super(props);
-        <Wrapper>
+        this.state = {
-            <Sign>
+            sign: {
-                <Row>
+                address: '',
-                    <Label>Address</Label>
+                message: '',
-                    <Input height={50} type="text" disabled />
+                signature: '',
-                </Row>
+            },
-                <Row>
+            verify: {
-                    <Label>Message</Label>
+                address: '',
-                    <Textarea rows="2" maxLength="255" />
+                message: '',
-                </Row>
+                signature: '',
-                <Row>
+            },
-                    <Label>Signature</Label>
+        };
-                    <Textarea rows="2" maxLength="255" disabled />
+    }
-                </Row>
-                <RowButtons>
-                    <Button isWhite>Clear</Button>
-                    <StyledButton>Sign</StyledButton>
-                </RowButtons>
-            </Sign>
-            <Verify>
-                <Row>
-                    <Label>Address</Label>
-                    <Input type="text" />
-                </Row>
-                <Row>
-                    <Label>Message</Label>
-                    <Textarea rows="4" maxLength="255" />
-                </Row>
-                <Row>
-                    <Label>Signature</Label>
-                    <Textarea rows="4" maxLength="255" />
-                </Row>
-                <RowButtons>
-                    <Button isWhite>Clear</Button>
-                    <StyledButton>Verify</StyledButton>
-                </RowButtons>
-            </Verify>
-        </Wrapper>
-    </Content>
-);
 
-export default AccountSignVerify;
+    handleSignInput = (e) => {
+        console.log('aaa', e.target);
+        this.setState({ sign: { [e.target.name]: e.target.value } });
+        console.log(this.state);
+    }
+
+    handleVerifyInput = (e) => {
+        this.setState({ verify: { [e.target.name]: e.target.value } });
+        console.log(this.state);
+    }
+
+    clearSign = () => {
+        this.setState({
+            sign: {
+                address: '',
+                message: '',
+                signature: '',
+            },
+        });
+    }
+
+    clearVerify = () => {
+        this.setState({
+            verify: {
+                address: '',
+                message: '',
+                signature: '',
+            },
+        });
+    }
+
+    getPath() {
+        const { account } = this.props;
+        return account.addressPath;
+    }
+
+    render() {
+        const { signVerifyActions } = this.props;
+        return (
+            <Content>
+                <Title>Sign & Verify</Title>{this.state.sign.message || 'no message'}
+                <Wrapper>
+                    <Sign>
+                        <Row>
+                            <Label>Address</Label>
+                            <Input name="address" value={this.state.sign.address} onChange={this.handleSignInput} height={50} type="text" disabled />
+                        </Row>
+                        <Row>
+                            <Label>Message</Label>
+                            <Textarea name="message" value={this.state.sign.message} onChange={this.handleSignInput} rows="2" maxLength="255" />
+                        </Row>
+                        <Row>
+                            <Label>Signature</Label>
+                            <Textarea name="signature" value={this.state.sign.signature} onChange={this.handleSign} rows="2" maxLength="255" disabled />
+                        </Row>
+                        <RowButtons>
+                            <Button onClick={this.clearVerify} isWhite>Clear</Button>
+                            <StyledButton onClick={() => signVerifyActions.sign(this.getPath(), this.state.sign.message)}>Sign</StyledButton>
+                        </RowButtons>
+                    </Sign>
+                    <Verify>
+                        <Row>
+                            <Label>Address</Label>
+                            <Input name="address" value={this.state.verify.address} onChange={this.handleVerifyInput} type="text" />
+                        </Row>
+                        <Row>
+                            <Label>Message</Label>
+                            <Textarea name="message" value={this.state.verify.message} onChange={this.handleVerifyInput} rows="4" maxLength="255" />
+                        </Row>
+                        <Row>
+                            <Label>Signature</Label>
+                            <Textarea name="signature" value={this.state.verify.signature} onChange={this.handleVerifyInput} rows="4" maxLength="255" />
+                        </Row>
+                        <RowButtons>
+                            <Button onClick={this.clearSign} isWhite>Clear</Button>
+                            <StyledButton>Verify</StyledButton>
+                        </RowButtons>
+                    </Verify>
+                </Wrapper>
+            </Content>
+        );
+    }
+}
+
+SignVerify.propTypes = {
+    sign: PropTypes.func.isRequired,
+};
+
+export default SignVerify;

src/views/Wallet/views/Account/Summary/index.js

@@ -48,6 +48,7 @@ const StyledCoinLogo = styled(CoinLogo)`
 const StyledIcon = styled(Icon)`
     position: relative;
     top: -7px;
+    
     &:hover {
         cursor: pointer;
     }

src/views/index.js

@@ -18,7 +18,7 @@ import WalletContainer from 'views/Wallet';
 import AccountSummary from 'views/Wallet/views/Account/Summary/Container';
 import AccountSend from 'views/Wallet/views/Account/Send/Container';
 import AccountReceive from 'views/Wallet/views/Account/Receive/Container';
-import AccountSignVerify from 'views/Wallet/views/Account/SignVerify';
+import AccountSignVerify from 'views/Wallet/views/Account/SignVerify/Container';
 
 import WalletDashboard from 'views/Wallet/views/Dashboard';
 import WalletDeviceSettings from 'views/Wallet/views/DeviceSettings';