From 898e83c4cd444c63bb149b49b4e8f7bc9fc56078 Mon Sep 17 00:00:00 2001
From: Piyal Basu <pbasu235@gmail.com>
Date: Tue, 7 Jan 2025 13:51:14 -0500
Subject: [PATCH 1/3] adding blockaid byline and feedback form

---
 @shared/api/types.ts                          |   4 +-
 .../components/WarningMessages/index.tsx      | 506 ++++++++++++------
 .../components/WarningMessages/styles.scss    |  93 +++-
 .../manageAssets/ManageAssetRows/index.tsx    |  28 +-
 .../sendPayment/SendAmount/index.tsx          |  29 +-
 .../SendConfirm/TransactionDetails/index.tsx  |   4 +-
 extension/src/popup/helpers/blockaid.ts       |  78 +++
 .../src/popup/views/SignTransaction/index.tsx |  44 +-
 .../popup/views/SignTransaction/styles.scss   |   9 +
 .../views/__tests__/SendPayment.test.tsx      |   2 +
 10 files changed, 557 insertions(+), 240 deletions(-)

diff --git a/@shared/api/types.ts b/@shared/api/types.ts
index f560816d08..03ddbe1dd6 100644
--- a/@shared/api/types.ts
+++ b/@shared/api/types.ts
@@ -244,7 +244,9 @@ export interface Balance {
 export type BlockAidScanAssetResult = Blockaid.TokenScanResponse;
 
 export type BlockAidScanSiteResult = Blockaid.SiteScanResponse;
-export type BlockAidScanTxResult = Blockaid.StellarTransactionScanResponse;
+export type BlockAidScanTxResult = Blockaid.StellarTransactionScanResponse & {
+  request_id: string;
+};
 export type BlockAidBulkScanAssetResult = Blockaid.TokenBulkScanResponse;
 
 export interface AssetBalance extends Balance {
diff --git a/extension/src/popup/components/WarningMessages/index.tsx b/extension/src/popup/components/WarningMessages/index.tsx
index 418b4e6cdd..9056dc72ed 100644
--- a/extension/src/popup/components/WarningMessages/index.tsx
+++ b/extension/src/popup/components/WarningMessages/index.tsx
@@ -1,8 +1,21 @@
 import React, { useState, useRef, useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { createPortal } from "react-dom";
-import { Button, Icon, Loader, Notification } from "@stellar/design-system";
+import {
+  Alert,
+  Button,
+  Card,
+  Icon,
+  Loader,
+  Notification,
+  Select,
+  Textarea,
+  Text,
+} from "@stellar/design-system";
 import { useTranslation, Trans } from "react-i18next";
+import { Field, FieldProps, Formik, Form } from "formik";
+import { object as YupObject, string as YupString } from "yup";
+
 import { POPUP_HEIGHT } from "constants/dimensions";
 import {
   Account,
@@ -61,7 +74,12 @@ import IconShieldBlockaid from "popup/assets/icon-shield-blockaid.svg";
 import IconWarningBlockaid from "popup/assets/icon-warning-blockaid.svg";
 import IconWarningBlockaidYellow from "popup/assets/icon-warning-blockaid-yellow.svg";
 import { getVerifiedTokens } from "popup/helpers/searchAsset";
-import { isAssetSuspicious, isBlockaidWarning } from "popup/helpers/blockaid";
+import {
+  isAssetSuspicious,
+  isBlockaidWarning,
+  reportAssetWarning,
+  reportTransactionWarning,
+} from "popup/helpers/blockaid";
 import { CopyValue } from "../CopyValue";
 
 import "./styles.scss";
@@ -257,15 +275,204 @@ export const BackupPhraseWarningMessage = () => {
   );
 };
 
-const BlockaidByLine = () => {
+interface BlockaidFeedbackFormValues {
+  details: string;
+  transactionIssue?: string;
+}
+
+const BlockaidFeedbackFormSchema = YupObject().shape({
+  details: YupString().required(),
+});
+
+interface BlockaidFeedbackFormProps {
+  address?: string;
+  requestId?: string;
+  setIsFeedbackActive: (isActive: boolean) => void;
+}
+
+const BlockaidFeedbackForm = ({
+  address,
+  requestId,
+  setIsFeedbackActive,
+}: BlockaidFeedbackFormProps) => {
+  const { t } = useTranslation();
+  const feedbackRef = useRef<HTMLDivElement>(null);
+  const networkDetails = useSelector(settingsNetworkDetailsSelector);
+
+  const handleSubmit = async (values: BlockaidFeedbackFormValues) => {
+    if (requestId && values.transactionIssue) {
+      await reportTransactionWarning({
+        details: values.details,
+        requestId,
+        event: values.transactionIssue,
+      });
+    } else if (address) {
+      await reportAssetWarning({
+        address,
+        details: values.details,
+        networkDetails,
+      });
+    }
+
+    setIsFeedbackActive(false);
+  };
+
+  const initialValues: BlockaidFeedbackFormValues = {
+    details: "",
+    transactionIssue: "should_be_benign",
+  };
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        feedbackRef.current &&
+        !feedbackRef.current.contains(event.target as Node)
+      ) {
+        setIsFeedbackActive(false);
+      }
+    };
+
+    document.addEventListener("click", handleClickOutside, true);
+    return () => {
+      document.removeEventListener("click", handleClickOutside, true);
+    };
+  }, [setIsFeedbackActive]);
+
+  return (
+    <>
+      <div className="BlockaidFeedback__background">
+        <LoadingBackground isActive isOpaque />
+      </div>
+      <div className="BlockaidFeedback" ref={feedbackRef}>
+        <div className="BlockaidFeedback__modal">
+          <Card>
+            <Formik
+              initialValues={initialValues}
+              onSubmit={handleSubmit}
+              validationSchema={BlockaidFeedbackFormSchema}
+            >
+              {({ dirty, isValid, isSubmitting }) => (
+                <Form>
+                  <div className="BlockaidFeedback__modal__content">
+                    <Text as="h1" size="md" weight="medium">
+                      {t("Leave feedback about Blockaid warnings and messages")}
+                    </Text>
+                    {requestId ? (
+                      <Field name="transactionIssue">
+                        {({ field }: FieldProps) => (
+                          <Select
+                            {...field}
+                            fieldSize="md"
+                            id="select"
+                            label={t("Transaction")}
+                          >
+                            <option value="should_be_benign">
+                              {t("Should be benign")}
+                            </option>
+                            <option value="wrong_simulation_result">
+                              {t("Wrong simulation result")}
+                            </option>
+                          </Select>
+                        )}
+                      </Field>
+                    ) : null}
+
+                    <Field name="details">
+                      {({ field }: FieldProps) => (
+                        <Textarea
+                          {...field}
+                          className="BlockaidFeedback__details"
+                          fieldSize="md"
+                          id="textarea"
+                          label="Feedback"
+                          placeholder="Additional details"
+                        />
+                      )}
+                    </Field>
+                  </div>
+                  <div className="BlockaidFeedback__modal__footer">
+                    <Button
+                      icon={<Icon.LinkExternal01 />}
+                      iconPosition="right"
+                      size="md"
+                      variant="tertiary"
+                      isFullWidth
+                    >
+                      {t("Learn more")}
+                    </Button>
+                    <Button
+                      size="md"
+                      variant="secondary"
+                      isFullWidth
+                      disabled={!(dirty && isValid)}
+                      isLoading={isSubmitting}
+                    >
+                      {t("Submit")}
+                    </Button>
+                  </div>
+                </Form>
+              )}
+            </Formik>
+          </Card>
+        </div>
+      </div>
+    </>
+  );
+};
+
+const BlockaidByLine = ({
+  hasArrow = false,
+  handleClick,
+  requestId,
+  address,
+}: {
+  hasArrow?: boolean;
+  handleClick?: () => void;
+  requestId?: string;
+  address?: string;
+}) => {
   const { t } = useTranslation();
+  const networkDetails = useSelector(settingsNetworkDetailsSelector);
+  const [isFeedbackActive, setIsFeedbackActive] = useState(false);
+
   return (
-    <div className="ScamAssetWarning__footer">
-      <img src={IconShieldBlockaid} alt="icon shield blockaid" />
-      {t("Powered by ")}
-      <a rel="noreferrer" href="https://www.blockaid.io/" target="_blank">
-        Blockaid
-      </a>
+    <div className="BlockaidByLine">
+      <div className="BlockaidByLine__copy">
+        <img src={IconShieldBlockaid} alt="icon shield blockaid" />
+        <Text as="p" size="xs" weight="medium">
+          {t("Powered by ")}
+          <a rel="noreferrer" href="https://www.blockaid.io/" target="_blank">
+            Blockaid
+          </a>
+        </Text>
+      </div>
+      {isMainnet(networkDetails) || isTestnet(networkDetails) ? (
+        <div
+          onClick={() => {
+            setIsFeedbackActive(true);
+          }}
+          className="BlockaidByLine__feedback"
+        >
+          <Text as="p" size="xs" weight="medium">
+            {t("Feedback?")}
+          </Text>
+        </div>
+      ) : null}
+
+      {hasArrow && (
+        <div className="BlockaidByLine__arrow" onClick={handleClick}>
+          <Icon.ChevronRight />
+        </div>
+      )}
+      {isFeedbackActive &&
+        createPortal(
+          <BlockaidFeedbackForm
+            requestId={requestId}
+            setIsFeedbackActive={setIsFeedbackActive}
+            address={address}
+          />,
+          document.querySelector("#modal-root")!,
+        )}
     </div>
   );
 };
