Approve screen header and sub-header improvement (#12360)

app/_locales/en/messages.json

@@ -145,9 +145,9 @@
   "allowExternalExtensionTo": {
     "message": "Allow this external extension to:"
   },
-  "allowOriginSpendToken": {
+  "allowSpendToken": {
-    "message": "Allow $1 to spend your $2?",
+    "message": "Give permission to access your $1?",
-    "description": "$1 is the url of the site and $2 is the symbol of the token they are requesting to spend"
+    "description": "$1 is the symbol of the token that are requesting to spend"
   },
   "allowThisSiteTo": {
     "message": "Allow this site to:"
@@ -2838,8 +2838,7 @@
     "description": "Followed by a link (here) to view token balances"
   },
   "trustSiteApprovePermission": {
-    "message": "Do you trust this site? By granting this permission, you’re allowing $1 to withdraw your $2 and automate transactions for you.",
+    "message": "By granting permission, you are allowing the following $1 to access your funds"
-    "description": "$1 is the url requesting permission and $2 is the symbol of the currency that the request is for"
   },
   "tryAgain": {
     "message": "Try again"

app/_locales/es/messages.json

@@ -130,10 +130,6 @@
   "allowExternalExtensionTo": {
     "message": "Permitir que esta extensión externa haga lo siguiente:"
   },
-  "allowOriginSpendToken": {
-    "message": "¿Permitir que $1 gaste su $2?",
-    "description": "$1 is the url of the site and $2 is the symbol of the token they are requesting to spend"
-  },
   "allowThisSiteTo": {
     "message": "Permitir que este sitio haga lo siguiente:"
   },
@@ -2278,10 +2274,6 @@
     "message": "Tuvimos problemas al cargar los saldos de token. Puede verlos ",
     "description": "Followed by a link (here) to view token balances"
   },
-  "trustSiteApprovePermission": {
-    "message": "¿Este sitio es de confianza? Al conceder este permiso, autoriza que $1 retire su $2 y automatice las transacciones por usted.",
-    "description": "$1 is the url requesting permission and $2 is the symbol of the currency that the request is for"
-  },
   "tryAgain": {
     "message": "Vuelva a intentarlo"
   },

app/_locales/es_419/messages.json

@@ -130,10 +130,6 @@
   "allowExternalExtensionTo": {
     "message": "Permitir que esta extensión externa haga lo siguiente:"
   },
-  "allowOriginSpendToken": {
-    "message": "¿Permitir que $1 gaste su $2?",
-    "description": "$1 is the url of the site and $2 is the symbol of the token they are requesting to spend"
-  },
   "allowThisSiteTo": {
     "message": "Permitir que este sitio haga lo siguiente:"
   },
@@ -2278,10 +2274,6 @@
     "message": "Tuvimos problemas al cargar los saldos de token. Puede verlos ",
     "description": "Followed by a link (here) to view token balances"
   },
-  "trustSiteApprovePermission": {
-    "message": "¿Este sitio es de confianza? Al conceder este permiso, autoriza que $1 retire su $2 y automatice las transacciones por usted.",
-    "description": "$1 is the url requesting permission and $2 is the symbol of the currency that the request is for"
-  },
   "tryAgain": {
     "message": "Vuelva a intentarlo"
   },

app/_locales/hi/messages.json

@@ -130,10 +130,6 @@
   "allowExternalExtensionTo": {
     "message": "इस बाहरी एक्सटेंशन को इसकी अनुमति दें:"
   },
-  "allowOriginSpendToken": {
-    "message": "$1 को आपका $2 खर्च करने की अनुमति दें?",
-    "description": "$1 is the url of the site and $2 is the symbol of the token they are requesting to spend"
-  },
   "allowThisSiteTo": {
     "message": "इस साइट को इसकी अनुमति दें:"
   },
@@ -2278,10 +2274,6 @@
     "message": "हमें आपके टोकन की शेषराशि लोड करने में परेशानी हुई। आप उन्हें देख सकते हैं ",
     "description": "Followed by a link (here) to view token balances"
   },
-  "trustSiteApprovePermission": {
-    "message": "क्या आप इस साइट पर भरोसा करते हैं? यह अनुमति देकर, आप $1 को अपने $2 की निकासी करने और आपके लिए लेनदेनों को स्वचालित करने की अनुमति दे रहे हैं।",
-    "description": "$1 is the url requesting permission and $2 is the symbol of the currency that the request is for"
-  },
   "tryAgain": {
     "message": "पुनः प्रयास करें"
   },

