diff --git a/apps/embed-iframe/src/SignPayloadModalContent.tsx b/apps/embed-iframe/src/SignPayloadModalContent.tsx
index 68961d5dd7..6eed41338f 100644
--- a/apps/embed-iframe/src/SignPayloadModalContent.tsx
+++ b/apps/embed-iframe/src/SignPayloadModalContent.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex, Heading, Text, VStack } from "@chakra-ui/react";
+import { Box, Flex, Heading, Switch, Text, VStack } from "@chakra-ui/react";
import * as Auth from "@umami/social-auth";
import { UmamiLogoIcon } from "./assets/icons/UmamiLogo";
@@ -13,13 +13,23 @@ import { LoginButtonComponent } from "./LoginButtonComponent";
import { getDAppByOrigin } from "./ClientsPermissions";
import { useSignPayloadModalContext } from "./SignPayloadModalContext";
import { decodeBeaconPayload } from "@umami/core";
+import { useState } from "react";
+
+import { WarningIcon } from "@chakra-ui/icons";
const SIGN_TIMEOUT = 5 * 60 * 1000; // 5 minutes
export const SignPayloadModalContent = () => {
+ const [showRaw, setShowRaw] = useState(false);
+
const { onClose, setIsLoading, signingType, payload } = useSignPayloadModalContext();
const { getNetwork, getUserData, getDAppOrigin } = useEmbedApp();
+ const { result: parsedPayload, error: parsingError } = decodeBeaconPayload(
+ payload!,
+ signingType!
+ );
+
const color = useColor();
const dAppName = getDAppByOrigin(getDAppOrigin());
@@ -79,9 +89,24 @@ export const SignPayloadModalContent = () => {
borderRadius="5px"
backgroundColor={color("100")}
>
- {decodeBeaconPayload(payload!)}
+ {showRaw ? payload! : parsedPayload.trim()}
+ {parsingError && (
+
+
+
+ Raw Payload. Parsing failed
+
+
+ )}
+ {!parsingError && (
+
+ Raw
+ setShowRaw(val => !val)} />
+
+ )}
+