From 103affaddec2e1bddd011f869f5112951c0457ba Mon Sep 17 00:00:00 2001
From: OGPoyraz <omergoktugpoyraz@gmail.com>
Date: Wed, 13 Nov 2024 12:19:45 +0100
Subject: [PATCH 01/15] Add firstTimeInteraction feat

---
 app/_locales/en/messages.json                 |   6 +
 package.json                                  |   3 +-
 .../info/row/__snapshots__/row.test.tsx.snap  |   4 +-
 .../app/confirm/info/row/constants.ts         |   1 +
 ui/components/app/confirm/info/row/row.tsx    |   2 +-
 .../transaction-flow-section.tsx              |  59 +++++++--
 .../useFirstTimeInteractionAlert.test.ts      | 117 ++++++++++++++++++
 .../useFirstTimeInteractionAlert.ts           |  34 +++++
 .../hooks/useConfirmationAlerts.ts            |   4 +
 yarn.lock                                     |  74 ++++++-----
 10 files changed, 259 insertions(+), 45 deletions(-)
 create mode 100644 ui/pages/confirmations/hooks/alerts/transactions/useFirstTimeInteractionAlert.test.ts
 create mode 100644 ui/pages/confirmations/hooks/alerts/transactions/useFirstTimeInteractionAlert.ts

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 610ddba3a4dd..0bbbf9ec1d99 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -2091,6 +2091,12 @@
     "message": "File import not working? Click here!",
     "description": "Helps user import their account from a JSON file"
   },
+  "firstTimeInteractionReason": {
+    "message": "You're interacting with this address for the first time. Make sure that it's correct before you continue."
+  },
+  "firstTimeInteractionTitle": {
+    "message": "1st interaction"
+  },
   "flaskWelcomeUninstall": {
     "message": "you should uninstall this extension",
     "description": "This request is shown on the Flask Welcome screen. It is intended for non-developers, and will be bolded."
diff --git a/package.json b/package.json
index 6c9811cb3ed6..22101990dd5c 100644
--- a/package.json
+++ b/package.json
@@ -256,7 +256,8 @@
     "@ledgerhq/evm-tools/axios": "^0.28.0",
     "@ledgerhq/hw-app-eth/axios": "^0.28.0",
     "@ledgerhq/hw-app-eth@npm:^6.39.0": "patch:@ledgerhq/hw-app-eth@npm%3A6.39.0#~/.yarn/patches/@ledgerhq-hw-app-eth-npm-6.39.0-866309bbbe.patch",
-    "@ledgerhq/evm-tools@npm:^1.2.3": "patch:@ledgerhq/evm-tools@npm%3A1.2.3#~/.yarn/patches/@ledgerhq-evm-tools-npm-1.2.3-414f44baa9.patch"
+    "@ledgerhq/evm-tools@npm:^1.2.3": "patch:@ledgerhq/evm-tools@npm%3A1.2.3#~/.yarn/patches/@ledgerhq-evm-tools-npm-1.2.3-414f44baa9.patch",
+    "@metamask/transaction-controller@^38.3.0": "npm:@metamask-previews/transaction-controller@39.0.0-preview-fefbd325"
   },
   "dependencies": {
     "@babel/runtime": "patch:@babel/runtime@npm%3A7.25.9#~/.yarn/patches/@babel-runtime-npm-7.25.9-fe8c62510a.patch",
diff --git a/ui/components/app/confirm/info/row/__snapshots__/row.test.tsx.snap b/ui/components/app/confirm/info/row/__snapshots__/row.test.tsx.snap
index 7dad4ee50357..03201ddd10ea 100644
--- a/ui/components/app/confirm/info/row/__snapshots__/row.test.tsx.snap
+++ b/ui/components/app/confirm/info/row/__snapshots__/row.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`ConfirmInfoRow should match snapshot 1`] = `
 <div>
   <div
     class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-center mm-box--color-text-default mm-box--rounded-lg"
-    style="overflow-wrap: anywhere; min-height: 24px; position: relative;"
+    style="overflow-wrap: anywhere; min-height: 22px; position: relative;"
   >
     <div
       class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
@@ -32,7 +32,7 @@ exports[`ConfirmInfoRow should match snapshot when copy is enabled 1`] = `
 <div>
   <div
     class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-5 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-center mm-box--color-text-default mm-box--rounded-lg"
-    style="overflow-wrap: anywhere; min-height: 24px; position: relative;"
+    style="overflow-wrap: anywhere; min-height: 22px; position: relative;"
   >
     <button
       aria-label="copy-button"