app/_locales/id/messages.json

@@ -130,10 +130,6 @@
   "allowExternalExtensionTo": {
     "message": "Izinkan ekstensi eksternal ini untuk:"
   },
-  "allowOriginSpendToken": {
-    "message": "Izinkan $1 untuk menggunakan $2 Anda?",
-    "description": "$1 is the url of the site and $2 is the symbol of the token they are requesting to spend"
-  },
   "allowThisSiteTo": {
     "message": "Izinkan situs ini untuk:"
   },
@@ -2278,10 +2274,6 @@
     "message": "Kami mengalami masalah saat memuat saldo token Anda. Anda dapat melihatnya ",
     "description": "Followed by a link (here) to view token balances"
   },
-  "trustSiteApprovePermission": {
-    "message": "Anda percaya situs ini? Dengan memberikan izin ini, Anda mengizinkan $1 untuk menarik $2 Anda dan mengotomatiskan transaksi untuk Anda.",
-    "description": "$1 is the url requesting permission and $2 is the symbol of the currency that the request is for"
-  },
   "tryAgain": {
     "message": "Coba lagi"
   },

app/_locales/it/messages.json

@@ -103,10 +103,6 @@
   "allowExternalExtensionTo": {
     "message": "Permetti a questa estensione di:"
   },
-  "allowOriginSpendToken": {
-    "message": "Vuoi consentire a $1 di spendere $2?",
-    "description": "$1 is the url of the site and $2 is the symbol of the token they are requesting to spend"
-  },
   "allowThisSiteTo": {
     "message": "Permetti a questo sito di:"
   },
@@ -1864,10 +1860,6 @@
     "message": "Abbiamo avuto un problema a caricare il bilancio dei tuoi token. Puoi vederlo ",
     "description": "Followed by a link (here) to view token balances"
   },
-  "trustSiteApprovePermission": {
-    "message": "Ti fidi di questo sito? Autorizzandolo, stai consentendo a $1 di ritirare i tuoi $2 e automatizzare transazioni per te.",
-    "description": "$1 is the url requesting permission and $2 is the symbol of the currency that the request is for"
-  },
   "tryAgain": {
     "message": "Prova di nuovo"
   },

app/_locales/ja/messages.json

@@ -130,10 +130,6 @@
   "allowExternalExtensionTo": {
     "message": "この外部拡張機能に次の操作を許可します"
   },
-  "allowOriginSpendToken": {
-    "message": "$1 に $2 の使用を許可しますか?",
-    "description": "$1 is the url of the site and $2 is the symbol of the token they are requesting to spend"
-  },
   "allowThisSiteTo": {
     "message": "このサイトに次の操作を許可します"
   },
@@ -2278,10 +2274,6 @@
     "message": "トークン バランスのロードに問題があります。トークン バランスを表示できます",
     "description": "Followed by a link (here) to view token balances"
   },
-  "trustSiteApprovePermission": {
-    "message": "このサイトを信頼しますか?許可を与えることにより、$1 は $2 を取り消して、トランザクションを自動化できます。",
-    "description": "$1 is the url requesting permission and $2 is the symbol of the currency that the request is for"
-  },
   "tryAgain": {
     "message": "再試行"
   },

app/_locales/ko/messages.json

@@ -130,10 +130,6 @@
   "allowExternalExtensionTo": {
     "message": "이 외부 확장을 통해 다음을 하도록 허용:"
   },
-  "allowOriginSpendToken": {
-    "message": "$1에서 $2을(를) 지출하도록 허용하시겠어요?",
-    "description": "$1 is the url of the site and $2 is the symbol of the token they are requesting to spend"
-  },
   "allowThisSiteTo": {
     "message": "이 사이트에서 다음을 하도록 허용:"
   },
@@ -2278,10 +2274,6 @@
     "message": "토큰 잔액을 로드하는 도중 문제가 발생했습니다. 다음에서 잔액을 확인하세요. ",
     "description": "Followed by a link (here) to view token balances"
   },
