feat: WalletConnect integration, part 9, get accounts

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

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 {

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;

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/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", () => ({

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

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": {

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

apps/web/src/components/SendFlow/utils.tsx

@@ -1,10 +1,12 @@
+import { type SigningType } from "@airgap/beacon-wallet";
 import { Button, type ButtonProps } from "@chakra-ui/react";
 import { type TezosToolkit } from "@taquito/taquito";
 import { useDynamicModalContext } from "@umami/components";
 import {
   type Account,
   type AccountOperations,
   type EstimatedAccountOperations,
+  type ImplicitAccount,
   type Operation,
   estimate,
   executeOperations,
@@ -74,14 +76,27 @@ 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;
 };
 
+export type SignPayloadProps = {
+  requestId: SignRequestId;
+  appName: string;
+  appIcon?: string;
+  payload: string;
+  isScam?: boolean;
+  validationStatus?: "VALID" | "INVALID" | "UNKNOWN";
+  signer: ImplicitAccount;
+  signingType: SigningType;
+};
+
 export const FormSubmitButton = ({ title = "Preview", ...props }: ButtonProps) => {
   const {
     formState: { isValid },

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