From 7a8aa27ba8b5e7f1ab3456740cc51af4be323811 Mon Sep 17 00:00:00 2001
From: Diana Savatina <diana.savvatina@trili.tech>
Date: Fri, 20 Dec 2024 10:48:06 +0000
Subject: [PATCH 1/2] fix: WalletConnect, moved sdkType to headerProps

---
 apps/web/src/components/SendFlow/Beacon/useSignWithBeacon.tsx | 3 +--
 .../SendFlow/WalletConnect/useSignWithWalletConnect.tsx       | 2 +-
 apps/web/src/components/SendFlow/common/BatchSignPage.tsx     | 4 +++-
 .../SendFlow/common/OriginationOperationSignPage.test.tsx     | 2 +-
 .../src/components/SendFlow/common/SingleSignPage.test.tsx    | 2 +-
 apps/web/src/components/SendFlow/common/SingleSignPage.tsx    | 4 +++-
 apps/web/src/components/SendFlow/common/TezSignPage.test.tsx  | 2 +-
 apps/web/src/components/SendFlow/utils.tsx                    | 2 +-
 apps/web/src/components/WalletConnect/useHandleWcRequest.tsx  | 2 +-
 .../web/src/components/beacon/useHandleBeaconMessage.test.tsx | 4 ++--
 apps/web/src/components/beacon/useHandleBeaconMessage.tsx     | 2 +-
 11 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/apps/web/src/components/SendFlow/Beacon/useSignWithBeacon.tsx b/apps/web/src/components/SendFlow/Beacon/useSignWithBeacon.tsx