diff --git a/ui/components/app/confirm/info/row/constants.ts b/ui/components/app/confirm/info/row/constants.ts
index 415358aa5252..5c6c1ff980f7 100644
--- a/ui/components/app/confirm/info/row/constants.ts
+++ b/ui/components/app/confirm/info/row/constants.ts
@@ -2,6 +2,7 @@ export const TEST_ADDRESS = '0x5CfE73b6021E818B776b421B1c4Db2474086a7e1';
 
 export enum RowAlertKey {
   EstimatedFee = 'estimatedFee',
+  FirstTimeInteraction = 'firstTimeInteraction',
   SigningInWith = 'signingInWith',
   RequestFrom = 'requestFrom',
   Resimulation = 'resimulation',
diff --git a/ui/components/app/confirm/info/row/row.tsx b/ui/components/app/confirm/info/row/row.tsx
index 63d2242461ea..9db31da54a7f 100644
--- a/ui/components/app/confirm/info/row/row.tsx
+++ b/ui/components/app/confirm/info/row/row.tsx
@@ -109,7 +109,7 @@ export const ConfirmInfoRow: React.FC<ConfirmInfoRowProps> = ({
         color={TEXT_COLORS[variant] as TextColor}
         style={{
           overflowWrap: OverflowWrap.Anywhere,
-          minHeight: '24px',
+          minHeight: '22px',
           position: 'relative',
           ...style,
         }}
diff --git a/ui/pages/confirmations/components/confirm/info/token-transfer/transaction-flow-section.tsx b/ui/pages/confirmations/components/confirm/info/token-transfer/transaction-flow-section.tsx
index 7194d46a8119..2313a4de5a31 100644
--- a/ui/pages/confirmations/components/confirm/info/token-transfer/transaction-flow-section.tsx
+++ b/ui/pages/confirmations/components/confirm/info/token-transfer/transaction-flow-section.tsx
@@ -11,6 +11,7 @@ import {
   Icon,
   IconName,
   IconSize,
+  Text,
 } from '../../../../../../components/component-library';
 import {
   AlignItems,
@@ -18,14 +19,19 @@ import {
   FlexDirection,
   IconColor,
   JustifyContent,
+  TextVariant,
 } from '../../../../../../helpers/constants/design-system';
 import { useConfirmContext } from '../../../../context/confirm';
 import { useDecodedTransactionData } from '../hooks/useDecodedTransactionData';
 import { ConfirmLoader } from '../shared/confirm-loader/confirm-loader';
+import { ConfirmInfoAlertRow } from '../../../../../../components/app/confirm/info/row/alert-row/alert-row';
+import { RowAlertKey } from '../../../../../../components/app/confirm/info/row/constants';
+import { useI18nContext } from '../../../../../../hooks/useI18nContext';
 
 export const TransactionFlowSection = () => {
   const { currentConfirmation: transactionMeta } =
     useConfirmContext<TransactionMeta>();
+  const t = useI18nContext();
 
   const { value, pending } = useDecodedTransactionData();
 
@@ -51,25 +57,52 @@ export const TransactionFlowSection = () => {
         flexDirection={FlexDirection.Row}
         justifyContent={JustifyContent.spaceBetween}
         alignItems={AlignItems.center}
-        padding={3}
+        padding={1}
       >
-        <Name
-          value={transactionMeta.txParams.from}
-          type={NameType.ETHEREUM_ADDRESS}
-          variation={chainId}
-        />
+        <div>
+          <Text
+            variant={TextVariant.bodyMdMedium}
+            style={{
+              marginBottom: 6,
+            }}
+          >
+            From
+          </Text>
+          <Name
+            value={transactionMeta.txParams.from}
+            type={NameType.ETHEREUM_ADDRESS}
+            variation={chainId}
+          />
+        </div>
         <Icon
           name={IconName.ArrowRight}
           size={IconSize.Md}
           color={IconColor.iconMuted}
         />
-        {recipientAddress && (
-          <Name
-            value={recipientAddress}
-            type={NameType.ETHEREUM_ADDRESS}
-            variation={chainId}
-          />
-        )}
+        <div>
+          {recipientAddress && (
+            <>
+              <ConfirmInfoAlertRow
+                alertKey={RowAlertKey.FirstTimeInteraction}
+                label={t('to')}
+                ownerId={transactionMeta.id}
+                style={{
+                  padding: 0,
+                  margin: 0,
+                  marginBottom: 4,
+                }}
+              >
+                {/* Intentional fragment */}
+                <></>
+              </ConfirmInfoAlertRow>
+              <Name
+                value={recipientAddress}
+                type={NameType.ETHEREUM_ADDRESS}
+                variation={chainId}
+              />
+            </>
+          )}
+        </div>
       </Box>
     </ConfirmInfoSection>
   );
diff --git a/ui/pages/confirmations/hooks/alerts/transactions/useFirstTimeInteractionAlert.test.ts b/ui/pages/confirmations/hooks/alerts/transactions/useFirstTimeInteractionAlert.test.ts
new file mode 100644
index 000000000000..4aa620e5b04a
--- /dev/null
+++ b/ui/pages/confirmations/hooks/alerts/transactions/useFirstTimeInteractionAlert.test.ts
@@ -0,0 +1,117 @@
+import { ApprovalType } from '@metamask/controller-utils';
+import {
+  TransactionMeta,
+  TransactionStatus,
+  TransactionType,
+} from '@metamask/transaction-controller';
+
+import { getMockConfirmState } from '../../../../../../test/data/confirmations/helper';
+import { renderHookWithConfirmContextProvider } from '../../../../../../test/lib/confirmations/render-helpers';
+import { Severity } from '../../../../../helpers/constants/design-system';
+import { RowAlertKey } from '../../../../../components/app/confirm/info/row/constants';
+import { genUnapprovedContractInteractionConfirmation } from '../../../../../../test/data/confirmations/contract-interaction';
+import { useFirstTimeInteractionAlert } from './useFirstTimeInteractionAlert';
+
+const ACCOUNT_ADDRESS = '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc';
+const TRANSACTION_ID_MOCK = '123-456';
+
+const CONFIRMATION_MOCK = genUnapprovedContractInteractionConfirmation({
+  chainId: '0x5',
+}) as TransactionMeta;
+
+const TRANSACTION_META_MOCK = {
+  id: TRANSACTION_ID_MOCK,
+  chainId: '0x5',
+  status: TransactionStatus.submitted,
+  type: TransactionType.contractInteraction,
+  txParams: {
+    from: ACCOUNT_ADDRESS,
+  },
+  time: new Date().getTime() - 10000,
+  firstTimeInteraction: true,
+} as TransactionMeta;
+
+function runHook({
+  currentConfirmation,
+  transactions = [],
+}: {
+  currentConfirmation?: TransactionMeta;
+  transactions?: TransactionMeta[];
+} = {}) {
+  let pendingApprovals = {};
+  if (currentConfirmation) {
+    pendingApprovals = {
+      [currentConfirmation.id as string]: {
+        id: currentConfirmation.id,
+        type: ApprovalType.Transaction,
+      },
+    };
+    transactions.push(currentConfirmation);
+  }
+  const state = getMockConfirmState({
+    metamask: {
+      pendingApprovals,
+      transactions,
+    },
+  });
+  const response = renderHookWithConfirmContextProvider(
+    useFirstTimeInteractionAlert,
+    state,
+  );
+
+  return response.result.current;
+}
+
+describe('useFirstTimeInteractionAlert', () => {
+  beforeEach(() => {
+    jest.resetAllMocks();
+  });
+
+  it('returns no alerts if no confirmation', () => {
+    expect(runHook()).toEqual([]);
+  });
+
+  it('returns no alerts if no transactions', () => {
+    expect(
+      runHook({
+        currentConfirmation: CONFIRMATION_MOCK,
+        transactions: [],
+      }),
+    ).toEqual([]);
+  });
+
+  it('returns no alerts if firstTimeInteraction is false', () => {
+    const notFirstTimeConfirmation = {
+      ...TRANSACTION_META_MOCK,
+      firstTimeInteraction: false,
+    };
+    expect(
+      runHook({
+        currentConfirmation: notFirstTimeConfirmation,
+      }),
+    ).toEqual([]);
+  });
+
+  it('returns alert if firstTimeInteraction is true', () => {
+    const firstTimeConfirmation = {
+      ...CONFIRMATION_MOCK,
+      firstTimeInteraction: true,
+    };
+    const alerts = runHook({
+      currentConfirmation: firstTimeConfirmation,
+    });
+
+    expect(alerts).toEqual([
+      {
+        actions: [],
+        field: RowAlertKey.FirstTimeInteraction,
+        isBlocking: false,
+        key: 'firstTimeInteractionTitle',
+        message:
+          "You're interacting with this address for the first time. Make sure that it's correct before you continue.",
+        reason: '1st interaction',
+        severity: Severity.Warning,
+      },
+    ]);
+  });
+});
diff --git a/ui/pages/confirmations/hooks/alerts/transactions/useFirstTimeInteractionAlert.ts b/ui/pages/confirmations/hooks/alerts/transactions/useFirstTimeInteractionAlert.ts
new file mode 100644
index 000000000000..a1084a7b8cff
--- /dev/null
+++ b/ui/pages/confirmations/hooks/alerts/transactions/useFirstTimeInteractionAlert.ts
@@ -0,0 +1,34 @@
+import { useMemo } from 'react';
+import { TransactionMeta } from '@metamask/transaction-controller';
+
+import { Alert } from '../../../../../ducks/confirm-alerts/confirm-alerts';
+import { useI18nContext } from '../../../../../hooks/useI18nContext';
+import { Severity } from '../../../../../helpers/constants/design-system';
+import { RowAlertKey } from '../../../../../components/app/confirm/info/row/constants';
+import { useConfirmContext } from '../../../context/confirm';
+
+export function useFirstTimeInteractionAlert(): Alert[] {
+  const t = useI18nContext();
+  const { currentConfirmation } = useConfirmContext();
+
+  const isFirstTimeInteraction = (currentConfirmation as TransactionMeta)
+    ?.firstTimeInteraction;
+
+  return useMemo(() => {
+    if (!isFirstTimeInteraction) {
+      return [];
+    }
+
+    return [
+      {
+        actions: [],
+        field: RowAlertKey.FirstTimeInteraction,
+        isBlocking: false,
+        key: 'firstTimeInteractionTitle',
+        message: t('firstTimeInteractionReason'),
+        reason: t('firstTimeInteractionTitle'),
+        severity: Severity.Warning,
+      },
+    ];
+  }, [isFirstTimeInteraction, t]);
+}
diff --git a/ui/pages/confirmations/hooks/useConfirmationAlerts.ts b/ui/pages/confirmations/hooks/useConfirmationAlerts.ts
index c5f77f143cb6..17b9e9929e0b 100644
--- a/ui/pages/confirmations/hooks/useConfirmationAlerts.ts
+++ b/ui/pages/confirmations/hooks/useConfirmationAlerts.ts
@@ -11,6 +11,7 @@ import { useNoGasPriceAlerts } from './alerts/transactions/useNoGasPriceAlerts';
 import { usePendingTransactionAlerts } from './alerts/transactions/usePendingTransactionAlerts';
 import { useQueuedConfirmationsAlerts } from './alerts/transactions/useQueuedConfirmationsAlerts';
 import { useResimulationAlert } from './alerts/transactions/useResimulationAlert';
+import { useFirstTimeInteractionAlert } from './alerts/transactions/useFirstTimeInteractionAlert';
 ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
 import { useSigningOrSubmittingAlerts } from './alerts/transactions/useSigningOrSubmittingAlerts';
 ///: END:ONLY_INCLUDE_IF
@@ -36,6 +37,7 @@ function useTransactionAlerts(): Alert[] {
   const noGasPriceAlerts = useNoGasPriceAlerts();
   const pendingTransactionAlerts = usePendingTransactionAlerts();
   const resimulationAlert = useResimulationAlert();
+  const firstTimeInteractionAlert = useFirstTimeInteractionAlert();
   ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
   const signingOrSubmittingAlerts = useSigningOrSubmittingAlerts();
   ///: END:ONLY_INCLUDE_IF
@@ -50,6 +52,7 @@ function useTransactionAlerts(): Alert[] {
       ...noGasPriceAlerts,
       ...pendingTransactionAlerts,
       ...resimulationAlert,
+      ...firstTimeInteractionAlert,
       ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
       ...signingOrSubmittingAlerts,
       ///: END:ONLY_INCLUDE_IF
@@ -64,6 +67,7 @@ function useTransactionAlerts(): Alert[] {
       noGasPriceAlerts,
       pendingTransactionAlerts,
       resimulationAlert,
+      firstTimeInteractionAlert,
       ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
       signingOrSubmittingAlerts,
       ///: END:ONLY_INCLUDE_IF
diff --git a/yarn.lock b/yarn.lock
index d40270b12e9c..dd1f4a8b3504 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5105,6 +5105,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@metamask/controller-utils@npm:^11.4.3":
+  version: 11.4.3
+  resolution: "@metamask/controller-utils@npm:11.4.3"
+  dependencies:
+    "@ethereumjs/util": "npm:^8.1.0"
+    "@metamask/eth-query": "npm:^4.0.0"
+    "@metamask/ethjs-unit": "npm:^0.3.0"
+    "@metamask/utils": "npm:^10.0.0"
+    "@spruceid/siwe-parser": "npm:2.1.0"
+    "@types/bn.js": "npm:^5.1.5"
+    bignumber.js: "npm:^9.1.2"
+    bn.js: "npm:^5.2.1"
+    eth-ens-namehash: "npm:^2.0.8"
+    fast-deep-equal: "npm:^3.1.3"
+  checksum: 10/5703b0721daf679cf44affc690f2b313e40893b64b0aafaf203e69ee51438197cc3634ef7094145f580a8a8aaadcb79026b2fbd4065c1bb4a8c26627a2c4c69a
+  languageName: node
+  linkType: hard
+
 "@metamask/design-tokens@npm:^4.0.0":
   version: 4.0.0
   resolution: "@metamask/design-tokens@npm:4.0.0"
@@ -6584,9 +6602,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@metamask/transaction-controller@npm:^34.0.0":
-  version: 34.0.0
-  resolution: "@metamask/transaction-controller@npm:34.0.0"
+"@metamask/transaction-controller@npm:@metamask-previews/transaction-controller@39.0.0-preview-fefbd325":
+  version: 39.0.0-preview-fefbd325
+  resolution: "@metamask-previews/transaction-controller@npm:39.0.0-preview-fefbd325"
   dependencies:
     "@ethereumjs/common": "npm:^3.2.0"
     "@ethereumjs/tx": "npm:^4.2.0"
@@ -6594,17 +6612,13 @@ __metadata:
     "@ethersproject/abi": "npm:^5.7.0"
     "@ethersproject/contracts": "npm:^5.7.0"
     "@ethersproject/providers": "npm:^5.7.0"
-    "@metamask/accounts-controller": "npm:^17.2.0"
-    "@metamask/approval-controller": "npm:^7.0.0"
-    "@metamask/base-controller": "npm:^6.0.0"
-    "@metamask/controller-utils": "npm:^11.0.0"
+    "@metamask/base-controller": "npm:^7.0.2"
+    "@metamask/controller-utils": "npm:^11.4.3"
     "@metamask/eth-query": "npm:^4.0.0"
-    "@metamask/gas-fee-controller": "npm:^18.0.0"
     "@metamask/metamask-eth-abis": "npm:^3.1.1"
-    "@metamask/network-controller": "npm:^19.0.0"
-    "@metamask/nonce-tracker": "npm:^5.0.0"
-    "@metamask/rpc-errors": "npm:^6.2.1"
-    "@metamask/utils": "npm:^8.3.0"
+    "@metamask/nonce-tracker": "npm:^6.0.0"
+    "@metamask/rpc-errors": "npm:^7.0.1"
+    "@metamask/utils": "npm:^10.0.0"
     async-mutex: "npm:^0.5.0"
     bn.js: "npm:^5.2.1"
     eth-method-registry: "npm:^4.0.0"
@@ -6613,17 +6627,17 @@ __metadata:
     uuid: "npm:^8.3.2"
   peerDependencies:
     "@babel/runtime": ^7.23.9
-    "@metamask/accounts-controller": ^17.0.0
+    "@metamask/accounts-controller": ^19.0.0
     "@metamask/approval-controller": ^7.0.0
-    "@metamask/gas-fee-controller": ^18.0.0
-    "@metamask/network-controller": ^19.0.0
-  checksum: 10/170b760dec516ca191de8fa2e7afce6aeb445880fa5717387c047202643ec303382a9edbe6c80024cbfc2e219ef98de6f9785b13bb4032b7b1100f29e6f3948d
+    "@metamask/gas-fee-controller": ^22.0.0
+    "@metamask/network-controller": ^22.0.0
+  checksum: 10/df741672492bc81fe796c98ba0702b1380156bc05eb4cf7fb2b5345923769a9494fad74b1a6cdebafcccdd06f262f7b9cb552b2f2ae3a1ac2b34f07321a05ceb
   languageName: node
   linkType: hard
 
-"@metamask/transaction-controller@npm:^38.3.0":
-  version: 38.3.0
-  resolution: "@metamask/transaction-controller@npm:38.3.0"
+"@metamask/transaction-controller@npm:^34.0.0":
+  version: 34.0.0
+  resolution: "@metamask/transaction-controller@npm:34.0.0"
   dependencies:
     "@ethereumjs/common": "npm:^3.2.0"
     "@ethereumjs/tx": "npm:^4.2.0"
@@ -6631,13 +6645,17 @@ __metadata:
     "@ethersproject/abi": "npm:^5.7.0"
     "@ethersproject/contracts": "npm:^5.7.0"
     "@ethersproject/providers": "npm:^5.7.0"
-    "@metamask/base-controller": "npm:^7.0.2"
-    "@metamask/controller-utils": "npm:^11.4.2"
+    "@metamask/accounts-controller": "npm:^17.2.0"
+    "@metamask/approval-controller": "npm:^7.0.0"
+    "@metamask/base-controller": "npm:^6.0.0"
+    "@metamask/controller-utils": "npm:^11.0.0"
     "@metamask/eth-query": "npm:^4.0.0"
+    "@metamask/gas-fee-controller": "npm:^18.0.0"
     "@metamask/metamask-eth-abis": "npm:^3.1.1"
-    "@metamask/nonce-tracker": "npm:^6.0.0"
-    "@metamask/rpc-errors": "npm:^7.0.1"
-    "@metamask/utils": "npm:^10.0.0"
+    "@metamask/network-controller": "npm:^19.0.0"
+    "@metamask/nonce-tracker": "npm:^5.0.0"
+    "@metamask/rpc-errors": "npm:^6.2.1"
+    "@metamask/utils": "npm:^8.3.0"
     async-mutex: "npm:^0.5.0"
     bn.js: "npm:^5.2.1"
     eth-method-registry: "npm:^4.0.0"
@@ -6646,11 +6664,11 @@ __metadata:
     uuid: "npm:^8.3.2"
   peerDependencies:
     "@babel/runtime": ^7.23.9
-    "@metamask/accounts-controller": ^18.0.0
+    "@metamask/accounts-controller": ^17.0.0
     "@metamask/approval-controller": ^7.0.0
-    "@metamask/gas-fee-controller": ^22.0.0
-    "@metamask/network-controller": ^22.0.0
-  checksum: 10/f4e8e3a1a31e3e62b0d1a59bbe15ebfa4dc3e4cf077fb95c1815c00661c60ef4676046c49f57eab9749cd31d3e55ac3fed7bc247e3f5a3d459f2dcb03998633d
+    "@metamask/gas-fee-controller": ^18.0.0
+    "@metamask/network-controller": ^19.0.0
+  checksum: 10/170b760dec516ca191de8fa2e7afce6aeb445880fa5717387c047202643ec303382a9edbe6c80024cbfc2e219ef98de6f9785b13bb4032b7b1100f29e6f3948d
   languageName: node
   linkType: hard
 

From bc0f58d6400f3e16fb9adf35de50eb42bb00a857 Mon Sep 17 00:00:00 2001
From: OGPoyraz <omergoktugpoyraz@gmail.com>
Date: Tue, 19 Nov 2024 10:57:32 +0100
Subject: [PATCH 02/15] Adjust latest version

---
 app/_locales/en/messages.json                             | 2 +-
 app/scripts/metamask-controller.js                        | 2 ++
 package.json                                              | 2 +-
 .../alerts/transactions/useFirstTimeInteractionAlert.ts   | 6 +++---
 .../security-tab/__snapshots__/security-tab.test.js.snap  | 2 +-
 yarn.lock                                                 | 8 ++++----
 6 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 0bbbf9ec1d99..5124e84092e8 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -4702,7 +4702,7 @@
     "message": "Security alerts"
   },
   "securityAlertsDescription": {
-    "message": "This feature alerts you to malicious activity by actively reviewing transaction and signature requests. $1",
+    "message": "This feature alerts you to malicious or unusual activity by actively reviewing transaction and signature requests. $1",
     "description": "Link to learn more about security alerts"
   },
   "securityAndPrivacy": {
diff --git a/app/scripts/metamask-controller.js b/app/scripts/metamask-controller.js
index 9632e072c70b..3d00f2065539 100644
--- a/app/scripts/metamask-controller.js
+++ b/app/scripts/metamask-controller.js
@@ -1906,6 +1906,8 @@ export default class MetamaskController extends EventEmitter {
         updateTransactions: false,
       },
       isMultichainEnabled: process.env.TRANSACTION_MULTICHAIN,
+      isFirstTimeInteractionEnabled: () =>
+        this.preferencesController.state.securityAlertsEnabled,
       isSimulationEnabled: () =>
         this.preferencesController.state.useTransactionSimulations,
       messenger: transactionControllerMessenger,
diff --git a/package.json b/package.json
index 22101990dd5c..954530201b22 100644
--- a/package.json
+++ b/package.json
@@ -257,7 +257,7 @@
     "@ledgerhq/hw-app-eth/axios": "^0.28.0",
     "@ledgerhq/hw-app-eth@npm:^6.39.0": "patch:@ledgerhq/hw-app-eth@npm%3A6.39.0#~/.yarn/patches/@ledgerhq-hw-app-eth-npm-6.39.0-866309bbbe.patch",
     "@ledgerhq/evm-tools@npm:^1.2.3": "patch:@ledgerhq/evm-tools@npm%3A1.2.3#~/.yarn/patches/@ledgerhq-evm-tools-npm-1.2.3-414f44baa9.patch",
-    "@metamask/transaction-controller@^38.3.0": "npm:@metamask-previews/transaction-controller@39.0.0-preview-fefbd325"
+    "@metamask/transaction-controller@^38.3.0": "npm:@metamask-previews/transaction-controller@39.0.0-preview-af392506"
   },
   "dependencies": {
     "@babel/runtime": "patch:@babel/runtime@npm%3A7.25.9#~/.yarn/patches/@babel-runtime-npm-7.25.9-fe8c62510a.patch",
diff --git a/ui/pages/confirmations/hooks/alerts/transactions/useFirstTimeInteractionAlert.ts b/ui/pages/confirmations/hooks/alerts/transactions/useFirstTimeInteractionAlert.ts
index a1084a7b8cff..6dcee3bea1e7 100644
--- a/ui/pages/confirmations/hooks/alerts/transactions/useFirstTimeInteractionAlert.ts
+++ b/ui/pages/confirmations/hooks/alerts/transactions/useFirstTimeInteractionAlert.ts
@@ -11,11 +11,11 @@ export function useFirstTimeInteractionAlert(): Alert[] {
   const t = useI18nContext();
   const { currentConfirmation } = useConfirmContext();
 
-  const isFirstTimeInteraction = (currentConfirmation as TransactionMeta)
-    ?.firstTimeInteraction;
+  const { isFirstTimeInteraction, isFirstTimeInteractionDisabled } =
+    currentConfirmation as TransactionMeta;
 
   return useMemo(() => {
-    if (!isFirstTimeInteraction) {
+    if (!isFirstTimeInteraction || isFirstTimeInteractionDisabled) {
       return [];
     }
 
diff --git a/ui/pages/settings/security-tab/__snapshots__/security-tab.test.js.snap b/ui/pages/settings/security-tab/__snapshots__/security-tab.test.js.snap
index 0927d04f89cb..12ab9696319e 100644
--- a/ui/pages/settings/security-tab/__snapshots__/security-tab.test.js.snap
+++ b/ui/pages/settings/security-tab/__snapshots__/security-tab.test.js.snap
@@ -126,7 +126,7 @@ exports[`Security Tab should match snapshot 1`] = `
           >
             <span>
                
-              This feature alerts you to malicious activity by actively reviewing transaction and signature requests. 
+              This feature alerts you to malicious or unusual activity by actively reviewing transaction and signature requests. 
               <a
                 href="https://support.metamask.io/privacy-and-security/how-to-turn-on-security-alerts/"
                 rel="noreferrer"
diff --git a/yarn.lock b/yarn.lock
index dd1f4a8b3504..622723ac887d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6602,9 +6602,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@metamask/transaction-controller@npm:@metamask-previews/transaction-controller@39.0.0-preview-fefbd325":
-  version: 39.0.0-preview-fefbd325
-  resolution: "@metamask-previews/transaction-controller@npm:39.0.0-preview-fefbd325"
+"@metamask/transaction-controller@npm:@metamask-previews/transaction-controller@39.0.0-preview-af392506":
+  version: 39.0.0-preview-af392506
+  resolution: "@metamask-previews/transaction-controller@npm:39.0.0-preview-af392506"
   dependencies:
     "@ethereumjs/common": "npm:^3.2.0"
     "@ethereumjs/tx": "npm:^4.2.0"
@@ -6631,7 +6631,7 @@ __metadata:
     "@metamask/approval-controller": ^7.0.0
     "@metamask/gas-fee-controller": ^22.0.0
     "@metamask/network-controller": ^22.0.0
-  checksum: 10/df741672492bc81fe796c98ba0702b1380156bc05eb4cf7fb2b5345923769a9494fad74b1a6cdebafcccdd06f262f7b9cb552b2f2ae3a1ac2b34f07321a05ceb
+  checksum: 10/6a2efe93c6cb2ea2247c2ab1262b1d10cb2a11366933dae9febe471d65485165498e247fe66b442f4369734aaff4d239ab6fa4cc3c236e4da9ef7cb57e3bad4a
   languageName: node
   linkType: hard
 

From b1764e75761ff685d364d672d56cf0a599c0bd91 Mon Sep 17 00:00:00 2001
From: OGPoyraz <omergoktugpoyraz@gmail.com>
Date: Fri, 22 Nov 2024 10:15:55 +0100
Subject: [PATCH 03/15] Adjust changes

---
 package.json                                  |  2 +-
 .../useFirstTimeInteractionAlert.ts           |  7 ++---
 yarn.lock                                     | 26 +++----------------
 3 files changed, 9 insertions(+), 26 deletions(-)

diff --git a/package.json b/package.json
index 7ecf153436b6..d4d068fd11c0 100644
--- a/package.json
+++ b/package.json
@@ -258,7 +258,7 @@
     "@ledgerhq/hw-app-eth@npm:^6.39.0": "patch:@ledgerhq/hw-app-eth@npm%3A6.39.0#~/.yarn/patches/@ledgerhq-hw-app-eth-npm-6.39.0-866309bbbe.patch",
     "@ledgerhq/evm-tools@npm:^1.2.3": "patch:@ledgerhq/evm-tools@npm%3A1.2.3#~/.yarn/patches/@ledgerhq-evm-tools-npm-1.2.3-414f44baa9.patch",
     "cross-spawn@npm:^5.0.1": "^7.0.5",
-    "@metamask/transaction-controller@^38.3.0": "npm:@metamask-previews/transaction-controller@39.0.0-preview-af392506"
+    "@metamask/transaction-controller@^38.3.0": "npm:@metamask-previews/transaction-controller@39.1.0-preview-608079df"
   },
   "dependencies": {
     "@babel/runtime": "patch:@babel/runtime@npm%3A7.25.9#~/.yarn/patches/@babel-runtime-npm-7.25.9-fe8c62510a.patch",
diff --git a/ui/pages/confirmations/hooks/alerts/transactions/useFirstTimeInteractionAlert.ts b/ui/pages/confirmations/hooks/alerts/transactions/useFirstTimeInteractionAlert.ts
index 6dcee3bea1e7..c9db8ffea412 100644
--- a/ui/pages/confirmations/hooks/alerts/transactions/useFirstTimeInteractionAlert.ts
+++ b/ui/pages/confirmations/hooks/alerts/transactions/useFirstTimeInteractionAlert.ts
@@ -11,11 +11,12 @@ export function useFirstTimeInteractionAlert(): Alert[] {
   const t = useI18nContext();
   const { currentConfirmation } = useConfirmContext();
 
-  const { isFirstTimeInteraction, isFirstTimeInteractionDisabled } =
-    currentConfirmation as TransactionMeta;
+  const { isFirstTimeInteraction } = currentConfirmation as TransactionMeta;
 
   return useMemo(() => {
-    if (!isFirstTimeInteraction || isFirstTimeInteractionDisabled) {
+    // If isFirstTimeInteraction is undefined that means it's either disabled or error in accounts API
+    // If it's false that means account relationship found
+    if (!isFirstTimeInteraction) {
       return [];
     }
 
diff --git a/yarn.lock b/yarn.lock
index 03f5323ec6df..faba363ebabe 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5146,24 +5146,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@metamask/controller-utils@npm:^11.4.3":
-  version: 11.4.3
-  resolution: "@metamask/controller-utils@npm:11.4.3"
-  dependencies:
-    "@ethereumjs/util": "npm:^8.1.0"
-    "@metamask/eth-query": "npm:^4.0.0"
-    "@metamask/ethjs-unit": "npm:^0.3.0"
-    "@metamask/utils": "npm:^10.0.0"
-    "@spruceid/siwe-parser": "npm:2.1.0"
-    "@types/bn.js": "npm:^5.1.5"
-    bignumber.js: "npm:^9.1.2"
-    bn.js: "npm:^5.2.1"
-    eth-ens-namehash: "npm:^2.0.8"
-    fast-deep-equal: "npm:^3.1.3"
-  checksum: 10/5703b0721daf679cf44affc690f2b313e40893b64b0aafaf203e69ee51438197cc3634ef7094145f580a8a8aaadcb79026b2fbd4065c1bb4a8c26627a2c4c69a
-  languageName: node
-  linkType: hard
-
 "@metamask/design-tokens@npm:^4.0.0":
   version: 4.0.0
   resolution: "@metamask/design-tokens@npm:4.0.0"
@@ -6643,9 +6625,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@metamask/transaction-controller@npm:@metamask-previews/transaction-controller@39.0.0-preview-af392506":
-  version: 39.0.0-preview-af392506
-  resolution: "@metamask-previews/transaction-controller@npm:39.0.0-preview-af392506"
+"@metamask/transaction-controller@npm:@metamask-previews/transaction-controller@39.1.0-preview-608079df":
+  version: 39.1.0-preview-608079df
+  resolution: "@metamask-previews/transaction-controller@npm:39.1.0-preview-608079df"
   dependencies:
     "@ethereumjs/common": "npm:^3.2.0"
     "@ethereumjs/tx": "npm:^4.2.0"
@@ -6672,7 +6654,7 @@ __metadata:
     "@metamask/approval-controller": ^7.0.0
     "@metamask/gas-fee-controller": ^22.0.0
     "@metamask/network-controller": ^22.0.0
-  checksum: 10/6a2efe93c6cb2ea2247c2ab1262b1d10cb2a11366933dae9febe471d65485165498e247fe66b442f4369734aaff4d239ab6fa4cc3c236e4da9ef7cb57e3bad4a
+  checksum: 10/e49c4513ee7da97464164c448ec2255a6cee56a3d19f1bd7147183eb37308e426d584632f9b7fc6ba9bd241e157f56e9d08a49f73fbb6a27dec8de91b680b30a
   languageName: node
   linkType: hard
 

From 92190015a7c65347fe12d51b4d440017f564c9b9 Mon Sep 17 00:00:00 2001
From: OGPoyraz <omergoktugpoyraz@gmail.com>
Date: Tue, 26 Nov 2024 10:21:31 +0100
Subject: [PATCH 04/15] Update package

---
 package.json |  5 ++---
 yarn.lock    | 58 ++++++++++++++++++++++++++--------------------------
 2 files changed, 31 insertions(+), 32 deletions(-)

diff --git a/package.json b/package.json
index 3026b30aaa95..ed6dc10cc2c0 100644
--- a/package.json
+++ b/package.json
@@ -258,8 +258,7 @@
     "@ledgerhq/hw-app-eth/axios": "^0.28.0",
     "@ledgerhq/hw-app-eth@npm:^6.39.0": "patch:@ledgerhq/hw-app-eth@npm%3A6.39.0#~/.yarn/patches/@ledgerhq-hw-app-eth-npm-6.39.0-866309bbbe.patch",
     "@ledgerhq/evm-tools@npm:^1.2.3": "patch:@ledgerhq/evm-tools@npm%3A1.2.3#~/.yarn/patches/@ledgerhq-evm-tools-npm-1.2.3-414f44baa9.patch",
-    "cross-spawn@npm:^5.0.1": "^7.0.5",
-    "@metamask/transaction-controller@^38.3.0": "npm:@metamask-previews/transaction-controller@39.1.0-preview-608079df"
+    "cross-spawn@npm:^5.0.1": "^7.0.5"
   },
   "dependencies": {
     "@babel/runtime": "patch:@babel/runtime@npm%3A7.25.9#~/.yarn/patches/@babel-runtime-npm-7.25.9-fe8c62510a.patch",
@@ -356,7 +355,7 @@
     "@metamask/snaps-sdk": "^6.11.0",
     "@metamask/snaps-utils": "^8.6.0",
     "@metamask/solana-wallet-snap": "^0.1.9",
-    "@metamask/transaction-controller": "^40.0.0",
+    "@metamask/transaction-controller": "^40.1.0",
     "@metamask/user-operation-controller": "^13.0.0",
     "@metamask/utils": "^10.0.1",
     "@ngraveio/bc-ur": "^1.1.12",
diff --git a/yarn.lock b/yarn.lock
index e0da8137e1f0..fa431ed13c94 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6701,9 +6701,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@metamask/transaction-controller@npm:@metamask-previews/transaction-controller@39.1.0-preview-608079df":
-  version: 39.1.0-preview-608079df
-  resolution: "@metamask-previews/transaction-controller@npm:39.1.0-preview-608079df"
+"@metamask/transaction-controller@npm:^34.0.0":
+  version: 34.0.0
+  resolution: "@metamask/transaction-controller@npm:34.0.0"
   dependencies:
     "@ethereumjs/common": "npm:^3.2.0"
     "@ethereumjs/tx": "npm:^4.2.0"
@@ -6711,13 +6711,17 @@ __metadata:
     "@ethersproject/abi": "npm:^5.7.0"
     "@ethersproject/contracts": "npm:^5.7.0"
     "@ethersproject/providers": "npm:^5.7.0"
-    "@metamask/base-controller": "npm:^7.0.2"
-    "@metamask/controller-utils": "npm:^11.4.3"
+    "@metamask/accounts-controller": "npm:^17.2.0"
+    "@metamask/approval-controller": "npm:^7.0.0"
+    "@metamask/base-controller": "npm:^6.0.0"
+    "@metamask/controller-utils": "npm:^11.0.0"
     "@metamask/eth-query": "npm:^4.0.0"
+    "@metamask/gas-fee-controller": "npm:^18.0.0"
     "@metamask/metamask-eth-abis": "npm:^3.1.1"
-    "@metamask/nonce-tracker": "npm:^6.0.0"
-    "@metamask/rpc-errors": "npm:^7.0.1"
-    "@metamask/utils": "npm:^10.0.0"
+    "@metamask/network-controller": "npm:^19.0.0"
+    "@metamask/nonce-tracker": "npm:^5.0.0"
+    "@metamask/rpc-errors": "npm:^6.2.1"
+    "@metamask/utils": "npm:^8.3.0"
     async-mutex: "npm:^0.5.0"
     bn.js: "npm:^5.2.1"
     eth-method-registry: "npm:^4.0.0"
@@ -6726,17 +6730,17 @@ __metadata:
     uuid: "npm:^8.3.2"
   peerDependencies:
     "@babel/runtime": ^7.23.9
-    "@metamask/accounts-controller": ^19.0.0
+    "@metamask/accounts-controller": ^17.0.0
     "@metamask/approval-controller": ^7.0.0
-    "@metamask/gas-fee-controller": ^22.0.0
-    "@metamask/network-controller": ^22.0.0
-  checksum: 10/e49c4513ee7da97464164c448ec2255a6cee56a3d19f1bd7147183eb37308e426d584632f9b7fc6ba9bd241e157f56e9d08a49f73fbb6a27dec8de91b680b30a
+    "@metamask/gas-fee-controller": ^18.0.0
+    "@metamask/network-controller": ^19.0.0
+  checksum: 10/170b760dec516ca191de8fa2e7afce6aeb445880fa5717387c047202643ec303382a9edbe6c80024cbfc2e219ef98de6f9785b13bb4032b7b1100f29e6f3948d
   languageName: node
   linkType: hard
 
-"@metamask/transaction-controller@npm:^34.0.0":
-  version: 34.0.0
-  resolution: "@metamask/transaction-controller@npm:34.0.0"
+"@metamask/transaction-controller@npm:^40.1.0":
+  version: 40.1.0
+  resolution: "@metamask/transaction-controller@npm:40.1.0"
   dependencies:
     "@ethereumjs/common": "npm:^3.2.0"
     "@ethereumjs/tx": "npm:^4.2.0"
@@ -6744,17 +6748,13 @@ __metadata:
     "@ethersproject/abi": "npm:^5.7.0"
     "@ethersproject/contracts": "npm:^5.7.0"
     "@ethersproject/providers": "npm:^5.7.0"
-    "@metamask/accounts-controller": "npm:^17.2.0"
-    "@metamask/approval-controller": "npm:^7.0.0"
-    "@metamask/base-controller": "npm:^6.0.0"
-    "@metamask/controller-utils": "npm:^11.0.0"
+    "@metamask/base-controller": "npm:^7.0.2"
+    "@metamask/controller-utils": "npm:^11.4.3"
     "@metamask/eth-query": "npm:^4.0.0"
-    "@metamask/gas-fee-controller": "npm:^18.0.0"
     "@metamask/metamask-eth-abis": "npm:^3.1.1"
-    "@metamask/network-controller": "npm:^19.0.0"
-    "@metamask/nonce-tracker": "npm:^5.0.0"
-    "@metamask/rpc-errors": "npm:^6.2.1"
-    "@metamask/utils": "npm:^8.3.0"
+    "@metamask/nonce-tracker": "npm:^6.0.0"
+    "@metamask/rpc-errors": "npm:^7.0.1"
+    "@metamask/utils": "npm:^10.0.0"
     async-mutex: "npm:^0.5.0"
     bn.js: "npm:^5.2.1"
     eth-method-registry: "npm:^4.0.0"
@@ -6763,11 +6763,11 @@ __metadata:
     uuid: "npm:^8.3.2"
   peerDependencies:
     "@babel/runtime": ^7.23.9
-    "@metamask/accounts-controller": ^17.0.0
+    "@metamask/accounts-controller": ^20.0.0
     "@metamask/approval-controller": ^7.0.0
-    "@metamask/gas-fee-controller": ^18.0.0
-    "@metamask/network-controller": ^19.0.0
-  checksum: 10/170b760dec516ca191de8fa2e7afce6aeb445880fa5717387c047202643ec303382a9edbe6c80024cbfc2e219ef98de6f9785b13bb4032b7b1100f29e6f3948d
+    "@metamask/gas-fee-controller": ^22.0.0
+    "@metamask/network-controller": ^22.0.0
+  checksum: 10/1057af5b0da2d51e46e7568fc0e7fdbe6aed34a013cf56a5a35ad694cbedcb726a5823bbe70b980d1dc9560138acf9d82ac5f0e06f7d17e11b46abacd466dc42
   languageName: node
   linkType: hard
 
@@ -26891,7 +26891,7 @@ __metadata:
     "@metamask/solana-wallet-snap": "npm:^0.1.9"
     "@metamask/test-bundler": "npm:^1.0.0"
     "@metamask/test-dapp": "npm:8.13.0"
-    "@metamask/transaction-controller": "npm:^40.0.0"
+    "@metamask/transaction-controller": "npm:^40.1.0"
     "@metamask/user-operation-controller": "npm:^13.0.0"
     "@metamask/utils": "npm:^10.0.1"
     "@ngraveio/bc-ur": "npm:^1.1.12"

From b257a27dd1f9932765be72f4a8ef87223123baef Mon Sep 17 00:00:00 2001
From: OGPoyraz <omergoktugpoyraz@gmail.com>
Date: Tue, 26 Nov 2024 10:32:05 +0100
Subject: [PATCH 05/15] Fix suggestions

---
 app/_locales/en/messages.json                        | 12 ++++++------
 app/scripts/metamask-controller.js                   |  2 +-
 ui/components/app/confirm/info/row/row.tsx           |  3 ++-
 .../info/token-transfer/transaction-flow-section.tsx |  4 ----
 .../simulation-details/simulation-details.tsx        |  5 +----
 .../useFirstTimeInteractionAlert.test.ts             | 12 ++++++++++++
 .../transactions/useFirstTimeInteractionAlert.ts     |  8 ++++----
 7 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 6029758b2750..022e736c7964 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -419,6 +419,9 @@
   "alertMessageChangeInSimulationResults": {
     "message": "Estimated changes for this transaction have been updated. Review them closely before proceeding."
   },
+  "alertMessageFirstTimeInteraction": {
+    "message": "1st interaction"
+  },
   "alertMessageGasEstimateFailed": {
     "message": "We’re unable to provide an accurate fee and this estimate might be high. We suggest you to input a custom gas limit, but there’s a risk the transaction will still fail."
   },
@@ -461,6 +464,9 @@
   "alertReasonChangeInSimulationResults": {
     "message": "Results have changed"
   },
+  "alertReasonFirstTimeInteraction": {
+    "message": "You're interacting with this address for the first time. Make sure that it's correct before you continue."
+  },
   "alertReasonGasEstimateFailed": {
     "message": "Inaccurate fee"
   },
@@ -2111,12 +2117,6 @@
     "message": "File import not working? Click here!",
     "description": "Helps user import their account from a JSON file"
   },
-  "firstTimeInteractionReason": {
-    "message": "You're interacting with this address for the first time. Make sure that it's correct before you continue."
-  },
-  "firstTimeInteractionTitle": {
-    "message": "1st interaction"
-  },
   "flaskWelcomeUninstall": {
     "message": "you should uninstall this extension",
     "description": "This request is shown on the Flask Welcome screen. It is intended for non-developers, and will be bolded."
diff --git a/app/scripts/metamask-controller.js b/app/scripts/metamask-controller.js
index 0ddc4607c6a9..ec83fbccf954 100644
--- a/app/scripts/metamask-controller.js
+++ b/app/scripts/metamask-controller.js
@@ -1941,9 +1941,9 @@ export default class MetamaskController extends EventEmitter {
         queryEntireHistory: false,
         updateTransactions: false,
       },
-      isMultichainEnabled: process.env.TRANSACTION_MULTICHAIN,
       isFirstTimeInteractionEnabled: () =>
         this.preferencesController.state.securityAlertsEnabled,
+      isMultichainEnabled: process.env.TRANSACTION_MULTICHAIN,
       isSimulationEnabled: () =>
         this.preferencesController.state.useTransactionSimulations,
       messenger: transactionControllerMessenger,
diff --git a/ui/components/app/confirm/info/row/row.tsx b/ui/components/app/confirm/info/row/row.tsx
index fbdab56df444..12c1b735c57a 100644
--- a/ui/components/app/confirm/info/row/row.tsx
+++ b/ui/components/app/confirm/info/row/row.tsx
@@ -33,7 +33,7 @@ export enum ConfirmInfoRowVariant {
 
 export type ConfirmInfoRowProps = {
   label: string;
-  children: React.ReactNode | string;
+  children?: React.ReactNode | string;
   tooltip?: string;
   variant?: ConfirmInfoRowVariant;
   style?: React.CSSProperties;
@@ -169,6 +169,7 @@ export const ConfirmInfoRow: React.FC<ConfirmInfoRowProps> = ({
           </Box>
         </Box>
         {expanded &&
+          children &&
           (typeof children === 'string' ? (
             <Text marginRight={copyEnabled ? 3 : 0} color={TextColor.inherit}>
               {children}
diff --git a/ui/pages/confirmations/components/confirm/info/token-transfer/transaction-flow-section.tsx b/ui/pages/confirmations/components/confirm/info/token-transfer/transaction-flow-section.tsx
index 996d29e84346..cf3c6c85e7d1 100644
--- a/ui/pages/confirmations/components/confirm/info/token-transfer/transaction-flow-section.tsx
+++ b/ui/pages/confirmations/components/confirm/info/token-transfer/transaction-flow-section.tsx
@@ -28,12 +28,8 @@ import { ConfirmInfoAlertRow } from '../../../../../../components/app/confirm/in
 import { useI18nContext } from '../../../../../../hooks/useI18nContext';
 import { useConfirmContext } from '../../../../context/confirm';
 import { useDecodedTransactionData } from '../hooks/useDecodedTransactionData';
-import { ConfirmInfoAlertRow } from '../../../../../../components/app/confirm/info/row/alert-row/alert-row';
-import { RowAlertKey } from '../../../../../../components/app/confirm/info/row/constants';
-import { useI18nContext } from '../../../../../../hooks/useI18nContext';
 
 export const TransactionFlowSection = () => {
-  const t = useI18nContext();
   const { currentConfirmation: transactionMeta } =
     useConfirmContext<TransactionMeta>();
   const t = useI18nContext();
diff --git a/ui/pages/confirmations/components/simulation-details/simulation-details.tsx b/ui/pages/confirmations/components/simulation-details/simulation-details.tsx
index 357f71230a0c..412467b4ff8a 100644
--- a/ui/pages/confirmations/components/simulation-details/simulation-details.tsx
+++ b/ui/pages/confirmations/components/simulation-details/simulation-details.tsx
@@ -110,10 +110,7 @@ const HeaderWithAlert = ({ transactionId }: { transactionId: string }) => {
         paddingLeft: 0,
         paddingRight: 0,
       }}
-    >
-      {/* Intentional fragment */}
-      <></>
-    </ConfirmInfoAlertRow>
+    />
   );
 };
 
diff --git a/ui/pages/confirmations/hooks/alerts/transactions/useFirstTimeInteractionAlert.test.ts b/ui/pages/confirmations/hooks/alerts/transactions/useFirstTimeInteractionAlert.test.ts
index 4aa620e5b04a..ceb8b6c0a13a 100644
--- a/ui/pages/confirmations/hooks/alerts/transactions/useFirstTimeInteractionAlert.test.ts
+++ b/ui/pages/confirmations/hooks/alerts/transactions/useFirstTimeInteractionAlert.test.ts
@@ -92,6 +92,18 @@ describe('useFirstTimeInteractionAlert', () => {
     ).toEqual([]);
   });
 
+  it('returns no alerts if firstTimeInteraction is undefined', () => {
+    const notFirstTimeConfirmation = {
+      ...TRANSACTION_META_MOCK,
+      firstTimeInteraction: undefined,
+    };
+    expect(
+      runHook({
+        currentConfirmation: notFirstTimeConfirmation,
+      }),
+    ).toEqual([]);
+  });
+
   it('returns alert if firstTimeInteraction is true', () => {
     const firstTimeConfirmation = {
       ...CONFIRMATION_MOCK,
diff --git a/ui/pages/confirmations/hooks/alerts/transactions/useFirstTimeInteractionAlert.ts b/ui/pages/confirmations/hooks/alerts/transactions/useFirstTimeInteractionAlert.ts
index c9db8ffea412..24048e10f0a5 100644
--- a/ui/pages/confirmations/hooks/alerts/transactions/useFirstTimeInteractionAlert.ts
+++ b/ui/pages/confirmations/hooks/alerts/transactions/useFirstTimeInteractionAlert.ts
@@ -9,9 +9,9 @@ import { useConfirmContext } from '../../../context/confirm';
 
 export function useFirstTimeInteractionAlert(): Alert[] {
   const t = useI18nContext();
-  const { currentConfirmation } = useConfirmContext();
+  const { currentConfirmation } = useConfirmContext<TransactionMeta>();
 
-  const { isFirstTimeInteraction } = currentConfirmation as TransactionMeta;
+  const { isFirstTimeInteraction } = currentConfirmation;
 
   return useMemo(() => {
     // If isFirstTimeInteraction is undefined that means it's either disabled or error in accounts API
@@ -26,8 +26,8 @@ export function useFirstTimeInteractionAlert(): Alert[] {
         field: RowAlertKey.FirstTimeInteraction,
         isBlocking: false,
         key: 'firstTimeInteractionTitle',
-        message: t('firstTimeInteractionReason'),
-        reason: t('firstTimeInteractionTitle'),
+        message: t('alertMessageFirstTimeInteraction'),
+        reason: t('alertReasonFirstTimeInteraction'),
         severity: Severity.Warning,
       },
     ];

From 2285d3c005b2053503fdbde65b3b0f26ea68e4b0 Mon Sep 17 00:00:00 2001
From: OGPoyraz <omergoktugpoyraz@gmail.com>
Date: Tue, 26 Nov 2024 10:34:03 +0100
Subject: [PATCH 06/15] remove unnecessary changes

---
 .../confirm/info/token-transfer/transaction-flow-section.tsx  | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/ui/pages/confirmations/components/confirm/info/token-transfer/transaction-flow-section.tsx b/ui/pages/confirmations/components/confirm/info/token-transfer/transaction-flow-section.tsx
index cf3c6c85e7d1..d868611be4cc 100644
--- a/ui/pages/confirmations/components/confirm/info/token-transfer/transaction-flow-section.tsx
+++ b/ui/pages/confirmations/components/confirm/info/token-transfer/transaction-flow-section.tsx
@@ -9,7 +9,6 @@ import {
   Icon,
   IconName,
   IconSize,
-  Text,
 } from '../../../../../../components/component-library';
 import {
   AlignItems,
@@ -17,7 +16,6 @@ import {
   FlexDirection,
   IconColor,
   JustifyContent,
-  TextVariant,
 } from '../../../../../../helpers/constants/design-system';
 import {
   ConfirmInfoRow,
@@ -30,9 +28,9 @@ import { useConfirmContext } from '../../../../context/confirm';
 import { useDecodedTransactionData } from '../hooks/useDecodedTransactionData';
 
 export const TransactionFlowSection = () => {
+  const t = useI18nContext();
   const { currentConfirmation: transactionMeta } =
     useConfirmContext<TransactionMeta>();
-  const t = useI18nContext();
 
   const { value, pending } = useDecodedTransactionData();
 

From 032e52e206c49e377ade6b0dcaddb1007e388bdd Mon Sep 17 00:00:00 2001
From: OGPoyraz <omergoktugpoyraz@gmail.com>
Date: Tue, 26 Nov 2024 11:11:33 +0100
Subject: [PATCH 07/15] Final fixes

---
 app/_locales/en/messages.json                        |  4 ++--
 ui/components/app/confirm/info/row/row.tsx           |  2 +-
 .../info/token-transfer/transaction-flow-section.tsx | 12 ++++++------
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 022e736c7964..54c0a782a592 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -420,7 +420,7 @@
     "message": "Estimated changes for this transaction have been updated. Review them closely before proceeding."
   },
   "alertMessageFirstTimeInteraction": {
-    "message": "1st interaction"
+    "message": "You're interacting with this address for the first time. Make sure that it's correct before you continue."
   },
   "alertMessageGasEstimateFailed": {
     "message": "We’re unable to provide an accurate fee and this estimate might be high. We suggest you to input a custom gas limit, but there’s a risk the transaction will still fail."
@@ -465,7 +465,7 @@
     "message": "Results have changed"
   },
   "alertReasonFirstTimeInteraction": {
-    "message": "You're interacting with this address for the first time. Make sure that it's correct before you continue."
+    "message": "1st interaction"
   },
   "alertReasonGasEstimateFailed": {
     "message": "Inaccurate fee"
diff --git a/ui/components/app/confirm/info/row/row.tsx b/ui/components/app/confirm/info/row/row.tsx
index 12c1b735c57a..193e62a5f2f3 100644
--- a/ui/components/app/confirm/info/row/row.tsx
+++ b/ui/components/app/confirm/info/row/row.tsx
@@ -109,7 +109,7 @@ export const ConfirmInfoRow: React.FC<ConfirmInfoRowProps> = ({
         color={TEXT_COLORS[variant] as TextColor}
         style={{
           overflowWrap: OverflowWrap.Anywhere,
-          minHeight: '22px',
+          minHeight: '24px',
           position: 'relative',
           ...style,
         }}
diff --git a/ui/pages/confirmations/components/confirm/info/token-transfer/transaction-flow-section.tsx b/ui/pages/confirmations/components/confirm/info/token-transfer/transaction-flow-section.tsx
index d868611be4cc..4b9016111f0f 100644
--- a/ui/pages/confirmations/components/confirm/info/token-transfer/transaction-flow-section.tsx
+++ b/ui/pages/confirmations/components/confirm/info/token-transfer/transaction-flow-section.tsx
@@ -9,6 +9,7 @@ import {
   Icon,
   IconName,
   IconSize,
+  Text,
 } from '../../../../../../components/component-library';
 import {
   AlignItems,
@@ -16,6 +17,7 @@ import {
   FlexDirection,
   IconColor,
   JustifyContent,
+  TextVariant,
 } from '../../../../../../helpers/constants/design-system';
 import {
   ConfirmInfoRow,
@@ -76,12 +78,10 @@ export const TransactionFlowSection = () => {
           color={IconColor.iconMuted}
         />
         {recipientAddress && (
-          <ConfirmInfoRow
+          <ConfirmInfoAlertRow
+            alertKey={RowAlertKey.FirstTimeInteraction}
             label={t('to')}
-            style={{
-              flexDirection: 'column',
-              alignItems: AlignItems.flexStart,
-            }}
+            ownerId={transactionMeta.id}
           >
             <Box marginTop={1}>
               <ConfirmInfoRowAddress
@@ -89,7 +89,7 @@ export const TransactionFlowSection = () => {
                 chainId={chainId}
               />
             </Box>
-          </ConfirmInfoRow>
+          </ConfirmInfoAlertRow>
         )}
       </Box>
     </ConfirmInfoSection>

From 948190ee8c1cc318e34aaa76d6bf97ccf008bceb Mon Sep 17 00:00:00 2001
From: OGPoyraz <omergoktugpoyraz@gmail.com>
Date: Tue, 26 Nov 2024 11:15:05 +0100
Subject: [PATCH 08/15] Update snapshot

---
 .../app/confirm/info/row/__snapshots__/row.test.tsx.snap  | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/ui/components/app/confirm/info/row/__snapshots__/row.test.tsx.snap b/ui/components/app/confirm/info/row/__snapshots__/row.test.tsx.snap
index 03201ddd10ea..a6a52806b2cf 100644
--- a/ui/components/app/confirm/info/row/__snapshots__/row.test.tsx.snap
+++ b/ui/components/app/confirm/info/row/__snapshots__/row.test.tsx.snap
@@ -3,8 +3,8 @@
 exports[`ConfirmInfoRow should match snapshot 1`] = `
 <div>
   <div
-    class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-center mm-box--color-text-default mm-box--rounded-lg"
-    style="overflow-wrap: anywhere; min-height: 22px; position: relative;"
+    class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-flex-start mm-box--color-text-default mm-box--rounded-lg"
+    style="overflow-wrap: anywhere; min-height: 24px; position: relative;"
   >
     <div
       class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
@@ -31,8 +31,8 @@ exports[`ConfirmInfoRow should match snapshot 1`] = `
 exports[`ConfirmInfoRow should match snapshot when copy is enabled 1`] = `
 <div>
   <div
-    class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-5 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-center mm-box--color-text-default mm-box--rounded-lg"
-    style="overflow-wrap: anywhere; min-height: 22px; position: relative;"
+    class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-5 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-flex-start mm-box--color-text-default mm-box--rounded-lg"
+    style="overflow-wrap: anywhere; min-height: 24px; position: relative;"
   >
     <button
       aria-label="copy-button"

From 70668c2e79aea5253d789eff698fb6b4ff568848 Mon Sep 17 00:00:00 2001
From: OGPoyraz <omergoktugpoyraz@gmail.com>
Date: Tue, 26 Nov 2024 11:34:50 +0100
Subject: [PATCH 09/15] Update snapshot

---
 .../__snapshots__/transaction-flow-section.test.tsx.snap      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/pages/confirmations/components/confirm/info/token-transfer/__snapshots__/transaction-flow-section.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/token-transfer/__snapshots__/transaction-flow-section.test.tsx.snap
index 01614eec26cd..70df703e7eb1 100644
--- a/ui/pages/confirmations/components/confirm/info/token-transfer/__snapshots__/transaction-flow-section.test.tsx.snap
+++ b/ui/pages/confirmations/components/confirm/info/token-transfer/__snapshots__/transaction-flow-section.test.tsx.snap
@@ -94,10 +94,10 @@ exports[`<TransactionFlowSection /> renders correctly 1`] = `
       />
       <div
         class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-flex-start mm-box--color-text-default mm-box--rounded-lg"
-        style="overflow-wrap: anywhere; min-height: 24px; position: relative; flex-direction: column; align-items: flex-start;"
+        style="overflow-wrap: anywhere; min-height: 24px; position: relative; background: transparent;"
       >
         <div
-          class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
+          class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start mm-box--color-text-default"
         >
           <div
             class="mm-box mm-box--display-flex mm-box--align-items-center"

From 8afa23cdf54b7e8a613f42cbba2d167977156ac3 Mon Sep 17 00:00:00 2001
From: OGPoyraz <omergoktugpoyraz@gmail.com>
Date: Tue, 26 Nov 2024 12:28:27 +0100
Subject: [PATCH 10/15] Fix lint

---
 .../info/token-transfer/transaction-flow-section.tsx       | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/ui/pages/confirmations/components/confirm/info/token-transfer/transaction-flow-section.tsx b/ui/pages/confirmations/components/confirm/info/token-transfer/transaction-flow-section.tsx
index 4b9016111f0f..420350a955aa 100644
--- a/ui/pages/confirmations/components/confirm/info/token-transfer/transaction-flow-section.tsx
+++ b/ui/pages/confirmations/components/confirm/info/token-transfer/transaction-flow-section.tsx
@@ -9,7 +9,6 @@ import {
   Icon,
   IconName,
   IconSize,
-  Text,
 } from '../../../../../../components/component-library';
 import {
   AlignItems,
@@ -17,12 +16,8 @@ import {
   FlexDirection,
   IconColor,
   JustifyContent,
-  TextVariant,
 } from '../../../../../../helpers/constants/design-system';
-import {
-  ConfirmInfoRow,
-  ConfirmInfoRowAddress,
-} from '../../../../../../components/app/confirm/info/row';
+import { ConfirmInfoRowAddress } from '../../../../../../components/app/confirm/info/row';
 import { RowAlertKey } from '../../../../../../components/app/confirm/info/row/constants';
 import { ConfirmInfoAlertRow } from '../../../../../../components/app/confirm/info/row/alert-row/alert-row';
 import { useI18nContext } from '../../../../../../hooks/useI18nContext';

From 4289e0da9f28ac48ea59e06a17cd43a52ccf3dd5 Mon Sep 17 00:00:00 2001
From: OGPoyraz <omergoktugpoyraz@gmail.com>
Date: Tue, 26 Nov 2024 13:09:08 +0100
Subject: [PATCH 11/15] Update snapshot

---
 .../__snapshots__/transaction-flow-section.test.tsx.snap        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/pages/confirmations/components/confirm/info/token-transfer/__snapshots__/transaction-flow-section.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/token-transfer/__snapshots__/transaction-flow-section.test.tsx.snap
index 2495fb5dcc7b..70df703e7eb1 100644
--- a/ui/pages/confirmations/components/confirm/info/token-transfer/__snapshots__/transaction-flow-section.test.tsx.snap
+++ b/ui/pages/confirmations/components/confirm/info/token-transfer/__snapshots__/transaction-flow-section.test.tsx.snap
@@ -11,7 +11,7 @@ exports[`<TransactionFlowSection /> renders correctly 1`] = `
     >
       <div
         class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-flex-start mm-box--color-text-default mm-box--rounded-lg"
-        style="overflow-wrap: anywhere; min-height: 24px; position: relative; background: transparent; flex-direction: column;"
+        style="overflow-wrap: anywhere; min-height: 24px; position: relative; background: transparent;"
       >
         <div
           class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start mm-box--color-text-default"

From 42ce1813e4767d062626f23a4ac5e73d7310e844 Mon Sep 17 00:00:00 2001
From: OGPoyraz <omergoktugpoyraz@gmail.com>
Date: Tue, 26 Nov 2024 13:15:03 +0100
Subject: [PATCH 12/15] Adjust latest changes

---
 .../__snapshots__/transaction-flow-section.test.tsx.snap    | 4 ++--
 .../info/token-transfer/transaction-flow-section.tsx        | 6 ++++++
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/ui/pages/confirmations/components/confirm/info/token-transfer/__snapshots__/transaction-flow-section.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/token-transfer/__snapshots__/transaction-flow-section.test.tsx.snap
index 70df703e7eb1..10955f0992bc 100644
--- a/ui/pages/confirmations/components/confirm/info/token-transfer/__snapshots__/transaction-flow-section.test.tsx.snap
+++ b/ui/pages/confirmations/components/confirm/info/token-transfer/__snapshots__/transaction-flow-section.test.tsx.snap
@@ -11,7 +11,7 @@ exports[`<TransactionFlowSection /> renders correctly 1`] = `
     >
       <div
         class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-flex-start mm-box--color-text-default mm-box--rounded-lg"
-        style="overflow-wrap: anywhere; min-height: 24px; position: relative; background: transparent;"
+        style="overflow-wrap: anywhere; min-height: 24px; position: relative; background: transparent; flex-direction: column;"
       >
         <div
           class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start mm-box--color-text-default"
@@ -94,7 +94,7 @@ exports[`<TransactionFlowSection /> renders correctly 1`] = `
       />
       <div
         class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-flex-start mm-box--color-text-default mm-box--rounded-lg"
-        style="overflow-wrap: anywhere; min-height: 24px; position: relative; background: transparent;"
+        style="overflow-wrap: anywhere; min-height: 24px; position: relative; background: transparent; flex-direction: column;"
       >
         <div
           class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start mm-box--color-text-default"
diff --git a/ui/pages/confirmations/components/confirm/info/token-transfer/transaction-flow-section.tsx b/ui/pages/confirmations/components/confirm/info/token-transfer/transaction-flow-section.tsx
index 85a411311220..bfa299436cc4 100644
--- a/ui/pages/confirmations/components/confirm/info/token-transfer/transaction-flow-section.tsx
+++ b/ui/pages/confirmations/components/confirm/info/token-transfer/transaction-flow-section.tsx
@@ -58,6 +58,9 @@ export const TransactionFlowSection = () => {
           alertKey={RowAlertKey.SigningInWith}
           label={t('from')}
           ownerId={transactionMeta.id}
+          style={{
+            flexDirection: FlexDirection.Column,
+          }}
         >
           <Box marginTop={1}>
             <ConfirmInfoRowAddress
@@ -77,6 +80,9 @@ export const TransactionFlowSection = () => {
             alertKey={RowAlertKey.FirstTimeInteraction}
             label={t('to')}
             ownerId={transactionMeta.id}
+            style={{
+              flexDirection: FlexDirection.Column,
+            }}
           >
             <Box marginTop={1}>
               <ConfirmInfoRowAddress

From c60c01053ea9aa6a7f5d277679b97c0dc6c12411 Mon Sep 17 00:00:00 2001
From: OGPoyraz <omergoktugpoyraz@gmail.com>
Date: Tue, 26 Nov 2024 13:50:30 +0100
Subject: [PATCH 13/15] Update snapshots

---
 .../__snapshots__/confirm.test.tsx.snap       | 38 +++++++++----------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/ui/pages/confirmations/confirm/__snapshots__/confirm.test.tsx.snap b/ui/pages/confirmations/confirm/__snapshots__/confirm.test.tsx.snap
index 1d504025a44d..7db6eb46298f 100644
--- a/ui/pages/confirmations/confirm/__snapshots__/confirm.test.tsx.snap
+++ b/ui/pages/confirmations/confirm/__snapshots__/confirm.test.tsx.snap
@@ -94,7 +94,7 @@ exports[`Confirm matches snapshot for signature - personal sign type 1`] = `
           >
             <div>
               <div
-                aria-describedby="tippy-tooltip-6"
+                aria-describedby="tippy-tooltip-5"
                 class=""
                 data-original-title="Account details"
                 data-tooltipped=""
@@ -154,7 +154,7 @@ exports[`Confirm matches snapshot for signature - personal sign type 1`] = `
                   </p>
                   <div>
                     <div
-                      aria-describedby="tippy-tooltip-7"
+                      aria-describedby="tippy-tooltip-6"
                       class=""
                       data-original-title="This is the site asking for your signature."
                       data-tooltipped=""
@@ -424,7 +424,7 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitB
           >
             <div>
               <div
-                aria-describedby="tippy-tooltip-18"
+                aria-describedby="tippy-tooltip-17"
                 class=""
                 data-original-title="Account details"
                 data-tooltipped=""
@@ -485,7 +485,7 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitB
                   </p>
                   <div>
                     <div
-                      aria-describedby="tippy-tooltip-19"
+                      aria-describedby="tippy-tooltip-18"
                       class=""
                       data-original-title="Estimated changes are what might happen if you go through with this transaction. This is just a prediction, not a guarantee."
                       data-tooltipped=""
@@ -549,7 +549,7 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitB
                           style="min-width: 0;"
                         >
                           <div
-                            aria-describedby="tippy-tooltip-25"
+                            aria-describedby="tippy-tooltip-24"
                             class=""
                             data-original-title="14,615,016,373,309,029,182,036,848,327,162,830,196,559,325,429.75"
                             data-tooltipped=""
@@ -602,7 +602,7 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitB
                           style="min-width: 0;"
                         >
                           <div
-                            aria-describedby="tippy-tooltip-26"
+                            aria-describedby="tippy-tooltip-25"
                             class=""
                             data-original-title="24,615,016,373,309,029,182,036,848,327,162,830,196,559,325,429.75"
                             data-tooltipped=""
@@ -743,7 +743,7 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitB
                   </p>
                   <div>
                     <div
-                      aria-describedby="tippy-tooltip-22"
+                      aria-describedby="tippy-tooltip-21"
                       class=""
                       data-original-title="This is the site asking for your signature."
                       data-tooltipped=""
@@ -1078,7 +1078,7 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitS
           >
             <div>
               <div
-                aria-describedby="tippy-tooltip-12"
+                aria-describedby="tippy-tooltip-11"
                 class=""
                 data-original-title="Account details"
                 data-tooltipped=""
@@ -1139,7 +1139,7 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitS
                   </p>
                   <div>
                     <div
-                      aria-describedby="tippy-tooltip-13"
+                      aria-describedby="tippy-tooltip-12"
                       class=""
                       data-original-title="Estimated changes are what might happen if you go through with this transaction. This is just a prediction, not a guarantee."
                       data-tooltipped=""
@@ -1203,7 +1203,7 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitS
                           style="min-width: 0;"
                         >
                           <div
-                            aria-describedby="tippy-tooltip-17"
+                            aria-describedby="tippy-tooltip-16"
                             class=""
                             data-original-title="14,615,016,373,309,029,182,036,848,327,162,830,196,559,325,429.75"
                             data-tooltipped=""
@@ -1344,7 +1344,7 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitS
                   </p>
                   <div>
                     <div
-                      aria-describedby="tippy-tooltip-15"
+                      aria-describedby="tippy-tooltip-14"
                       class=""
                       data-original-title="This is the site asking for your signature."
                       data-tooltipped=""
@@ -1681,7 +1681,7 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 1`] = `
           >
             <div>
               <div
-                aria-describedby="tippy-tooltip-10"
+                aria-describedby="tippy-tooltip-9"
                 class=""
                 data-original-title="Account details"
                 data-tooltipped=""
@@ -1741,7 +1741,7 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 1`] = `
                   </p>
                   <div>
                     <div
-                      aria-describedby="tippy-tooltip-11"
+                      aria-describedby="tippy-tooltip-10"
                       class=""
                       data-original-title="This is the site asking for your signature."
                       data-tooltipped=""
@@ -2761,7 +2761,7 @@ exports[`Confirm should match snapshot for signature - typed sign - permit 1`] =
           >
             <div>
               <div
-                aria-describedby="tippy-tooltip-2"
+                aria-describedby="tippy-tooltip-1"
                 class=""
                 data-original-title="Account details"
                 data-tooltipped=""
@@ -2822,7 +2822,7 @@ exports[`Confirm should match snapshot for signature - typed sign - permit 1`] =
                   </p>
                   <div>
                     <div
-                      aria-describedby="tippy-tooltip-3"
+                      aria-describedby="tippy-tooltip-2"
                       class=""
                       data-original-title="Estimated changes are what might happen if you go through with this transaction. This is just a prediction, not a guarantee."
                       data-tooltipped=""
@@ -2883,7 +2883,7 @@ exports[`Confirm should match snapshot for signature - typed sign - permit 1`] =
                         style="min-width: 0;"
                       >
                         <div
-                          aria-describedby="tippy-tooltip-4"
+                          aria-describedby="tippy-tooltip-3"
                           class=""
                           data-original-title="30"
                           data-tooltipped=""
@@ -3023,7 +3023,7 @@ exports[`Confirm should match snapshot for signature - typed sign - permit 1`] =
                   </p>
                   <div>
                     <div
-                      aria-describedby="tippy-tooltip-5"
+                      aria-describedby="tippy-tooltip-4"
                       class=""
                       data-original-title="This is the site asking for your signature."
                       data-tooltipped=""
@@ -3358,7 +3358,7 @@ exports[`Confirm should match snapshot signature - typed sign - order 1`] = `
           >
             <div>
               <div
-                aria-describedby="tippy-tooltip-8"
+                aria-describedby="tippy-tooltip-7"
                 class=""
                 data-original-title="Account details"
                 data-tooltipped=""
@@ -3418,7 +3418,7 @@ exports[`Confirm should match snapshot signature - typed sign - order 1`] = `
                   </p>
                   <div>
                     <div
-                      aria-describedby="tippy-tooltip-9"
+                      aria-describedby="tippy-tooltip-8"
                       class=""
                       data-original-title="This is the site asking for your signature."
                       data-tooltipped=""

From d5dde6adf9abbf6615312775c74dadaae06bf4b6 Mon Sep 17 00:00:00 2001
From: OGPoyraz <omergoktugpoyraz@gmail.com>
Date: Tue, 26 Nov 2024 14:40:15 +0100
Subject: [PATCH 14/15] Fix tests

---
 .../__snapshots__/confirm.test.tsx.snap       | 38 +++++++++----------
 .../useFirstTimeInteractionAlert.ts           |  2 +-
 2 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/ui/pages/confirmations/confirm/__snapshots__/confirm.test.tsx.snap b/ui/pages/confirmations/confirm/__snapshots__/confirm.test.tsx.snap
index 7db6eb46298f..1d504025a44d 100644
--- a/ui/pages/confirmations/confirm/__snapshots__/confirm.test.tsx.snap
+++ b/ui/pages/confirmations/confirm/__snapshots__/confirm.test.tsx.snap
@@ -94,7 +94,7 @@ exports[`Confirm matches snapshot for signature - personal sign type 1`] = `
           >
             <div>
               <div
-                aria-describedby="tippy-tooltip-5"
+                aria-describedby="tippy-tooltip-6"
                 class=""
                 data-original-title="Account details"
                 data-tooltipped=""
@@ -154,7 +154,7 @@ exports[`Confirm matches snapshot for signature - personal sign type 1`] = `
                   </p>
                   <div>
                     <div
-                      aria-describedby="tippy-tooltip-6"
+                      aria-describedby="tippy-tooltip-7"
                       class=""
                       data-original-title="This is the site asking for your signature."
                       data-tooltipped=""
@@ -424,7 +424,7 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitB
           >
             <div>
               <div
-                aria-describedby="tippy-tooltip-17"
+                aria-describedby="tippy-tooltip-18"
                 class=""
                 data-original-title="Account details"
                 data-tooltipped=""
@@ -485,7 +485,7 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitB
                   </p>
                   <div>
                     <div
-                      aria-describedby="tippy-tooltip-18"
+                      aria-describedby="tippy-tooltip-19"
                       class=""
                       data-original-title="Estimated changes are what might happen if you go through with this transaction. This is just a prediction, not a guarantee."
                       data-tooltipped=""
@@ -549,7 +549,7 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitB
                           style="min-width: 0;"
                         >
                           <div
-                            aria-describedby="tippy-tooltip-24"
+                            aria-describedby="tippy-tooltip-25"
                             class=""
                             data-original-title="14,615,016,373,309,029,182,036,848,327,162,830,196,559,325,429.75"
                             data-tooltipped=""
@@ -602,7 +602,7 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitB
                           style="min-width: 0;"
                         >
                           <div
-                            aria-describedby="tippy-tooltip-25"
+                            aria-describedby="tippy-tooltip-26"
                             class=""
                             data-original-title="24,615,016,373,309,029,182,036,848,327,162,830,196,559,325,429.75"
                             data-tooltipped=""
@@ -743,7 +743,7 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitB
                   </p>
                   <div>
                     <div
-                      aria-describedby="tippy-tooltip-21"
+                      aria-describedby="tippy-tooltip-22"
                       class=""
                       data-original-title="This is the site asking for your signature."
                       data-tooltipped=""
@@ -1078,7 +1078,7 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitS
           >
             <div>
               <div
-                aria-describedby="tippy-tooltip-11"
+                aria-describedby="tippy-tooltip-12"
                 class=""
                 data-original-title="Account details"
                 data-tooltipped=""
@@ -1139,7 +1139,7 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitS
                   </p>
                   <div>
                     <div
-                      aria-describedby="tippy-tooltip-12"
+                      aria-describedby="tippy-tooltip-13"
                       class=""
                       data-original-title="Estimated changes are what might happen if you go through with this transaction. This is just a prediction, not a guarantee."
                       data-tooltipped=""
@@ -1203,7 +1203,7 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitS
                           style="min-width: 0;"
                         >
                           <div
-                            aria-describedby="tippy-tooltip-16"
+                            aria-describedby="tippy-tooltip-17"
                             class=""
                             data-original-title="14,615,016,373,309,029,182,036,848,327,162,830,196,559,325,429.75"
                             data-tooltipped=""
@@ -1344,7 +1344,7 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitS
                   </p>
                   <div>
                     <div
-                      aria-describedby="tippy-tooltip-14"
+                      aria-describedby="tippy-tooltip-15"
                       class=""
                       data-original-title="This is the site asking for your signature."
                       data-tooltipped=""
@@ -1681,7 +1681,7 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 1`] = `
           >
             <div>
               <div
-                aria-describedby="tippy-tooltip-9"
+                aria-describedby="tippy-tooltip-10"
                 class=""
                 data-original-title="Account details"
                 data-tooltipped=""
@@ -1741,7 +1741,7 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 1`] = `
                   </p>
                   <div>
                     <div
-                      aria-describedby="tippy-tooltip-10"
+                      aria-describedby="tippy-tooltip-11"
                       class=""
                       data-original-title="This is the site asking for your signature."
                       data-tooltipped=""
@@ -2761,7 +2761,7 @@ exports[`Confirm should match snapshot for signature - typed sign - permit 1`] =
           >
             <div>
               <div
-                aria-describedby="tippy-tooltip-1"
+                aria-describedby="tippy-tooltip-2"
                 class=""
                 data-original-title="Account details"
                 data-tooltipped=""
@@ -2822,7 +2822,7 @@ exports[`Confirm should match snapshot for signature - typed sign - permit 1`] =
                   </p>
                   <div>
                     <div
-                      aria-describedby="tippy-tooltip-2"
+                      aria-describedby="tippy-tooltip-3"
                       class=""
                       data-original-title="Estimated changes are what might happen if you go through with this transaction. This is just a prediction, not a guarantee."
                       data-tooltipped=""
@@ -2883,7 +2883,7 @@ exports[`Confirm should match snapshot for signature - typed sign - permit 1`] =
                         style="min-width: 0;"
                       >
                         <div
-                          aria-describedby="tippy-tooltip-3"
+                          aria-describedby="tippy-tooltip-4"
                           class=""
                           data-original-title="30"
                           data-tooltipped=""
@@ -3023,7 +3023,7 @@ exports[`Confirm should match snapshot for signature - typed sign - permit 1`] =
                   </p>
                   <div>
                     <div
-                      aria-describedby="tippy-tooltip-4"
+                      aria-describedby="tippy-tooltip-5"
                       class=""
                       data-original-title="This is the site asking for your signature."
                       data-tooltipped=""
@@ -3358,7 +3358,7 @@ exports[`Confirm should match snapshot signature - typed sign - order 1`] = `
           >
             <div>
               <div
-                aria-describedby="tippy-tooltip-7"
+                aria-describedby="tippy-tooltip-8"
                 class=""
                 data-original-title="Account details"
                 data-tooltipped=""
@@ -3418,7 +3418,7 @@ exports[`Confirm should match snapshot signature - typed sign - order 1`] = `
                   </p>
                   <div>
                     <div
-                      aria-describedby="tippy-tooltip-8"
+                      aria-describedby="tippy-tooltip-9"
                       class=""
                       data-original-title="This is the site asking for your signature."
                       data-tooltipped=""
diff --git a/ui/pages/confirmations/hooks/alerts/transactions/useFirstTimeInteractionAlert.ts b/ui/pages/confirmations/hooks/alerts/transactions/useFirstTimeInteractionAlert.ts
index 24048e10f0a5..7e4a86c3802f 100644
--- a/ui/pages/confirmations/hooks/alerts/transactions/useFirstTimeInteractionAlert.ts
+++ b/ui/pages/confirmations/hooks/alerts/transactions/useFirstTimeInteractionAlert.ts
@@ -11,7 +11,7 @@ export function useFirstTimeInteractionAlert(): Alert[] {
   const t = useI18nContext();
   const { currentConfirmation } = useConfirmContext<TransactionMeta>();
 
-  const { isFirstTimeInteraction } = currentConfirmation;
+  const { isFirstTimeInteraction } = currentConfirmation ?? {};
 
   return useMemo(() => {
     // If isFirstTimeInteraction is undefined that means it's either disabled or error in accounts API

From 7801103fc056e87a665556ca18a0340d655faac4 Mon Sep 17 00:00:00 2001
From: OGPoyraz <omergoktugpoyraz@gmail.com>
Date: Tue, 26 Nov 2024 14:57:14 +0100
Subject: [PATCH 15/15] Fix tests

---
 .../alerts/transactions/useFirstTimeInteractionAlert.test.ts  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/pages/confirmations/hooks/alerts/transactions/useFirstTimeInteractionAlert.test.ts b/ui/pages/confirmations/hooks/alerts/transactions/useFirstTimeInteractionAlert.test.ts
index ceb8b6c0a13a..964b218e8501 100644
--- a/ui/pages/confirmations/hooks/alerts/transactions/useFirstTimeInteractionAlert.test.ts
+++ b/ui/pages/confirmations/hooks/alerts/transactions/useFirstTimeInteractionAlert.test.ts
@@ -104,10 +104,10 @@ describe('useFirstTimeInteractionAlert', () => {
     ).toEqual([]);
   });
 
-  it('returns alert if firstTimeInteraction is true', () => {
+  it('returns alert if isFirstTimeInteraction is true', () => {
     const firstTimeConfirmation = {
       ...CONFIRMATION_MOCK,
-      firstTimeInteraction: true,
+      isFirstTimeInteraction: true,
     };
     const alerts = runHook({
       currentConfirmation: firstTimeConfirmation,