Add origination operation modal

src/components/SendFlow/Beacon/BeaconSignPage.tsx

@@ -1,6 +1,7 @@
 import { BeaconSignPageProps } from "./BeaconSignPageProps";
 import { ContractCallSignPage } from "./ContractCallSignPage";
 import { DelegationSignPage } from "./DelegationSignPage";
+import { OriginationOperationSignModal } from "./OriginationOperationSignModal";
 import { TezSignPage as BeaconTezSignPage } from "./TezSignPage";
 import { UndelegationSignPage } from "./UndelegationSignPage";
 
@@ -20,6 +21,8 @@ export const BeaconSignPage: React.FC<BeaconSignPageProps> = ({ operation, fee,
     case "undelegation": {
       return <UndelegationSignPage fee={fee} message={message} operation={operation} />;
     }
+    case "contract_origination":
+      return <OriginationOperationSignModal fee={fee} message={message} operation={operation} />;
     /**
      * FA1/2 are impossible to get here because we don't parse them
      * instead we get a generic contract call
@@ -28,7 +31,6 @@ export const BeaconSignPage: React.FC<BeaconSignPageProps> = ({ operation, fee,
      */
     case "fa1.2":
     case "fa2":
-    case "contract_origination":
       throw new Error("Unsupported operation type");
   }
 };

src/components/SendFlow/Beacon/OriginationOperationSignModal.tsx

@@ -0,0 +1,111 @@
+import {
+  Accordion,
+  AccordionButton,
+  AccordionIcon,
+  AccordionItem,
+  AccordionPanel,
+  AspectRatio,
+  Flex,
+  Heading,
+  Image,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  Text,
+} from "@chakra-ui/react";
+import { capitalize } from "lodash";
+
+import { BeaconSignPageProps } from "./BeaconSignPageProps";
+import { useSignWithBeacon } from "./useSignWithBeacon";
+import colors from "../../../style/colors";
+import { ContractOrigination } from "../../../types/Operation";
+import { JsValueWrap } from "../../AccountDrawer/JsValueWrap";
+import { SignButton } from "../SignButton";
+import { SignPageFee } from "../SignPageFee";
+import { headerText } from "../SignPageHeader";
+
+export const OriginationOperationSignModal: React.FC<BeaconSignPageProps> = ({
+  operation,
+  fee,
+  message,
+}) => {
+  const { isSigning, onSign } = useSignWithBeacon(operation, message);
+
+  return (
+    <ModalContent>
+      <ModalHeader marginBottom="24px">
+        <Flex alignItems="center" justifyContent="center">
+          Operation Request
+        </Flex>
+        <Text marginTop="10px" color={colors.gray[400]} textAlign="center" size="sm">
+          {message.appMetadata.name} is requesting permission to sign this operation.
+        </Text>
+
+        <Flex alignItems="center" justifyContent="center" marginTop="10px">
+          <Heading marginRight="4px" color={colors.gray[450]} size="sm">
+            Network:
+          </Heading>
+          <Text color={colors.gray[400]} size="sm">
+            {capitalize(message.network.type)}
+          </Text>
+        </Flex>
+      </ModalHeader>
+      <ModalCloseButton />
+      <ModalBody data-testid="beacon-request-body">
+        <Flex
+          alignItems="center"
+          marginTop="16px"
+          padding="15px"
+          borderRadius="4px"
+          backgroundColor={colors.gray[800]}
+        >
+          <AspectRatio width="60px" marginRight="12px" ratio={1}>
+            <Image borderRadius="4px" src={message.appMetadata.icon} />
+          </AspectRatio>
+          <Heading size="sm">{message.appMetadata.name}</Heading>
+        </Flex>
+
+        <Flex alignItems="center" justifyContent="end" marginTop="12px">
+          <SignPageFee fee={fee} />
+        </Flex>
+
+        <Accordion marginTop="16px" allowToggle={true}>
+          <AccordionItem background={colors.gray[800]} border="none" borderRadius="8px">
+            <AccordionButton>
+              <Heading flex="1" textAlign="left" marginY="10px" size="md">
+                Code
+              </Heading>
+              <AccordionIcon />
+            </AccordionButton>
+            <AccordionPanel overflowY="auto" maxHeight="300px">
+              <JsValueWrap value={(operation.operations[0] as ContractOrigination).code} />
+            </AccordionPanel>
+          </AccordionItem>
+        </Accordion>
+        <Accordion marginTop="16px" allowToggle={true}>
+          <AccordionItem background={colors.gray[800]} border="none" borderRadius="8px">
+            <AccordionButton>
+              <Heading flex="1" textAlign="left" marginY="10px" size="md">
+                Storage
+              </Heading>
+              <AccordionIcon />
+            </AccordionButton>
+            <AccordionPanel overflowY="auto" maxHeight="300px">
+              <JsValueWrap value={(operation.operations[0] as ContractOrigination).storage} />
+            </AccordionPanel>
+          </AccordionItem>
+        </Accordion>
+      </ModalBody>
+      <ModalFooter padding="16px 0 0 0">
+        <SignButton
+          isLoading={isSigning}
+          onSubmit={onSign}
+          signer={operation.signer}
+          text={headerText(operation.type, "single")}
+        />
+      </ModalFooter>
+    </ModalContent>
+  );
+};

src/utils/beacon/useHandleBeaconMessage.tsx

@@ -14,7 +14,7 @@ import { BeaconSignPage } from "../../components/SendFlow/Beacon/BeaconSignPage"
 import { ImplicitAccount } from "../../types/Account";
 import { ImplicitOperations } from "../../types/AccountOperations";
 import { parseImplicitPkh, parsePkh } from "../../types/Address";
-import { Operation } from "../../types/Operation";
+import { ContractOrigination, Operation } from "../../types/Operation";
 import { useGetOwnedAccount } from "../hooks/getAccountDataHooks";
 import { useSelectedNetwork } from "../hooks/networkHooks";
 import { useAsyncActionHandler } from "../hooks/useAsyncActionHandler";
@@ -145,6 +145,20 @@ export const partialOperationToOperation = (
         return { type: "undelegation", sender: signer.address };
       }
     }
+    case TezosOperationType.ORIGINATION: {
+      const { script } = partialOperation;
+      const { code, storage } = script as unknown as {
+        code: ContractOrigination["code"];
+        storage: ContractOrigination["storage"];
+      };
+
+      return {
+        type: "contract_origination",
+        sender: signer.address,
+        code,
+        storage,
+      };
+    }
     default:
       throw new Error(`Unsupported operation kind: ${partialOperation.kind}`);
   }