index 7def3c8f69..80ca2bf2ab 100644
--- a/apps/web/src/components/SendFlow/Beacon/useSignWithBeacon.tsx
+++ b/apps/web/src/components/SendFlow/Beacon/useSignWithBeacon.tsx
@@ -11,7 +11,6 @@ import { type CalculatedSignProps, type SdkSignPageProps } from "../utils";
 export const useSignWithBeacon = ({
   operation,
   headerProps,
-  requestId,
 }: SdkSignPageProps): CalculatedSignProps => {
   const { isLoading: isSigning, handleAsyncAction } = useAsyncActionHandler();
   const { openWith } = useDynamicModalContext();
@@ -28,7 +27,7 @@ export const useSignWithBeacon = ({
 
         const response: OperationResponseInput = {
           type: BeaconMessageType.OperationResponse,
-          id: requestId.id.toString(),
+          id: headerProps.requestId.id.toString(),
           transactionHash: opHash,
         };
         await WalletClient.respond(response);
diff --git a/apps/web/src/components/SendFlow/WalletConnect/useSignWithWalletConnect.tsx b/apps/web/src/components/SendFlow/WalletConnect/useSignWithWalletConnect.tsx
index 809c9e7a31..71ce454142 100644
--- a/apps/web/src/components/SendFlow/WalletConnect/useSignWithWalletConnect.tsx
+++ b/apps/web/src/components/SendFlow/WalletConnect/useSignWithWalletConnect.tsx
@@ -11,12 +11,12 @@ import { type CalculatedSignProps, type SdkSignPageProps } from "../utils";
 export const useSignWithWalletConnect = ({
   operation,
   headerProps,
-  requestId,
 }: SdkSignPageProps): CalculatedSignProps => {
   const { isLoading: isSigning, handleAsyncAction } = useAsyncActionHandler();
   const { openWith } = useDynamicModalContext();
 
   const form = useForm({ defaultValues: { executeParams: operation.estimates } });
+  const requestId = headerProps.requestId;
 
   if (requestId.sdkType !== "walletconnect") {
     return {
diff --git a/apps/web/src/components/SendFlow/common/BatchSignPage.tsx b/apps/web/src/components/SendFlow/common/BatchSignPage.tsx
index eee5749c08..b80e8ea1a3 100644
--- a/apps/web/src/components/SendFlow/common/BatchSignPage.tsx
+++ b/apps/web/src/components/SendFlow/common/BatchSignPage.tsx
@@ -34,7 +34,9 @@ export const BatchSignPage = (
   const beaconCalculatedProps = useSignWithBeacon({ ...signProps });
   const walletConnectCalculatedProps = useSignWithWalletConnect({ ...signProps });
   const calculatedProps =
-    signProps.requestId.sdkType === "beacon" ? beaconCalculatedProps : walletConnectCalculatedProps;
+    signProps.headerProps.requestId.sdkType === "beacon"
+      ? beaconCalculatedProps
+      : walletConnectCalculatedProps;
 
   const { isSigning, onSign, network, fee } = calculatedProps;
   const { signer, operations } = signProps.operation;
diff --git a/apps/web/src/components/SendFlow/common/OriginationOperationSignPage.test.tsx b/apps/web/src/components/SendFlow/common/OriginationOperationSignPage.test.tsx
index b9f4f89e9a..c54e81238c 100644
--- a/apps/web/src/components/SendFlow/common/OriginationOperationSignPage.test.tsx
+++ b/apps/web/src/components/SendFlow/common/OriginationOperationSignPage.test.tsx
@@ -35,11 +35,11 @@ const headerProps: SignHeaderProps = {
   network: GHOSTNET,
   appName: message.appMetadata.name,
   appIcon: message.appMetadata.icon,
+  requestId: { sdkType: "beacon", id: message.id },
 };
 const signProps: SdkSignPageProps = {
   headerProps: headerProps,
   operation: operation,
-  requestId: { sdkType: "beacon", id: message.id },
 };
 
 jest.mock("@umami/core", () => ({
diff --git a/apps/web/src/components/SendFlow/common/SingleSignPage.test.tsx b/apps/web/src/components/SendFlow/common/SingleSignPage.test.tsx
index 1f61a0ebe2..7bc25ac05d 100644
--- a/apps/web/src/components/SendFlow/common/SingleSignPage.test.tsx
+++ b/apps/web/src/components/SendFlow/common/SingleSignPage.test.tsx
@@ -81,6 +81,7 @@ describe("<SingleSignPage />", () => {
       network: GHOSTNET,
       appName: message.appMetadata.name,
       appIcon: message.appMetadata.icon,
+      requestId: { sdkType: "beacon", id: message.id },
     };
     store.dispatch(networksActions.setCurrent(GHOSTNET));
 
@@ -89,7 +90,6 @@ describe("<SingleSignPage />", () => {
       const signProps: SdkSignPageProps = {
         headerProps: headerProps,
         operation: operation,
-        requestId: { sdkType: "beacon", id: message.id },
       };
 
       jest.mocked(useGetSecretKey).mockImplementation(() => () => Promise.resolve("secretKey"));
diff --git a/apps/web/src/components/SendFlow/common/SingleSignPage.tsx b/apps/web/src/components/SendFlow/common/SingleSignPage.tsx
index 5c35f7addf..2716600398 100644
--- a/apps/web/src/components/SendFlow/common/SingleSignPage.tsx
+++ b/apps/web/src/components/SendFlow/common/SingleSignPage.tsx
@@ -18,7 +18,9 @@ export const SingleSignPage = (signProps: SdkSignPageProps) => {
   const beaconCalculatedProps = useSignWithBeacon({ ...signProps });
   const walletConnectCalculatedProps = useSignWithWalletConnect({ ...signProps });
   const calculatedProps =
-    signProps.requestId.sdkType === "beacon" ? beaconCalculatedProps : walletConnectCalculatedProps;
+    signProps.headerProps.requestId.sdkType === "beacon"
+      ? beaconCalculatedProps
+      : walletConnectCalculatedProps;
 
   switch (operationType) {
     case "tez": {
diff --git a/apps/web/src/components/SendFlow/common/TezSignPage.test.tsx b/apps/web/src/components/SendFlow/common/TezSignPage.test.tsx
index 538ff08fa2..682c7832d1 100644
--- a/apps/web/src/components/SendFlow/common/TezSignPage.test.tsx
+++ b/apps/web/src/components/SendFlow/common/TezSignPage.test.tsx
@@ -55,11 +55,11 @@ describe("<TezSignPage />", () => {
       network: GHOSTNET,
       appName: message.appMetadata.name,
       appIcon: message.appMetadata.icon,
+      requestId: { sdkType: "beacon", id: message.id },
     };
     const signProps: SdkSignPageProps = {
       headerProps: headerProps,
       operation: operation,
-      requestId: { sdkType: "beacon", id: message.id },
     };
 
     store.dispatch(networksActions.setCurrent(GHOSTNET));
diff --git a/apps/web/src/components/SendFlow/utils.tsx b/apps/web/src/components/SendFlow/utils.tsx
index dfc8ff88f3..45a54f2547 100644
--- a/apps/web/src/components/SendFlow/utils.tsx
+++ b/apps/web/src/components/SendFlow/utils.tsx
@@ -76,10 +76,10 @@ export type SignHeaderProps = {
   network: Network;
   appName: string;
   appIcon?: string;
+  requestId: SignRequestId;
 };
 
 export type SdkSignPageProps = {
-  requestId: SignRequestId;
   operation: EstimatedAccountOperations;
   headerProps: SignHeaderProps;
 };
diff --git a/apps/web/src/components/WalletConnect/useHandleWcRequest.tsx b/apps/web/src/components/WalletConnect/useHandleWcRequest.tsx
index 89f476e89f..a122d06437 100644
--- a/apps/web/src/components/WalletConnect/useHandleWcRequest.tsx
+++ b/apps/web/src/components/WalletConnect/useHandleWcRequest.tsx
@@ -126,11 +126,11 @@ export const useHandleWcRequest = () => {
             network,
             appName: session.peer.metadata.name,
             appIcon: session.peer.metadata.icons[0],
+            requestId: { sdkType: "walletconnect", id: id, topic },
           };
           const signProps: SdkSignPageProps = {
             headerProps: headerProps,
             operation: estimatedOperations,
-            requestId: { sdkType: "walletconnect", id: id, topic },
           };
 
           if (operation.operations.length === 1) {
diff --git a/apps/web/src/components/beacon/useHandleBeaconMessage.test.tsx b/apps/web/src/components/beacon/useHandleBeaconMessage.test.tsx
index 00eb28aeed..06a515d8b1 100644
--- a/apps/web/src/components/beacon/useHandleBeaconMessage.test.tsx
+++ b/apps/web/src/components/beacon/useHandleBeaconMessage.test.tsx
@@ -360,11 +360,11 @@ describe("<useHandleBeaconMessage />", () => {
           network: MAINNET,
           appName: message.appMetadata.name,
           appIcon: message.appMetadata.icon,
+          requestId: { sdkType: "beacon", id: message.id },
         };
         const signProps: SdkSignPageProps = {
           headerProps: headerProps,
           operation: operation,
-          requestId: { sdkType: "beacon", id: message.id },
         };
 
         const {
@@ -465,11 +465,11 @@ describe("<useHandleBeaconMessage />", () => {
           network: MAINNET,
           appName: message.appMetadata.name,
           appIcon: message.appMetadata.icon,
+          requestId: { sdkType: "beacon", id: message.id },
         };
         const signProps: SdkSignPageProps = {
           headerProps: headerProps,
           operation: estimatedOperations,
-          requestId: { sdkType: "beacon", id: message.id },
         };
 
         const {
diff --git a/apps/web/src/components/beacon/useHandleBeaconMessage.tsx b/apps/web/src/components/beacon/useHandleBeaconMessage.tsx
index d387e4a4fc..01a0bf5ad0 100644
--- a/apps/web/src/components/beacon/useHandleBeaconMessage.tsx
+++ b/apps/web/src/components/beacon/useHandleBeaconMessage.tsx
@@ -129,11 +129,11 @@ export const useHandleBeaconMessage = () => {
               network: network,
               appName: message.appMetadata.name,
               appIcon: message.appMetadata.icon,
+              requestId: { sdkType: "beacon", id: message.id },
             };
             const signProps: SdkSignPageProps = {
               headerProps: headerProps,
               operation: estimatedOperations,
-              requestId: { sdkType: "beacon", id: message.id },
             };
 
             if (operation.operations.length === 1) {

From 6127b2d5e3831bd75defccc85fb873ada1a3d1b9 Mon Sep 17 00:00:00 2001
From: Diana Savatina <diana.savvatina@trili.tech>
Date: Thu, 19 Dec 2024 16:13:12 +0000
Subject: [PATCH 2/2] feat: WalletConnect integration, part 8, verify

---
 .../src/components/SendFlow/common/Header.tsx | 63 ++++++++++--------
 .../SendFlow/common/TezSignPage.test.tsx      |  2 +
 apps/web/src/components/SendFlow/utils.tsx    |  4 ++
 .../WalletConnect/ProjectInfoCard.tsx         |  8 +--
 .../WalletConnect/SessionProposalModal.tsx    | 11 +++-
 .../WalletConnect/VerifyInfobox.tsx           | 66 +++++++++++++++----
 .../WalletConnect/useHandleWcRequest.tsx      |  4 ++
 .../common/SignPayloadRequestModal.test.tsx   | 47 +++++++++++++
 .../common/SignPayloadRequestModal.tsx        |  8 +++
 9 files changed, 165 insertions(+), 48 deletions(-)

diff --git a/apps/web/src/components/SendFlow/common/Header.tsx b/apps/web/src/components/SendFlow/common/Header.tsx
index c032a227d6..c806f31567 100644
--- a/apps/web/src/components/SendFlow/common/Header.tsx
+++ b/apps/web/src/components/SendFlow/common/Header.tsx
@@ -3,6 +3,7 @@ import { capitalize } from "lodash";
 
 import { CodeSandboxIcon } from "../../../assets/icons";
 import { useColor } from "../../../styles/useColor";
+import { VerifyInfobox } from "../../WalletConnect/VerifyInfobox";
 import { SignPageHeader } from "../SignPageHeader";
 import { type SignHeaderProps } from "../utils";
 
@@ -10,33 +11,41 @@ export const Header = ({ headerProps }: { headerProps: SignHeaderProps }) => {
   const color = useColor();
 
   return (
-    <SignPageHeader>
-      <Flex alignItems="center" justifyContent="center" marginTop="10px">
-        <Heading marginRight="4px" color={color("700")} size="sm">
-          Network:
-        </Heading>
-        <Text color={color("700")} fontWeight="400" size="sm">
-          {capitalize(headerProps.network.name)}
-        </Text>
-      </Flex>
+    <>
+      <SignPageHeader>
+        <Flex alignItems="center" justifyContent="center" marginTop="10px">
+          <Heading marginRight="4px" color={color("700")} size="sm">
+            Network:
+          </Heading>
+          <Text color={color("700")} fontWeight="400" size="sm">
+            {capitalize(headerProps.network.name)}
+          </Text>
+        </Flex>
 
-      <Flex
-        alignItems="center"
-        marginTop="16px"
-        padding="15px"
-        borderRadius="4px"
-        backgroundColor={color("100")}
-      >
-        <AspectRatio width="30px" marginRight="12px" ratio={1}>
-          <Image
-            borderRadius="4px"
-            objectFit="cover"
-            fallback={<CodeSandboxIcon width="36px" height="36px" />}
-            src={headerProps.appIcon}
-          />
-        </AspectRatio>
-        <Heading size="sm">{headerProps.appName}</Heading>
-      </Flex>
-    </SignPageHeader>
+        <Flex
+          alignItems="center"
+          marginTop="16px"
+          padding="15px"
+          borderRadius="4px"
+          backgroundColor={color("100")}
+        >
+          <AspectRatio width="30px" marginRight="12px" ratio={1}>
+            <Image
+              borderRadius="4px"
+              objectFit="cover"
+              fallback={<CodeSandboxIcon width="36px" height="36px" />}
+              src={headerProps.appIcon}
+            />
+          </AspectRatio>
+          <Heading size="sm">{headerProps.appName}</Heading>
+        </Flex>
+      </SignPageHeader>
+      {headerProps.requestId.sdkType === "walletconnect" ? (
+        <VerifyInfobox
+          isScam={headerProps.isScam ?? false}
+          validationStatus={headerProps.validationStatus ?? "UNKNOWN"}
+        />
+      ) : null}
+    </>
   );
 };
diff --git a/apps/web/src/components/SendFlow/common/TezSignPage.test.tsx b/apps/web/src/components/SendFlow/common/TezSignPage.test.tsx
index 682c7832d1..407e910d68 100644
--- a/apps/web/src/components/SendFlow/common/TezSignPage.test.tsx
+++ b/apps/web/src/components/SendFlow/common/TezSignPage.test.tsx
@@ -73,6 +73,8 @@ describe("<TezSignPage />", () => {
     expect(screen.getByText("Ghostnet")).toBeInTheDocument();
     expect(screen.queryByText("Mainnet")).not.toBeInTheDocument();
 
+    expect(screen.queryByText("verifyinfobox")).not.toBeInTheDocument();
+
     const signButton = screen.getByRole("button", {
       name: "Confirm Transaction",
     });
diff --git a/apps/web/src/components/SendFlow/utils.tsx b/apps/web/src/components/SendFlow/utils.tsx
index 45a54f2547..2b77f88f7f 100644
--- a/apps/web/src/components/SendFlow/utils.tsx
+++ b/apps/web/src/components/SendFlow/utils.tsx
@@ -76,6 +76,8 @@ export type SignHeaderProps = {
   network: Network;
   appName: string;
   appIcon?: string;
+  isScam?: boolean;
+  validationStatus?: "VALID" | "INVALID" | "UNKNOWN";
   requestId: SignRequestId;
 };
 
@@ -89,6 +91,8 @@ export type SignPayloadProps = {
   appName: string;
   appIcon?: string;
   payload: string;
+  isScam?: boolean;
+  validationStatus?: "VALID" | "INVALID" | "UNKNOWN";
   signer: ImplicitAccount;
   signingType: SigningType;
 };
diff --git a/apps/web/src/components/WalletConnect/ProjectInfoCard.tsx b/apps/web/src/components/WalletConnect/ProjectInfoCard.tsx
index 78cc0ce66e..04b850952d 100644
--- a/apps/web/src/components/WalletConnect/ProjectInfoCard.tsx
+++ b/apps/web/src/components/WalletConnect/ProjectInfoCard.tsx
@@ -1,8 +1,6 @@
-import { Avatar, Box, Card, Flex, Icon, Link, Text } from "@chakra-ui/react";
+import { Avatar, Box, Card, Link, Text } from "@chakra-ui/react";
 import { type SignClientTypes } from "@walletconnect/types";
 
-import { PencilIcon } from "../../assets/icons";
-
 type Props = {
   metadata: SignClientTypes.Metadata;
   intention?: string;
@@ -38,10 +36,6 @@ export const ProjectInfoCard = ({ metadata, intention }: Props) => {
           {url}
         </Link>
       </Box>
-      <Flex alignItems="center" justifyContent="center" marginTop="16px">
-        <Icon as={PencilIcon} verticalAlign="bottom" />
-        <Card marginLeft="8px">Cannot Verify: to be implemented</Card>
-      </Flex>
     </Box>
   );
 };
diff --git a/apps/web/src/components/WalletConnect/SessionProposalModal.tsx b/apps/web/src/components/WalletConnect/SessionProposalModal.tsx
index 0122248b56..7dd4575673 100644
--- a/apps/web/src/components/WalletConnect/SessionProposalModal.tsx
+++ b/apps/web/src/components/WalletConnect/SessionProposalModal.tsx
@@ -22,7 +22,7 @@ import {
   useToggleWcPeerListUpdated,
   walletKit,
 } from "@umami/state";
-import { type SessionTypes } from "@walletconnect/types";
+import { type SessionTypes, type Verify } from "@walletconnect/types";
 import { buildApprovedNamespaces, getSdkError } from "@walletconnect/utils";
 import { FormProvider, useForm } from "react-hook-form";
 
@@ -46,6 +46,10 @@ export const SessionProposalModal = ({
   const { onClose } = useDynamicModalContext();
   const { isLoading, handleAsyncAction } = useAsyncActionHandler();
 
+  const verifyContext: Verify.Context = proposal.verifyContext;
+  const isScam = verifyContext.verified.isScam;
+  const validationStatus = verifyContext.verified.validation;
+
   const form = useForm<{ address: string }>({
     mode: "onBlur",
   });
@@ -85,6 +89,7 @@ export const SessionProposalModal = ({
     handleAsyncAction(async () => {
       // close immediately assuming that the user wants to get rid of the modal
       onClose();
+      console.log("WC session rejected");
       await walletKit.rejectSession({
         id: proposal.id,
         reason: getSdkError("USER_REJECTED_METHODS"),
@@ -97,6 +102,7 @@ export const SessionProposalModal = ({
         <ModalBody>
           <Card>
             <ProjectInfoCard metadata={proposal.params.proposer.metadata} />
+            <VerifyInfobox isScam={isScam} validationStatus={validationStatus} />
             <Divider />
             <Box marginBottom="16px" fontSize="xl" fontWeight="semibold">
               Requested permissions
@@ -132,7 +138,6 @@ export const SessionProposalModal = ({
               <Text marginLeft="8px">{network}</Text>
             </Box>
             <Divider />
-            <VerifyInfobox />
           </Card>
         </ModalBody>
         <ModalFooter>
@@ -141,7 +146,7 @@ export const SessionProposalModal = ({
           </Button>
           <Button
             width="100%"
-            isDisabled={!isValid}
+            isDisabled={!isValid || isScam}
             isLoading={isLoading}
             loadingText="Approving..."
             onClick={onApprove}
diff --git a/apps/web/src/components/WalletConnect/VerifyInfobox.tsx b/apps/web/src/components/WalletConnect/VerifyInfobox.tsx
index b230065713..4ff77c6eb5 100644
--- a/apps/web/src/components/WalletConnect/VerifyInfobox.tsx
+++ b/apps/web/src/components/WalletConnect/VerifyInfobox.tsx
@@ -1,17 +1,61 @@
 import { Box, Card, HStack, Icon, VStack } from "@chakra-ui/react";
 
-import { AlertCircleIcon } from "../../assets/icons";
+import { AlertCircleIcon, AlertTriangleIcon, VerifiedIcon } from "../../assets/icons";
 
-export const VerifyInfobox = () => (
-  <Box textAlign="center">
-    <VStack spacing="16px">
-      <HStack margin="auto">
-        <Icon as={AlertCircleIcon} verticalAlign="bottom" />
-        <Card marginLeft="8px">Unknown domain</Card>
-      </HStack>
-      <Box margin="auto">
-        <Card>This domain was not verified. To be implemented.</Card>
-      </Box>
+export type VerificationAlert = {
+  color: string;
+  icon: typeof AlertTriangleIcon;
+  text: string;
+};
+export type ValidationStatus = "SCAM" | "UNKNOWN" | "INVALID" | "VALID";
+
+const getVerificationAlert = (validationStatus: ValidationStatus) => {
+  const statusOptions: Record<ValidationStatus, VerificationAlert> = {
+    SCAM: {
+      color: "red.500",
+      icon: AlertTriangleIcon,
+      text: "This domain is suspected to be a SCAM. Potential threat detected.",
+    },
+    UNKNOWN: {
+      color: "yellow.500",
+      icon: AlertCircleIcon,
+      text: "This domain is unknown. Cannot verify it.",
+    },
+    INVALID: {
+      color: "yellow.500",
+      icon: AlertTriangleIcon,
+      text: "This domain is invalid.",
+    },
+    VALID: {
+      color: "green.500",
+      icon: VerifiedIcon,
+      text: "This domain is verified.",
+    },
+  };
+  return (
+    <HStack
+      margin="auto"
+      padding="8px"
+      border="1px solid"
+      borderColor={statusOptions[validationStatus].color}
+      borderRadius="md"
+    >
+      <Icon as={statusOptions[validationStatus].icon} verticalAlign="bottom" />
+      <Card marginLeft="8px">{statusOptions[validationStatus].text}</Card>
+    </HStack>
+  );
+};
+
+export const VerifyInfobox = ({
+  isScam,
+  validationStatus,
+}: {
+  isScam?: boolean;
+  validationStatus: "UNKNOWN" | "INVALID" | "VALID";
+}) => (
+  <Box textAlign="left" data-testid="verifyinfobox">
+    <VStack margin="auto" marginTop="16px" marginBottom="16px" spacing="16px">
+      {isScam ? getVerificationAlert("SCAM") : getVerificationAlert(validationStatus)}
     </VStack>
   </Box>
 );
diff --git a/apps/web/src/components/WalletConnect/useHandleWcRequest.tsx b/apps/web/src/components/WalletConnect/useHandleWcRequest.tsx
index a122d06437..c5186cd0ff 100644
--- a/apps/web/src/components/WalletConnect/useHandleWcRequest.tsx
+++ b/apps/web/src/components/WalletConnect/useHandleWcRequest.tsx
@@ -81,6 +81,8 @@ export const useHandleWcRequest = () => {
             appName: session.peer.metadata.name,
             appIcon: session.peer.metadata.icons[0],
             payload: request.params.payload,
+            isScam: event.verifyContext.verified.isScam,
+            validationStatus: event.verifyContext.verified.validation,
             signer: signer,
             signingType: SigningType.RAW,
             requestId: { sdkType: "walletconnect", id: id, topic },
@@ -126,6 +128,8 @@ export const useHandleWcRequest = () => {
             network,
             appName: session.peer.metadata.name,
             appIcon: session.peer.metadata.icons[0],
+            isScam: event.verifyContext.verified.isScam,
+            validationStatus: event.verifyContext.verified.validation,
             requestId: { sdkType: "walletconnect", id: id, topic },
           };
           const signProps: SdkSignPageProps = {
diff --git a/apps/web/src/components/common/SignPayloadRequestModal.test.tsx b/apps/web/src/components/common/SignPayloadRequestModal.test.tsx
index fa1b76184f..250b6253b9 100644
--- a/apps/web/src/components/common/SignPayloadRequestModal.test.tsx
+++ b/apps/web/src/components/common/SignPayloadRequestModal.test.tsx
@@ -105,6 +105,9 @@ describe("<SignPayloadRequestModal />", () => {
     );
     await waitFor(() => expect(screen.getByText(new RegExp(decodedPayload))).toBeVisible());
 
+    expect(screen.getByTestId("verifyinfobox")).toBeVisible();
+    expect(screen.getByText("This domain is unknown. Cannot verify it.")).toBeInTheDocument();
+
     await act(() => user.click(screen.getByLabelText("Password")));
     await act(() => user.type(screen.getByLabelText("Password"), "123123123"));
     const confirmButton = screen.getByRole("button", { name: "Sign" });
@@ -124,4 +127,48 @@ describe("<SignPayloadRequestModal />", () => {
       expect(walletKit.respondSessionRequest).toHaveBeenCalledWith({ topic: "mockTopic", response })
     );
   });
+  it("Verify info box is visible for default", async () => {
+    await renderInModal(<SignPayloadRequestModal opts={wcOpts} />, store);
+    await waitFor(() => {
+      expect(screen.getByText("This domain is unknown. Cannot verify it.")).toBeInTheDocument();
+    });
+  });
+  it("Verify info box is visible for UNKNOWN", async () => {
+    await renderInModal(
+      <SignPayloadRequestModal opts={{ ...wcOpts, isScam: false, validationStatus: "UNKNOWN" }} />,
+      store
+    );
+    await waitFor(() => {
+      expect(screen.getByText("This domain is unknown. Cannot verify it.")).toBeInTheDocument();
+    });
+  });
+  it("Verify info box is visible for INVALID", async () => {
+    await renderInModal(
+      <SignPayloadRequestModal opts={{ ...wcOpts, isScam: false, validationStatus: "INVALID" }} />,
+      store
+    );
+    await waitFor(() => {
+      expect(screen.getByText("This domain is invalid.")).toBeInTheDocument();
+    });
+  });
+  it("Verify info box is visible for VALID", async () => {
+    await renderInModal(
+      <SignPayloadRequestModal opts={{ ...wcOpts, isScam: false, validationStatus: "VALID" }} />,
+      store
+    );
+    await waitFor(() => {
+      expect(screen.getByText("This domain is verified.")).toBeInTheDocument();
+    });
+  });
+  it("Verify info box is visible for SCAM", async () => {
+    await renderInModal(
+      <SignPayloadRequestModal opts={{ ...wcOpts, isScam: true, validationStatus: "UNKNOWN" }} />,
+      store
+    );
+    await waitFor(() => {
+      expect(
+        screen.getByText("This domain is suspected to be a SCAM. Potential threat detected.")
+      ).toBeInTheDocument();
+    });
+  });
 });
diff --git a/apps/web/src/components/common/SignPayloadRequestModal.tsx b/apps/web/src/components/common/SignPayloadRequestModal.tsx
index 8f2a77f001..6a82b80300 100644
--- a/apps/web/src/components/common/SignPayloadRequestModal.tsx
+++ b/apps/web/src/components/common/SignPayloadRequestModal.tsx
@@ -24,6 +24,7 @@ import { FormProvider, useForm } from "react-hook-form";
 import { useColor } from "../../styles/useColor";
 import { SignButton } from "../SendFlow/SignButton";
 import { type SignPayloadProps } from "../SendFlow/utils";
+import { VerifyInfobox } from "../WalletConnect/VerifyInfobox";
 
 export const SignPayloadRequestModal = ({ opts }: { opts: SignPayloadProps }) => {
   const { goBack } = useDynamicModalContext();
@@ -66,6 +67,13 @@ export const SignPayloadRequestModal = ({ opts }: { opts: SignPayloadProps }) =>
         <ModalHeader marginBottom="32px" textAlign="center">
           {`Sign Payload Request from ${opts.appName}`}
         </ModalHeader>
+        {opts.requestId.sdkType === "walletconnect" ? (
+          <VerifyInfobox
+            isScam={opts.isScam ?? false}
+            validationStatus={opts.validationStatus ?? "UNKNOWN"}
+          />
+        ) : null}
+
         <ModalCloseButton />
 
         <ModalBody>