From a4fff5c84eda68acd1addc60ee61bf1e73de1ba4 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] 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    | 10 ++-
 .../WalletConnect/VerifyInfobox.tsx           | 69 ++++++++++++++++---
 .../WalletConnect/useHandleWcRequest.tsx      |  4 ++
 .../common/SignPayloadRequestModal.test.tsx   | 47 +++++++++++++
 .../common/SignPayloadRequestModal.tsx        |  8 +++
 9 files changed, 167 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..91b7c4c188 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 ?? false;
+  const validationStatus = verifyContext.verified.validation;
+
   const form = useForm<{ address: string }>({
     mode: "onBlur",
   });
@@ -97,6 +101,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 +137,6 @@ export const SessionProposalModal = ({
               <Text marginLeft="8px">{network}</Text>
             </Box>
             <Divider />
-            <VerifyInfobox />
           </Card>
         </ModalBody>
         <ModalFooter>
@@ -141,7 +145,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..5cce8c83ae 100644
--- a/apps/web/src/components/WalletConnect/VerifyInfobox.tsx
+++ b/apps/web/src/components/WalletConnect/VerifyInfobox.tsx
@@ -1,17 +1,64 @@
 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 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 ? (
+        <HStack
+          margin="auto"
+          padding="8px"
+          border="1px solid"
+          borderColor="red.500"
+          borderRadius="md"
+        >
+          <Icon as={AlertTriangleIcon} verticalAlign="bottom" />
+          <Card marginLeft="8px">
+            This domain is suspected to be a SCAM. Potential threat detected.
+          </Card>
+        </HStack>
+      ) : validationStatus === "UNKNOWN" ? (
+        <HStack
+          margin="auto"
+          padding="8px"
+          border="1px solid"
+          borderColor="yellow.500"
+          borderRadius="md"
+        >
+          <Icon as={AlertCircleIcon} verticalAlign="bottom" />
+          <Card marginLeft="8px">This domain is unknown. Cannot verify it.</Card>
+        </HStack>
+      ) : validationStatus === "INVALID" ? (
+        <HStack
+          margin="auto"
+          padding="8px"
+          border="1px solid"
+          borderColor="yellow.500"
+          borderRadius="md"
+        >
+          <Icon as={AlertTriangleIcon} verticalAlign="bottom" />
+          <Card marginLeft="8px">This domain is invalid. </Card>
+        </HStack>
+      ) : (
+        // VALID
+        <HStack
+          margin="auto"
+          padding="8px"
+          border="1px solid"
+          borderColor="green.500"
+          borderRadius="md"
+        >
+          <Icon as={VerifiedIcon} verticalAlign="bottom" />
+          <Card marginLeft="8px">This domain is verified. </Card>
+        </HStack>
+      )}
     </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>