added extension changes from snaps branch (#13433)

ui/components/app/permissions-connect-footer/index.scss

@@ -7,7 +7,7 @@
   &__text {
     @include H7;
 
-    color: #6a737d;
+    color: var(--ui-4);
     display: flex;
     margin-top: 10px;
 

ui/pages/confirmation/confirmation.js

@@ -10,17 +10,15 @@ import { useHistory } from 'react-router-dom';
 import { isEqual } from 'lodash';
 import { produce } from 'immer';
 import Box from '../../components/ui/box';
-import Chip from '../../components/ui/chip';
 import MetaMaskTemplateRenderer from '../../components/app/metamask-template-renderer';
-import SiteIcon from '../../components/ui/site-icon';
 import { DEFAULT_ROUTE } from '../../helpers/constants/routes';
-import { stripHttpsScheme } from '../../helpers/utils/util';
 import { useI18nContext } from '../../hooks/useI18nContext';
 import { useOriginMetadata } from '../../hooks/useOriginMetadata';
 import { getUnapprovedTemplatedConfirmations } from '../../selectors';
 import NetworkDisplay from '../../components/app/network-display/network-display';
 import { COLORS, SIZES } from '../../helpers/constants/design-system';
 import Callout from '../../components/ui/callout';
+import SiteOrigin from '../../components/ui/site-origin';
 import ConfirmationFooter from './components/confirmation-footer';
 import { getTemplateValues, getTemplateAlerts } from './templates';
 
@@ -124,7 +122,7 @@ export default function ConfirmationPage() {
     0,
   );
   const pendingConfirmation = pendingConfirmations[currentPendingConfirmation];
-  const originMetadata = useOriginMetadata(pendingConfirmation?.origin);
+  const originMetadata = useOriginMetadata(pendingConfirmation?.origin) || {};
   const [alertState, dismissAlert] = useAlertState(pendingConfirmation);
 
   // Generating templatedValues is potentially expensive, and if done on every render
@@ -185,23 +183,20 @@ export default function ConfirmationPage() {
         </div>
       )}
       <div className="confirmation-page__content">
-        <Box justifyContent="center">
-          <NetworkDisplay
-            colored={false}
-            indicatorSize={SIZES.XS}
-            labelProps={{ color: COLORS.BLACK }}
-          />
-        </Box>
-        <Box justifyContent="center" padding={[1, 4, 4]}>
-          <Chip
-            label={stripHttpsScheme(originMetadata.origin)}
-            leftIcon={
-              <SiteIcon
-                icon={originMetadata.iconUrl}
-                name={originMetadata.hostname}
-                size={32}
-              />
-            }
+        {templatedValues.networkDisplay ? (
+          <Box justifyContent="center">
+            <NetworkDisplay
+              colored={false}
+              indicatorSize={SIZES.XS}
+              labelProps={{ color: COLORS.BLACK }}
+            />
+          </Box>
+        ) : null}
+        <Box justifyContent="center" padding={[4, 4, 4]}>
+          <SiteOrigin
+            siteOrigin={originMetadata.origin}
+            iconSrc={originMetadata.iconUrl}
+            iconName={originMetadata.hostname}
           />
         </Box>
         <MetaMaskTemplateRenderer sections={templatedValues.content} />

ui/pages/confirmation/templates/index.js

@@ -22,6 +22,7 @@ const ALLOWED_TEMPLATE_KEYS = [
   'cancelText',
   'onApprove',
   'onCancel',
+  'networkDisplay',
 ];
 
 /**