Update embed send operation modal

apps/embed-iframe/package.json

@@ -36,6 +36,7 @@
     "@testing-library/user-event": "14.5.2",
     "@toruslabs/customauth": "16.0.6",
     "@trilitech-umami/umami-embed": "^0.2.6",
+    "@umami/core": "workspace:^",
     "@umami/social-auth": "workspace:^",
     "@umami/tezos": "workspace:^",
     "@vercel/analytics": "^1.3.1",

apps/embed-iframe/src/ClientsPermissions.ts

@@ -24,3 +24,13 @@ export const getPermissionsForOrigin = (origin: string): Permissions | null => {
   }
   return null;
 };
+
+export const getDAppByOrigin = (origin: string): string | null => {
+  for (const key in clientPermissions) {
+    const permissions = clientPermissions[key];
+    if (permissions.origins.includes(origin)) {
+      return key;
+    }
+  }
+  return null;
+};

apps/embed-iframe/src/EmbeddedComponent.tsx

@@ -9,7 +9,7 @@ import { useEffect } from "react";
 
 import { getPermissionsForOrigin } from "./ClientsPermissions";
 import { useLoginModal } from "./loginModalHooks";
-import { useSignOperationModal } from "./signOperationModalHooks";
+import { useOperationModal } from "./operationModalHooks";
 import { sendResponse } from "./utils";
 import "./EmbeddedComponent.scss";
 import { useEmbedApp } from "./EmbedAppContext";
