From 1998af4d414759bc5faf32fec4ca3713f734760e Mon Sep 17 00:00:00 2001
From: Dan J Miller <danjm.com@gmail.com>
Date: Tue, 11 May 2021 16:25:21 -0230
Subject: [PATCH] Use UrlIcon instead of Identicon on approve screen (#11048)

* Use UrlIcon instead of Identicon on approve screen

* Update ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js

Co-authored-by: Thomas Huang <tmashuang@users.noreply.github.com>

Co-authored-by: Thomas Huang <tmashuang@users.noreply.github.com>
---
 .../confirm-approve-content.component.js               | 10 +++++-----
 .../confirm-approve/confirm-approve-content/index.scss |  5 +++++
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js b/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js
index b12fa2896..8f586d65e 100644
--- a/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js
+++ b/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import Identicon from '../../../components/ui/identicon';
+import UrlIcon from '../../../components/ui/url-icon';
 import { addressSummary } from '../../../helpers/utils/util';
 import { formatCurrency } from '../../../helpers/utils/confirm-tx.util';
 import { ConfirmPageContainerWarning } from '../../../components/app/confirm-page-container/confirm-page-container-content';
@@ -253,11 +253,11 @@ export default class ConfirmApproveContent extends Component {
           </div>
         )}
         <div className="confirm-approve-content__identicon-wrapper">
-          <Identicon
+          <UrlIcon
             className="confirm-approve-content__identicon"
-            diameter={48}
-            address={origin}
-            image={siteImage}
+            fallbackClassName="confirm-approve-content__identicon"
+            name={origin ? new URL(origin).hostname : ''}
+            url={siteImage}
           />
         </div>
         <div className="confirm-approve-content__title">
diff --git a/ui/pages/confirm-approve/confirm-approve-content/index.scss b/ui/pages/confirm-approve/confirm-approve-content/index.scss
index 9122644a4..edfafbebe 100644
--- a/ui/pages/confirm-approve/confirm-approve-content/index.scss
+++ b/ui/pages/confirm-approve/confirm-approve-content/index.scss
@@ -15,6 +15,11 @@
     padding-right: 24px;
   }
 
+  &__identicon {
+    width: 48px;
+    height: 48px;
+  }
+
   &__full-tx-content {
     display: flex;
     flex-flow: column;