Added sign response, style

src/actions/SignVerifyActions.js

@@ -1,25 +1,48 @@
 /* @flow */
 import TrezorConnect from 'trezor-connect';
-
-import type {
-    GetState,
-    Dispatch,
-} from 'flowtype';
+import type { GetState, Dispatch } from 'flowtype';
+import * as NOTIFICATION from 'actions/constants/notification';
+import * as SIGN_VERIFY from './constants/signVerify';
 
 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,
-        });
+    const response = await TrezorConnect.ethereumSignMessage({
+        device,
+        path,
+        hex,
+        message,
+        useEmptyPassphrase: selected.useEmptyPassphrase,
+    });
 
-    console.log(response);
+    if (response && response.success) {
+        dispatch({
+            type: SIGN_VERIFY.SIGN_SUCCESS,
+            signature: response.payload.signature,
+        });
+    } else {
+        dispatch({
+            type: NOTIFICATION.ADD,
+            payload: {
+                type: 'error',
+                title: 'Signing error',
+                message: response.payload.error,
+                cancelable: true,
+                actions: [
+                    {
+                        label: 'Try again',
+                        callback: () => {
+                            dispatch(() => {});
+                        },
+                    },
+                ],
+            },
+        });
+    }
 };

src/actions/constants/signVerify.js

@@ -1,4 +1,4 @@
 /* @flow */
 
-export const SIGN: 'send__init' = 'send__init';
-export const VERYFI: 'send__change' = 'send__change';
+export const SIGN_SUCCESS: 'sign__verify__sign__success' = 'sign__verify__sign__success';
+export const VERIFY_SUCCESS: 'sign__verify__verify__success' = 'sign__verify__verify__success';

src/components/inputs/Input/index.js

@@ -38,9 +38,9 @@ const StyledInput = styled.input`
     padding: 5px ${props => (props.hasIcon ? '40px' : '12px')} 6px 12px;
 
     line-height: 1.42857143;
-    font-size: ${FONT_SIZE.SMALL};
+    font-size: ${props => (props.isSmallText ? `${FONT_SIZE.SMALLER}` : `${FONT_SIZE.SMALL}`)};
     font-weight: ${FONT_WEIGHT.BASE};
-    color: ${props => (props.color ? props.color : colors.TEXT_SECONDARY)};
+    color: ${props => (props.color ? props.color : colors.TEXT)};
 
     border-radius: 2px;
     ${props => props.hasAddon && css`
@@ -52,6 +52,7 @@ const StyledInput = styled.input`
 
     background-color: ${colors.WHITE};
     transition: ${TRANSITION.HOVER};
+
     &:disabled {
         pointer-events: none;
         background: ${colors.GRAY_LIGHT};
@@ -114,6 +115,7 @@ class Input extends PureComponent {
                             />
                         )}
                         <StyledInput
+                            isSmallText={this.props.isSmallText}
                             hasIcon={this.getIcon(this.props.state).length > 0}
                             innerRef={this.props.innerRef}
                             hasAddon={!!this.props.sideAddons}
@@ -163,6 +165,7 @@ Input.propTypes = {
     sideAddons: PropTypes.arrayOf(PropTypes.node),
     isDisabled: PropTypes.bool,
     name: PropTypes.string,
+    isSmallText: PropTypes.string,
 };
 
 Input.defaultProps = {

src/reducers/ReceiveReducer.js

@@ -6,7 +6,6 @@ import * as RECEIVE from 'actions/constants/receive';
 import * as ACCOUNT from 'actions/constants/account';
 import type { Action } from 'flowtype';
 
-
 export type State = {
     addressVerified: boolean;
     addressUnverified: boolean;

src/reducers/SignVerifyReducer.js

@@ -3,21 +3,24 @@
 import type { Action } from 'flowtype';
 import type { NetworkToken } from './LocalStorageReducer';
 
+import { SIGN_SUCCESS } from '../actions/constants/signVerify';
+
 export type State = {
     details: boolean;
     selectedToken: ?NetworkToken;
 }
 
-const SIGN = 'sign';
-
 export const initialState: State = {
-
+    signature: null,
 };
 
 export default (state: State = initialState, action: Action): State => {
     switch (action.type) {
-        case SIGN.SUCCESS:
-            return initialState;
+        case SIGN_SUCCESS:
+            return {
+                ...state,
+                signature: state.signature,
+            };
 
         default:
             return state;

src/reducers/index.js

@@ -20,6 +20,7 @@ import fiat from 'reducers/FiatRateReducer';
 import wallet from 'reducers/WalletReducer';
 import devices from 'reducers/DevicesReducer';
 import blockchain from 'reducers/BlockchainReducer';
+import signVerifyReducer from 'reducers/SignVerifyReducer';
 
 const reducers = {
     router: routerReducer,
@@ -41,6 +42,7 @@ const reducers = {
     wallet,
     devices,
     blockchain,
+    signVerifyReducer,
 };
 
 export type Reducers = typeof reducers;

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

@@ -22,7 +22,7 @@ export type Props = StateProps & DispatchProps;
 
 const mapStateToProps: MapStateToProps<State, OwnProps, StateProps> = (state: State): StateProps => ({
     selectedAccount: state.selectedAccount,
-    sendForm: state.sendForm,
+    signature: state.signature,
     wallet: state.wallet,
     fiat: state.fiat,
     localStorage: state.localStorage,

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

@@ -69,13 +69,21 @@ class SignVerify extends Component {
         return this.props.selectedAccount.account.addressPath;
     }
 
+    getAddress() {
+        let result = null;
+        const { selectedAccount } = this.props;
+        if (selectedAccount.account && selectedAccount.account.address) {
+            result = selectedAccount.account.address;
+        }
+        return result || 'loading...';
+    }
+
     handleSignInput = (e) => {
         this.setState({ sign: { [e.target.name]: e.target.value } });
     }
 
     handleVerifyInput = (e) => {
         this.setState({ verify: { [e.target.name]: e.target.value } });
-        console.log(this.state);
     }
 
     clearSign = () => {
@@ -109,11 +117,12 @@ class SignVerify extends Component {
                             <Label>Address</Label>
                             <Input
                                 name="address"
-                                value={this.state.sign.address}
+                                value={this.getAddress()}
                                 onChange={this.handleSignInput}
                                 height={50}
                                 type="text"
-                                disabled
+                                isSmallText
+                                isDisabled
                             />
                         </Row>
                         <Row>
@@ -134,7 +143,7 @@ class SignVerify extends Component {
                                 onChange={this.handleSign}
                                 rows="2"
                                 maxLength="255"
-                                disabled
+                                isDisabled
                             />
                         </Row>
                         <RowButtons>
@@ -157,6 +166,7 @@ class SignVerify extends Component {
                                 value={this.state.verify.address}
                                 onChange={this.handleVerifyInput}
                                 type="text"
+                                isSmallText
                             />
                         </Row>
                         <Row>