Feature/evm contract verified code

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#1210](https://github.com/alleslabs/celatone-frontend/pull/1210) Add EVM contract details code preview
 - [#1209](https://github.com/alleslabs/celatone-frontend/pull/1209) Implement evm contract details interaction
 - [#1208](https://github.com/alleslabs/celatone-frontend/pull/1208) Implement evm interaction section
 - [#1207](https://github.com/alleslabs/celatone-frontend/pull/1207) Add EVM contract details compiler settings

src/lib/components/editor/Editor.tsx

@@ -0,0 +1,27 @@
+import type { EditorProps, Monaco } from "@monaco-editor/react";
+import MonacoEditor from "@monaco-editor/react";
+
+import { moveLanguageConfig, moveTokenProvider } from "./moveSyntax";
+
+const loadMoveSyntax = (monaco: Monaco) => {
+  monaco.languages.register({ id: "move" });
+  monaco.languages.onLanguage("move", () => {
+    monaco.languages.setMonarchTokensProvider("move", moveTokenProvider);
+    monaco.languages.setLanguageConfiguration("move", moveLanguageConfig);
+  });
+};
+
+export const Editor = ({ ...props }: EditorProps) => (
+  <MonacoEditor
+    height={400}
+    language="move"
+    theme="vs-dark"
+    beforeMount={loadMoveSyntax}
+    options={{
+      readOnly: true,
+      scrollBeyondLastLine: false,
+      automaticLayout: true,
+    }}
+    {...props}
+  />
+);

src/lib/components/editor/EditorFileBody.tsx

@@ -0,0 +1,45 @@
+import { Flex, FlexProps, Text } from "@chakra-ui/react";
+import { SourceTreeNode } from "./types";
+import { CustomIcon } from "../icon";
+
+interface EditorFileBodyProps extends FlexProps {
+  node: SourceTreeNode;
+  initialFilePath: string;
+  isNoWrap?: boolean;
+}
+
+export const EditorFileBody = ({
+  node,
+  initialFilePath,
+  isNoWrap,
+  ...props
+}: EditorFileBodyProps) => (
+  <Flex gap={0.5} alignItems="center" {...props}>
+    {node.isFolder ? (
+      <>
+        <CustomIcon
+          cursor="pointer"
+          name="chevron-down"
+          color="gray.600"
+          boxSize={3}
+          transform={node.isOpen ? "rotate(0deg)" : "rotate(-90deg)"}
+        />
+        <CustomIcon name="folder" color="primary.main" boxSize={3} />
+      </>
+    ) : (
+      <>
+        {initialFilePath === node.path && (
+          <CustomIcon name="star-solid" color="secondary.main" boxSize={3} />
+        )}
+        <CustomIcon name="code-file" color="gray.600" boxSize={3.5} />
+      </>
+    )}
+    <Text
+      variant="body2"
+      noOfLines={!isNoWrap ? 1 : undefined}
+      whiteSpace={!isNoWrap ? "normal" : "nowrap"}
+    >
+      {node.name}
+    </Text>
+  </Flex>
+);

src/lib/components/editor/EditorSidebar.tsx

@@ -0,0 +1,94 @@
+import { useState } from "react";
+import { SourceTreeNode } from "./types";
+import { Box, Flex } from "@chakra-ui/react";
+import { EditorFileBody } from "./EditorFileBody";
+import { Nullable } from "lib/types";
+
+export interface EditorSidebarProps {
+  sourceTreeNode: SourceTreeNode[];
+  selectedFile: Nullable<SourceTreeNode>;
+  initialFilePath: string;
+  onClick: (node: SourceTreeNode) => void;
+}
+
+const EditorSidebarSelectedMark = () => (
+  <Flex
+    alignItems="center"
+    position="absolute"
+    left={0}
+    height="full"
+    top={0}
+    bottom={0}
+  >
+    <Box rounded={8} bgColor="primary.main" h={5} w={1} />
+  </Flex>
+);
+
+export const EditorSidebar = ({
+  sourceTreeNode,
+  initialFilePath,
+  onClick,
+  selectedFile,
+}: EditorSidebarProps) => {
+  const [tree, setTree] = useState(sourceTreeNode);
+
+  const handleUpdateIsOpen = (
+    node: SourceTreeNode,
+    tree: SourceTreeNode[]
+  ): SourceTreeNode[] =>
+    tree.map((n) => {
+      if (n.path === node.path) {
+        return { ...n, isOpen: !n.isOpen };
+      }
+
+      return { ...n, children: handleUpdateIsOpen(node, n.children) };
+    });
+
+  const onUpdateIsOpen = (node: SourceTreeNode) => {
+    const updatedTree = handleUpdateIsOpen(node, tree);
+    setTree(updatedTree);
+  };
+
+  return tree.map((node) => {
+    const isSelected = node.path === selectedFile?.path;
+
+    return (
+      <Box key={`${node.path}-editor-sidebar`} position="relative">
+        <Box
+          position="absolute"
+          h="full"
+          w="1px"
+          bgColor={`${node.treeLevel === 0 ? "transparent" : "gray.700"}`}
+          left={`${node.treeLevel * 8}px`}
+          zIndex={1}
+        />
+        <Box
+          position="relative"
+          _hover={{
+            bg: "gray.800",
+            cursor: "pointer",
+          }}
+          bgColor={isSelected ? "gray.800" : "transparent"}
+          borderRadius={4}
+          onClick={() => (node.isFolder ? onUpdateIsOpen(node) : onClick(node))}
+        >
+          {isSelected && <EditorSidebarSelectedMark />}
+          <EditorFileBody
+            node={node}
+            initialFilePath={initialFilePath}
+            py={1}
+            pl={`${node.treeLevel * 8}px`}
+          />
+        </Box>
+        {node.children.length > 0 && node.isOpen && (
+          <EditorSidebar
+            initialFilePath={initialFilePath}
+            sourceTreeNode={node.children}
+            onClick={onClick}
+            selectedFile={selectedFile}
+          />
+        )}
+      </Box>
+    );
+  });
+};

src/lib/components/editor/EditorTop.tsx

@@ -0,0 +1,106 @@
+import { Box, Flex, Text } from "@chakra-ui/react";
+import { SourceTreeNode } from "./types";
+import { EditorFileBody } from "./EditorFileBody";
+import { CustomIcon } from "../icon";
+import { Nullable } from "lib/types";
+import { Fragment } from "react";
+
+interface EditorTopProps {
+  filesList: SourceTreeNode[];
+  selectedFile: Nullable<SourceTreeNode>;
+  initialFilePath: string;
+  onClick: (index: number) => void;
+  onRemove: (node: SourceTreeNode, index: number) => void;
+}
+
+const vsCodeDarkColor = "#1E1E1E";
+
+export const EditorTop = ({
+  filesList,
+  selectedFile,
+  initialFilePath,
+  onClick,
+  onRemove,
+}: EditorTopProps) => (
+  <Box position="relative" height="72px" bgColor={vsCodeDarkColor}>
+    <Flex
+      position="absolute"
+      bgColor="gray.900"
+      top={0}
+      left={0}
+      right={0}
+      zIndex={1}
+      overflow="auto"
+    >
+      {filesList.map((node, index) => {
+        const isInitialFilePath = initialFilePath === node.path;
+        const isSelected = selectedFile?.path === node.path;
+
+        return (
+          <Flex
+            py={1}
+            px={0.5}
+            pr={isInitialFilePath ? 2 : 0.5}
+            key={`${node.path}-editor-top`}
+            gap={0.5}
+            cursor="pointer"
+            alignItems="center"
+            onClick={() => onClick(index)}
+            sx={{
+              borderWidth: "1px",
+              borderTopColor: isSelected ? "primary.main" : vsCodeDarkColor,
+              borderLeftColor: "transparent",
+              borderRightColor: "gray.700",
+              borderBottomColor: isSelected ? vsCodeDarkColor : "gray.700",
+              bgColor: isSelected ? vsCodeDarkColor : "gray.900",
+              "&:first-of-type": {
+                borderLeftColor: vsCodeDarkColor,
+              },
+            }}
+          >
+            <EditorFileBody
+              isNoWrap
+              node={node}
+              initialFilePath={initialFilePath}
+            />
+            {!isInitialFilePath && (
+              <CustomIcon
+                name="close"
+                boxSize={3}
+                color="gray.600"
+                cursor="pointer"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onRemove(node, index);
+                }}
+              />
+            )}
+          </Flex>
+        );
+      })}
+    </Flex>
+    {selectedFile && (
+      <Box pt="31px">
+        <Flex
+          bgColor={vsCodeDarkColor}
+          px={2}
+          pb={1}
+          pt={4}
+          borderTop="1px"
+          borderTopColor="gray.700"
+        >
+          {selectedFile.path.split("/").map((path, index) => (
+            <Fragment key={`${path}-${index}`}>
+              {index !== 0 && (
+                <CustomIcon name="chevron-right" boxSize={3} color="gray.600" />
+              )}
+              <Text color="gray.600" variant="body3">
+                {path}
+              </Text>
+            </Fragment>
+          ))}
+        </Flex>
+      </Box>
+    )}
+  </Box>
+);