@@ -287,27 +494,30 @@ export const BlockaidAssetWarning = ({
       }`}
       data-testid="ScamAssetWarning__box"
     >
-      <div className="Icon">
-        <img
-          className="ScamAssetWarning__box__icon"
-          src={isWarning ? IconWarningBlockaidYellow : IconWarningBlockaid}
-          alt="icon warning blockaid"
-        />
-      </div>
-      <div>
-        <div className="ScamAssetWarning__description">
-          {t(
-            `This token was flagged as ${blockaidData.result_type} by Blockaid. Interacting with this token may result in loss of funds and is not recommended for the following reasons`,
-          )}
-          :
-          <ul className="ScamAssetWarning__list">
-            {blockaidData.features &&
-              blockaidData.features.map((f) => (
-                <li key={f.feature_id}>{f.description}</li>
-              ))}
-          </ul>
+      <div className="ScamAssetWarning__box__content">
+        <div className="Icon">
+          <img
+            className="ScamAssetWarning__box__icon"
+            src={isWarning ? IconWarningBlockaidYellow : IconWarningBlockaid}
+            alt="icon warning blockaid"
+          />
+        </div>
+        <div>
+          <div className="ScamAssetWarning__description">
+            {t(
+              `This token was flagged as ${blockaidData.result_type} by Blockaid. Interacting with this token may result in loss of funds and is not recommended for the following reasons`,
+            )}
+            :
+            <ul className="ScamAssetWarning__list">
+              {blockaidData.features &&
+                blockaidData.features.map((f) => (
+                  <li key={f.feature_id}>{f.description}</li>
+                ))}
+            </ul>
+          </div>
         </div>
       </div>
+      <BlockaidByLine address={blockaidData.address} />
     </div>
   );
 };
@@ -423,7 +633,12 @@ export const ScamAssetWarning = ({
       document.querySelector("#modal-root")!,
     )
   ) : (
-    <div className="ScamAssetWarning" data-testid="ScamAssetWarning">
+    <div
+      className={`ScamAssetWarning ${
+        pillType === "Trustline" ? "ScamAssetWarning--isTrustline" : ""
+      }`}
+      data-testid="ScamAssetWarning"
+    >
       <View.Content>
         <ModalInfo
           code={code}
@@ -1114,31 +1329,21 @@ export const BlockAidSiteScanLabel = ({
 
 export const BlockaidTxScanLabel = ({
   scanResult,
-  isPopup = false,
 }: {
   scanResult: BlockAidScanTxResult;
-  isPopup?: boolean;
 }) => {
   const { t } = useTranslation();
-  const { simulation, validation } = scanResult;
+  const { simulation, validation, request_id: requestId } = scanResult;
 
   if (simulation && "error" in simulation) {
     const header = t("This transaction is expected to fail");
-    if (isPopup) {
-      return (
-        <BlockaidWarningModal
-          header={header}
-          description={[simulation.error]}
-          isWarning
-        />
-      );
-    }
     return (
-      <WarningMessage header={header} variant={WarningMessageVariant.warning}>
-        <div>
-          <p>{t(simulation.error)}</p>
-        </div>
-      </WarningMessage>
+      <BlockaidWarningModal
+        header={header}
+        description={[simulation.error]}
+        isWarning
+        requestId={requestId}
+      />
     );
   }
 
@@ -1152,22 +1357,13 @@ export const BlockaidTxScanLabel = ({
           message: validation.description,
         };
 
-        if (isPopup) {
-          return (
-            <BlockaidWarningModal
-              header={message.header}
-              description={[message.message]}
-              isWarning={false}
-            />
-          );
-        }
-
         return (
-          <WarningMessage header={message.header} variant={message.variant}>
-            <div>
-              <p>{t(message.message)}</p>
-            </div>
-          </WarningMessage>
+          <BlockaidWarningModal
+            header={message.header}
+            description={[message.message]}
+            isWarning={false}
+            requestId={requestId}
+          />
         );
       }
 
@@ -1178,22 +1374,12 @@ export const BlockaidTxScanLabel = ({
           message: validation.description,
         };
 
-        if (isPopup) {
-          return (
-            <BlockaidWarningModal
-              header={message.header}
-              description={[message.message]}
-              isWarning
-            />
-          );
-        }
-
         return (
-          <WarningMessage header={message.header} variant={message.variant}>
-            <div>
-              <p>{t(message.message)}</p>
-            </div>
-          </WarningMessage>
+          <BlockaidWarningModal
+            header={message.header}
+            description={[message.message]}
+            isWarning
+          />
         );
       }
 
@@ -1216,7 +1402,7 @@ export const BlockaidAssetScanLabel = ({
       header={`This asset was flagged as ${blockaidData.result_type}`}
       description={blockaidData.features?.map((f) => f.description) || []}
       isWarning={isWarning}
-      isAsset
+      address={blockaidData.address}
     />
   );
 };
@@ -1227,7 +1413,8 @@ interface BlockaidWarningModalProps {
   handleCloseClick?: () => void;
   isActive?: boolean;
   isWarning: boolean;
-  isAsset?: boolean;
+  requestId?: string;
+  address?: string;
 }
 
 export const BlockaidWarningModal = ({
@@ -1236,29 +1423,26 @@ export const BlockaidWarningModal = ({
   description,
   isActive = false,
   isWarning,
-  isAsset = false,
+  requestId,
+  address,
 }: BlockaidWarningModalProps) => {
   const { t } = useTranslation();
   const [isModalActive, setIsModalActive] = useState(isActive);
-  const variant = isWarning
-    ? WarningMessageVariant.warning
-    : WarningMessageVariant.highAlert;
+  const isAsset = !!address;
 
-  const WarningInfoBlock = () => (
-    <WarningMessageHeader
-      header={header}
-      icon={
-        <img
-          src={isWarning ? IconWarningBlockaidYellow : IconWarningBlockaid}
-          alt="icon warning blockaid"
-        />
-      }
-      variant={variant}
+  const WarningInfoBlock = ({ hasArrow = false }: { hasArrow?: boolean }) => (
+    <Alert
+      placement="inline"
+      variant={isWarning ? "warning" : "error"}
+      title={header}
     >
-      <div className="WarningMessage__link-wrapper">
-        <Icon.ChevronRight className="WarningMessage__link-icon" />
-      </div>
-    </WarningMessageHeader>
+      <BlockaidByLine
+        hasArrow={hasArrow}
+        handleClick={() => setIsModalActive(true)}
+        requestId={requestId}
+        address={address}
+      />
+    </Alert>
   );
 
   const truncatedDescription = (desc: string) => {
@@ -1282,7 +1466,7 @@ export const BlockaidWarningModal = ({
 
   return isModalActive ? (
     <>
-      <WarningInfoBlock />
+      <WarningInfoBlock hasArrow />
       {createPortal(
         <div
           className="BlockaidWarningModal"
@@ -1290,50 +1474,56 @@ export const BlockaidWarningModal = ({
         >
           <LoadingBackground isActive />
           <div className="BlockaidWarningModal__modal">
-            <div
-              className={`BlockaidWarningModal__modal__icon ${
-                isWarning ? "BlockaidWarningModal__modal__icon--isWarning" : ""
-              }`}
-            >
-              <img
-                className="BlockaidWarningModal__modal__image"
-                src={
-                  isWarning ? IconWarningBlockaidYellow : IconWarningBlockaid
-                }
-                alt="icon warning blockaid"
-              />
-            </div>
+            <Card>
+              <div
+                className={`BlockaidWarningModal__modal__icon ${
+                  isWarning
+                    ? "BlockaidWarningModal__modal__icon--isWarning"
+                    : ""
+                }`}
+              >
+                <img
+                  className="BlockaidWarningModal__modal__image"
+                  src={
+                    isWarning ? IconWarningBlockaidYellow : IconWarningBlockaid
+                  }
+                  alt="icon warning blockaid"
+                />
+              </div>
 
-            <div className="BlockaidWarningModal__modal__title">{header}</div>
-            <div className="BlockaidWarningModal__modal__description">
-              {t(
-                `${header} by Blockaid. Interacting with this ${
-                  isAsset ? "token" : "transaction"
-                } may result in loss of funds and is not recommended for the following reasons`,
-              )}
-              :
-              <ul className="ScamAssetWarning__list">
-                {description.map((d) => (
-                  <li key={d.replace(" ", "-")}>{truncatedDescription(d)}</li>
-                ))}
-              </ul>
-            </div>
-            <div className="BlockaidWarningModal__modal__byline">
-              <BlockaidByLine />
-            </div>
+              <div className="BlockaidWarningModal__modal__title">{header}</div>
+              <div className="BlockaidWarningModal__modal__description">
+                {t(
+                  `${header} by Blockaid. Interacting with this ${
+                    isAsset ? "token" : "transaction"
+                  } may result in loss of funds and is not recommended for the following reasons`,
+                )}
+                :
+                <ul className="ScamAssetWarning__list">
+                  {description.map((d) => (
+                    <li key={d.replace(" ", "-")}>{truncatedDescription(d)}</li>
+                  ))}
+                </ul>
+              </div>
+              <div className="BlockaidWarningModal__modal__byline">
+                <BlockaidByLine requestId={requestId} address={address} />
+              </div>
 
-            <Button
-              data-testid="BlockaidWarningModal__button"
-              size="md"
-              variant="tertiary"
-              isFullWidth
-              type="button"
-              onClick={() =>
-                handleCloseClick ? handleCloseClick() : setIsModalActive(false)
-              }
-            >
-              {t("Got it")}
-            </Button>
+              <Button
+                data-testid="BlockaidWarningModal__button"
+                size="md"
+                variant="tertiary"
+                isFullWidth
+                type="button"
+                onClick={() =>
+                  handleCloseClick
+                    ? handleCloseClick()
+                    : setIsModalActive(false)
+                }
+              >
+                {t("Got it")}
+              </Button>
+            </Card>
           </div>
         </div>,
         document.querySelector("#modal-root")!,
@@ -1342,45 +1532,9 @@ export const BlockaidWarningModal = ({
   ) : (
     <div
       className="WarningMessage__activate-button"
-      onClick={() => setIsModalActive(true)}
       data-testid={`BlockaidWarningModal__button__${isAsset ? "asset" : "tx"}`}
     >
-      <WarningInfoBlock />
-    </div>
-  );
-};
-
-export const BlockaidMaliciousTxInternalWarning = ({
-  description,
-}: {
-  description: string;
-}) => {
-  const { t } = useTranslation();
-
-  return (
-    <div className="ScamAssetWarning__box" data-testid="ScamAssetWarning__box">
-      <div className="Icon">
-        <img
-          className="ScamAssetWarning__box__icon"
-          src={IconWarningBlockaid}
-          alt="icon warning blockaid"
-        />
-      </div>
-      <div>
-        <div className="ScamAssetWarning__description">
-          {t(
-            "This transaction was flagged by Blockaid for the following reasons",
-          )}
-          :<div>{description}</div>
-        </div>
-        <div className="ScamAssetWarning__footer">
-          <img src={IconShieldBlockaid} alt="icon shield blockaid" />
-          {t("Powered by ")}
-          <a rel="noreferrer" href="https://www.blockaid.io/" target="_blank">
-            Blockaid
-          </a>
-        </div>
-      </div>
+      <WarningInfoBlock hasArrow />
     </div>
   );
 };
diff --git a/extension/src/popup/components/WarningMessages/styles.scss b/extension/src/popup/components/WarningMessages/styles.scss
index 9751e17918..3617de2b32 100644
--- a/extension/src/popup/components/WarningMessages/styles.scss
+++ b/extension/src/popup/components/WarningMessages/styles.scss
@@ -1,3 +1,5 @@
+@use "../../styles/utils.scss" as *;
+
 #modal-root {
   z-index: calc(var(--back--button-z-index) + 1);
   position: absolute;
@@ -5,6 +7,68 @@
   bottom: 0;
 }
 
+.BlockaidByLine {
+  display: flex;
+  font-size: var(--sds-fs-secondary);
+  justify-content: space-between;
+  gap: pxToRem(6px);
+
+  &__copy {
+    display: flex;
+    gap: pxToRem(4px);
+    align-items: center;
+  }
+
+  &__feedback {
+    cursor: pointer;
+    flex-grow: 1;
+    text-align: right;
+  }
+
+  &__arrow {
+    cursor: pointer;
+    margin-top: pxToRem(-22px);
+    width: pxToRem(16px);
+  }
+}
+
+.BlockaidFeedback {
+  height: 100vh;
+  width: 100vw;
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &__details {
+    resize: none;
+  }
+
+  &__background {
+    position: absolute;
+    // 1 higher than the default LoadingBackground to overlay any other active LoadingBackground
+    z-index: calc(var(--z-index--scam-warning) + 1);
+  }
+
+  &__modal {
+    position: absolute;
+    z-index: calc(var(--z-index--scam-warning) + 1);
+    width: pxToRem(312px);
+
+    &__content {
+      display: flex;
+      flex-direction: column;
+      gap: pxToRem(24px);
+      margin-bottom: pxToRem(16px);
+    }
+
+    &__footer {
+      display: flex;
+      gap: pxToRem(8px);
+    }
+  }
+}
+
 .WarningMessage {
   &--active {
     background: var(--sds-clr-gray-01);
@@ -20,10 +84,6 @@
     overflow-y: auto;
   }
 
-  &__activate-button {
-    cursor: pointer;
-  }
-
   &__backup {
     p {
       font-size: 0.875rem;
@@ -103,13 +163,20 @@
 }
 
 .ScamAssetWarning {
+  height: 100vh;
   z-index: var(--z-index--scam-warning);
-  display: flex;
-  position: fixed;
-  height: fit-content;
-  width: 100%;
+  position: absolute;
+  width: 100vw;
   bottom: 0;
   left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &--isTrustline {
+    position: fixed;
+    height: auto;
+  }
 
   .Button {
     white-space: nowrap !important;
@@ -121,13 +188,17 @@
   }
 
   &__box {
-    display: flex;
     background-color: var(--sds-clr-red-02);
     border: 1px solid var(--sds-clr-red-06);
     border-radius: 6px;
     margin-bottom: 1.5rem;
     padding: 0.5rem;
 
+    &__content {
+      display: flex;
+      height: fit-content;
+    }
+
     &__icon {
       margin: 0.125rem 0.375rem 0 0;
     }
@@ -501,10 +572,6 @@
   justify-content: center;
 
   &__modal {
-    background: var(--sds-clr-gray-06);
-    border-radius: 0.5rem;
-    border: 1px solid var(--sds-clr-gray-01);
-    padding: 1rem;
     width: 312px;
     z-index: 2;
 
diff --git a/extension/src/popup/components/manageAssets/ManageAssetRows/index.tsx b/extension/src/popup/components/manageAssets/ManageAssetRows/index.tsx
index 5349ea9813..607554445b 100644
--- a/extension/src/popup/components/manageAssets/ManageAssetRows/index.tsx
+++ b/extension/src/popup/components/manageAssets/ManageAssetRows/index.tsx
@@ -126,19 +126,21 @@ export const ManageAssetRows = ({
       {hwStatus === ShowOverlayStatus.IN_PROGRESS && walletType && (
         <HardwareSign walletType={walletType} />
       )}
-      {showBlockedDomainWarning && (
-        <ScamAssetWarning
-          pillType="Trustline"
-          domain={suspiciousAssetData.domain}
-          code={suspiciousAssetData.code}
-          issuer={suspiciousAssetData.issuer}
-          image={suspiciousAssetData.image}
-          blockaidData={suspiciousAssetData.blockaidData}
-          onClose={() => {
-            setShowBlockedDomainWarning(false);
-          }}
-        />
-      )}
+      {showBlockedDomainWarning &&
+        createPortal(
+          <ScamAssetWarning
+            pillType="Trustline"
+            domain={suspiciousAssetData.domain}
+            code={suspiciousAssetData.code}
+            issuer={suspiciousAssetData.issuer}
+            image={suspiciousAssetData.image}
+            blockaidData={suspiciousAssetData.blockaidData}
+            onClose={() => {
+              setShowBlockedDomainWarning(false);
+            }}
+          />,
+          document.querySelector("#modal-root")!,
+        )}
       {showNewAssetWarning && (
         <NewAssetWarning
           domain={suspiciousAssetData.domain}
diff --git a/extension/src/popup/components/sendPayment/SendAmount/index.tsx b/extension/src/popup/components/sendPayment/SendAmount/index.tsx
index 035ffc8397..166cd19354 100644
--- a/extension/src/popup/components/sendPayment/SendAmount/index.tsx
+++ b/extension/src/popup/components/sendPayment/SendAmount/index.tsx
@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useCallback } from "react";
 import { useDispatch, useSelector } from "react-redux";
+import { createPortal } from "react-dom";
 import debounce from "lodash/debounce";
 import { BigNumber } from "bignumber.js";
 import { useFormik } from "formik";
@@ -438,19 +439,21 @@ export const SendAmount = ({
 
   return (
     <>
-      {showBlockedDomainWarning && (
-        <ScamAssetWarning
-          isSendWarning
-          pillType="Transaction"
-          domain={suspiciousAssetData.domain}
-          code={suspiciousAssetData.code}
-          issuer={suspiciousAssetData.issuer}
-          image={suspiciousAssetData.image}
-          onClose={() => setShowBlockedDomainWarning(false)}
-          onContinue={() => navigateTo(next)}
-          blockaidData={suspiciousAssetData.blockaidData}
-        />
-      )}
+      {showBlockedDomainWarning &&
+        createPortal(
+          <ScamAssetWarning
+            isSendWarning
+            pillType="Transaction"
+            domain={suspiciousAssetData.domain}
+            code={suspiciousAssetData.code}
+            issuer={suspiciousAssetData.issuer}
+            image={suspiciousAssetData.image}
+            onClose={() => setShowBlockedDomainWarning(false)}
+            onContinue={() => navigateTo(next)}
+            blockaidData={suspiciousAssetData.blockaidData}
+          />,
+          document.querySelector("#modal-root")!,
+        )}
       <React.Fragment>
         <SubviewHeader
           title={
diff --git a/extension/src/popup/components/sendPayment/SendConfirm/TransactionDetails/index.tsx b/extension/src/popup/components/sendPayment/SendConfirm/TransactionDetails/index.tsx
index 1ee10de6c8..df38f0dbe2 100644
--- a/extension/src/popup/components/sendPayment/SendConfirm/TransactionDetails/index.tsx
+++ b/extension/src/popup/components/sendPayment/SendConfirm/TransactionDetails/index.tsx
@@ -708,9 +708,7 @@ export const TransactionDetails = ({
             ) : null}
 
             <div className="TransactionDetails__warnings">
-              {scanResult && (
-                <BlockaidTxScanLabel scanResult={scanResult} isPopup />
-              )}
+              {scanResult && <BlockaidTxScanLabel scanResult={scanResult} />}
               {submission.submitStatus === ActionStatus.IDLE && (
                 <FlaggedWarningMessage
                   isMemoRequired={isMemoRequired}
diff --git a/extension/src/popup/helpers/blockaid.ts b/extension/src/popup/helpers/blockaid.ts
index aa4aa5f67b..d036b02b16 100644
--- a/extension/src/popup/helpers/blockaid.ts
+++ b/extension/src/popup/helpers/blockaid.ts
@@ -133,6 +133,10 @@ type ScanAssetBulkResponse =
   | ScanAssetBulkResponseSuccess
   | ScanAssetBulkResponseError;
 
+type ReportAssetWarningResponse = { data: number; error: string };
+
+type ReportTransactionWarningResponse = { data: number; error: string };
+
 export const scanAsset = async (
   address: string,
   networkDetails: NetworkDetails,
@@ -246,3 +250,77 @@ export const scanAssetBulk = async (
   }
   return {} as BlockAidBulkScanAssetResult;
 };
+
+interface ReportAssetWarningParams {
+  address: string;
+  details: string;
+  networkDetails: NetworkDetails;
+}
+
+export const reportAssetWarning = async ({
+  address,
+  details,
+  networkDetails,
+}: ReportAssetWarningParams) => {
+  try {
+    if (!isMainnet(networkDetails)) {
+      /* Reporting assets is only supported on Mainnet */
+      return {} as ReportAssetWarningResponse;
+    }
+    const res = await fetchJson<ReportAssetWarningResponse>(
+      `${INDEXER_URL}/report-asset-warning?address=${address}&details=${encodeURIComponent(
+        details,
+      )}`,
+    );
+
+    if (res.error) {
+      Sentry.captureException(res.error || "Failed to report asset warning");
+    }
+
+    emitMetric(METRIC_NAMES.blockaidAssetScan, { response: res.data });
+    if (!res.data) {
+      return {} as ReportAssetWarningResponse;
+    }
+    return res.data;
+  } catch (err) {
+    console.error("Failed to report asset warning");
+    Sentry.captureException(err);
+  }
+  return {} as ReportAssetWarningResponse;
+};
+
+interface ReportTransactionWarningParams {
+  details: string;
+  requestId: string;
+  event: string;
+}
+
+export const reportTransactionWarning = async ({
+  details,
+  requestId,
+  event,
+}: ReportTransactionWarningParams) => {
+  try {
+    const res = await fetchJson<ReportTransactionWarningResponse>(
+      `${INDEXER_URL}/report-transaction-warning?details=${encodeURIComponent(
+        details,
+      )}&request_id=${requestId}&event=${event}`,
+    );
+
+    if (res.error) {
+      Sentry.captureException(
+        res.error || "Failed to report transaction warning",
+      );
+    }
+
+    emitMetric(METRIC_NAMES.blockaidAssetScan, { response: res.data });
+    if (!res.data) {
+      return {} as ReportTransactionWarningResponse;
+    }
+    return res.data;
+  } catch (err) {
+    console.error("Failed to report transaction warning");
+    Sentry.captureException(err);
+  }
+  return {} as ReportTransactionWarningResponse;
+};
diff --git a/extension/src/popup/views/SignTransaction/index.tsx b/extension/src/popup/views/SignTransaction/index.tsx
index f72b35c0cd..3d78732b19 100644
--- a/extension/src/popup/views/SignTransaction/index.tsx
+++ b/extension/src/popup/views/SignTransaction/index.tsx
@@ -300,28 +300,30 @@ export const SignTransaction = () => {
     }
 
     return (
-      <div className="BodyWrapper">
-        {accountNotFound && accountToSign ? (
-          <div className="SignTransaction__account-not-found">
-            <Notification
-              variant="warning"
-              icon={<Icon.InfoOctagon />}
-              title={t("Account not available")}
-            >
-              {t("The application is requesting a specific account")} (
-              {truncatedPublicKey(accountToSign)}),{" "}
-              {t(
-                "which is not available on Freighter. If you own this account, you can import it into Freighter to complete this request.",
-              )}
-            </Notification>
-          </div>
-        ) : null}
-        <MemoWarningMessage isMemoRequired={isMemoRequired} />
-        {!isDomainListedAllowed && !isSubmitDisabled ? (
-          <FirstTimeWarningMessage />
-        ) : null}
+      <div className="SignTransaction__tabWrapper">
         {scanResult && <BlockaidTxScanLabel scanResult={scanResult} />}
-        {renderTabBody()}
+        <div className="BodyWrapper">
+          {accountNotFound && accountToSign ? (
+            <div className="SignTransaction__account-not-found">
+              <Notification
+                variant="warning"
+                icon={<Icon.InfoOctagon />}
+                title={t("Account not available")}
+              >
+                {t("The application is requesting a specific account")} (
+                {truncatedPublicKey(accountToSign)}),{" "}
+                {t(
+                  "which is not available on Freighter. If you own this account, you can import it into Freighter to complete this request.",
+                )}
+              </Notification>
+            </div>
+          ) : null}
+          <MemoWarningMessage isMemoRequired={isMemoRequired} />
+          {!isDomainListedAllowed && !isSubmitDisabled ? (
+            <FirstTimeWarningMessage />
+          ) : null}
+          {renderTabBody()}
+        </div>
       </div>
     );
   }
diff --git a/extension/src/popup/views/SignTransaction/styles.scss b/extension/src/popup/views/SignTransaction/styles.scss
index e6a23dad95..7979a57e7f 100644
--- a/extension/src/popup/views/SignTransaction/styles.scss
+++ b/extension/src/popup/views/SignTransaction/styles.scss
@@ -1,3 +1,5 @@
+@use "../../styles/utils.scss" as *;
+
 .SignTransaction {
   height: 100vh;
   overflow: hidden;
@@ -7,6 +9,13 @@
   display: flex;
   justify-content: center;
 
+  &__tabWrapper {
+    display: flex;
+    flex-direction: column;
+    gap: pxToRem(8px);
+    width: 100%;
+  }
+
   &__Title {
     display: flex;
     flex-direction: column;
diff --git a/extension/src/popup/views/__tests__/SendPayment.test.tsx b/extension/src/popup/views/__tests__/SendPayment.test.tsx
index 405150166f..855052d166 100644
--- a/extension/src/popup/views/__tests__/SendPayment.test.tsx
+++ b/extension/src/popup/views/__tests__/SendPayment.test.tsx
@@ -178,6 +178,7 @@ describe("SendPayment", () => {
           result_type: "Malicious" as any,
           status: "Success" as any,
         },
+        request_id: "123",
       };
       return {
         scanTx: () => Promise.resolve(null),
@@ -215,6 +216,7 @@ describe("SendPayment", () => {
           result_type: "Malicious" as any,
           status: "Success" as any,
         },
+        request_id: "123",
       };
       return {
         scanTx: () => Promise.resolve(null),

From c4a606ec0d225ceca0f38d8c13675a3c0eccc259 Mon Sep 17 00:00:00 2001
From: Piyal Basu <pbasu235@gmail.com>
Date: Tue, 7 Jan 2025 18:11:10 -0500
Subject: [PATCH 2/3] fix tests

---
 extension/src/popup/__testHelpers__/index.tsx |  2 ++
 .../components/WarningMessages/index.tsx      | 26 ++++++++++++-------
 .../components/WarningMessages/styles.scss    |  6 ++++-
 .../views/__tests__/SendPayment.test.tsx      |  8 ++----
 4 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/extension/src/popup/__testHelpers__/index.tsx b/extension/src/popup/__testHelpers__/index.tsx
index 8d6a1f5d41..e6cecd926f 100644
--- a/extension/src/popup/__testHelpers__/index.tsx
+++ b/extension/src/popup/__testHelpers__/index.tsx
@@ -98,6 +98,8 @@ export const mockBalances = {
       total: new BigNumber("100"),
       available: new BigNumber("100"),
       blockaidData: {
+        address:
+          "USDC-GCK3D3V2XNLLKRFGFFFDEJXA4O2J4X36HET2FE446AV3M4U7DPHO3PEM",
         result_type: "Spam",
         features: [{ feature_id: "METADATA", description: "baz" }],
       },
diff --git a/extension/src/popup/components/WarningMessages/index.tsx b/extension/src/popup/components/WarningMessages/index.tsx
index 9056dc72ed..5aa2dd720b 100644
--- a/extension/src/popup/components/WarningMessages/index.tsx
+++ b/extension/src/popup/components/WarningMessages/index.tsx
@@ -447,20 +447,26 @@ const BlockaidByLine = ({
         </Text>
       </div>
       {isMainnet(networkDetails) || isTestnet(networkDetails) ? (
-        <div
-          onClick={() => {
-            setIsFeedbackActive(true);
-          }}
-          className="BlockaidByLine__feedback"
-        >
-          <Text as="p" size="xs" weight="medium">
-            {t("Feedback?")}
-          </Text>
+        <div className="BlockaidByLine__feedback">
+          <div
+            className="BlockaidByLine__feedback__button"
+            onClick={() => {
+              setIsFeedbackActive(true);
+            }}
+          >
+            <Text as="p" size="xs" weight="medium">
+              {t("Feedback?")}
+            </Text>
+          </div>
         </div>
       ) : null}
 
       {hasArrow && (
-        <div className="BlockaidByLine__arrow" onClick={handleClick}>
+        <div
+          className="BlockaidByLine__arrow"
+          data-testid={`BlockaidByLine__arrow__${address ? "asset" : "tx"}`}
+          onClick={handleClick}
+        >
           <Icon.ChevronRight />
         </div>
       )}
diff --git a/extension/src/popup/components/WarningMessages/styles.scss b/extension/src/popup/components/WarningMessages/styles.scss
index 3617de2b32..659bb4152d 100644
--- a/extension/src/popup/components/WarningMessages/styles.scss
+++ b/extension/src/popup/components/WarningMessages/styles.scss
@@ -20,9 +20,13 @@
   }
 
   &__feedback {
-    cursor: pointer;
     flex-grow: 1;
     text-align: right;
+
+    &__button {
+      cursor: pointer;
+      display: inline-block;
+    }
   }
 
   &__arrow {
diff --git a/extension/src/popup/views/__tests__/SendPayment.test.tsx b/extension/src/popup/views/__tests__/SendPayment.test.tsx
index 855052d166..6671dd4298 100644
--- a/extension/src/popup/views/__tests__/SendPayment.test.tsx
+++ b/extension/src/popup/views/__tests__/SendPayment.test.tsx
@@ -357,9 +357,7 @@ const testPaymentFlow = async (
         screen.getByTestId("BlockaidWarningModal__button__tx"),
       ).toBeDefined();
 
-      await fireEvent.click(
-        screen.getByTestId("BlockaidWarningModal__button__tx"),
-      );
+      await fireEvent.click(screen.getByTestId("BlockaidByLine__arrow__tx"));
       expect(screen.getByTestId("BlockaidWarningModal__tx")).toBeDefined();
       if (hasSimError) {
         expect(
@@ -373,9 +371,7 @@ const testPaymentFlow = async (
 
       await fireEvent.click(screen.getByTestId("BlockaidWarningModal__button"));
 
-      await fireEvent.click(
-        screen.getByTestId("BlockaidWarningModal__button__asset"),
-      );
+      await fireEvent.click(screen.getByTestId("BlockaidByLine__arrow__asset"));
       expect(screen.getByTestId("BlockaidWarningModal__asset")).toBeDefined();
       expect(
         screen.getByTestId("BlockaidWarningModal__asset"),

From f6f76f3f92046c6b94443ce3acaf735fdb3d1a9a Mon Sep 17 00:00:00 2001
From: Piyal Basu <pbasu235@gmail.com>
Date: Tue, 7 Jan 2025 18:13:31 -0500
Subject: [PATCH 3/3] Added translations

---
 extension/src/popup/locales/en/translation.json | 5 ++++-
 extension/src/popup/locales/pt/translation.json | 5 ++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/extension/src/popup/locales/en/translation.json b/extension/src/popup/locales/en/translation.json
index 0f25a8bad2..fd21294608 100644
--- a/extension/src/popup/locales/en/translation.json
+++ b/extension/src/popup/locales/en/translation.json
@@ -168,6 +168,7 @@
   "Failed to fetch your account balances": "Failed to fetch your account balances.",
   "FEDERATION ADDRESS": "FEDERATION ADDRESS",
   "Fee": "Fee",
+  "Feedback?": "Feedback?",
   "Fees can vary depending on the network congestion": {
     " Please try using the suggested fee and try again": "Fees can vary depending on the network congestion. Please try using the suggested fee and try again."
   },
@@ -253,6 +254,7 @@
   "Learn more about transaction fees": "Learn more about transaction fees",
   "Learn more about trustlines": "Learn more about trustlines",
   "Leave Feedback": "Leave Feedback",
+  "Leave feedback about Blockaid warnings and messages": "Leave feedback about Blockaid warnings and messages",
   "Less common": "Less common",
   "Limit": "Limit",
   "LINKS": "LINKS",
@@ -400,6 +402,7 @@
   "SET MAX": "SET MAX",
   "Set recommended": "Set recommended",
   "Settings": "Settings",
+  "Should be benign": "Should be benign",
   "Show recovery phrase": "Show recovery phrase",
   "Sign": "Sign",
   "Sign anyway": "Sign anyway",
@@ -468,7 +471,6 @@
   "This transaction could not be completed": "This transaction could not be completed.",
   "This transaction is expected to fail": "This transaction is expected to fail",
   "This transaction was flagged as malicious": "This transaction was flagged as malicious",
-  "This transaction was flagged by Blockaid for the following reasons": "This transaction was flagged by Blockaid for the following reasons",
   "This will be used to unlock your wallet": "This will be used to unlock your wallet",
   "To": "To",
   "To access your wallet, click Freighter from your browser Extensions browser menu": "To access your wallet, click Freighter from your browser Extensions browser menu.",
@@ -512,6 +514,7 @@
   "which is not available on Freighter": {
     " If you own this account, you can import it into Freighter to complete this request": "which is not available on Freighter. If you own this account, you can import it into Freighter to complete this request."
   },
+  "Wrong simulation result": "Wrong simulation result",
   "XDR": "XDR",
   "XLM": "XLM",
   "You are attempting to sign an arbitrary message": {
diff --git a/extension/src/popup/locales/pt/translation.json b/extension/src/popup/locales/pt/translation.json
index 41c945ca97..6846d59ea2 100644
--- a/extension/src/popup/locales/pt/translation.json
+++ b/extension/src/popup/locales/pt/translation.json
@@ -168,6 +168,7 @@
   "Failed to fetch your account balances": "Failed to fetch your account balances.",
   "FEDERATION ADDRESS": "FEDERATION ADDRESS",
   "Fee": "Fee",
+  "Feedback?": "Feedback?",
   "Fees can vary depending on the network congestion": {
     " Please try using the suggested fee and try again": "Fees can vary depending on the network congestion. Please try using the suggested fee and try again."
   },
@@ -253,6 +254,7 @@
   "Learn more about transaction fees": "Learn more about transaction fees",
   "Learn more about trustlines": "Learn more about trustlines",
   "Leave Feedback": "Leave Feedback",
+  "Leave feedback about Blockaid warnings and messages": "Leave feedback about Blockaid warnings and messages",
   "Less common": "Less common",
   "Limit": "Limit",
   "LINKS": "LINKS",
@@ -400,6 +402,7 @@
   "SET MAX": "SET MAX",
   "Set recommended": "Set recommended",
   "Settings": "Settings",
+  "Should be benign": "Should be benign",
   "Show recovery phrase": "Show recovery phrase",
   "Sign": "Sign",
   "Sign anyway": "Sign anyway",
@@ -468,7 +471,6 @@
   "This transaction could not be completed": "This transaction could not be completed.",
   "This transaction is expected to fail": "This transaction is expected to fail",
   "This transaction was flagged as malicious": "This transaction was flagged as malicious",
-  "This transaction was flagged by Blockaid for the following reasons": "This transaction was flagged by Blockaid for the following reasons",
   "This will be used to unlock your wallet": "This will be used to unlock your wallet",
   "To": "To",
   "To access your wallet, click Freighter from your browser Extensions browser menu": "To access your wallet, click Freighter from your browser Extensions browser menu.",
@@ -512,6 +514,7 @@
   "which is not available on Freighter": {
     " If you own this account, you can import it into Freighter to complete this request": "which is not available on Freighter. If you own this account, you can import it into Freighter to complete this request."
   },
+  "Wrong simulation result": "Wrong simulation result",
   "XDR": "XDR",
   "XLM": "XLM",
   "You are attempting to sign an arbitrary message": {