Sig request design fixed (#1493)

* new folder for AccountInfoCard component, remove signature_request.title from message, personal & typed sign components, remove redundant style

* SignatureRequest: remove account information from top, proptypes, props, styles, imports

* SignatureRequest: change signing message to 'Sign this message?', make bold and larger

* remove keyboard aware scroll view

* Add AccountInfoCard component to SignatureRequest

* AccountInfoCard: implement proper styling

* AccountInfoCard: use renderShortAddress, fix styles, use conversionRate to display $ amount

* ActionView: add isSigning prop, disables scroll when true, SignatureRequest: pass isSigning=true to ActionView

* AccountInfoCard: remove top level view

* SignatureRequest: apply styles & layout, add website + arrow icons

* Signing components: update styling, rename informationRow --> informationCol

* remove message style

* TypedSign: put back message style, add messageWrapper style, ensure data fits in box and hides overflow

* AccountInfoCard: add snapshot test

* update snapshots

* styling of 'sign this message'

* update snapshot

* update snapshot

* SignatureRequest: Always render arrow if children coming from TypedSign

* SignatureRequest: change to regular component with state to show expanded message content, wrap touchableWithoutFeedback around the message children and move rendering to renderActionViewChildren, tapping the message currently does nothing

* fix dapp icon style, fix render inf loop

* remove textwrap for typed sign. Now renders properly for V1, V3 & V4

* AccountInfoCard: fix paddings, identicon style, use widths instead of flex, float address to left, fix font weights

* TypedSign: use width instead of flex

* SignatureRequest: remove website icon wrapper, fix arrow positioning, remove assetLogo style

* temp disable warning to match style, ensure message fits within box

* PersonalSign: create message wrapper, ensure message fits within box

* Message & Personal Sign: use ellipses mode for text wrapper, drop messageWrapper styles

* SignatureRequest: remove shouldRenderArrow, add shouldRenderArrow prop

* MessageSign: change to stateful component, add renderArrow state, decides if should render arrow upon text component layout, then adjusts the text accordingly

* PersonalSign: change to stateful component, add renderArrow state, decides if should render arrow upon text component layout, then adjusts the text accordingly

* TypedSign: shouldRenderArrow always passes down as true. Will never be a situation where an entire typed message fits in the box

* SignatureRequest: change back to pure component, change handleMessageTap into prop

* change handleMessageTap to toggleExpandedMessage

* TypedSign: implement message expansion and retraction

* modify message, add message_from

* new ExpandedMessage component, rendered by typed, personal & regular message components

* TypedSign: use ExpandedMessage component

* ExpandedMessage: test

* SignatureRequest: add renderArrow prop, make box not expandable if false

* MessageSign: implement message expanding and retracting

* PersonalSign: implement message expand & retract

* ExpandedMessage: add mock fns, update all snapshots

* ActionView: get rid of top border

* new button styles

* signing components: ensure a top left and right rounded border

* change Cancel & Sign to lowercase

* snapshot update

* adjust style for android

* use unique button style for signing components, fix percentage in stylesheet

* change isSigning prop to noScroll

* snapshot update

* update more snapshots

* Signing components: revert to pure component

* AccountInfoCard: use weiToFiat & hexToBn helpers to display fiat value, add currentCurrency prop

* Signing components: shift renderRootView() contents into render()

* update snapshot

* AccountInfoCard, SignatureRequest: fix paddings per design

* AccountInfoCard: remove bottom margin

* TransactionHeader: remove margins, use padding

* MessageSign: larger min height, showWarning prop

* WarningMessage: use flexstart alignment for bell icon

* locales: change eth_sign_warning

* WarningMessage: add object as secondary prop type for warning message

* SignatureRequest: use WarningMessage component, fix paddings, use renderWarning as prop for WarningMessage

* snapshot update yo

* SignatureRequest: move AccountInfoCard ontop of message children

* snapshot update

* AccountInfoCard: remove width

* ActionView: remove no scroll - small devices

* Signing Components: remove root style, move to SignatureRequest

* SignatureRequest: remove style redundancies, add in root style

* SignatureRequest: fix height of modal based on screen height

* ExpandedMessage: fix styling, move scrollview to signing components renderMessage

* ExpandedMessage: Put the scroll back

* PersonalSign: remove expandedMessage text wrapper

* SignatureRequest: fix up styling, add more overhead (reduced from signing components)

* Signing components: reduce view hierarchy, move to SignatureRequest

* Locales: add Read more to signature_request

* AccountInfoCard: add operation prop, if operation is signing, only display the account name and address

* TypedSign: add shouldTruncateMessage & truncateMessage in state

* PersonalSign: remove console log

* Signing components: change renderArrow to truncateMessage

* Nav/Main: add showExpandedMessage to state, add toggleExpandedMessage, configure expanded signing modal to go back on android back button press, pass down props to signing components

* Signing Components: move showExpandedMessage out of state, move out toggleExpandedMessage

* TypedSign: create different messageWrapper height for iOS & Android, fix text clipping mid-line

* ExpandedMessage: fix scrollview

* snapshot update

* AccountInfoCard: use getTicker

* Signing components: change margin bottom from 5 to 4

* Device: new getMediumDevice, SignatureRequest: use getMediumDevice

* ActionView, styledButtonStyles: add cancel button style for signing components

* snapshot update

* SignatureRequest: fix the domain logo not being a circle

* update snapshot

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
 	 */