Feat/show module source code when available

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#544](https://github.com/alleslabs/celatone-frontend/pull/544) Show module source code if available
 - [#534](https://github.com/alleslabs/celatone-frontend/pull/534) Wire up initia execute function
 - [#533](https://github.com/alleslabs/celatone-frontend/pull/533) Wire up initia view function
 - [#536](https://github.com/alleslabs/celatone-frontend/pull/536) Add publish module validation and decode query

src/lib/components/module/ModuleSourceCode.tsx

@@ -0,0 +1,80 @@
+import {
+  Accordion,
+  AccordionButton,
+  AccordionIcon,
+  AccordionItem,
+  AccordionPanel,
+  Box,
+  Flex,
+  Text,
+} from "@chakra-ui/react";
+import dynamic from "next/dynamic";
+
+import { CopyButton } from "../copy";
+import { CURR_THEME } from "env";
+import type { Option } from "lib/types";
+
+const AceEditor = dynamic(() => import("react-ace"), {
+  ssr: false,
+});
+
+interface ModuleSourceCodeProps {
+  sourceCode: Option<string>;
+}
+export const ModuleSourceCode = ({ sourceCode }: ModuleSourceCodeProps) => {
+  if (!sourceCode) return null;
+  return (
+    <Accordion allowToggle w="full" defaultIndex={[0]}>
+      <AccordionItem>
+        <AccordionButton p={4}>
+          <Flex justifyContent="space-between" w="full">
+            <Flex flexDirection="column" alignItems="start">
+              <Text fontWeight={600} variant="body1" color="text.main">
+                Module Source Code
+              </Text>
+              <Text fontWeight={600} variant="body2" color="text.dark">
+                The source code is uploaded by the deployer and pulled from
+                Initia API
+              </Text>
+            </Flex>
+            <Flex alignItems="center" gap={2}>
+              <CopyButton
+                value={sourceCode}
+                variant="outline-primary"
+                w={{ base: "full", md: "auto" }}
+              />
+              <AccordionIcon color="gray.600" ml="auto" boxSize={6} />
+            </Flex>
+          </Flex>
+        </AccordionButton>
+        <AccordionPanel pt={0} pb={4}>
+          <Box
+            p="16px 12px"
+            border="1px solid"
+            borderColor="gray.700"
+            borderRadius="8px"
+          >
+            <AceEditor
+              readOnly
+              mode="rust"
+              theme={CURR_THEME.jsonTheme}
+              fontSize="14px"
+              style={{
+                color: CURR_THEME.colors.text.main,
+                width: "100%",
+                background: "transparent",
+              }}
+              value={sourceCode}
+              setOptions={{
+                showGutter: false,
+                useWorker: false,
+                printMargin: false,
+                wrap: true,
+              }}
+            />
+          </Box>
+        </AccordionPanel>
+      </AccordionItem>
+    </Accordion>
+  );
+};

src/lib/components/module/index.ts

@@ -1,3 +1,4 @@
 export * from "./CountBadge";
 export * from "./FunctionCard";
 export * from "./ModuleCard";
+export * from "./ModuleSourceCode";

src/lib/pages/interaction/index.tsx

@@ -5,15 +5,17 @@ import {
   Flex,
   Heading,
   Text,
+  Box,
 } from "@chakra-ui/react";
 import { useCallback, useState } from "react";
 
 import { CustomIcon } from "lib/components/icon";
 import { LabelText } from "lib/components/LabelText";
+import { ModuleSourceCode } from "lib/components/module";
 import PageContainer from "lib/components/PageContainer";
 import type { IndexedModule } from "lib/services/moduleService";
-import type { ExposedFunction } from "lib/types";
-import { parseJsonABI } from "lib/utils";
+import { useVerifyModule } from "lib/services/moduleService";
+import type { ExposedFunction, HexAddr, Option } from "lib/types";
 
 import {
   ModuleSelectDrawerTrigger,
@@ -28,8 +30,6 @@ export const Interaction = () => {
   const [module, setModule] = useState<IndexedModule>();
   const [selectedFn, setSelectedFn] = useState<ExposedFunction>();
 
-  const abi = module ? parseJsonABI(module.abi) : undefined;
-
   const handleModuleSelect = useCallback(
     (selectedModule: IndexedModule, fn?: ExposedFunction) => {
       setModule(selectedModule);
@@ -38,93 +38,110 @@ export const Interaction = () => {
     []
   );
 
+  const { data: verificationData } = useVerifyModule({
+    address: module?.address as Option<HexAddr>,
+    moduleName: module?.moduleName,
+  });
+
   return (
-    <PageContainer
-      overflow="hidden"
-      minH="unset"
-      display="grid"
-      gridTemplateRows="auto auto 1fr"
-    >
-      <Heading as="h5" variant="h5">
-        Module Interactions
-      </Heading>
-      <Flex
-        alignItems="center"
-        justifyContent="space-between"
-        bgColor="gray.900"
-        p={4}
-        borderRadius={4}
-        my={8}
+    <>
+      <PageContainer
+        overflow="hidden"
+        minH="unset"
+        maxH="calc(100vh - 129px)"
+        display="grid"
+        gridTemplateRows="auto auto 1fr"
       >
-        {module ? (
-          <>
-            <Flex direction="column" gap={4}>
-              <LabelText label="Module Path" labelWeight={600}>
-                <Flex align="center" gap={1}>
-                  <Text variant="body1">{module.address.toString()}</Text>
-                  <CustomIcon
-                    name="chevron-right"
-                    color="gray.600"
-                    boxSize={3}
-                  />
-                  <Text variant="body1" fontWeight={700}>
-                    {module.moduleName}
+        <Heading as="h5" variant="h5">
+          Module Interactions
+        </Heading>
+        <Flex
+          alignItems="center"
+          justifyContent="space-between"
+          bgColor="gray.900"
+          p={4}
+          borderRadius={4}
+          my={8}
+        >
+          {module ? (
+            <>
+              <Flex direction="column" gap={4}>
+                <LabelText label="Module Path" labelWeight={600}>
+                  <Flex align="center" gap={1}>
+                    <Text variant="body1">{module.address.toString()}</Text>
+                    <CustomIcon
+                      name="chevron-right"
+                      color="gray.600"
+                      boxSize={3}
+                    />
+                    <Text variant="body1" fontWeight={700}>
+                      {module.moduleName}
+                    </Text>
+                  </Flex>
+                </LabelText>
+                <LabelText label="Friends" labelWeight={600}>
+                  <Text variant="body2" color="gray.400">
+                    {module?.parsedAbi.friends
+                      ? JSON.stringify(module?.parsedAbi.friends)
+                      : "N/A"}
                   </Text>
-                </Flex>
-              </LabelText>
-              <LabelText label="Friends" labelWeight={600}>
-                <Text variant="body2" color="gray.400">
-                  {abi?.friends ? JSON.stringify(abi.friends) : "N/A"}
-                </Text>
-              </LabelText>
-            </Flex>
-            <Flex direction="column" gap={2}>
+                </LabelText>
+              </Flex>
+              <Flex direction="column" gap={2}>
+                <ModuleSelectDrawerTrigger
+                  triggerVariant="change-module"
+                  buttonText="Change Module"
+                  onOpen={onOpen}
+                />
+                <Button
+                  variant="ghost-gray"
+                  rightIcon={
+                    <CustomIcon name="launch" boxSize={3} color="text.dark" />
+                  }
+                  // TODO: Link to module section in account page
+                  onClick={() => {}}
+                >
+                  View Module
+                </Button>
+              </Flex>
+            </>
+          ) : (
+            <>
+              <p>Select a module to interact with ...</p>
               <ModuleSelectDrawerTrigger
-                triggerVariant="change-module"
-                buttonText="Change Module"
+                triggerVariant="select-module"
                 onOpen={onOpen}
               />
-              <Button
-                variant="ghost-gray"
-                rightIcon={
-                  <CustomIcon name="launch" boxSize={3} color="text.dark" />
-                }
-                // TODO: Link to module section in account page
-                onClick={() => {}}
-              >
-                View Module
-              </Button>
-            </Flex>
-          </>
-        ) : (
-          <>
-            <p>Select a module to interact with ...</p>
-            <ModuleSelectDrawerTrigger
-              triggerVariant="select-module"
-              onOpen={onOpen}
-            />
-          </>
-        )}
-        <ModuleSelectDrawer
-          isOpen={isOpen}
-          onClose={onClose}
-          handleModuleSelect={handleModuleSelect}
-        />
-      </Flex>
-      <Grid gap={8} templateColumns="minmax(300px, 20%) 1fr" overflow="hidden">
-        {/* Left side */}
-        <FunctionSelectPanel
-          module={module}
-          selectedFn={selectedFn}
-          setSelectedFn={setSelectedFn}
-        />
-        {/* Right side */}
-        <FunctionSelectBody
-          module={module}
-          selectedFn={selectedFn}
-          openDrawer={onOpen}
-        />
-      </Grid>
-    </PageContainer>
+            </>
+          )}
+          <ModuleSelectDrawer
+            isOpen={isOpen}
+            onClose={onClose}
+            handleModuleSelect={handleModuleSelect}
+          />
+        </Flex>
+        <Grid
+          gap={8}
+          templateColumns="minmax(300px, 20%) 1fr"
+          overflow="hidden"
+        >
+          {/* Left side */}
+          <FunctionSelectPanel
+            module={module}
+            selectedFn={selectedFn}
+            setSelectedFn={setSelectedFn}
+          />
+          {/* Right side */}
+          <FunctionSelectBody
+            module={module}
+            selectedFn={selectedFn}
+            openDrawer={onOpen}
+          />
+        </Grid>
+      </PageContainer>
+      <Box px={{ base: "16px", md: "48px" }}>
+        <ModuleSourceCode sourceCode={verificationData?.source} />
+      </Box>
+    </>
   );
 };

src/lib/pages/module-details/components/ModuleInfo.tsx

@@ -3,8 +3,7 @@ import { Flex, Heading, Text } from "@chakra-ui/react";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { CustomIcon } from "lib/components/icon";
 import { LabelText } from "lib/components/LabelText";
-
-import { ModuleSourceCode } from "./ModuleSourceCode";
+import { ModuleSourceCode } from "lib/components/module";
 
 interface ModuleInfoProps {
   isVerified?: boolean;
@@ -76,7 +75,8 @@ export const ModuleInfo = ({ isVerified = false }: ModuleInfoProps) => {
           />
         </LabelText>
       </Flex>
-      <ModuleSourceCode />
+      {/* TODO: Wireup */}
+      <ModuleSourceCode sourceCode="" />
     </Flex>
   );
 };