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)} /> + + )} +