-  "trustSiteApprovePermission": {
-    "message": "이 사이트를 신뢰하시나요? 이 권한을 부여하면 $1에서 귀하의 $2을(를) 인출하고 거래를 자동으로 처리하게 됩니다.",
-    "description": "$1 is the url requesting permission and $2 is the symbol of the currency that the request is for"
-  },
   "tryAgain": {
     "message": "다시 시도"
   },

app/_locales/ph/messages.json

@@ -130,10 +130,6 @@
   "allowExternalExtensionTo": {
     "message": "Payagan ang external extension na ito na:"
   },
-  "allowOriginSpendToken": {
-    "message": "Payagan ang $1 na gastusin ang iyong $2?",
-    "description": "$1 is the url of the site and $2 is the symbol of the token they are requesting to spend"
-  },
   "allowThisSiteTo": {
     "message": "Payagan ang site na ito na:"
   },
@@ -2278,10 +2274,6 @@
     "message": "Nagkaproblema kami sa pag-load ng mga balanse ng iyong token. Puwede mong tingnan ang mga iyon ",
     "description": "Followed by a link (here) to view token balances"
   },
-  "trustSiteApprovePermission": {
-    "message": "Pinagkakatiwalaan mo ba ang site na ito? Sa pamamagitan ng pagbibigay ng pahintulot na ito, pinapayagan mo ang $1 na i-withdraw ang iyong $2 at i-automate ang mga transaksyon para sa iyo.",
-    "description": "$1 is the url requesting permission and $2 is the symbol of the currency that the request is for"
-  },
   "tryAgain": {
     "message": "Subukan ulit"
   },

app/_locales/pt_BR/messages.json

@@ -130,10 +130,6 @@
   "allowExternalExtensionTo": {
     "message": "Permitir que esta extensão externa:"
   },
-  "allowOriginSpendToken": {
-    "message": "Permitir que $1 gaste seus(suas) $2?",
-    "description": "$1 is the url of the site and $2 is the symbol of the token they are requesting to spend"
-  },
   "allowThisSiteTo": {
     "message": "Permitir que este site:"
   },
@@ -2278,10 +2274,6 @@
     "message": "Tivemos dificuldade para carregar os saldos do seu token. Você pode exibi-los ",
     "description": "Followed by a link (here) to view token balances"
   },
-  "trustSiteApprovePermission": {
-    "message": "Você confia neste site? Ao conceder esta permissão, você está permitindo que $1 saque seus(suas) $2 e automatize as transações por você.",
-    "description": "$1 is the url requesting permission and $2 is the symbol of the currency that the request is for"
-  },
   "tryAgain": {
     "message": "Tente novamente"
   },

app/_locales/ru/messages.json

@@ -130,10 +130,6 @@
   "allowExternalExtensionTo": {
     "message": "Разрешить этому внешнему расширению:"
   },
-  "allowOriginSpendToken": {
-    "message": "Разрешить $1 потратить ваши $2?",
-    "description": "$1 is the url of the site and $2 is the symbol of the token they are requesting to spend"
-  },
   "allowThisSiteTo": {
     "message": "Разрешить этому сайту:"
   },
@@ -2278,10 +2274,6 @@
     "message": "У нас возникли проблемы с загрузкой вашего баланса токенов. Вы можете просмотреть их ",
     "description": "Followed by a link (here) to view token balances"
   },
-  "trustSiteApprovePermission": {
-    "message": "Вы доверяете этому сайту? Предоставляя это разрешение, вы разрешаете $1 вывести ваши $2 и автоматизировать транзакции для вас.",
-    "description": "$1 is the url requesting permission and $2 is the symbol of the currency that the request is for"
-  },
   "tryAgain": {
     "message": "Попробуйте еще раз"
   },

app/_locales/tl/messages.json

@@ -97,10 +97,6 @@
   "allowExternalExtensionTo": {
     "message": "Payagan ang external extension na ito na:"
   },
-  "allowOriginSpendToken": {
-    "message": "Payagan ang $1 na gastusin ang iyong $2?",
-    "description": "$1 is the url of the site and $2 is the symbol of the token they are requesting to spend"
-  },
   "allowThisSiteTo": {
     "message": "Payagan ang site na ito na:"
   },
@@ -1820,10 +1816,6 @@
     "message": "Nagkaproblema kami sa pag-load ng mga balanse ng iyong token. Puwede mong tingnan ang mga iyon ",
     "description": "Followed by a link (here) to view token balances"
   },
