Feat/response switch

CHANGELOG.md

@@ -62,6 +62,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#502](https://github.com/alleslabs/celatone-frontend/pull/502) Display queried time and add json/schema output switch
 - [#500](https://github.com/alleslabs/celatone-frontend/pull/500) Disable estimated fee when input is invalid
 - [#498](https://github.com/alleslabs/celatone-frontend/pull/498) Automatically switch to schema tab and show 404 not found error
 - [#491](https://github.com/alleslabs/celatone-frontend/pull/491) Improve scrolling into view by delaying scroll function

src/lib/components/fund/index.tsx

@@ -64,13 +64,15 @@ const AttachFundContent = ({ control, setValue }: AttachFundContentProps) => {
 interface AttachFundProps {
   control: Control<AttachFundsState>;
   attachFundsOption: AttachFundsType;
+  labelBgColor?: string;
   setValue: UseFormSetValue<AttachFundsState>;
 }
 
 export const AttachFund = ({
   control,
-  setValue,
   attachFundsOption,
+  labelBgColor,
+  setValue,
 }: AttachFundProps) => (
   <>
     <Flex mb={5}>
@@ -90,6 +92,7 @@ export const AttachFund = ({
             option will be used.
           </Text>
         }
+        labelBgColor={labelBgColor}
       />
     </Flex>
     <AttachFundContent control={control} setValue={setValue} />

src/lib/components/json-schema/MessageInputSwitch.tsx

@@ -1,6 +1,6 @@
 import { Flex } from "@chakra-ui/react";
-import type { Dispatch, SetStateAction } from "react";
-import { useRef } from "react";
+import { useMemo } from "react";
+import type { CSSProperties, Dispatch, SetStateAction } from "react";
 
 import { Tooltip } from "../Tooltip";
 import { MotionBox } from "lib/components/MotionBox";
@@ -11,29 +11,47 @@ export enum MessageTabs {
   YOUR_SCHEMA = "Your Schema",
 }
 
+export enum OutputMessageTabs {
+  JSON_OUTPUT = "JSON Output",
+  YOUR_SCHEMA = "Your Schema",
+}
+
 export const jsonInputFormKey = MessageTabs.JSON_INPUT as "JSON Input";
 export const yourSchemaInputFormKey = MessageTabs.YOUR_SCHEMA as "Your Schema";
 
-interface MessageInputSwitchProps {
-  currentTab: Option<MessageTabs>;
+interface MessageInputSwitchProps<
+  T extends Option<MessageTabs | OutputMessageTabs>
+> {
+  currentTab: T;
   disabled?: boolean;
   tooltipLabel?: string;
-  onTabChange: Dispatch<SetStateAction<Option<MessageTabs>>>;
+  ml?: CSSProperties["marginLeft"];
+  isOutput?: boolean;
+  onTabChange: Dispatch<SetStateAction<T>>;
 }
 
-const tabs = Object.values(MessageTabs);
-
-export const MessageInputSwitch = ({
+export const MessageInputSwitch = <
+  T extends Option<MessageTabs | OutputMessageTabs>
+>({
   currentTab,
   disabled = false,
   tooltipLabel = "Select or fill code id first",
+  ml,
+  isOutput = false,
   onTabChange,
-}: MessageInputSwitchProps) => {
-  const tabRefs = useRef<(HTMLDivElement | null)[]>([]);
-  const activeIndex = currentTab ? tabs.indexOf(currentTab) : -1;
+}: MessageInputSwitchProps<T>) => {
+  const tabs = useMemo<T[]>(
+    () => Object.values(isOutput ? OutputMessageTabs : MessageTabs),
+    [isOutput]
+  );
+  const activeIndex = currentTab ? tabs.indexOf(currentTab) : 0;
+
+  /**
+   * @todos current implementation of sliding box dimensions and position is hardcoded due to issues with ref, improve this later
+   */
   return (
     <Tooltip label={tooltipLabel} isDisabled={!disabled}>
-      <div>
+      <div style={{ marginLeft: ml }}>
         <Flex
           border="1px solid var(--chakra-colors-gray-700)"
           borderRadius="4px"
@@ -43,14 +61,12 @@ export const MessageInputSwitch = ({
           position="relative"
           sx={{ ...(disabled ? { pointerEvents: "none", opacity: 0.3 } : {}) }}
         >
-          {tabs.map((tab, idx) => (
+          {tabs.map((tab) => (
             <MotionBox
               key={tab}
-              ref={(el) => {
-                tabRefs.current[idx] = el;
-              }}
               cursor="pointer"
               p="2px 10px"
+              w="96px"
               fontSize="12px"
               fontWeight={700}
               variants={{
@@ -69,13 +85,13 @@ export const MessageInputSwitch = ({
             </MotionBox>
           ))}
           <MotionBox
-            h={tabRefs.current[activeIndex]?.clientHeight}
-            w={tabRefs.current[activeIndex]?.clientWidth}
+            w="96px"
+            h="22px"
             position="absolute"
             borderRadius="2px"
             backgroundColor="primary.dark"
             animate={{
-              left: `${tabRefs.current[activeIndex]?.offsetLeft ?? 0}px`,
+              left: activeIndex === 0 ? "4px" : "100px",
             }}
             transition={{
               type: "spring",

src/lib/components/json/JsonReadOnly.tsx

@@ -14,6 +14,7 @@ const JsonEditor = dynamic(() => import("lib/components/json/JsonEditor"), {
 
 interface JsonReadOnlyProps {
   topic?: string;
+  labelBgColor?: string;
   text: string;
   canCopy?: boolean;
   isExpandable?: boolean;
@@ -26,6 +27,7 @@ const THRESHOLD_LINES = 16;
 
 const JsonReadOnly = ({
   topic,
+  labelBgColor = "background.main",
   text,
   canCopy,
   isExpandable,
@@ -80,7 +82,7 @@ const JsonReadOnly = ({
         <Text
           top="-10px"
           w="fit-content"
-          background="background.main"
+          background={labelBgColor}
           color={!isJsonValid ? "error.main" : "text.dark"}
           fontSize="12px"
           position="absolute"
@@ -107,6 +109,7 @@ const JsonReadOnly = ({
           top="10px"
           right="10px"
           className="copy-button-box"
+          display="none"
         >
           <CopyButton value={text} amptrackSection={amptrackSection} />
         </Box>

src/lib/pages/execute/components/schema-execute/ExecuteBox.tsx

@@ -292,6 +292,7 @@ export const ExecuteBox = ({
               control={control}
               setValue={setValue}
               attachFundsOption={attachFundsOption}
+              labelBgColor="gray.900"
             />
           </GridItem>
           <GridItem>