feat: WalletConnect integration, part 8, verify

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";
 
@@ -37,6 +38,10 @@ export const Header = ({ headerProps }: { headerProps: SignHeaderProps }) => {
         </AspectRatio>
         <Heading size="sm">{headerProps.appName}</Heading>
       </Flex>
+      <VerifyInfobox
+        isScam={headerProps.isScam ?? false}
+        validationStatus={headerProps.validationStatus ?? "UNKNOWN"}
+      />
     </SignPageHeader>
   );
 };

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";
 };
 
 export type SdkSignPageProps = {

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

apps/web/src/components/WalletConnect/VerifyInfobox.tsx

@@ -1,17 +1,62 @@
 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">
+    <VStack margin="auto" marginTop="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 a suspected as a SCAM. Potential threat. </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>
 );

apps/web/src/components/WalletConnect/useHandleWcRequest.tsx

@@ -59,11 +59,7 @@ export const useHandleWcRequest = () => {
         case "tezos_getAccounts": {
           const wcPeers = walletKit.getActiveSessions();
           if (!(topic in wcPeers)) {
-            throw new WalletConnectError(
-              `Unknown session ${topic}`,
-              "UNAUTHORIZED_EVENT",
-              null
-            );
+            throw new WalletConnectError(`Unknown session ${topic}`, "UNAUTHORIZED_EVENT", null);
           }
           const session = wcPeers[topic];
           const accountPkh = session.namespaces.tezos.accounts[0].split(":")[2];