feat: category

public/sw.js

@@ -11,7 +11,7 @@ workbox.setConfig({
 workbox.routing.registerRoute(
   // \/{0,1} will also match dev.thechaindata.comxxxyyy, but this is would not a valid suffix, so it can be use.
   // for match dev.thechaindata.com & dev.thechaindata.com/
-  /((localhost:3006)|((dev|kepler)\.thechaindata\.com)|(kepler\.subquery\.network))\/{0,1}(?=((dashboard)|(explorer)|(profile)|(indexer)|(delegator)|(consumer)|(swap)|(studio))|\?|$).*/g,
+  /(((dev|kepler)\.thechaindata\.com)|(kepler\.subquery\.network))\/{0,1}(?=((dashboard)|(explorer)|(profile)|(indexer)|(delegator)|(consumer)|(swap)|(studio))|\?|$).*/g,
   // https://developers.google.com/web/tools/workbox/reference-docs/latest/workbox.strategies
   new workbox.strategies.NetworkFirst({
     cacheName: 'workbox:html',

src/containers/ProjectMetadata.ts

@@ -16,6 +16,7 @@ function useProjectMetadataImpl() {
 
   const getMetadataFromCid = async (cid: string): Promise<ProjectMetadata> => {
     const result = await catSingle(cid);
+
     const rawMeta = JSON.parse(Buffer.from(result).toString('utf8'));
     return projectMetadataSchema.validate({ type: 'SUBQUERY', ...rawMeta });
   };

src/containers/ProjectRegistry.ts

@@ -122,7 +122,11 @@ function useProjectRegistryImpl(logger: Logger) {
         projectRegistry.tokenURI(id),
       ]);
 
-      const deploymentInfo = await projectRegistry.deploymentInfos(cidToBytes32(project.latestDeploymentId));
+      const deploymentInfo = await projectRegistry.deploymentInfos(
+        project.latestDeploymentId.startsWith('Qm')
+          ? cidToBytes32(project.latestDeploymentId)
+          : project.latestDeploymentId,
+      );
 
       projectCache.current[BigNumber.from(id).toString()] = {
         owner,

src/hooks/useCreateProject.tsx

@@ -43,7 +43,7 @@ export function useCreateProject(): (params: P) => Promise<BigNumberish> {
         throw new Error('No successful events');
       }
 
-      return event.args?.['queryId'];
+      return event.args?.['tokenId'];
     },
     [ipfs, uploadMetadata, registerProject, uploadVersionMetadata],
   );

src/models.tsx

@@ -18,6 +18,7 @@ export const projectMetadataSchema = yup.object({
   websiteUrl: yup.string().optional().url(),
   codeUrl: yup.string().optional().url(),
   versionDescription: yup.string().default('').optional(),
+  categories: yup.array().max(2),
 });
 
 export type ProjectMetadata = yup.Asserts<typeof projectMetadataSchema>;

src/pages/studio/Create/Create.module.less

@@ -0,0 +1,105 @@
+.form {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  padding: 0 80px 80px 80px;
+}
+
+.deployment {
+  font-family: Futura;
+  font-weight: 500;
+  font-size: 18px;
+  line-height: 28px;
+  color: var(--gray900);
+  margin-top: 8px;
+}
+
+.header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 64px 80px 40px 80px;
+}
+
+.name {
+  font-family: Futura;
+  font-weight: 500;
+  font-size: 32px;
+  line-height: 48px;
+
+  color: var(--gray900);
+  padding-left: 22px;
+}
+
+.details {
+  display: flex;
+  flex-direction: row;
+  gap: 22px;
+}
+
+.fields {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  max-width: 845px;
+  flex: 1;
+}
+
+.successModal {
+  :global {
+    .ant-modal-confirm-body {
+      flex-direction: column;
+    }
+
+    .ant-modal-confirm-paragraph.ant-modal-confirm-paragraph {
+      max-width: 100%;
+    }
+  }
+}
+
+.checkbox {
+  :global {
+    .ant-checkbox-group {
+      .ant-checkbox-wrapper {
+        background: var(--sq-gray200);
+        color: var(--sq-gray500);
+        padding: 5px 16px;
+        border-radius: 100px;
+        font-family: var(--sq-font-family);
+        .ant-checkbox {
+          &-inner {
+            width: 0px;
+            height: 0px;
+            border: none;
+            &::after {
+              width: 0px;
+              height: 0px;
+            }
+          }
+        }
+      }
+
+      .ant-checkbox-wrapper.ant-checkbox-wrapper-checked {
+        color: var(--sq-blue600);
+        background: rgba(67, 136, 221, 0.10);
+
+        .ant-checkbox {
+          display: inline-flex;
+
+          &-inner {
+            // override the antd style. a lazy way.
+            background: transparent!important;
+            border: none;
+            width: 16px;
+            height: 16px;
+            &::after {
+              border-color: var(--sq-blue600);
+              width: 6px;
+              height: 9px;
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/pages/studio/Create/Create.tsx

@@ -7,18 +7,41 @@ import { useNavigate } from 'react-router';
 import { CloseOutlined } from '@ant-design/icons';
 import { BigNumber } from '@ethersproject/bignumber';
 import { Markdown, Spinner, Typography } from '@subql/components';
-import { Button, Modal, Result } from 'antd';
+import { Button, Checkbox, Modal, Radio, Result } from 'antd';
 import clsx from 'clsx';
-import { Field, Form, Formik } from 'formik';
+import { Field, FieldArray, Form, Formik } from 'formik';
 
 import { FTextInput, ImageInput } from '../../../components';
 import { useCreateProject, useProject, useRouteQuery, useUpdateProjectMetadata } from '../../../hooks';
 import { FormCreateProjectMetadata, newDeploymentSchema, projectMetadataSchema } from '../../../models';
 import { isEthError, parseError, ROUTES } from '../../../utils';
-import styles from './Create.module.css';
+import styles from './Create.module.less';
 
 const { STUDIO_PROJECT_NAV } = ROUTES;
 
+const categoriesOptions = [
+  {
+    label: 'Dictionary',
+    value: 'Dictionary',
+  },
+  {
+    label: 'DeFi',
+    value: 'DeFi',
+  },
+  {
+    label: 'Oracle',
+    value: 'Oracle',
+  },
+  {
+    label: 'Wallet',
+    value: 'Wallet',
+  },
+  {
+    label: 'NFT',
+    value: 'NFT',
+  },
+];
+
 const Create: React.FC = () => {
   const { t } = useTranslation();
 
@@ -47,6 +70,7 @@ const Create: React.FC = () => {
             version: project.version,
             versionDescription: project.versionDescription,
             type: project.type,
+            categories: project.categories,
           };
           await updateMetadata(payload);
         } else {
@@ -56,7 +80,8 @@ const Create: React.FC = () => {
           resultId = BigNumber.from(queryId).toHexString();
         }
 
-        const { destroy } = Modal.info({
+        const { destroy } = Modal.success({
+          className: styles.successModal,
           width: 572,
           icon: (
             <div style={{ display: 'flex', justifyContent: 'flex-end', width: '100%' }}>
@@ -80,6 +105,7 @@ const Create: React.FC = () => {
                   size="large"
                   onClick={() => {
                     navigate(`${STUDIO_PROJECT_NAV}/${resultId}`);
+                    destroy();
                   }}
                 >
                   View project in Explorer
@@ -122,6 +148,7 @@ const Create: React.FC = () => {
           version: '1.0.0',
           versionDescription: '',
           deploymentId: query.get('deploymentId') ?? '',
+          categories: [],
           ...(isEdit ? asyncProject.data?.metadata : {}),
         }}
         validationSchema={
@@ -186,6 +213,54 @@ const Create: React.FC = () => {
                       );
                     }}
                   </Field>
+                  <Typography>
+                    Categories
+                    <Typography type="secondary" variant="medium" style={{ marginLeft: 8 }}>
+                      Select up to 2
+                    </Typography>
+                  </Typography>
+
+                  <FieldArray
+                    name="categories"
+                    render={(arrayHelper) => {
+                      return (
+                        <div className={styles.checkbox}>
+                          <Checkbox.Group
+                            options={categoriesOptions}
+                            value={arrayHelper.form.values.categories}
+                            onChange={(e) => {
+                              arrayHelper.form.setFieldValue('categories', e);
+                            }}
+                          ></Checkbox.Group>
+                        </div>
+                      );
+                    }}
+                  ></FieldArray>
+
+                  <Typography>Project Type</Typography>
+                  <Field name="type">
+                    {({
+                      field,
+                      form,
+                    }: {
+                      field: { name: string; value: string };
+                      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                      form: { setFieldValue: (field: string, val: any) => void };
+                    }) => {
+                      return (
+                        <Radio.Group
+                          value={field.value}
+                          onChange={(val) => {
+                            form.setFieldValue(field.name, val.target.value);
+                          }}
+                          disabled={isEdit ? true : false}
+                        >
+                          <Radio value="SUBQUERY">SubQuery</Radio>
+                          <Radio value="RPC">RPC</Radio>
+                        </Radio.Group>
+                      );
+                    }}
+                  </Field>
                   <FTextInput label={t('studio.create.websiteUrl')} id="websiteUrl" />
                   <FTextInput label={t('studio.create.codeUrl')} id="codeUrl" />
                   {isEdit ? (

src/pages/studio/Project/Project.tsx

@@ -12,7 +12,7 @@ import clsx from 'clsx';
 import { IPFSImage, Spinner } from '../../../components';
 import { useWeb3 } from '../../../containers';
 import { useCreateDeployment, useProject } from '../../../hooks';
-import { renderAsync } from '../../../utils';
+import { parseError, renderAsync } from '../../../utils';
 import DeploymentsTab from './Deployments';
 import styles from './Project.module.css';
 
@@ -34,7 +34,9 @@ const Project: React.FC = () => {
 
   return renderAsync(asyncProject, {
     loading: () => <Spinner />,
-    error: (error: Error) => <span>{`Failed to load project: ${error.message}`}</span>,
+    error: (error: Error) => {
+      return <Typography>{`Failed to load project: ${parseError(error)}`}</Typography>;
+    },
     data: (project) => {
       if (!project) {
         // Should never happen
@@ -134,14 +136,35 @@ const Project: React.FC = () => {
               </div>
             </div>
 
-            <Typography variant="large" weight={600} style={{ marginBottom: 24 }}>
+            <Typography variant="large" weight={600} style={{ margin: '24px 0' }}>
               Project Detail
             </Typography>
 
             <div style={{ marginBottom: 16 }}>
               <Markdown.Preview>{project.metadata.description}</Markdown.Preview>
             </div>
 
+            <Typography variant="large" style={{ margin: '24px 0 8px 0' }}>
+              Categories
+            </Typography>
+
+            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 16 }}>
+              {project.metadata.categories?.map((category) => {
+                return (
+                  <div
+                    style={{
+                      padding: '8px 16px',
+                      background: 'rgba(67, 136, 221, 0.10)',
+                      color: 'var(--sq-blue600)',
+                      borderRadius: 100,
+                    }}
+                  >
+                    {category}
+                  </div>
+                );
+              })}
+            </div>
+
             <ExternalLink icon="globe" link={project.metadata.websiteUrl} />
             <ExternalLink icon="github" link={project.metadata.codeUrl} />