Transaction Header Component

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

@@ -109,61 +109,14 @@ exports[`SignatureRequest should render correctly 1`] = `
         </Text>
       </View>
     </View>
-    <View
-      style={
+    <Connect(TransactionHeader)
+      currentPageInformation={
         Object {
-          "margin": 10,
+          "title": "title",
+          "url": "url",
         }
       }
-    >
-      <WebsiteIcon
-        style={
-          Object {
-            "borderRadius": 32,
-            "height": 64,
-            "marginTop": 15,
-            "width": 64,
-          }
-        }
-        title="title"
-        url="url"
-        viewStyle={
-          Object {
-            "alignItems": "center",
-            "borderRadius": 10,
-            "justifyContent": "center",
-          }
-        }
-      />
-      <Text
-        style={
-          Object {
-            "color": "#000000",
-            "fontFamily": "CircularStd-Medium",
-            "fontSize": 16,
-            "fontWeight": "600",
-            "padding": 5,
-            "textAlign": "center",
-          }
-        }
-      >
-        title
-      </Text>
-      <Text
-        style={
-          Object {
-            "color": "#000000",
-            "fontFamily": "CircularStd-Medium",
-            "fontSize": 12,
-            "fontWeight": "400",
-            "padding": 5,
-            "textAlign": "center",
-          }
-        }
-      >
-        url
-      </Text>
-    </View>
+    />
     <View
       style={
         Object {

app/components/UI/SignatureRequest/index.js

@@ -5,14 +5,13 @@ import { colors, fontStyles, baseStyles } from '../../../styles/common';
 import { strings } from '../../../../locales/i18n';
 import { connect } from 'react-redux';
 import ActionView from '../ActionView';
+import TransactionHeader from '../TransactionHeader';
 import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
 import { renderFromWei } from '../../../util/number';
 import Identicon from '../Identicon';
-import WebsiteIcon from '../WebsiteIcon';
 import { renderAccountName } from '../../../util/address';
 import Analytics from '../../../core/Analytics';
 import ANALYTICS_EVENT_OPTS from '../../../util/analytics';
-import { getHost } from '../../../util/browser';
 
 const styles = StyleSheet.create({
 	wrapper: {
@@ -66,39 +65,11 @@ const styles = StyleSheet.create({
 		padding: 5,
 		textAlign: 'center'
 	},
-	domainText: {
-		...fontStyles.normal,
-		textAlign: 'center',
-		fontSize: 12,
-		padding: 5,
-		color: colors.black
-	},
-	domainTitle: {
-		...fontStyles.bold,
-		textAlign: 'center',
-		fontSize: 16,
-		padding: 5,
-		color: colors.black
-	},
 	children: {
 		flex: 1,
 		borderTopColor: colors.grey200,
 		borderTopWidth: 1,
 		height: '100%'
-	},
-	domainLogo: {
-		marginTop: 15,
-		width: 64,
-		height: 64,
-		borderRadius: 32
-	},
-	assetLogo: {
-		alignItems: 'center',
-		justifyContent: 'center',
-		borderRadius: 10
-	},
-	domainWrapper: {
-		margin: 10
 	}
 });
 
@@ -135,10 +106,6 @@ class SignatureRequest extends PureComponent {
 		 * Content to display above the action buttons
 		 */
 		children: PropTypes.node,
-		/**
-		 * Object containing domain information for the signature request for EIP712
-		 */
-		domain: PropTypes.object,
 		/**
 		 * Object containing current page title and url
 		 */
@@ -148,7 +115,7 @@ class SignatureRequest extends PureComponent {
 		 */
 		type: PropTypes.string,
 		/**
-		 * String representing the selected the selected network
+		 * String representing the selected network
 		 */
 		networkType: PropTypes.string,
 		/**
@@ -157,24 +124,6 @@ class SignatureRequest extends PureComponent {
 		showWarning: PropTypes.bool
 	};
 
-	renderPageInformation = () => {
-		const {
-			domain,
-			currentPageInformation: { url },
-			currentPageInformation
-		} = this.props;
-		const title = typeof currentPageInformation.title === 'string' ? currentPageInformation.title : getHost(url);
-		const name = domain && typeof domain.name === 'string';
-		return (
-			<View style={styles.domainWrapper}>
-				<WebsiteIcon style={styles.domainLogo} viewStyle={styles.assetLogo} title={title} url={url} />
-				<Text style={styles.domainTitle}>{title}</Text>
-				<Text style={styles.domainText}>{url}</Text>
-				{!!name && <Text style={styles.domainText}>{name}</Text>}
-			</View>
-		);
-	};
-
 	/**
 	 * Calls trackCancelSignature and onCancel callback
 	 */
@@ -229,7 +178,15 @@ class SignatureRequest extends PureComponent {
 	);
 
 	render() {
-		const { children, showWarning, accounts, selectedAddress, identities } = this.props;
+		const {
+			children,
+			showWarning,
+			accounts,
+			selectedAddress,
+			identities,
+			currentPageInformation,
+			type
+		} = this.props;
 		const balance = renderFromWei(accounts[selectedAddress].balance);
 		const accountLabel = renderAccountName(selectedAddress, identities);
 		return (
@@ -256,7 +213,7 @@ class SignatureRequest extends PureComponent {
 							</Text>
 						</View>
 					</View>
-					{this.renderPageInformation()}
+					<TransactionHeader currentPageInformation={currentPageInformation} type={type} />
 					<View style={styles.signingInformation}>
 						{showWarning ? (
 							this.showWarning()

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

@@ -0,0 +1,142 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TransactionHeader should render correctly 1`] = `
+<View
+  style={
+    Object {
+      "alignItems": "center",
+      "justifyContent": "center",
+      "margin": 10,
+    }
+  }
+>
+  <WebsiteIcon
+    style={
+      Object {
+        "borderRadius": 32,
+        "height": 64,
+        "marginTop": 15,
+        "width": 64,
+      }
+    }
+    title="url"
+    url="url"
+    viewStyle={
+      Object {
+        "alignItems": "center",
+        "borderRadius": 10,
+        "justifyContent": "center",
+      }
+    }
+  />
+  <View
+    style={
+      Object {
+        "alignItems": "center",
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "marginTop": 10,
+      }
+    }
+  >
+    <Image
+      resizeMethod="resize"
+      resizeMode="contain"
+      source={
+        Object {
+          "testUri": "../../../app/images/warning-icon.png",
+        }
+      }
+      style={
+        Object {
+          "height": 15,
+          "marginBottom": 3,
+          "marginRight": 5,
+          "width": 15,
+        }
+      }
+    />
+    <Text
+      style={
+        Object {
+          "color": "#000000",
+          "fontFamily": "CircularStd-Medium",
+          "fontSize": 14,
+          "fontWeight": "600",
+          "textAlign": "center",
+        }
+      }
+    >
+      url
+    </Text>
+  </View>
+  <View
+    style={
+      Object {
+        "alignItems": "center",
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "marginBottom": 12,
+      }
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "borderRadius": 2.5,
+            "height": 5,
+            "width": 5,
+          },
+          Object {
+            "backgroundColor": "green",
+          },
+        ]
+      }
+    />
+    <Text
+      style={
+        Object {
+          "color": "#000000",
+          "fontFamily": "CircularStd-Medium",
+          "fontSize": 12,
+          "fontWeight": "400",
+          "padding": 5,
+          "textAlign": "center",
+        }
+      }
+    >
+      Ropsten
+    </Text>
+  </View>
+  <View
+    style={
+      Object {
+        "alignItems": "center",
+        "flex": 1,
+        "justifyContent": "center",
+      }
+    }
+  >
+    <Text
+      style={
+        Object {
+          "borderColor": "#d6d9dc",
+          "borderRadius": 10,
+          "borderWidth": 1,
+          "fontFamily": "CircularStd-Medium",
+          "fontSize": 10,
+          "fontWeight": "300",
+          "height": 20,
+          "paddingLeft": 6,
+          "paddingRight": 6,
+          "paddingTop": 3,
+          "textAlign": "center",
+        }
+      }
+    >
+      functionName
+    </Text>
+  </View>
+</View>
+`;