trilitech · serjonya-trili · Sep 18, 2024 · Sep 16, 2024
diff --git a/apps/desktop/src/utils/beacon/SignPayloadRequestModal.test.tsx b/apps/desktop/src/utils/beacon/SignPayloadRequestModal.test.tsx
@@ -51,7 +51,7 @@ describe("<SignPayloadRequestModal />", () => {
   it("renders the payload to sign", async () => {
     render(<SignPayloadRequestModal request={request} />, { store });
 
-    await waitFor(() => expect(screen.getByText(decodedPayload)).toBeVisible());
+    await waitFor(() => expect(screen.getByText(new RegExp(decodedPayload))).toBeVisible());
   });
 
   it("sends the signed payload back to the DApp", async () => {

diff --git a/apps/desktop/src/utils/beacon/SignPayloadRequestModal.tsx b/apps/desktop/src/utils/beacon/SignPayloadRequestModal.tsx
@@ -5,21 +5,25 @@ import {
 } from "@airgap/beacon-wallet";
 import {
   Box,
+  Flex,
   Heading,
   ModalBody,
   ModalCloseButton,
   ModalContent,
   ModalFooter,
   ModalHeader,
+  Switch,
   Text,
   useToast,
 } from "@chakra-ui/react";
 import { type TezosToolkit } from "@taquito/taquito";
 import { useDynamicModalContext } from "@umami/components";
 import { decodeBeaconPayload } from "@umami/core";
 import { WalletClient, useGetImplicitAccount } from "@umami/state";
+import { useState } from "react";
 import { FormProvider, useForm } from "react-hook-form";
 
+import { WarningIcon } from "../../assets/icons";
 import { SignButton } from "../../components/SendFlow/SignButton";
 import colors from "../../style/colors";
 
@@ -29,6 +33,12 @@ export const SignPayloadRequestModal = ({ request }: { request: SignPayloadReque
   const signerAccount = getAccount(request.sourceAddress);
   const toast = useToast();
   const form = useForm();
+  const [showRaw, setShowRaw] = useState(false);
+
+  const { result: parsedPayload, error: parsingError } = decodeBeaconPayload(
+    request.payload,
+    request.signingType
+  );
 
   const sign = async (tezosToolkit: TezosToolkit) => {
     const result = await tezosToolkit.signer.sign(request.payload);
@@ -53,14 +63,21 @@ export const SignPayloadRequestModal = ({ request }: { request: SignPayloadReque
     <FormProvider {...form}>
       <ModalContent>
         <ModalHeader marginBottom="32px" textAlign="center">
-          Connect with pairing request
+          {`${request.appMetadata.name}/dApp Pairing Request`}
         </ModalHeader>
         <ModalCloseButton />
 
         <ModalBody>
-          <Heading marginBottom="12px" size="l">
-            {`${request.appMetadata.name}/dApp Pairing Request`}
-          </Heading>
+          <Flex justifyContent="space-between" marginBottom="12px">
+            <Heading size="l">Payload</Heading>
+
+            {!parsingError && (
+              <Flex alignItems="center" gap="4px">
+                <Text>Raw</Text>
+                <Switch onChange={() => setShowRaw(val => !val)} />
+              </Flex>
+            )}
+          </Flex>
           <Box
             overflowY="auto"
             maxHeight="300px"
@@ -71,9 +88,17 @@ export const SignPayloadRequestModal = ({ request }: { request: SignPayloadReque
             backgroundColor={colors.gray[800]}
           >
             <Text color={colors.gray[450]} size="md">
-              {decodeBeaconPayload(request.payload)}
+              {showRaw ? request.payload : parsedPayload.trim()}
             </Text>
           </Box>
+          {parsingError && (
+            <Flex alignItems="center" gap="4px" marginTop="4px">
+              <WarningIcon width="15px" height="15px" />
+              <Text color="red" size="xs">
+                Raw Payload. Parsing failed
+              </Text>
+            </Flex>
+          )}
         </ModalBody>
 
         <ModalFooter justifyContent="center" display="flex" padding="16px 0 0 0">

diff --git a/apps/desktop/src/utils/beacon/useHandleBeaconMessage.test.tsx b/apps/desktop/src/utils/beacon/useHandleBeaconMessage.test.tsx
@@ -106,7 +106,7 @@ describe("<useHandleBeaconMessage />", () => {
 
       act(() => handleMessage(message));
 
-      await screen.findByText("Connect with pairing request");
+      await screen.findByText("mockDappName/dApp Pairing Request");
     });
 
     it("sends an error response to the dapp on close", async () => {
@@ -127,7 +127,7 @@ describe("<useHandleBeaconMessage />", () => {
 
       act(() => handleMessage(message));
 
-      await screen.findByText("Connect with pairing request");
+      await screen.findByText("mockDappName/dApp Pairing Request");
 
       act(() => screen.getByRole("button", { name: "Close" }).click());
 

diff --git a/apps/web/src/components/beacon/SignPayloadRequestModal.test.tsx b/apps/web/src/components/beacon/SignPayloadRequestModal.test.tsx
@@ -51,7 +51,7 @@ describe("<SignPayloadRequestModal />", () => {
   it("renders the payload to sign", async () => {
     await renderInModal(<SignPayloadRequestModal request={request} />, store);
 
-    await waitFor(() => expect(screen.getByText(decodedPayload)).toBeVisible());
+    await waitFor(() => expect(screen.getByText(new RegExp(decodedPayload))).toBeVisible());
   });
 
   it("sends the signed payload back to the DApp", async () => {

diff --git a/apps/web/src/components/beacon/SignPayloadRequestModal.tsx b/apps/web/src/components/beacon/SignPayloadRequestModal.tsx
@@ -3,21 +3,25 @@ import {
   type SignPayloadRequestOutput,
   type SignPayloadResponseInput,
 } from "@airgap/beacon-wallet";
+import { WarningIcon } from "@chakra-ui/icons";
 import {
   Box,
+  Flex,
   Heading,
   ModalBody,
   ModalCloseButton,
   ModalContent,
   ModalFooter,
   ModalHeader,
+  Switch,
   Text,
   useToast,
 } from "@chakra-ui/react";
 import { type TezosToolkit } from "@taquito/taquito";
 import { useDynamicModalContext } from "@umami/components";
 import { decodeBeaconPayload } from "@umami/core";
 import { WalletClient, useGetImplicitAccount } from "@umami/state";
+import { useState } from "react";
 import { FormProvider, useForm } from "react-hook-form";
 
 import { SignButton } from "../../components/SendFlow/SignButton";
@@ -30,6 +34,12 @@ export const SignPayloadRequestModal = ({ request }: { request: SignPayloadReque
   const toast = useToast();
   const form = useForm();
   const color = useColor();
+  const [showRaw, setShowRaw] = useState(false);
+
+  const { result: parsedPayload, error: parsingError } = decodeBeaconPayload(
+    request.payload,
+    request.signingType
+  );
 
   const sign = async (tezosToolkit: TezosToolkit) => {
     const result = await tezosToolkit.signer.sign(request.payload);
@@ -54,14 +64,22 @@ export const SignPayloadRequestModal = ({ request }: { request: SignPayloadReque
     <FormProvider {...form}>
       <ModalContent>
         <ModalHeader marginBottom="32px" textAlign="center">
-          Connect with pairing request
+          {`${request.appMetadata.name}/dApp Pairing Request`}
         </ModalHeader>
         <ModalCloseButton />
 
         <ModalBody>
-          <Heading marginBottom="12px" size="l">
-            {`${request.appMetadata.name}/dApp Pairing Request`}
-          </Heading>
+          <Flex justifyContent="space-between" marginBottom="12px">
+            <Heading size="l">Payload</Heading>
+
+            {!parsingError && (
+              <Flex alignItems="center" gap="4px">
+                <Text>Raw</Text>
+                <Switch onChange={() => setShowRaw(val => !val)} />
+              </Flex>
+            )}
+          </Flex>
+
           <Box
             overflowY="auto"
             maxHeight="300px"
@@ -72,9 +90,18 @@ export const SignPayloadRequestModal = ({ request }: { request: SignPayloadReque
             backgroundColor={color("100")}
           >
             <Text color={color("600")} size="md">
-              {decodeBeaconPayload(request.payload)}
+              {showRaw ? request.payload : parsedPayload.trim()}
             </Text>
           </Box>
+
+          {parsingError && (
+            <Flex alignItems="center" gap="4px" marginTop="4px">
+              <WarningIcon width="15px" height="15px" />
+              <Text color="red" size="xs">
+                Raw Payload. Parsing failed
+              </Text>
+            </Flex>
+          )}
         </ModalBody>
 
         <ModalFooter justifyContent="center" display="flex" padding="16px 0 0 0">

diff --git a/apps/web/src/components/beacon/useHandleBeaconMessage.test.tsx b/apps/web/src/components/beacon/useHandleBeaconMessage.test.tsx
@@ -106,7 +106,7 @@ describe("<useHandleBeaconMessage />", () => {
 
       act(() => handleMessage(message));
 
-      await screen.findByText("Connect with pairing request");
+      await screen.findByText("mockDappName/dApp Pairing Request");
     });
 
     it("sends an error response to the dapp on close", async () => {
@@ -127,7 +127,7 @@ describe("<useHandleBeaconMessage />", () => {
 
       act(() => handleMessage(message));
 
-      await screen.findByText("Connect with pairing request");
+      await screen.findByText("mockDappName/dApp Pairing Request");
 
       act(() => screen.getByRole("button", { name: "Close" }).click());
 

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -61,6 +61,8 @@
   },
   "dependencies": {
     "@airgap/beacon-wallet": "^4.3.0",
+    "@taquito/local-forging": "^20.0.1",
+    "@taquito/michel-codec": "^20.0.1",
     "@taquito/rpc": "^20.0.1",
     "@taquito/signer": "^20.0.1",
     "@taquito/taquito": "^20.0.1",

diff --git a/packages/core/src/decodeBeaconPayload.test.ts b/packages/core/src/decodeBeaconPayload.test.ts
@@ -1,37 +1,98 @@
+import { SigningType } from "@airgap/beacon-wallet";
+
 import { decodeBeaconPayload } from "./decodeBeaconPayload";
 
 describe("decodeBeaconPayload", () => {
+  it("returns an error message if the payload is not a valid utf8", () => {
+    const payload =
+      "05010000004354657a6f73205369676e6564204d6573736167653a20496e76616c696420555446383a20c380c2afc3bfc3bec3bd3b204e6f6e7072696e7461626c653a20000115073b";
+
+    expect(decodeBeaconPayload(payload, SigningType.MICHELINE)).toEqual({
+      result: payload,
+      error: "Cannot parse Beacon payload",
+    });
+  });
+
   it("decodes a valid payload with '0501' prefix and padding", () => {
     const payload =
       "05010000004254657a6f73205369676e6564204d6573736167653a206d79646170702e636f6d20323032312d30312d31345431353a31363a30345a2048656c6c6f20776f726c6421";
     const expected = "Tezos Signed Message: mydapp.com 2021-01-14T15:16:04Z Hello world!";
-    expect(decodeBeaconPayload(payload)).toEqual(expected);
+
+    expect(decodeBeaconPayload(payload, SigningType.MICHELINE)).toEqual({ result: expected });
   });
 
-  it("decodes a payload without '0501' prefix", () => {
+  it.each([SigningType.MICHELINE, SigningType.OPERATION])(
+    "throws without a valid prefix for %s",
+    signingType => {
+      const payload =
+        "010000004254657a6f73205369676e6564204d6573736167653a206d79646170702e636f6d20323032312d30312d31345431353a31363a30345a2048656c6c6f20776f726c6421";
+
+      expect(decodeBeaconPayload(payload, signingType)).toEqual({
+        error: "Cannot parse Beacon payload",
+        result:
+          "010000004254657a6f73205369676e6564204d6573736167653a206d79646170702e636f6d20323032312d30312d31345431353a31363a30345a2048656c6c6f20776f726c6421",
+      });
+    }
+  );
+
+  it("decodes a raw payload", () => {
     const payload =
       "54657a6f73205369676e6564204d6573736167653a206d79646170702e636f6d20323032312d30312d31345431353a31363a30345a2048656c6c6f20776f726c6421";
-    const expected = "Tezos Signed Message: mydapp.com 2021-01-14T15:16:04Z Hello world!";
-    expect(decodeBeaconPayload(payload)).toEqual(expected);
+    const expected = {
+      result: "Tezos Signed Message: mydapp.com 2021-01-14T15:16:04Z Hello world!",
+    };
+    expect(decodeBeaconPayload(payload, SigningType.RAW)).toEqual(expected);
+  });
+
+  it("parses a Michelson expression", () => {
+    const raw =
+      "95564d877fe9b5d1f90ad501799e63d25ed0f676381b7b4678f404c9e1d8bd9a6c00e7cf51bc4b6068aae1f385c22c85ec281eba46ecac02ddfd940580bd3fe0d403c096b1020000e7cf51bc4b6068aae1f385c22c85ec281eba46ec00";
+    const result = JSON.stringify({
+      branch: "BLr3xAWdfd7BEnhUXU7vzcTBMy52upMWLiLDvwd8VdHyzKnmho4",
+      contents: [
+        {
+          kind: "transaction",
+          source: "tz1gmj9EBXqQqQBmEVaCHBfunPJ67N82YJcz",
+          fee: "300",
+          counter: "10829533",
+          gas_limit: "1040000",
+          storage_limit: "60000",
+          amount: "5000000",
+          destination: "tz1gmj9EBXqQqQBmEVaCHBfunPJ67N82YJcz",
+        },
+      ],
+    });
+
+    expect(decodeBeaconPayload(raw, SigningType.RAW)).toEqual({ result });
   });
 
   it("returns original payload if length is invalid", () => {
-    const payload = "05010000005254657a6f73205369676e6564204d6573736167653a20696e76616c69642e";
-    expect(decodeBeaconPayload(payload)).toEqual(payload);
+    const payload = "050100000053254657a6f73205369676e6564204d6573736167653a20696e76616c69642e";
+    expect(decodeBeaconPayload(payload, SigningType.RAW)).toEqual({
+      result: payload,
+      error: "Cannot parse Beacon payload",
+    });
   });
 
-  it("returns original payload if an error occurs during decoding", () => {
+  it("can parse a message without a body", () => {
     const invalidPayload = "0501000000";
-    expect(decodeBeaconPayload(invalidPayload)).toEqual(invalidPayload);
+    expect(decodeBeaconPayload(invalidPayload, SigningType.RAW)).toEqual({
+      result: '{"branch":"JJhMAmr4o7mqnC","contents":[]}',
+    });
   });
 
   it("handles an empty payload", () => {
     const emptyPayload = "";
-    expect(decodeBeaconPayload(emptyPayload)).toEqual(emptyPayload);
+    expect(decodeBeaconPayload(emptyPayload, SigningType.RAW)).toEqual({
+      result: "",
+    });
   });
 
   it("handles a payload with non-hex characters", () => {
     const nonHexPayload = "0501ZZZZ";
-    expect(decodeBeaconPayload(nonHexPayload)).toEqual(nonHexPayload);
+    expect(decodeBeaconPayload(nonHexPayload, SigningType.RAW)).toEqual({
+      error: "Cannot parse Beacon payload",
+      result: "0501ZZZZ",
+    });
   });
 });