Feature/confusables (MetaMask#2464)

* Add confusable warning to SendTo * Highlight confusable characters * Replace zeroWidthPoints characters with ? * Add some notes * Add confusable highlight to confirm screen * Update checkZeroWidth function * Add exclamation mark to Confirm * Add handleConfusables method * Move this into one spot * Add hasZeroWidthPoints * Rename T to Texts * Use reduce * Add homoglyphic tests * Add Modal for confusable on confirm screen * Update snapshot * Use Swaps InfoModal * Increase lineheight on modals * Only display warning if address is not in addressBook * Update snapshot * Make texts lowercase * Remove unused state * Add patch * Display as warning in yelllow when not zero width * Only display confusables warnings if the user is not in addressbook * Add optional chaining for addressBook Co-authored-by: andrepimenta <andrepimenta7@gmail.com>
ScreamingHawk · Apr 29, 2021 · 2b571c5 · 2b571c5
1 parent 4bfc546
commit 2b571c5
Show file tree

Hide file tree

Showing 24 changed files with 407 additions and 34 deletions.
diff --git a/app/components/Base/Text.js b/app/components/Base/Text.js
@@ -16,10 +16,13 @@ const style = StyleSheet.create({
 	right: {
 		textAlign: 'right'
 	},
-	bold: fontStyles.bold,
+	red: {
+		color: colors.red
+	},
 	black: {
 		color: colors.black
 	},
+	bold: fontStyles.bold,
 	blue: {
 		color: colors.blue
 	},
@@ -66,6 +69,7 @@ const Text = ({
 	green,
 	black,
 	blue,
+	red,
 	primary,
 	small,
 	upper,
@@ -87,6 +91,8 @@ const Text = ({
 			green && style.green,
 			black && style.black,
 			blue && style.blue,
+			red && style.red,
+			black && style.black,
 			primary && style.primary,
 			disclaimer && [style.small, style.disclaimer],
 			small && style.small,
@@ -110,6 +116,7 @@ Text.defaultProps = {
 	green: false,
 	black: false,
 	blue: false,
+	red: false,
 	primary: false,
 	disclaimer: false,
 	modal: false,
@@ -150,6 +157,10 @@ Text.propTypes = {
 	 * Makes text blue
 	 */
 	blue: PropTypes.bool,
+	/**
+	 * Makes text red
+	 */
+	red: PropTypes.bool,
 	/**
 	 * Makes text fontPrimary color
 	 */

diff --git a/app/components/UI/AddCustomNetwork/__snapshots__/index.test.js.snap b/app/components/UI/AddCustomNetwork/__snapshots__/index.test.js.snap
@@ -26,6 +26,7 @@ exports[`AddCustomNetwork should render correctly 1`] = `
       modal={false}
       noMargin={true}
       primary={true}
+      red={false}
       reset={false}
       right={false}
       small={false}
@@ -55,6 +56,7 @@ exports[`AddCustomNetwork should render correctly 1`] = `
       modal={false}
       noMargin={true}
       primary={true}
+      red={false}
       reset={false}
       right={false}
       small={false}
@@ -83,6 +85,7 @@ exports[`AddCustomNetwork should render correctly 1`] = `
       modal={false}
       noMargin={true}
       primary={true}
+      red={false}
       reset={false}
       right={false}
       small={false}
@@ -109,6 +112,7 @@ exports[`AddCustomNetwork should render correctly 1`] = `
         modal={false}
         noMargin={true}
         primary={true}
+        red={false}
         reset={false}
         right={false}
         small={false}
@@ -132,6 +136,7 @@ exports[`AddCustomNetwork should render correctly 1`] = `
         noMargin={true}
         onPress={[Function]}
         primary={true}
+        red={false}
         reset={false}
         right={false}
         small={false}
@@ -174,6 +179,7 @@ exports[`AddCustomNetwork should render correctly 1`] = `
           modal={false}
           noMargin={true}
           primary={true}
+          red={false}
           reset={false}
           right={false}
           small={true}
@@ -199,6 +205,7 @@ exports[`AddCustomNetwork should render correctly 1`] = `
           modal={false}
           noMargin={true}
           primary={true}
+          red={false}
           reset={false}
           right={true}
           small={false}
@@ -232,6 +239,7 @@ exports[`AddCustomNetwork should render correctly 1`] = `
           modal={false}
           noMargin={true}
           primary={true}
+          red={false}
           reset={false}
           right={false}
           small={true}
@@ -257,6 +265,7 @@ exports[`AddCustomNetwork should render correctly 1`] = `
           modal={false}
           noMargin={true}
           primary={true}
+          red={false}
           reset={false}
           right={true}
           small={false}
@@ -289,6 +298,7 @@ exports[`AddCustomNetwork should render correctly 1`] = `
           modal={false}
           noMargin={true}
           primary={true}
+          red={false}
           reset={false}
           right={false}
           small={true}
@@ -314,6 +324,7 @@ exports[`AddCustomNetwork should render correctly 1`] = `
           modal={false}
           noMargin={true}
           primary={true}
+          red={false}
           reset={false}
           right={true}
           small={false}
@@ -350,6 +361,7 @@ exports[`AddCustomNetwork should render correctly 1`] = `
           modal={false}
           noMargin={true}
           primary={false}
+          red={false}
           reset={false}
           right={false}
           small={false}

diff --git a/app/components/UI/AssetActionButton/__snapshots__/index.test.js.snap b/app/components/UI/AssetActionButton/__snapshots__/index.test.js.snap
@@ -40,6 +40,7 @@ exports[`AssetActionButtons should render correctly 1`] = `
     modal={false}
     numberOfLines={1}
     primary={false}
+    red={false}
     reset={false}
     right={false}
     small={false}
@@ -97,6 +98,7 @@ exports[`AssetActionButtons should render type add correctly 1`] = `
     modal={false}
     numberOfLines={1}
     primary={false}
+    red={false}
     reset={false}
     right={false}
     small={false}
@@ -154,6 +156,7 @@ exports[`AssetActionButtons should render type information correctly 1`] = `
     modal={false}
     numberOfLines={1}
     primary={false}
+    red={false}
     reset={false}
     right={false}
     small={false}
@@ -211,6 +214,7 @@ exports[`AssetActionButtons should render type receive correctly 1`] = `
     modal={false}
     numberOfLines={1}
     primary={false}
+    red={false}
     reset={false}
     right={false}
     small={false}
@@ -268,6 +272,7 @@ exports[`AssetActionButtons should render type send correctly 1`] = `
     modal={false}
     numberOfLines={1}
     primary={false}
+    red={false}
     reset={false}
     right={false}
     small={false}
@@ -325,6 +330,7 @@ exports[`AssetActionButtons should render type swap correctly 1`] = `
     modal={false}
     numberOfLines={1}
     primary={false}
+    red={false}
     reset={false}
     right={false}
     small={false}

diff --git a/app/components/UI/CustomNonceModal/__snapshots__/index.test.js.snap b/app/components/UI/CustomNonceModal/__snapshots__/index.test.js.snap
@@ -88,6 +88,7 @@ exports[`CustomNonceModal should render correctly 1`] = `
           link={false}
           modal={false}
           primary={false}
+          red={false}
           reset={false}
           right={false}
           small={false}
@@ -150,6 +151,7 @@ exports[`CustomNonceModal should render correctly 1`] = `
           link={false}
           modal={false}
           primary={false}
+          red={false}
           reset={false}
           right={false}
           small={false}
@@ -176,6 +178,7 @@ exports[`CustomNonceModal should render correctly 1`] = `
             link={false}
             modal={false}
             primary={false}
+            red={false}
             reset={false}
             right={false}
             small={false}
@@ -280,6 +283,7 @@ exports[`CustomNonceModal should render correctly 1`] = `
               link={false}
               modal={false}
               primary={false}
+              red={false}
               reset={false}
               right={false}
               small={false}
@@ -309,6 +313,7 @@ exports[`CustomNonceModal should render correctly 1`] = `
             link={false}
             modal={false}
             primary={false}
+            red={false}
             reset={false}
             right={false}
             small={false}
@@ -336,6 +341,7 @@ exports[`CustomNonceModal should render correctly 1`] = `
             link={false}
             modal={false}
             primary={false}
+            red={false}
             reset={false}
             right={false}
             small={false}

diff --git a/app/components/UI/ReceiveRequest/__snapshots__/index.test.js.snap b/app/components/UI/ReceiveRequest/__snapshots__/index.test.js.snap
@@ -28,6 +28,7 @@ exports[`ReceiveRequest should render correctly 1`] = `
       link={false}
       modal={false}
       primary={false}
+      red={false}
       reset={false}
       right={false}
       small={false}
@@ -70,6 +71,7 @@ exports[`ReceiveRequest should render correctly 1`] = `
       link={false}
       modal={false}
       primary={false}
+      red={false}
       reset={false}
       right={false}
       small={false}
@@ -104,6 +106,7 @@ exports[`ReceiveRequest should render correctly 1`] = `
         link={false}
         modal={false}
         primary={false}
+        red={false}
         reset={false}
         right={false}
         small={false}
@@ -126,6 +129,7 @@ exports[`ReceiveRequest should render correctly 1`] = `
         link={false}
         modal={false}
         primary={false}
+        red={false}
         reset={false}
         right={false}
         small={true}

diff --git a/app/components/UI/Swaps/QuotesView.js b/app/components/UI/Swaps/QuotesView.js
@@ -199,6 +199,9 @@ const styles = StyleSheet.create({
 	termsButton: {
 		marginTop: 10,
 		marginBottom: 6
+	},
+	text: {
+		lineHeight: 20
 	}
 });
 
@@ -1303,20 +1306,20 @@ function SwapsQuotesView({
 				isVisible={isUpdateModalVisible}
 				toggleModal={toggleUpdateModal}
 				title={strings('swaps.quotes_update_often')}
-				body={<Text>{strings('swaps.quotes_update_often_text')}</Text>}
+				body={<Text style={styles.text}>{strings('swaps.quotes_update_often_text')}</Text>}
 			/>
 			<InfoModal
 				isVisible={isPriceDifferenceModalVisible}
 				toggleModal={togglePriceDifferenceModal}
 				title={strings('swaps.price_difference_title')}
-				body={<Text>{strings('swaps.price_difference_body')}</Text>}
+				body={<Text style={styles.text}>{strings('swaps.price_difference_body')}</Text>}
 			/>
 			<InfoModal
 				isVisible={isFeeModalVisible}
 				toggleModal={toggleFeeModal}
 				title={strings('swaps.metamask_swap_fee')}
 				body={
-					<Text>
+					<Text style={styles.text}>
 						{strings('swaps.fee_text.get_the')} <Text bold>{strings('swaps.fee_text.best_price')}</Text>{' '}
 						{strings('swaps.fee_text.from_the')} <Text bold>{strings('swaps.fee_text.top_liquidity')}</Text>{' '}
 						{strings('swaps.fee_text.fee_is_applied', {

diff --git a/app/components/UI/Swaps/components/__snapshots__/TokenIcon.test.js.snap b/app/components/UI/Swaps/components/__snapshots__/TokenIcon.test.js.snap
@@ -38,6 +38,7 @@ exports[`TokenIcon component should Render correctly 3`] = `
     link={false}
     modal={false}
     primary={false}
+    red={false}
     reset={false}
     right={false}
     small={false}
@@ -134,6 +135,7 @@ exports[`TokenIcon component should Render correctly 7`] = `
     link={false}
     modal={false}
     primary={false}
+    red={false}
     reset={false}
     right={false}
     small={false}

diff --git a/app/components/UI/Swaps/components/__snapshots__/TokenSelectButton.test.js.snap b/app/components/UI/Swaps/components/__snapshots__/TokenSelectButton.test.js.snap
@@ -34,6 +34,7 @@ exports[`TokenSelectButton component should Render correctly 1`] = `
       link={false}
       modal={false}
       primary={true}
+      red={false}
       reset={false}
       right={false}
       small={false}
@@ -96,6 +97,7 @@ exports[`TokenSelectButton component should Render correctly 2`] = `
       link={false}
       modal={false}
       primary={true}
+      red={false}
       reset={false}
       right={false}
       small={false}
@@ -158,6 +160,7 @@ exports[`TokenSelectButton component should Render correctly 3`] = `
       link={false}
       modal={false}
       primary={true}
+      red={false}
       reset={false}
       right={false}
       small={false}
@@ -221,6 +224,7 @@ exports[`TokenSelectButton component should Render correctly 4`] = `
       link={false}
       modal={false}
       primary={true}
+      red={false}
       reset={false}
       right={false}
       small={false}
@@ -286,6 +290,7 @@ exports[`TokenSelectButton component should Render correctly 5`] = `
       link={false}
       modal={false}
       primary={true}
+      red={false}
       reset={false}
       right={false}
       small={false}