@@ -20,8 +20,7 @@ export function EmbeddedComponent() {
   const { setColorMode } = useColorMode();
 
   const { onOpen: openLoginModal, modalElement: loginModalElement } = useLoginModal();
-  const { onOpen: openOperationModal, modalElement: operationModalElement } =
-    useSignOperationModal();
+  const { onOpen: openOperationModal, modalElement: operationModalElement } = useOperationModal();
 
   useEffect(() => {
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition

apps/embed-iframe/src/LoginButtonComponent.tsx

@@ -6,9 +6,11 @@ import { FacebookLogoIcon, GoogleLogoIcon, RedditLogoIcon, TwitterLogoIcon } fro
 export const LoginButtonComponent = ({
   onClick,
   loginType,
+  prefix,
 }: {
   onClick: () => void;
   loginType: TypeOfLogin;
+  prefix?: string;
 }) => (
   <Button
     position="relative"
@@ -22,7 +24,7 @@ export const LoginButtonComponent = ({
       <LogoIconWithBackground loginType={loginType} />
     </Box>
     <Heading textAlign="center" flex="1" fontSize="14px" lineHeight="18px">
-      {buttonLabel(loginType)}
+      {prefix ? `${prefix} ${socialLabel(loginType)}` : socialLabel(loginType)}
     </Heading>
   </Button>
 );
@@ -55,7 +57,7 @@ const LogoIcon = ({ loginType }: { loginType: TypeOfLogin }) => {
   }
 };
 
-const buttonLabel = (loginType: TypeOfLogin) => {
+const socialLabel = (loginType: TypeOfLogin) => {
   switch (loginType) {
     case "facebook":
       return "Facebook";

apps/embed-iframe/src/ModalLoadingOverlay.tsx

@@ -0,0 +1,27 @@
+import { Flex, useColorMode } from "@chakra-ui/react";
+import { TezosSpinner } from "./assets/icons/TezosSpinner";
+
+import { mode } from "@chakra-ui/theme-tools";
+
+export const ModalLoadingOverlay = () => {
+  const colorMode = useColorMode();
+
+  return (
+    <Flex
+      position="absolute"
+      top="0"
+      right="0"
+      bottom="0"
+      left="0"
+      alignItems="center"
+      justifyContent="center"
+      borderRadius="30px"
+      backgroundColor={mode(
+        "rgba(255, 255, 255, 0.85)", // light
+        "rgba(16, 18, 27, 0.85)" // dark
+      )(colorMode)}
+    >
+      <TezosSpinner />
+    </Flex>
+  );
+};

apps/embed-iframe/src/OperationModalContent.tsx

@@ -0,0 +1,140 @@
+import {
+  Accordion,
+  AccordionButton,
+  AccordionIcon,
+  AccordionItem,
+  AccordionPanel,
+  Box,
+  Flex,
+  Heading,
+  Text,
+  VStack,
+} from "@chakra-ui/react";
+import * as Auth from "@umami/social-auth";
+
+import { UmamiLogoIcon } from "./assets/icons/UmamiLogo";
+import { JsValueWrap } from "./imported/JsValueWrap";
+
+import { getErrorContext } from "./imported/utils/getErrorContext";
+import { withTimeout } from "./imported/utils/withTimeout";
+import { sendOperationErrorResponse, sendResponse, toTezosNetwork } from "./utils";
+import { makeToolkit, prettyTezAmount } from "@umami/tezos";
+import { useEmbedApp } from "./EmbedAppContext";
+import { useColor } from "./imported/style/useColor";
+import { executeOperations, totalFee } from "@umami/core";
+import { LoginButtonComponent } from "./LoginButtonComponent";
+import { useOperationModalContext } from "./OperationModalContext";
+import { getDAppByOrigin } from "./ClientsPermissions";
+
+const SIGN_TIMEOUT = 5 * 60 * 1000; // 5 minutes
+
+export const OperationModalContent = () => {
+  const { onClose, isLoading, setIsLoading, estimatedOperations } = useOperationModalContext();
+  const { getNetwork, getUserData, getDAppOrigin } = useEmbedApp();
+
+  const color = useColor();
+  const dAppName = getDAppByOrigin(getDAppOrigin());
+
+  const onClick = async () => {
+    setIsLoading(true);
+    try {
+      const { secretKey } = await withTimeout(
+        async () => Auth.forIDP(getUserData()!.typeOfLogin).getCredentials(),
+        SIGN_TIMEOUT
+      );
+      const toolkit = await makeToolkit({
+        type: "social",
+        secretKey,
+        network: toTezosNetwork(getNetwork()!),
+      });
+
+      const { opHash } = await executeOperations(estimatedOperations!, toolkit);
+
+      console.log("request sent", opHash);
+
+      sendResponse({ type: "operation_response", opHash });
+    } catch (error) {
+      sendOperationErrorResponse(getErrorContext(error).description);
+    } finally {
+      setIsLoading(false);
+      onClose();
+    }
+  };
+
+  return (
+    <VStack spacing="0">
+      <Box marginBottom="10px">
+        <UmamiLogoIcon />
+      </Box>
+
+      <Heading marginBottom="10px" fontSize="16px" lineHeight="22px">
+        Confirm Operation
+      </Heading>
+
+      <Flex justifyContent="center" marginBottom="16px">
+        <Text color={color("900")} size="sm" lineHeight="14px" textAlign="center">
+          <Text as="span">{dAppName ? dAppName : getDAppOrigin()}</Text>
+          <Text as="span" color={color("500")} marginLeft="5px">
+            is requesting permission to sign this operation
+          </Text>
+        </Text>
+      </Flex>
+
+      <Accordion allowToggle width="100%" marginBottom="10px">
+        <AccordionItem border="none">
+          <AccordionButton>
+            <Heading flex="1" textAlign="left" paddingY="6px" size="sm">
+              Show Details
+            </Heading>
+            <AccordionIcon />
+          </AccordionButton>
+
+          <AccordionPanel width="100%">
+            <JsValueWrap
+              background={color("100")}
+              overflowY="auto"
+              maxHeight="200px"
+              value={estimatedOperations!.operations}
+              marginBottom="16px"
+            />
+
+            <Flex alignItems="center" justifyContent="space-between">
+              <Flex marginRight="110px">
+                <Text marginRight="4px" color={color("500")} size="xs">
+                  Count:
+                </Text>
+                <Text color={color("900")} data-testid="transaction-length" size="xs">
+                  {estimatedOperations!.operations.length}
+                </Text>
+              </Flex>
+
+              <Flex alignItems="center" marginBottom="5px">
+                <Text marginRight="4px" color={color("500")} size="xs">
+                  Fee:
+                </Text>
+                <Text color={color("900")} data-testid="fee" size="xs">
+                  {isLoading ? "..." : prettyTezAmount(totalFee(estimatedOperations!.estimates))}
+                </Text>
+              </Flex>
+            </Flex>
+
+            <Flex justifyContent="space-between">
+              <Text color={color("500")} size="xs" lineHeight="14px" marginRight="5px">
+                Network:
+              </Text>
+              <Text color={color("900")} size="xs" lineHeight="14px">
+                {getNetwork()}
+              </Text>
+            </Flex>
+          </AccordionPanel>
+        </AccordionItem>
+      </Accordion>
+
+      <LoginButtonComponent
+        loginType={getUserData()!.typeOfLogin}
+        prefix="Confirm with"
+        onClick={onClick}
+      />
+    </VStack>
+  );
+};

apps/embed-iframe/src/OperationModalContext.tsx

@@ -0,0 +1,47 @@
+import { useDisclosure } from "@chakra-ui/react";
+import { EstimatedAccountOperations } from "@umami/core";
+import { createContext, PropsWithChildren, useContext, useState } from "react";
+
+interface OperationModalContextState {
+  isOpen: boolean;
+  onOpen: () => void;
+  onClose: () => void;
+  isLoading: boolean;
+  setIsLoading: (isLoading: boolean) => void;
+  estimatedOperations: EstimatedAccountOperations | null;
+  setEstimatedOperations: (estimatedOperations: EstimatedAccountOperations | null) => void;
+}
+
+const OperationModalContext = createContext<OperationModalContextState | undefined>(undefined);
+
+export const OperationModalProvider = ({ children }: PropsWithChildren) => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const [isLoading, setIsLoading] = useState(false);
+  const [estimatedOperations, setEstimatedOperations] = useState<EstimatedAccountOperations | null>(
+    null
+  );
+
+  return (
+    <OperationModalContext.Provider
+      value={{
+        isOpen,
+        onOpen,
+        onClose,
+        isLoading,
+        setIsLoading,
+        estimatedOperations,
+        setEstimatedOperations,
+      }}
+    >
+      {children}
+    </OperationModalContext.Provider>
+  );
+};
+
+export const useOperationModalContext = (): OperationModalContextState => {
+  const context = useContext(OperationModalContext);
+  if (context === undefined) {
+    throw new Error("useOperationModal must be used within a OperationModalProvider");
+  }
+  return context;
+};