feat: WalletConnect integration, part 7, sign

apps/desktop/src/utils/beacon/SignPayloadRequestModal.test.tsx

@@ -44,7 +44,7 @@ describe("<SignPayloadRequestModal />", () => {
     render(<SignPayloadRequestModal request={request} />, { store });
 
     await waitFor(() =>
-      expect(screen.getByText("mockDappName/dApp Pairing Request")).toBeVisible()
+      expect(screen.getByText("Sign Payload Request from mockDappName")).toBeVisible()
     );
   });
 

apps/desktop/src/utils/beacon/useHandleBeaconMessage.test.tsx

@@ -107,7 +107,7 @@ describe("<useHandleBeaconMessage />", () => {
 
       act(() => handleMessage(message));
 
-      await screen.findByText("mockDappName/dApp Pairing Request");
+      await screen.findByText("Sign Payload Request from mockDappName");
     });
 
     it("sends an error response to the dapp on close", async () => {
@@ -128,7 +128,7 @@ describe("<useHandleBeaconMessage />", () => {
 
       act(() => handleMessage(message));
 
-      await screen.findByText("mockDappName/dApp Pairing Request");
+      await screen.findByText("Sign Payload Request from mockDappName");
 
       act(() => screen.getByRole("button", { name: "Close" }).click());
 

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,
@@ -82,6 +84,15 @@ export type SdkSignPageProps = {
   headerProps: SignHeaderProps;
 };
 
+export type SignPayloadProps = {
+  requestId: SignRequestId;
+  appName: string;
+  appIcon?: string;
+  payload: string;
+  signer: ImplicitAccount;
+  signingType: SigningType;
+};
+
 export const FormSubmitButton = ({ title = "Preview", ...props }: ButtonProps) => {
   const {
     formState: { isValid },

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

@@ -1,12 +1,23 @@
+import { SigningType } from "@airgap/beacon-wallet";
 import { useDynamicModalContext } from "@umami/components";
 import { type ImplicitAccount, estimate, toAccountOperations } from "@umami/core";
-import { useAsyncActionHandler, useFindNetwork, useGetOwnedAccountSafe } from "@umami/state";
+import {
+  useAsyncActionHandler,
+  useFindNetwork,
+  useGetImplicitAccount,
+  useGetOwnedAccountSafe,
+} from "@umami/state";
 import { WalletConnectError } from "@umami/utils";
 import { type SessionTypes, type SignClientTypes, type Verify } from "@walletconnect/types";
 
+import { SignPayloadRequestModal } from "../common/SignPayloadRequestModal";
 import { BatchSignPage } from "../SendFlow/common/BatchSignPage";
 import { SingleSignPage } from "../SendFlow/common/SingleSignPage";
-import { type SdkSignPageProps, type SignHeaderProps } from "../SendFlow/utils";
+import {
+  type SdkSignPageProps,
+  type SignHeaderProps,
+  type SignPayloadProps,
+} from "../SendFlow/utils";
 
 /**
  * @returns a function that handles a beacon message and opens a modal with the appropriate content
@@ -18,6 +29,7 @@ export const useHandleWcRequest = () => {
   const { openWith } = useDynamicModalContext();
   const { handleAsyncActionUnsafe } = useAsyncActionHandler();
   const getAccount = useGetOwnedAccountSafe();
+  const getImplicitAccount = useGetImplicitAccount();
   const findNetwork = useFindNetwork();
 
   return async (
@@ -50,11 +62,32 @@ export const useHandleWcRequest = () => {
         }
 
         case "tezos_sign": {
-          throw new WalletConnectError(
-            "Sign is not supported yet",
-            "WC_METHOD_UNSUPPORTED",
-            session
-          );
+          if (!request.params.account) {
+            throw new WalletConnectError("Missing account in request", "INVALID_EVENT", session);
+          }
+          const signer = getImplicitAccount(request.params.account);
+          const network = findNetwork(chainId.split(":")[1]);
+          if (!network) {
+            throw new WalletConnectError(
+              `Unsupported network ${chainId}`,
+              "UNSUPPORTED_CHAINS",
+              session
+            );
+          }
+          const signPayloadProps: SignPayloadProps = {
+            appName: session.peer.metadata.name,
+            appIcon: session.peer.metadata.icons[0],
+            payload: request.params.payload,
+            signer: signer,
+            signingType: SigningType.RAW,
+            requestId: { sdkType: "walletconnect", id: id, topic },
+          };
+
+          modal = <SignPayloadRequestModal opts={signPayloadProps} />;
+          onClose = () => {
+            throw new WalletConnectError("Rejected by user", "USER_REJECTED", session);
+          };
+          return openWith(modal, { onClose });
         }
 
         case "tezos_send": {

apps/web/src/components/beacon/index.ts

@@ -1,4 +1,3 @@
 export * from "./BeaconProvider";
 export * from "./PermissionRequestModal";
-export * from "./SignPayloadRequestModal";
 export * from "./useHandleBeaconMessage";

apps/web/src/components/beacon/useHandleBeaconMessage.test.tsx

@@ -113,7 +113,7 @@ describe("<useHandleBeaconMessage />", () => {
 
       act(() => handleMessage(message));
 
-      await screen.findByText("mockDappName/dApp Pairing Request");
+      await screen.findByText("Sign Payload Request from mockDappName");
     });
 
     it("sends an error response to the dapp on close", async () => {
@@ -134,7 +134,7 @@ describe("<useHandleBeaconMessage />", () => {
 
       act(() => handleMessage(message));
 
-      await screen.findByText("mockDappName/dApp Pairing Request");
+      await screen.findByText("Sign Payload Request from mockDappName");
 
       act(() => screen.getByRole("button", { name: "Close" }).click());
 

apps/web/src/components/beacon/useHandleBeaconMessage.tsx

@@ -10,17 +10,22 @@ import {
   WalletClient,
   useAsyncActionHandler,
   useFindNetwork,
+  useGetImplicitAccount,
   useGetOwnedAccountSafe,
   useRemoveBeaconPeerBySenderId,
 } from "@umami/state";
 import { type Network } from "@umami/tezos";
 import { CustomError } from "@umami/utils";
 
 import { PermissionRequestModal } from "./PermissionRequestModal";
-import { SignPayloadRequestModal } from "./SignPayloadRequestModal";
+import { SignPayloadRequestModal } from "../common/SignPayloadRequestModal";
 import { BatchSignPage } from "../SendFlow/common/BatchSignPage";
 import { SingleSignPage } from "../SendFlow/common/SingleSignPage";
-import { type SdkSignPageProps, type SignHeaderProps } from "../SendFlow/utils";
+import {
+  type SdkSignPageProps,
+  type SignHeaderProps,
+  type SignPayloadProps,
+} from "../SendFlow/utils";
 
 /**
  * @returns a function that handles a beacon message and opens a modal with the appropriate content
@@ -32,6 +37,7 @@ export const useHandleBeaconMessage = () => {
   const { openWith } = useDynamicModalContext();
   const { handleAsyncAction } = useAsyncActionHandler();
   const getAccount = useGetOwnedAccountSafe();
+  const getImplicitAccount = useGetImplicitAccount();
   const findNetwork = useFindNetwork();
   const removePeer = useRemoveBeaconPeerBySenderId();
 
@@ -83,7 +89,16 @@ export const useHandleBeaconMessage = () => {
             break;
           }
           case BeaconMessageType.SignPayloadRequest: {
-            modal = <SignPayloadRequestModal request={message} />;
+            const signer = getImplicitAccount(message.sourceAddress);
+            const signPayloadProps: SignPayloadProps = {
+              appName: message.appMetadata.name,
+              appIcon: message.appMetadata.icon,
+              payload: message.payload,
+              signer: signer,
+              signingType: message.signingType,
+              requestId: { sdkType: "beacon", id: message.id },
+            };
+            modal = <SignPayloadRequestModal opts={signPayloadProps} />;
             onClose = async () => {
               await WalletClient.respond({
                 id: message.id,