Merge pull request #472 from alleslabs/feat/schema-migrate

feat: add json schema functionality to migrate contract

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#472](https://github.com/alleslabs/celatone-frontend/pull/472) Add json schema functionality to migrate contract
 - [#461](https://github.com/alleslabs/celatone-frontend/pull/461) Add json schema form
 - [#455](https://github.com/alleslabs/celatone-frontend/pull/455) Implement schema store and unit test
 - [#453](https://github.com/alleslabs/celatone-frontend/pull/453) Attach schema feature on upload complete

src/lib/components/MotionBox.tsx

@@ -0,0 +1,7 @@
+import { chakra, shouldForwardProp } from "@chakra-ui/react";
+import { motion, isValidMotionProp } from "framer-motion";
+
+export const MotionBox = chakra(motion.div, {
+  shouldForwardProp: (prop) =>
+    isValidMotionProp(prop) || shouldForwardProp(prop),
+});

src/lib/components/dropzone/config.ts

@@ -19,10 +19,10 @@ export const DROPZONE_CONFIG: { [key in DropzoneFileType]: DropzoneConfig } = {
     },
   },
   schema: {
-    accept: { "application/json": [".schema.json"] },
+    accept: { "application/json": [".json"] },
     text: {
       prettyFileType: "JSON Schema",
-      rawFileType: ".schema.json",
+      rawFileType: ".json",
     },
   },
 };

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

@@ -0,0 +1,73 @@
+import { Button, Flex, IconButton, Text } from "@chakra-ui/react";
+
+import { CustomIcon } from "lib/components/icon";
+import { useSchemaStore } from "lib/providers/store";
+import type { CodeSchema } from "lib/stores/schema";
+import type { Option } from "lib/types";
+
+import { ViewSchemaButton } from "./ViewSchemaButton";
+
+interface AttachSchemaCardProps {
+  attached: boolean;
+  codeId: string;
+  codeHash: string;
+  schema: Option<CodeSchema>;
+  openDrawer: () => void;
+}
+
+export const AttachSchemaCard = ({
+  attached,
+  codeId,
+  codeHash,
+  schema,
+  openDrawer,
+}: AttachSchemaCardProps) => {
+  const { deleteSchema } = useSchemaStore();
+
+  return (
+    <Flex
+      border="1px solid var(--chakra-colors-gray-700)"
+      bg="gray.800"
+      justify="space-between"
+      align="center"
+      p={4}
+      w="full"
+      borderRadius="4px"
+    >
+      {!attached ? (
+        <>
+          <Text variant="body2">Attach JSON Schema</Text>
+          <Button size="sm" variant="outline-primary" onClick={openDrawer}>
+            Attach
+          </Button>
+        </>
+      ) : (
+        <>
+          <Flex align="center" gap={1}>
+            <CustomIcon
+              name="check-circle-solid"
+              color="success.main"
+              boxSize={6}
+            />
+            <Text variant="body2">JSON Schema attached</Text>
+          </Flex>
+          <Flex align="center">
+            <ViewSchemaButton codeId={codeId} schema={schema} mr={2} />
+            <Button variant="outline-gray" size="sm" onClick={openDrawer}>
+              Reattach
+            </Button>
+            <IconButton
+              size="sm"
+              variant="gray"
+              aria-label="delete_schema"
+              onClick={() => deleteSchema(codeHash)}
+              icon={
+                <CustomIcon name="delete" color="gray.600" boxSize={4} m={0} />
+              }
+            />
+          </Flex>
+        </>
+      )}
+    </Flex>
+  );
+};

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

@@ -0,0 +1,66 @@
+import {
+  Drawer,
+  DrawerOverlay,
+  DrawerContent,
+  DrawerHeader,
+  Flex,
+  Heading,
+  DrawerCloseButton,
+  DrawerBody,
+  Text,
+  Box,
+} from "@chakra-ui/react";
+
+import { CustomIcon } from "lib/components/icon";
+
+import { UploadTemplate } from "./UploadTemplate";
+
+interface JsonSchemaDrawerProps {
+  codeId: string;
+  codeHash: string;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export const JsonSchemaDrawer = ({
+  codeId,
+  codeHash,
+  isOpen,
+  onClose,
+}: JsonSchemaDrawerProps) => (
+  <Drawer isOpen={isOpen} onClose={onClose} placement="bottom">
+    <DrawerOverlay />
+    <DrawerContent h="80%">
+      <DrawerHeader>
+        <Flex direction="column" gap={2}>
+          <Flex align="center" gap={3}>
+            <CustomIcon name="upload" boxSize={5} color="gray.600" />
+            <Heading as="h5" variant="h5">
+              Attach JSON Schema for code ID “{codeId}”
+            </Heading>
+          </Flex>
+          <Text variant="body3" color="text.dark">
+            Your attached JSON schema will be stored locally on your device
+          </Text>
+        </Flex>
+      </DrawerHeader>
+      <DrawerCloseButton color="gray.600" />
+      <DrawerBody overflow="scroll" p={6}>
+        <Box
+          p="12px 16px"
+          borderRadius="8px"
+          border="1px solid var(--chakra-colors-gray-700)"
+          bg="gray.800"
+          mb={6}
+        >
+          <Text variant="body2" color="text.dark">
+            Please note that the JSON schema you upload on our website will only
+            be stored locally on your device. For public projects with verified
+            JSON schemas, they will be visible and accessible to others.
+          </Text>
+        </Box>
+        <UploadTemplate closeDrawer={onClose} codeHash={codeHash} />
+      </DrawerBody>
+    </DrawerContent>
+  </Drawer>
+);

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

@@ -0,0 +1,43 @@
+import type { ButtonProps } from "@chakra-ui/react";
+import { Button } from "@chakra-ui/react";
+
+import type { CodeSchema } from "lib/stores/schema";
+import type { Option } from "lib/types";
+
+interface ViewSchemaButtonProps extends ButtonProps {
+  codeId: string;
+  schema: Option<CodeSchema>;
+}
+
+export const ViewSchemaButton = ({
+  codeId,
+  schema,
+  ...buttonProps
+}: ViewSchemaButtonProps) => (
+  <Button
+    variant="outline-gray"
+    size="sm"
+    onClick={() => {
+      const jsonString = JSON.stringify(schema, null, 2);
+      const jsonWindow = window.open();
+      if (jsonWindow) {
+        // Modify styling later
+        jsonWindow.document.write(
+          `<html><head><title>JSON Schema | Code ID ${codeId}</title>`
+        );
+
+        // Add styling
+        jsonWindow.document.write(
+          "<style>body { background-color: #f0f0f0; color: #333; }</style>"
+        );
+
+        jsonWindow.document.write(
+          `</head><body><pre>${jsonString}</pre></body></html>`
+        );
+      }
+    }}
+    {...buttonProps}
+  >
+    View JSON
+  </Button>
+);

src/lib/components/json-schema/index.tsx → src/lib/components/json-schema/form/index.tsx

@@ -23,7 +23,7 @@ import isEqual from "lodash/isEqual";
 import type { FC } from "react";
 import { useCallback, useMemo, useState } from "react";
 
-import JsonReadOnly from "../json/JsonReadOnly";
+import JsonReadOnly from "../../json/JsonReadOnly";
 import { jsonPrettify } from "lib/utils";
 
 import contractSchema from "./contract_schema.json";
@@ -102,7 +102,7 @@ export interface JsonSchemaFormProps
   > {
   schema: RJSFSchema;
   formId: string;
-  onSubmit: (data: Record<string, unknown>) => void;
+  onSubmit?: (data: Record<string, unknown>) => void;
   /** Onchange callback is with BROKEN data */
   onChange?: (data: Record<string, unknown>) => void;
   formContext?: Record<string, unknown>;
@@ -136,7 +136,7 @@ export const JsonSchemaForm: FC<JsonSchemaFormProps> = ({
     fixOneOfKeysCallback(values);
     console.log("onSubmit", values);
 
-    propsOnSubmit(values);
+    propsOnSubmit?.(values);
   };
 
   const onChange = useCallback(
@@ -154,44 +154,49 @@ export const JsonSchemaForm: FC<JsonSchemaFormProps> = ({
   );
 
   return (
-    <Form
-      id={formId}
-      formContext={formContext}
-      formData={formData}
-      schema={schema}
-      // we use no validate because the schemas are too complicated to be auto validated
-      // noValidate
-      uiSchema={{
-        // "ui:submitButtonOptions": {
-        //   norender: true,
-        // },
-        ...uiSchema,
-      }}
-      widgets={{
-        ...DefaultWidgets,
-        ...Widgets,
-        ...widgets,
-      }}
-      fields={{
-        ...Fields,
-        ...fields,
-      }}
-      templates={{
-        ...DefaultTemplates,
-        ...Templates,
-        ...templates,
-      }}
-      validator={v8Validator}
-      onChange={({ formData: values }) => {
-        // log.info(values)
-        onChange?.(values);
-      }}
-      onSubmit={({ formData: values }) => {
-        // log.info(values)
-        onSubmit(values);
-      }}
-      onError={() => console.error("errors")}
-    />
+    <Box w="full">
+      <Form
+        id={formId}
+        formContext={formContext}
+        formData={formData}
+        schema={schema}
+        // we use no validate because the schemas are too complicated to be auto validated
+        // noValidate
+        uiSchema={{
+          "ui:submitButtonOptions": {
+            norender: true,
+          },
+          "ui:form": {
+            width: "100%",
+          },
+          ...uiSchema,
+        }}
+        widgets={{
+          ...DefaultWidgets,
+          ...Widgets,
+          ...widgets,
+        }}
+        fields={{
+          ...Fields,
+          ...fields,
+        }}
+        templates={{
+          ...DefaultTemplates,
+          ...Templates,
+          ...templates,
+        }}
+        validator={v8Validator}
+        onChange={({ formData: values }) => {
+          // log.info(values)
+          onChange?.(values);
+        }}
+        onSubmit={({ formData: values }) => {
+          // log.info(values)
+          onSubmit(values);
+        }}
+        onError={() => console.error("errors")}
+      />
+    </Box>
   );
 };
 

src/lib/components/json-schema/templates/ArrayFieldTemplate.tsx → src/lib/components/json-schema/form/templates/ArrayFieldTemplate.tsx

@@ -63,7 +63,14 @@ export default function ArrayFieldTemplate<T = any, F = any>(
         uiSchema={uiSchema}
         registry={registry}
       />
-      <Grid key={`array-item-list-${idSchema.$id}`} my={2} gap={4}>
+      <Grid
+        key={`array-item-list-${idSchema.$id}`}
+        my={2}
+        gap={4}
+        bgColor="gray.800"
+        borderRadius="8px"
+        p="8px 12px"
+      >
         {items.length > 0 &&
           items.map(
             ({ key, ...itemProps }: ArrayFieldTemplateItemType<T, F>) => (

src/lib/components/json-schema/templates/BaseInputTemplate.tsx → src/lib/components/json-schema/form/templates/BaseInputTemplate.tsx

@@ -122,7 +122,13 @@ const BaseInputTemplate = <T = any, F = any>(props: WidgetProps<T, F>) => {
     >
       {displayLabel && (
         <Flex>
-          <FormLabel htmlFor={id} id={`${id}-label`} fontSize="12px">
+          <FormLabel
+            htmlFor={id}
+            id={`${id}-label`}
+            fontSize="12px"
+            fontWeight={700}
+            marginInlineEnd={1}
+          >
             {label}
           </FormLabel>
           <FieldTypeTag type={schema.type} />
@@ -164,7 +170,7 @@ const BaseInputTemplate = <T = any, F = any>(props: WidgetProps<T, F>) => {
         </datalist>
       ) : null}
       {!!schema.description && (
-        <Box pl={3}>
+        <Box mt={1}>
           <DescriptionFieldTemplate
             id={`${id}-description`}
             description={schema.description}

src/lib/components/json-schema/widgets/SelectWidget.tsx → src/lib/components/json-schema/form/widgets/SelectWidget.tsx

@@ -123,6 +123,7 @@ const SelectWidget = <T, F>(props: WidgetProps<T, F>) => {
       isRequired={required}
       isReadOnly={readonly}
       isInvalid={rawErrors && rawErrors.length > 0}
+      sx={{ "& > p": { mt: 4, mb: 2 } }}
     >
       {!!schema.description && (
         <DescriptionFieldTemplate
@@ -144,7 +145,16 @@ const SelectWidget = <T, F>(props: WidgetProps<T, F>) => {
         autoFocus={autofocus}
         value={formValue}
         menuPosition="fixed"
-        selectedOptionColorScheme="gray"
+        chakraStyles={{
+          option: (provided, state) => ({
+            ...provided,
+            bg: state.isSelected ? "gray.800" : undefined,
+            color: "text.main",
+            _hover: {
+              bg: "gray.700",
+            },
+          }),
+        }}
       />
     </FormControl>
   );