Sig request design fixed

app/components/Nav/Main/index.js

@@ -440,7 +440,8 @@ class Main extends PureComponent {
 		paymentChannelRequest: false,
 		paymentChannelRequestLoading: false,
 		paymentChannelRequestCompleted: false,
-		paymentChannelRequestInfo: {}
+		paymentChannelRequestInfo: {},
+		showExpandedMessage: false
 	};
 
 	backgroundMode = false;
@@ -929,8 +930,19 @@ class Main extends PureComponent {
 		this.setState({ signMessage: false });
 	};
 
+	toggleExpandedMessage = () => {
+		this.setState({ showExpandedMessage: !this.state.showExpandedMessage });
+	};
+
 	renderSigningModal = () => {
-		const { signMessage, signMessageParams, signType, currentPageTitle, currentPageUrl } = this.state;
+		const {
+			signMessage,
+			signMessageParams,
+			signType,
+			currentPageTitle,
+			currentPageUrl,
+			showExpandedMessage
+		} = this.state;
 		return (
 			<Modal
 				isVisible={signMessage}
@@ -941,7 +953,7 @@ class Main extends PureComponent {
 				animationInTiming={600}
 				animationOutTiming={600}
 				onBackdropPress={this.onSignAction}
-				onBackButtonPress={this.onSignAction}
+				onBackButtonPress={showExpandedMessage ? this.toggleExpandedMessage : this.onSignAction}
 				onSwipeComplete={this.onSignAction}
 				swipeDirection={'down'}
 				propagateSwipe
@@ -952,6 +964,8 @@ class Main extends PureComponent {
 						onCancel={this.onSignAction}
 						onConfirm={this.onSignAction}
 						currentPageInformation={{ title: currentPageTitle, url: currentPageUrl }}
+						toggleExpandedMessage={this.toggleExpandedMessage}
+						showExpandedMessage={showExpandedMessage}
 					/>
 				)}
 				{signType === 'typed' && (
@@ -960,6 +974,8 @@ class Main extends PureComponent {
 						onCancel={this.onSignAction}
 						onConfirm={this.onSignAction}
 						currentPageInformation={{ title: currentPageTitle, url: currentPageUrl }}
+						toggleExpandedMessage={this.toggleExpandedMessage}
+						showExpandedMessage={showExpandedMessage}
 					/>
 				)}
 				{signType === 'eth' && (
@@ -969,6 +985,8 @@ class Main extends PureComponent {
 						onCancel={this.onSignAction}
 						onConfirm={this.onSignAction}
 						currentPageInformation={{ title: currentPageTitle, url: currentPageUrl }}
+						toggleExpandedMessage={this.toggleExpandedMessage}
+						showExpandedMessage={showExpandedMessage}
 					/>
 				)}
 			</Modal>

app/components/UI/AccountInfoCard/__snapshots__/index.test.js.snap

@@ -0,0 +1,93 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AccountInfoCard should render correctly 1`] = `
+<View
+  style={
+    Object {
+      "borderColor": "#bbc0c5",
+      "borderRadius": 10,
+      "borderWidth": 1,
+      "flexDirection": "row",
+      "justifyContent": "flex-start",
+      "padding": 16,
+    }
+  }
+>
+  <Component
+    address="0x0"
+    customStyle={
+      Object {
+        "marginRight": 8,
+      }
+    }
+    diameter={40}
+  />
+  <View
+    style={
+      Object {
+        "alignItems": "flex-start",
+        "flexDirection": "column",
+        "flexGrow": 1,
+        "justifyContent": "center",
+      }
+    }
+  >
+    <View
+      style={
+        Object {
+          "flexDirection": "row",
+          "justifyContent": "flex-start",
+          "width": "100%",
+        }
+      }
+    >
+      <Text
+        numberOfLines={1}
+        style={
+          Object {
+            "fontFamily": "CircularStd-Medium",
+            "fontSize": 16,
+            "fontWeight": "600",
+            "marginRight": 2,
+            "maxWidth": "55%",
+          }
+        }
+      >
+        0x0...0x0
+      </Text>
+      <Text
+        numberOfLines={1}
+        style={
+          Object {
+            "flexGrow": 1,
+            "fontFamily": "CircularStd-Medium",
+            "fontSize": 16,
+            "fontWeight": "600",
+          }
+        }
+      >
+        (
+        0x0...0x0
+        )
+      </Text>
+    </View>
+    <Text
+      numberOfLines={1}
+      style={
+        Object {
+          "alignSelf": "flex-start",
+          "fontFamily": "CircularStd-Medium",
+          "fontSize": 14,
+          "fontWeight": "100",
+        }
+      }
+    >
+      Balance:
+
+      0 undefined
+
+      (&lt; 0.00001 eth)
+    </Text>
+  </View>
+</View>
+`;

app/components/UI/AccountInfoCard/index.js

@@ -0,0 +1,132 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { StyleSheet, View, Text } from 'react-native';
+import { colors, fontStyles } from '../../../styles/common';
+import { renderFromWei, weiToFiat, hexToBN } from '../../../util/number';
+import Identicon from '../Identicon';
+import { strings } from '../../../../locales/i18n';
+import { connect } from 'react-redux';
+import { renderAccountName, renderShortAddress } from '../../../util/address';
+import { getTicker } from '../../../util/transactions';
+
+const styles = StyleSheet.create({
+	accountInformation: {
+		flexDirection: 'row',
+		justifyContent: 'flex-start',
+		borderWidth: 1,
+		borderColor: colors.grey200,
+		borderRadius: 10,
+		padding: 16
+	},
+	identicon: {
+		marginRight: 8
+	},
+	accountInfoRow: {
+		flexGrow: 1,
+		flexDirection: 'column',
+		justifyContent: 'center',
+		alignItems: 'flex-start'
+	},
+	accountNameAndAddress: {
+		width: '100%',
+		flexDirection: 'row',
+		justifyContent: 'flex-start'
+	},
+	accountName: {
+		maxWidth: '55%',
+		...fontStyles.bold,
+		fontSize: 16,
+		marginRight: 2
+	},
+	accountAddress: {
+		flexGrow: 1,
+		...fontStyles.bold,
+		fontSize: 16
+	},
+	balanceText: {
+		...fontStyles.thin,
+		fontSize: 14,
+		alignSelf: 'flex-start'
+	}
+});
+
+class AccountInfoCard extends PureComponent {
+	static propTypes = {
+		/**
+		 * Map of accounts to information objects including balances
+		 */
+		accounts: PropTypes.object,
+		/**
+		 * List of accounts from the PreferencesController
+		 */
+		identities: PropTypes.object,
+		/**
+		 * A string that represents the selected address
+		 */
+		selectedAddress: PropTypes.string,
+		/**
+		 * A number that specifies the ETH/USD conversion rate
+		 */
+		conversionRate: PropTypes.number,
+		/**
+		 * The selected currency
+		 */
+		currentCurrency: PropTypes.string,
+		/**
+		 * Declares the operation being performed i.e. 'signing'
+		 */
+		operation: PropTypes.string,
+		/**
+		 * Current selected ticker
+		 */
+		ticker: PropTypes.string
+	};
+
+	render() {
+		const {
+			accounts,
+			selectedAddress,
+			identities,
+			conversionRate,
+			currentCurrency,
+			operation,
+			ticker
+		} = this.props;
+		const weiBalance = hexToBN(accounts[selectedAddress].balance);
+		const balance = `(${renderFromWei(weiBalance)} ${getTicker(ticker)})`;
+		const accountLabel = renderAccountName(selectedAddress, identities);
+		const address = renderShortAddress(selectedAddress);
+		const dollarBalance = weiToFiat(weiBalance, conversionRate, currentCurrency);
+		return (
+			<View style={styles.accountInformation}>
+				<Identicon address={selectedAddress} diameter={40} customStyle={styles.identicon} />
+				<View style={styles.accountInfoRow}>
+					<View style={styles.accountNameAndAddress}>
+						<Text numberOfLines={1} style={styles.accountName}>
+							{accountLabel}
+						</Text>
+						<Text numberOfLines={1} style={styles.accountAddress}>
+							({address})
+						</Text>
+					</View>
+					{operation === 'signing' ? null : (
+						<Text numberOfLines={1} style={styles.balanceText}>
+							{strings('signature_request.balance_title')} {dollarBalance} {balance}
+						</Text>
+					)}
+				</View>
+			</View>
+		);
+	}
+}
+
+const mapStateToProps = state => ({
+	accounts: state.engine.backgroundState.AccountTrackerController.accounts,
+	selectedAddress: state.engine.backgroundState.PreferencesController.selectedAddress,
+	identities: state.engine.backgroundState.PreferencesController.identities,
+	conversionRate: state.engine.backgroundState.CurrencyRateController.conversionRate,
+	currentCurrency: state.engine.backgroundState.CurrencyRateController.currentCurrency,
+	ticker: state.engine.backgroundState.NetworkController.provider.ticker
+});
+
+export default connect(mapStateToProps)(AccountInfoCard);

app/components/UI/AccountInfoCard/index.test.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import configureMockStore from 'redux-mock-store';
+import AccountInfoCard from './';
+
+const mockStore = configureMockStore();
+
+describe('AccountInfoCard', () => {
+	it('should render correctly', () => {
+		const initialState = {
+			engine: {
+				backgroundState: {
+					AccountTrackerController: {
+						accounts: {
+							'0x0': {
+								balance: 200
+							}
+						}
+					},
+					PreferencesController: {
+						selectedAddress: '0x0',
+						identities: {
+							address: '0x0',
+							name: 'Account 1'
+						}
+					},
+					CurrencyRateController: {
+						conversionRate: 10
+					},
+					NetworkController: {
+						provider: {
+							ticker: 'eth'
+						}
+					}
+				}
+			}
+		};
+
+		const wrapper = shallow(<AccountInfoCard />, {
+			context: { store: mockStore(initialState) }
+		});
+		expect(wrapper.dive()).toMatchSnapshot();
+	});
+});

app/components/UI/ActionView/__snapshots__/index.test.js.snap

@@ -41,8 +41,6 @@ exports[`ActionView should render correctly 1`] = `
   <View
     style={
       Object {
-        "borderTopColor": "#bbc0c5",
-        "borderTopWidth": 1,
         "flex": 0,
         "flexDirection": "row",
         "paddingHorizontal": 24,

app/components/UI/ActionView/index.js

@@ -2,14 +2,12 @@ import React from 'react';
 import StyledButton from '../StyledButton';
 import PropTypes from 'prop-types';
 import { Keyboard, StyleSheet, View, ActivityIndicator, TouchableWithoutFeedback } from 'react-native';
-import { baseStyles, colors } from '../../../styles/common';
+import { baseStyles } from '../../../styles/common';
 import { strings } from '../../../../locales/i18n';
 import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
 
 const styles = StyleSheet.create({
 	actionContainer: {
-		borderTopColor: colors.grey200,
-		borderTopWidth: 1,
 		flex: 0,
 		flexDirection: 'row',
 		paddingVertical: 16,
@@ -69,7 +67,7 @@ export default function ActionView({
 				{showCancelButton && (
 					<StyledButton
 						testID={cancelTestID}
-						type={'cancel'}
+						type={confirmButtonMode === 'sign' ? 'signingCancel' : 'cancel'}
 						onPress={onCancelPress}
 						containerStyle={[styles.button, styles.cancel]}
 						disabled={confirmed}
@@ -124,7 +122,7 @@ ActionView.propTypes = {
 	/**
 	 * Type of button to show as the confirm button
 	 */
-	confirmButtonMode: PropTypes.oneOf(['normal', 'confirm']),
+	confirmButtonMode: PropTypes.oneOf(['normal', 'confirm', 'sign']),
 	/**
 	 * Text to show in the confirm button
 	 */