fix: updated permissions header to be consistent

ui/pages/permissions-connect/permissions-connect.component.js

@@ -131,6 +131,9 @@ export default class PermissionConnect extends Component {
       this.props.permissionsRequest,
     ),
     permissionsApproved: null,
+    origin: this.props.origin,
+    targetSubjectMetadata: this.props.targetSubjectMetadata || {},
+    snapsInstallPrivacyWarningShown: this.props.snapsInstallPrivacyWarningShown,
   };
 
   componentDidMount() {
@@ -153,7 +156,6 @@ export default class PermissionConnect extends Component {
       history.replace(DEFAULT_ROUTE);
       return;
     }
-
     if (history.location.pathname === connectPath && !isRequestingAccounts) {
       switch (requestType) {
         case 'wallet_installSnap':
@@ -175,8 +177,17 @@ export default class PermissionConnect extends Component {
   }
 
   componentDidUpdate(prevProps) {
-    const { permissionsRequest, lastConnectedInfo, origin } = this.props;
-    const { redirecting } = this.state;
+    const { permissionsRequest, lastConnectedInfo, targetSubjectMetadata } =
+      this.props;
+    const { redirecting, origin } = this.state;
+
+    // We cache the last known good targetSubjectMetadata since it may be null when the approval is cleared
+    if (
+      targetSubjectMetadata?.origin &&
+      prevProps.targetSubjectMetadata?.origin !== targetSubjectMetadata?.origin
+    ) {
+      this.setState({ targetSubjectMetadata });
+    }
 
     if (!permissionsRequest && prevProps.permissionsRequest && !redirecting) {
       const accountsLastApprovedTime =
@@ -262,7 +273,7 @@ export default class PermissionConnect extends Component {
   }
 
   renderTopBar(permissionsRequestId) {
-    const { targetSubjectMetadata } = this.props;
+    const { targetSubjectMetadata } = this.state;
     const handleCancelFromHeader = () => {
       this.cancelPermissionsRequest(permissionsRequestId);
     };
@@ -319,12 +330,14 @@ export default class PermissionConnect extends Component {
       rejectPendingApproval,
       setSnapsInstallPrivacyWarningShownStatus,
       approvePermissionsRequest,
-      snapsInstallPrivacyWarningShown,
-      origin,
       history,
     } = this.props;
-    const { selectedAccountAddresses, permissionsApproved, redirecting } =
-      this.state;
+    const {
+      selectedAccountAddresses,
+      permissionsApproved,
+      redirecting,
+      snapsInstallPrivacyWarningShown,
+    } = this.state;
 
     const isRequestingSnap = isSnapId(permissionsRequest?.metadata?.origin);
 
@@ -366,7 +379,7 @@ export default class PermissionConnect extends Component {
                     rejectPermissionsRequest={(requestId) =>
                       this.cancelPermissionsRequest(requestId)
                     }
-                    activeTabOrigin={origin}
+                    activeTabOrigin={this.state.origin}
                     request={permissionsRequest}
                     permissionsRequestId={permissionsRequestId}
                     approveConnection={this.approveConnection}