feat: Add header to watch asset page (#7261)

**Description**
Display the header and origin pill on the wallet_watchAsset confirmation
page.

**Screenshots/Recordings**

*Before*
<img width="406" alt="Screenshot 2023-09-18 at 19 09 47"
src="https://github.com/MetaMask/metamask-mobile/assets/44811/69f6f2f4-0555-4559-af12-ca6426291ca0">

After
<img width="407" alt="Screenshot 2023-09-18 at 19 08 15"
src="https://github.com/MetaMask/metamask-mobile/assets/44811/fdabdcf7-1b77-4c32-888a-2d75cdefab3c">

**Issue**

See #6620 

**Checklist**

* [x] There is a related GitHub issue
* [x] Tests are included if applicable
* [x] Any added code is fully documented

app/components/UI/WatchAssetRequest/index.js

@@ -16,6 +16,9 @@ import useTokenBalance from '../../hooks/useTokenBalance';
 import { useTheme } from '../../../util/theme';
 import NotificationManager from '../../../core/NotificationManager';
 import { selectChainId } from '../../../selectors/networkController';
+import ApproveTransactionHeader from '../ApproveTransactionHeader';
+import { getActiveTabUrl } from '../../../util/transactions';
+import { isEqual } from 'lodash';
 
 const createStyles = (colors) =>
   StyleSheet.create({
@@ -24,7 +27,7 @@ const createStyles = (colors) =>
       borderTopLeftRadius: 10,
       borderTopRightRadius: 10,
       paddingBottom: Device.isIphoneX() ? 20 : 0,
-      minHeight: Device.isIos() ? '50%' : '60%',
+      minHeight: Device.isIos() ? '55%' : '65%',
     },
     title: {
       textAlign: 'center',
@@ -52,6 +55,9 @@ const createStyles = (colors) =>
       flex: 1,
       flexDirection: 'column',
     },
+    approveTransactionHeaderWrapper: {
+      paddingTop: 16,
+    },
     infoTitleWrapper: {
       alignItems: 'center',
     },
@@ -103,6 +109,8 @@ const WatchAssetRequest = ({
     ? strings('transaction.failed')
     : `${renderFromTokenMinimalUnit(balance, asset.decimals)} ${asset.symbol}`;
 
+  const activeTabUrl = useSelector(getActiveTabUrl, isEqual);
+
   const getAnalyticsParams = () => {
     try {
       const url = new URL(currentPageInformation?.url);
@@ -137,8 +145,23 @@ const WatchAssetRequest = ({
     });
   };
 
+  const { address, symbol, decimals, standard } = asset;
+
   return (
     <View style={styles.root}>
+      <View style={styles.approveTransactionHeaderWrapper}>
+        <ApproveTransactionHeader
+          origin={currentPageInformation?.url}
+          url={activeTabUrl}
+          from={suggestedAssetMeta.interactingAddress}
+          asset={{
+            address,
+            symbol,
+            decimals,
+            standard,
+          }}
+        />
+      </View>
       <View style={styles.titleWrapper}>
         <Text style={styles.title} onPress={this.cancelSignature}>
           {strings('watch_asset_request.title')}