fix(components): Json viewer and view more btn

CHANGELOG.md

@@ -45,6 +45,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - [#237](https://github.com/alleslabs/celatone-frontend/pull/237) Change unsupported tokens layout and style
 
+### Bug fixes
+
+- [#243](https://github.com/alleslabs/celatone-frontend/pull/243) Fix Json viewer and view more btn
+
 ## v1.0.2
 
 ### Features

src/lib/components/fund/index.tsx

@@ -74,7 +74,7 @@ export const AttachFund = ({
 }: AttachFundProps) => {
   return (
     <>
-      <Flex mb={6}>
+      <Flex mb="20px">
         <SelectInput
           formLabel="Attach Funds"
           options={attachFundsOptions}

src/lib/components/fund/jsonFund.tsx

@@ -6,5 +6,5 @@ interface JsonFundProps {
   assetsJson: string;
 }
 export const JsonFund = ({ setValue, assetsJson }: JsonFundProps) => (
-  <JsonInput text={assetsJson} setText={setValue} height="160px" />
+  <JsonInput text={assetsJson} setText={setValue} minLines={12} />
 );

src/lib/components/json/JsonEditor.tsx

@@ -1,6 +1,4 @@
-import type { LayoutProps } from "@chakra-ui/react";
-import { Box } from "@chakra-ui/react";
-import { useEffect, useRef, useState } from "react";
+import { useRef } from "react";
 import AceEditor from "react-ace";
 
 import "ace-builds/src-noconflict/ace";
@@ -12,83 +10,45 @@ interface JsonEditorProps {
   setValue?: (value: string) => void;
   readOnly?: boolean;
   isValid: boolean;
-  height?: LayoutProps["height"];
-  showFullMsg?: boolean;
-  disableResizing?: boolean;
+  showLines: number;
 }
 
 const JsonEditor = ({
   value,
   setValue,
   readOnly = false,
   isValid,
-  height = "sm",
-  showFullMsg,
-  disableResizing,
+  showLines,
 }: JsonEditorProps) => {
   const editorRef = useRef<AceEditor>(null);
-  const [boxHeight, setBoxHeight] = useState(height);
-  /**
-   * @todos revisit later for improving height calculation method
-   */
-  useEffect(() => {
-    if (showFullMsg && height !== 0) {
-      const contentHeight =
-        editorRef.current?.editor.renderer.container.clientHeight;
-      const parsedHeight =
-        typeof height === "string" ? parseInt(height, 10) : height;
-      const targetHeight =
-        contentHeight !== undefined && contentHeight > parsedHeight
-          ? contentHeight
-          : height;
-      setBoxHeight(targetHeight);
-    } else {
-      setBoxHeight(height);
-    }
-  }, [height, showFullMsg]);
-
-  useEffect(() => {
-    const resize = () => {
-      if (editorRef && editorRef.current) {
-        editorRef.current.editor.resize();
-      }
-    };
-    document.addEventListener("mouseup", resize);
-    return () => document.removeEventListener("mouseup", resize);
-  });
 
   return (
-    <Box
-      height={boxHeight}
-      resize={disableResizing ? "unset" : "vertical"}
-      overflow="auto"
-    >
-      <AceEditor
-        ref={editorRef}
-        mode="json"
-        theme="monokai"
-        fontSize="14px"
-        readOnly={readOnly}
-        style={{
-          width: "100%",
-          height: "99%",
-          background: "transparent",
-          color: readOnly && !isValid ? "error.light" : "white",
-          offset: 0,
-        }}
-        setOptions={{
-          tabSize: 2,
-          useWorker: false,
-          showGutter: false,
-          wrap: readOnly && !isValid,
-          printMargin: false,
-          maxLines: readOnly ? 9999 : undefined,
-        }}
-        onChange={setValue}
-        value={value}
-        editorProps={{ $blockScrolling: true }}
-      />
-    </Box>
+    <AceEditor
+      ref={editorRef}
+      mode="json"
+      theme="monokai"
+      fontSize="14px"
+      readOnly={readOnly}
+      style={{
+        width: "100%",
+        height: "100%",
+        background: "transparent",
+        color: readOnly && !isValid ? "error.light" : "white",
+        offset: 0,
+      }}
+      setOptions={{
+        tabSize: 2,
+        useWorker: false,
+        showGutter: false,
+        wrap: readOnly && !isValid,
+        printMargin: false,
+        minLines: showLines,
+        maxLines: showLines,
+      }}
+      onChange={setValue}
+      value={value}
+      editorProps={{ $blockScrolling: true }}
+    />
   );
 };
 

src/lib/components/json/JsonInput.tsx

@@ -1,10 +1,9 @@
-import type { LayoutProps } from "@chakra-ui/react";
 import { Text, Box, Button, Spinner, Flex } from "@chakra-ui/react";
 import dynamic from "next/dynamic";
-import { useState, useEffect } from "react";
+import { useState, useEffect, useMemo } from "react";
 
 import { CustomIcon } from "../icon";
-import { jsonPrettify, jsonValidate } from "lib/utils";
+import { jsonLineCount, jsonPrettify, jsonValidate } from "lib/utils";
 
 const JsonEditor = dynamic(() => import("./JsonEditor"), {
   ssr: false,
@@ -14,7 +13,7 @@ interface JsonInputProps {
   topic?: string;
   text?: string;
   setText: (value: string) => void;
-  height?: LayoutProps["height"];
+  minLines?: number;
 }
 
 interface JsonState {
@@ -70,7 +69,12 @@ const getResponse = (jsonState: JsonState) => {
   }
 };
 
-const JsonInput = ({ topic, text = "", setText, height }: JsonInputProps) => {
+const JsonInput = ({
+  topic,
+  text = "",
+  setText,
+  minLines = 16,
+}: JsonInputProps) => {
   const [jsonState, setJsonState] = useState<JsonState>({ state: "empty" });
 
   const handleOnChange = (value: string) => {
@@ -92,6 +96,14 @@ const JsonInput = ({ topic, text = "", setText, height }: JsonInputProps) => {
 
   const { color, response } = getResponse(jsonState);
   const isValidJson = jsonValidate(text) === null;
+
+  const showLines = useMemo(() => {
+    const lines = jsonLineCount(text);
+
+    // Limit the number of lines from minLines (default is 16) to 100
+    return Math.min(Math.max(lines, minLines), 100);
+  }, [text, minLines]);
+
   return (
     <>
       <Box
@@ -109,7 +121,7 @@ const JsonInput = ({ topic, text = "", setText, height }: JsonInputProps) => {
           value={text}
           setValue={handleOnChange}
           isValid={isValidJson}
-          height={height}
+          showLines={showLines}
         />
         {topic && (
           <Text

src/lib/components/json/JsonReadOnly.tsx

@@ -1,69 +1,71 @@
-import type { LayoutProps } from "@chakra-ui/react";
 import { Text, Box } from "@chakra-ui/react";
 import dynamic from "next/dynamic";
 import { useMemo, useState } from "react";
 
 import { CopyButton } from "../copy";
-import { jsonValidate } from "lib/utils";
+import { jsonLineCount, jsonValidate } from "lib/utils";
 
 import { ViewFullMsgButton } from "./ViewFullMsgButton";
 
-const BUTTON_EXPAND_PADDING = "60px";
-
 const JsonEditor = dynamic(() => import("lib/components/json/JsonEditor"), {
   ssr: false,
 });
 
 interface JsonReadOnlyProps {
   topic?: string;
   text: string;
-  height?: LayoutProps["height"];
   canCopy?: boolean;
-  canViewFull?: boolean;
-  disableResizing?: boolean;
+  isExpandable?: boolean;
 }
 
+const THRESHOLD_LINES = 16;
+
 const JsonReadOnly = ({
   topic,
   text,
-  height,
   canCopy,
-  canViewFull,
-  disableResizing,
+  isExpandable,
 }: JsonReadOnlyProps) => {
   const [viewFull, setViewFull] = useState(false);
 
   const isJsonValid = useMemo(() => {
     return jsonValidate(text) === null || text.length === 0;
   }, [text]);
 
-  const zeroHeight = height === 0;
+  const showLines = useMemo(() => {
+    const lineCount = jsonLineCount(text);
+
+    if (isExpandable) {
+      return viewFull ? lineCount : Math.min(lineCount, THRESHOLD_LINES);
+    }
+
+    // for query response json viewer
+    return Math.max(lineCount, THRESHOLD_LINES);
+  }, [isExpandable, text, viewFull]);
+
+  const showExpandButton =
+    isExpandable && jsonLineCount(text) > THRESHOLD_LINES;
+
   return (
     <Box
-      m={zeroHeight ? 0 : "0px 0 16px"}
-      p={
-        zeroHeight
-          ? 0
-          : `16px 12px ${viewFull ? BUTTON_EXPAND_PADDING : "16px"}`
-      }
-      borderWidth={zeroHeight ? "none" : "thin"}
+      position="relative"
+      borderWidth="thin"
       borderColor={!isJsonValid ? "error.main" : "pebble.700"}
       borderRadius="8px"
-      position="relative"
       transition="all .25s ease-in-out"
       _hover={{
         borderColor: isJsonValid && "pebble.600",
         "& .copy-button-box": { display: "block" },
       }}
     >
-      <JsonEditor
-        value={text}
-        readOnly
-        isValid={isJsonValid}
-        height={height}
-        showFullMsg={viewFull}
-        disableResizing={disableResizing}
-      />
+      <Box p="16px 12px">
+        <JsonEditor
+          value={text}
+          readOnly
+          isValid={isJsonValid}
+          showLines={showLines}
+        />
+      </Box>
       {!!topic && (
         <Text
           top="-10px"
@@ -75,19 +77,18 @@ const JsonReadOnly = ({
           {topic}
         </Text>
       )}
-      {canViewFull && (
+      {showExpandButton && (
         <ViewFullMsgButton
           onClick={() => setViewFull((prev) => !prev)}
           viewFull={viewFull}
         />
       )}
-      {canCopy && !zeroHeight && (
+      {canCopy && (
         <Box
           position="absolute"
           top="10px"
           right="10px"
           className="copy-button-box"
-          display="none"
         >
           <CopyButton value={text} />
         </Box>

src/lib/components/json/ViewFullMsgButton.tsx

@@ -20,9 +20,6 @@ export const ViewFullMsgButton = ({
     borderTopColor="pebble.700"
     bg="background.main"
     borderRadius="0 0 8px 8px"
-    position="absolute"
-    bottom={0}
-    left={0}
     cursor="pointer"
     _hover={{ bg: "pebble.900" }}
     transition="all .25s ease-in-out"

src/lib/pages/contract-details/components/JsonInfo.tsx

@@ -1,5 +1,4 @@
 import { Flex, Heading } from "@chakra-ui/react";
-import type { CSSProperties } from "react";
 import { useState } from "react";
 
 import { CustomIcon } from "lib/components/icon";
@@ -8,22 +7,16 @@ import JsonReadOnly from "lib/components/json/JsonReadOnly";
 interface JsonInfoProps {
   header: string;
   jsonString: string;
-  showViewFullButton?: boolean;
-  jsonAreaHeight?: CSSProperties["height"];
   defaultExpand?: boolean;
 }
 
 export const JsonInfo = ({
   header,
   jsonString,
-  showViewFullButton,
-  jsonAreaHeight = "300px",
   defaultExpand = false,
 }: JsonInfoProps) => {
   const [expand, setExpand] = useState(defaultExpand);
-  /**
-   * @todos revist height and expand mechanism later
-   */
+
   return (
     <>
       <Flex
@@ -45,13 +38,11 @@ export const JsonInfo = ({
           name={expand ? "chevron-up" : "chevron-down"}
         />
       </Flex>
-      <JsonReadOnly
-        text={jsonString}
-        height={expand ? jsonAreaHeight : 0}
-        canCopy
-        canViewFull={showViewFullButton && expand}
-        disableResizing
-      />
+      <div
+        style={expand ? { display: "block" } : { height: 0, display: "none" }}
+      >
+        <JsonReadOnly text={jsonString} canCopy isExpandable />
+      </div>
     </>
   );
 };

src/lib/pages/contract-details/index.tsx

@@ -79,12 +79,10 @@ const ContractDetailsBody = observer(
                   contractData.instantiateInfo?.raw.contract_info ?? {}
                 )
               )}
-              jsonAreaHeight="230px"
             />
             <JsonInfo
               header="Instantiate Message"
               jsonString={jsonPrettify(contractData.initMsg ?? "")}
-              showViewFullButton
               defaultExpand
             />
           </Flex>