Merge pull request #2285 from trilitech/wc_verify

dianasavvatina · web-flow · commit 188d44e5d817 · 2025-01-03T14:56:12.000Z
feat: WalletConnect integration, part 8, verify
diff --git 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
@@ -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
@@ -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/Header.tsx b/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}
+    </>
   );
 };
diff --git 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
@@ -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
@@ -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
@@ -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));
@@ -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
@@ -76,10 +76,12 @@ export type SignHeaderProps = {
   network: Network;
   appName: string;
   appIcon?: string;
+  isScam?: boolean;
+  validationStatus?: "VALID" | "INVALID" | "UNKNOWN";
+  requestId: SignRequestId;
 };
 
 export type SdkSignPageProps = {
-  requestId: SignRequestId;
   operation: EstimatedAccountOperations;
   headerProps: SignHeaderProps;
 };
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,11 +128,13 @@ 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 = {
             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
diff --git a/apps/web/src/components/beacon/useHandleBeaconMessage.tsx b/apps/web/src/components/beacon/useHandleBeaconMessage.tsx
diff --git a/apps/web/src/components/common/SignPayloadRequestModal.test.tsx b/apps/web/src/components/common/SignPayloadRequestModal.test.tsx
diff --git a/apps/web/src/components/common/SignPayloadRequestModal.tsx b/apps/web/src/components/common/SignPayloadRequestModal.tsx
