feat: WalletConnect integration, part 8, verify

apps/web/src/components/SendFlow/common/Header.tsx

@@ -3,40 +3,49 @@ 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";
 
 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}
+    </>
   );
 };

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",
     });

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;
 };

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>
   );
 };

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}

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>
 );

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 = {

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();
+    });
+  });
 });

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>