-  "trustSiteApprovePermission": {
-    "message": "Pinagkakatiwalaan mo ba ang site na ito? Sa pamamagitan ng pagbibigay ng pahintulot na ito, pinapayagan mo ang $1 na i-withdraw ang iyong $2 at i-automate ang mga transaksyon para sa iyo.",
-    "description": "$1 is the url requesting permission and $2 is the symbol of the currency that the request is for"
-  },
   "tryAgain": {
     "message": "Subukan ulit"
   },

app/_locales/vi/messages.json

@@ -130,10 +130,6 @@
   "allowExternalExtensionTo": {
     "message": "Cho phép tiện ích bên ngoài này:"
   },
-  "allowOriginSpendToken": {
-    "message": "Cho phép $1 chi tiêu $2 của bạn?",
-    "description": "$1 is the url of the site and $2 is the symbol of the token they are requesting to spend"
-  },
   "allowThisSiteTo": {
     "message": "Cho phép trang web này:"
   },
@@ -2278,10 +2274,6 @@
     "message": "Chúng tôi đã gặp phải vấn đề khi tải số dư token của bạn. Bạn có thể xem số dư ",
     "description": "Followed by a link (here) to view token balances"
   },
-  "trustSiteApprovePermission": {
-    "message": "Bạn có tin tưởng trang web này không? Bằng việc cấp quyền này, bạn sẽ cho phép $1 rút $2 của bạn và tự động thực hiện các giao dịch cho bạn.",
-    "description": "$1 is the url requesting permission and $2 is the symbol of the currency that the request is for"
-  },
   "tryAgain": {
     "message": "Thử lại"
   },

app/_locales/zh_CN/messages.json

@@ -103,10 +103,6 @@
   "allowExternalExtensionTo": {
     "message": "允许这个外部扩展到："
   },
-  "allowOriginSpendToken": {
-    "message": "允许 $1 使用您的 $2?",
-    "description": "$1 is the url of the site and $2 is the symbol of the token they are requesting to spend"
-  },
   "allowThisSiteTo": {
     "message": "允许本网站："
   },
@@ -1844,10 +1840,6 @@
     "message": "我们无法加载您的代币余额。您可以查看它们",
     "description": "Followed by a link (here) to view token balances"
   },
-  "trustSiteApprovePermission": {
-    "message": "您信任这个网站吗？授权即表示您允许 $1 提取您的 $2，并为您自动进行交易。",
-    "description": "$1 is the url requesting permission and $2 is the symbol of the currency that the request is for"
-  },
   "tryAgain": {
     "message": "重试"
   },

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

@@ -1,19 +1,29 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
+import copyToClipboard from 'copy-to-clipboard';
+import { getTokenTrackerLink, getAccountLink } from '@metamask/etherscan-link';
 import UrlIcon from '../../../components/ui/url-icon';
 import { addressSummary, getURLHostName } from '../../../helpers/utils/util';
 import { formatCurrency } from '../../../helpers/utils/confirm-tx.util';
-import { ConfirmPageContainerWarning } from '../../../components/app/confirm-page-container/confirm-page-container-content';
+import { isBeta } from '../../../helpers/utils/build-types';
+import { ellipsify } from '../../send/send.utils';
 import Typography from '../../../components/ui/typography';
+import Box from '../../../components/ui/box';
+import Button from '../../../components/ui/button';
+import MetaFoxLogo from '../../../components/ui/metafox-logo';
+import Identicon from '../../../components/ui/identicon';
+import CopyIcon from '../../../components/ui/icon/copy-icon.component';
 import {
   TYPOGRAPHY,
   FONT_WEIGHT,
   BLOCK_SIZES,
   JUSTIFY_CONTENT,
+  COLORS,
+  DISPLAY,
 } from '../../../helpers/constants/design-system';
