Skip to content

Commit

Permalink
Merge pull request #1913 from trilitech/improve-beacon-payload-decoder
Browse files Browse the repository at this point in the history
Improve Beacon payload parsing
  • Loading branch information
serjonya-trili authored Sep 18, 2024
2 parents e7eb286 + cca3e01 commit 405f663
Show file tree
Hide file tree
Showing 10 changed files with 378 additions and 90 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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 () => {
Expand Down
35 changes: 30 additions & 5 deletions apps/desktop/src/utils/beacon/SignPayloadRequestModal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand All @@ -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);
Expand All @@ -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"
Expand All @@ -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">
Expand Down
4 changes: 2 additions & 2 deletions apps/desktop/src/utils/beacon/useHandleBeaconMessage.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 () => {
Expand All @@ -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());

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 () => {
Expand Down
37 changes: 32 additions & 5 deletions apps/web/src/components/beacon/SignPayloadRequestModal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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);
Expand All @@ -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"
Expand All @@ -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">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 () => {
Expand All @@ -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());

Expand Down
2 changes: 2 additions & 0 deletions packages/core/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
81 changes: 71 additions & 10 deletions packages/core/src/decodeBeaconPayload.test.ts
Original file line number Diff line number Diff line change
@@ -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",
});
});
});
Loading

1 comment on commit 405f663

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Title Lines Statements Branches Functions
apps/desktop Coverage: 83%
83.57% (1760/2106) 78.67% (830/1055) 78.18% (448/573)
apps/web Coverage: 83%
83.57% (1760/2106) 78.67% (830/1055) 78.18% (448/573)
packages/components Coverage: 97%
97.1% (134/138) 96.49% (55/57) 82.92% (34/41)
packages/core Coverage: 81%
82.22% (222/270) 71.73% (99/138) 81.96% (50/61)
packages/crypto Coverage: 100%
100% (28/28) 100% (3/3) 100% (5/5)
packages/data-polling Coverage: 98%
96.55% (140/145) 95.45% (21/22) 92.85% (39/42)
packages/multisig Coverage: 98%
98.47% (129/131) 89.47% (17/19) 100% (35/35)
packages/social-auth Coverage: 100%
100% (21/21) 100% (11/11) 100% (3/3)
packages/state Coverage: 85%
84.59% (791/935) 80.97% (166/205) 78.72% (296/376)
packages/tezos Coverage: 86%
85.57% (89/104) 89.47% (17/19) 82.75% (24/29)
packages/tzkt Coverage: 86%
84.05% (58/69) 81.25% (13/16) 76.92% (30/39)

Please sign in to comment.