-import Box from '../../../components/ui/box';
+import { SECOND } from '../../../../shared/constants/time';
-import Button from '../../../components/ui/button';
+import { ConfirmPageContainerWarning } from '../../../components/app/confirm-page-container/confirm-page-container-content';
 import LedgerInstructionField from '../../../components/app/ledger-instruction-field';
 
 export default class ConfirmApproveContent extends Component {
@@ -47,10 +57,15 @@ export default class ConfirmApproveContent extends Component {
     warning: PropTypes.string,
     txData: PropTypes.object,
     ledgerWalletRequiredHidConnection: PropTypes.bool,
+    tokenImage: PropTypes.string,
+    chainId: PropTypes.string,
+    rpcPrefs: PropTypes.object,
+    isContract: PropTypes.bool,
   };
 
   state = {
     showFullTxDetails: false,
+    copied: false,
   };
 
   renderApproveContentCard({
@@ -243,6 +258,11 @@ export default class ConfirmApproveContent extends Component {
       warning,
       txData,
       ledgerWalletRequiredHidConnection,
+      tokenImage,
+      toAddress,
+      chainId,
+      rpcPrefs,
+      isContract,
     } = this.props;
     const { showFullTxDetails } = this.state;
 
@@ -257,20 +277,104 @@ export default class ConfirmApproveContent extends Component {
             <ConfirmPageContainerWarning warning={warning} />
           </div>
         )}
-        <div className="confirm-approve-content__identicon-wrapper">
+        <Box
-          <UrlIcon
+          display={DISPLAY.FLEX}
-            className="confirm-approve-content__identicon"
+          className="confirm-approve-content__icon-display-content"
-            fallbackClassName="confirm-approve-content__identicon"
+        >
-            name={getURLHostName(origin)}
+          <Box className="confirm-approve-content__metafoxlogo">
-            url={siteImage}
+            <MetaFoxLogo useDark={isBeta()} />
-          />
+          </Box>
-        </div>
+          <Box
+            display={DISPLAY.FLEX}
+            className="confirm-approve-content__siteinfo"
+          >
+            <UrlIcon
+              className="confirm-approve-content__siteimage-identicon"
+              fallbackClassName="confirm-approve-content__siteimage-identicon"
+              name={getURLHostName(origin)}
+              url={siteImage}
+            />
+            <Typography
+              variant={TYPOGRAPHY.H6}
+              fontWeight={FONT_WEIGHT.NORMAL}
+              color={COLORS.UI4}
+              boxProps={{ marginLeft: 1, marginTop: 2 }}
+            >
+              {getURLHostName(origin)}
+            </Typography>
+          </Box>
+        </Box>
         <div className="confirm-approve-content__title">
-          {t('allowOriginSpendToken', [origin, tokenSymbol])}
+          {t('allowSpendToken', [tokenSymbol])}
         </div>
         <div className="confirm-approve-content__description">
-          {t('trustSiteApprovePermission', [origin, tokenSymbol])}
+          {t('trustSiteApprovePermission', [
+            isContract
+              ? t('contract').toLowerCase()
+              : t('account').toLowerCase(),
+          ])}
         </div>
+        <Box className="confirm-approve-content__address-display-content">
+          <Box display={DISPLAY.FLEX}>
+            <Identicon
+              className="confirm-approve-content__address-identicon"
+              diameter={20}
+              address={toAddress}
+              image={tokenImage}
+            />
+            <Typography
+              variant={TYPOGRAPHY.H6}
+              fontWeight={FONT_WEIGHT.NORMAL}
+              color={COLORS.UI4}
+              boxProps={{ marginBottom: 0 }}
+            >
+              {ellipsify(toAddress)}
+            </Typography>
+            <Button
+              type="link"
+              className="confirm-approve-content__copy-address"
+              onClick={() => {
+                this.setState({ copied: true });
+                this.copyTimeout = setTimeout(
+                  () => this.setState({ copied: false }),
+                  SECOND * 3,
+                );
+                copyToClipboard(toAddress);
+              }}
+              title={
+                this.state.copied
+                  ? t('copiedExclamation')
+                  : t('copyToClipboard')
+              }
+            >
+              <CopyIcon size={9} color="#6a737d" />
+            </Button>
+            <Button
+              type="link"
+              className="confirm-approve-content__etherscan-link"
+              onClick={() => {
+                const blockExplorerTokenLink = isContract
+                  ? getTokenTrackerLink(toAddress, chainId, null, null, {
+                      blockExplorerUrl: rpcPrefs?.blockExplorerUrl ?? null,
+                    })
+                  : getAccountLink(
+                      toAddress,
+                      chainId,
+                      { blockExplorerUrl: rpcPrefs?.blockExplorerUrl ?? null },
+                      null,
+                    );
+                global.platform.openTab({
+                  url: blockExplorerTokenLink,
+                });
+              }}
+              target="_blank"
+              rel="noopener noreferrer"
+              title={t('etherscanView')}
+            >
+              <img src="images/popout.svg" alt={t('etherscanView')} />
+            </Button>
+          </Box>
+        </Box>
         <div className="confirm-approve-content__edit-submission-button-container">
           <div
             className="confirm-approve-content__medium-link-text cursor-pointer"

ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.test.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import configureMockStore from 'redux-mock-store';
+import { fireEvent } from '@testing-library/react';
+import { renderWithProvider } from '../../../../test/jest/rendering';
+import ConfirmApproveContent from '.';
+
+const renderComponent = (props) => {
+  const store = configureMockStore([])({ metamask: {} });
+  return renderWithProvider(<ConfirmApproveContent {...props} />, store);
+};
+
+const props = {
+  decimals: 16,
+  siteImage: 'https://metamask.github.io/test-dapp/metamask-fox.svg',
+  customTokenAmount: '10',
+  tokenAmount: '10',
+  origin: 'https://metamask.github.io/test-dapp/',
+  tokenSymbol: 'TST',
+  tokenImage: 'https://metamask.github.io/test-dapp/metamask-fox.svg',
+  tokenBalance: '15',
+  showCustomizeGasModal: jest.fn(),
+  showEditApprovalPermissionModal: jest.fn(),
+  data:
+    '0x095ea7b30000000000000000000000009bc5baf874d2da8d216ae9f137804184ee5afef40000000000000000000000000000000000000000000000000000000000011170',
+  toAddress: '0x9bc5baf874d2da8d216ae9f137804184ee5afef4',
+  currentCurrency: 'TST',
+  nativeCurrency: 'ETH',
+  ethTransactionTotal: '20',
+  fiatTransactionTotal: '10',
+  useNonceField: true,
+  nextNonce: 1,
+  customNonceValue: '2',
+  showCustomizeNonceModal: jest.fn(),
+  chainId: '1337',
+  rpcPrefs: {},
+  isContract: true,
+};
+
+describe('ConfirmApproveContent Component', () => {
+  it('should render Confirm approve page correctly', () => {
+    const { queryByText, getByText, getAllByText } = renderComponent(props);
+    expect(queryByText('metamask.github.io')).toBeInTheDocument();
+    expect(
+      queryByText('Give permission to access your TST?'),
+    ).toBeInTheDocument();
+    expect(
+      queryByText(
+        'By granting permission, you are allowing the following contract to access your funds',
+      ),
+    ).toBeInTheDocument();
+    expect(queryByText('0x9bc5...fef4')).toBeInTheDocument();
+    expect(queryByText('View full transaction details')).toBeInTheDocument();
+
+    expect(queryByText('Edit Permission')).toBeInTheDocument();
+    const editPermission = getByText('Edit Permission');
+    fireEvent.click(editPermission);
+    expect(props.showEditApprovalPermissionModal).toHaveBeenCalledTimes(1);
+
+    const editButtons = getAllByText('Edit');
+
+    expect(queryByText('Transaction Fee')).toBeInTheDocument();
+    expect(
+      queryByText('A fee is associated with this request.'),
+    ).toBeInTheDocument();
+    expect(queryByText(`${props.ethTransactionTotal} ETH`)).toBeInTheDocument();
+    fireEvent.click(editButtons[0]);
+    expect(props.showCustomizeGasModal).toHaveBeenCalledTimes(1);
+
+    expect(queryByText('Nonce')).toBeInTheDocument();
+    expect(queryByText('2')).toBeInTheDocument();
+    fireEvent.click(editButtons[1]);
+    expect(props.showCustomizeNonceModal).toHaveBeenCalledTimes(1);
+  });
+});

ui/pages/confirm-approve/confirm-approve-content/index.scss

@@ -5,18 +5,67 @@
   width: 100%;
   font-style: normal;
 
-  &__identicon-wrapper {
+  &__icon-display-content {
     display: flex;
-    width: 100%;
+    height: 51px;
-    justify-content: center;
+    width: 65%;
-    margin-top: 22px;
+    margin-top: 16px;
-    padding-left: 24px;
+    padding: 12px 12px 14px 12px;
-    padding-right: 24px;
+    border: 1px solid $ui-1;
+    box-sizing: border-box;
+    border-radius: 100px;
+    align-items: center;
+    position: relative;
   }
 
-  &__identicon {
+  &__metafoxlogo,
-    width: 48px;
+  &__siteinfo {
-    height: 48px;
+    position: absolute;
+  }
+
+  &__siteinfo {
+    left: 39px;
+  }
+
+  &__address-display-content {
+    display: flex;
+    height: 27px;
+    width: 50%;
+    padding: 12px 12px 14px 12px;
+    background-color: $ui-1;
+    border-radius: 100px;
+    align-items: center;
+  }
+
+  &__siteimage-identicon {
+    width: 33px;
+    height: 33px;
+    border: solid #fff;
+  }
+
+  &__address-identicon {
+    margin: 4px 8px 0 4px;
+  }
+
+  &__copy-address,
+  &__etherscan-link {
+    padding: 0 0 0 8px;
+  }
+
+  &__etherscan-link {
+    img {
+      width: 9px;
+      height: 9px;
+    }
+  }
+
+  .app-header__logo-container {
+    margin-right: 0;
+  }
+
+  .app-header__metafox-logo--icon {
+    height: 33px;
+    width: 33px;
   }
 
   &__full-tx-content {

ui/pages/confirm-approve/confirm-approve.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState, useCallback } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useParams } from 'react-router-dom';
 import ConfirmTransactionBase from '../confirm-transaction-base';
@@ -14,6 +14,7 @@ import {
   getTokenAddressParam,
   getTokenValueParam,
 } from '../../helpers/utils/token-util';
+import { readAddressAsContract } from '../../../shared/modules/contract-utils';
 import { useTokenTracker } from '../../hooks/useTokenTracker';
 import { getTokens, getNativeCurrency } from '../../ducks/metamask/metamask';
 import {
@@ -25,6 +26,8 @@ import {
   getCustomNonceValue,
   getNextSuggestedNonce,
   doesAddressRequireLedgerHidConnection,
+  getCurrentChainId,
+  getRpcPrefsForCurrentProvider,
 } from '../../selectors';
 
 import { useApproveTransaction } from '../../hooks/useApproveTransaction';
@@ -58,6 +61,8 @@ export default function ConfirmApprove() {
   const useNonceField = useSelector(getUseNonceField);
   const nextNonce = useSelector(getNextSuggestedNonce);
   const customNonceValue = useSelector(getCustomNonceValue);
+  const chainId = useSelector(getCurrentChainId);
+  const rpcPrefs = useSelector(getRpcPrefsForCurrentProvider);
 
   const ledgerWalletRequiredHidConnection = useSelector(
     doesAddressRequireLedgerHidConnectionByFromAddress(from),
@@ -83,6 +88,7 @@ export default function ConfirmApprove() {
 
   const tokenSymbol = currentToken?.symbol;
   const decimals = Number(currentToken?.decimals);
+  const tokenImage = currentToken?.image;
   const tokenData = getTokenData(data);
   const tokenValue = getTokenValueParam(tokenData);
   const toAddress = getTokenAddressParam(tokenData);
@@ -125,6 +131,19 @@ export default function ConfirmApprove() {
     prevCustomNonce.current = customNonceValue;
     prevNonce.current = nextNonce;
   }, [customNonceValue, nextNonce]);
+
+  const [isContract, setIsContract] = useState(false);
+  const checkIfContract = useCallback(async () => {
+    const { isContractAddress } = await readAddressAsContract(
+      global.eth,
+      toAddress,
+    );
+    setIsContract(isContractAddress);
+  }, [setIsContract, toAddress]);
+  useEffect(() => {
+    checkIfContract();
+  }, [checkIfContract]);
+
   const { origin } = transaction;
   const formattedOrigin = origin
     ? origin[0].toUpperCase() + origin.slice(1)
@@ -158,6 +177,7 @@ export default function ConfirmApprove() {
             tokenAmount={tokenAmount}
             origin={formattedOrigin}
             tokenSymbol={tokenSymbol}
+            tokenImage={tokenImage}
             tokenBalance={tokenBalance}
             showCustomizeGasModal={approveTransaction}
             showEditApprovalPermissionModal={({
@@ -222,6 +242,9 @@ export default function ConfirmApprove() {
             ledgerWalletRequiredHidConnection={
               ledgerWalletRequiredHidConnection
             }
+            chainId={chainId}
+            rpcPrefs={rpcPrefs}
+            isContract={isContract}
           />
           {showCustomizeGasPopover && (
             <EditGasPopover