Skip to content

Commit a9aaf87

Browse files
HuberTRoyHuberTRoy
committed
feat: category
1 parent d20ac76 commit a9aaf87

File tree

9 files changed

+219
-56
lines changed

9 files changed

+219
-56
lines changed

Diff for: ‎public/sw.js

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

Diff for: ‎src/containers/ProjectMetadata.ts

+1
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ function useProjectMetadataImpl() {
1616

1717
const getMetadataFromCid = async (cid: string): Promise<ProjectMetadata> => {
1818
const result = await catSingle(cid);
19+
1920
const rawMeta = JSON.parse(Buffer.from(result).toString('utf8'));
2021
return projectMetadataSchema.validate({ type: 'SUBQUERY', ...rawMeta });
2122
};

Diff for: ‎src/containers/ProjectRegistry.ts

+5-1
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,11 @@ function useProjectRegistryImpl(logger: Logger) {
122122
projectRegistry.tokenURI(id),
123123
]);
124124

125-
const deploymentInfo = await projectRegistry.deploymentInfos(cidToBytes32(project.latestDeploymentId));
125+
const deploymentInfo = await projectRegistry.deploymentInfos(
126+
project.latestDeploymentId.startsWith('Qm')
127+
? cidToBytes32(project.latestDeploymentId)
128+
: project.latestDeploymentId,
129+
);
126130

127131
projectCache.current[BigNumber.from(id).toString()] = {
128132
owner,

Diff for: ‎src/hooks/useCreateProject.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ export function useCreateProject(): (params: P) => Promise<BigNumberish> {
4343
throw new Error('No successful events');
4444
}
4545

46-
return event.args?.['queryId'];
46+
return event.args?.['tokenId'];
4747
},
4848
[ipfs, uploadMetadata, registerProject, uploadVersionMetadata],
4949
);

Diff for: ‎src/models.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ export const projectMetadataSchema = yup.object({
1818
websiteUrl: yup.string().optional().url(),
1919
codeUrl: yup.string().optional().url(),
2020
versionDescription: yup.string().default('').optional(),
21+
categories: yup.array().max(2),
2122
});
2223

2324
export type ProjectMetadata = yup.Asserts<typeof projectMetadataSchema>;

Diff for: ‎src/pages/studio/Create/Create.module.css

-46
This file was deleted.

Diff for: ‎src/pages/studio/Create/Create.module.less

+105
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
.form {
2+
display: flex;
3+
flex-direction: row;
4+
align-items: flex-start;
5+
padding: 0 80px 80px 80px;
6+
}
7+
8+
.deployment {
9+
font-family: Futura;
10+
font-weight: 500;
11+
font-size: 18px;
12+
line-height: 28px;
13+
color: var(--gray900);
14+
margin-top: 8px;
15+
}
16+
17+
.header {
18+
display: flex;
19+
flex-direction: row;
20+
justify-content: space-between;
21+
padding: 64px 80px 40px 80px;
22+
}
23+
24+
.name {
25+
font-family: Futura;
26+
font-weight: 500;
27+
font-size: 32px;
28+
line-height: 48px;
29+
30+
color: var(--gray900);
31+
padding-left: 22px;
32+
}
33+
34+
.details {
35+
display: flex;
36+
flex-direction: row;
37+
gap: 22px;
38+
}
39+
40+
.fields {
41+
display: flex;
42+
flex-direction: column;
43+
gap: 16px;
44+
max-width: 845px;
45+
flex: 1;
46+
}
47+
48+
.successModal {
49+
:global {
50+
.ant-modal-confirm-body {
51+
flex-direction: column;
52+
}
53+
54+
.ant-modal-confirm-paragraph.ant-modal-confirm-paragraph {
55+
max-width: 100%;
56+
}
57+
}
58+
}
59+
60+
.checkbox {
61+
:global {
62+
.ant-checkbox-group {
63+
.ant-checkbox-wrapper {
64+
background: var(--sq-gray200);
65+
color: var(--sq-gray500);
66+
padding: 5px 16px;
67+
border-radius: 100px;
68+
font-family: var(--sq-font-family);
69+
.ant-checkbox {
70+
&-inner {
71+
width: 0px;
72+
height: 0px;
73+
border: none;
74+
&::after {
75+
width: 0px;
76+
height: 0px;
77+
}
78+
}
79+
}
80+
}
81+
82+
.ant-checkbox-wrapper.ant-checkbox-wrapper-checked {
83+
color: var(--sq-blue600);
84+
background: rgba(67, 136, 221, 0.10);
85+
86+
.ant-checkbox {
87+
display: inline-flex;
88+
89+
&-inner {
90+
// override the antd style. a lazy way.
91+
background: transparent!important;
92+
border: none;
93+
width: 16px;
94+
height: 16px;
95+
&::after {
96+
border-color: var(--sq-blue600);
97+
width: 6px;
98+
height: 9px;
99+
}
100+
}
101+
}
102+
}
103+
}
104+
}
105+
}

Diff for: ‎src/pages/studio/Create/Create.tsx

+79-4
Original file line numberDiff line numberDiff line change
@@ -7,18 +7,41 @@ import { useNavigate } from 'react-router';
77
import { CloseOutlined } from '@ant-design/icons';
88
import { BigNumber } from '@ethersproject/bignumber';
99
import { Markdown, Spinner, Typography } from '@subql/components';
10-
import { Button, Modal, Result } from 'antd';
10+
import { Button, Checkbox, Modal, Radio, Result } from 'antd';
1111
import clsx from 'clsx';
12-
import { Field, Form, Formik } from 'formik';
12+
import { Field, FieldArray, Form, Formik } from 'formik';
1313

1414
import { FTextInput, ImageInput } from '../../../components';
1515
import { useCreateProject, useProject, useRouteQuery, useUpdateProjectMetadata } from '../../../hooks';
1616
import { FormCreateProjectMetadata, newDeploymentSchema, projectMetadataSchema } from '../../../models';
1717
import { isEthError, parseError, ROUTES } from '../../../utils';
18-
import styles from './Create.module.css';
18+
import styles from './Create.module.less';
1919

2020
const { STUDIO_PROJECT_NAV } = ROUTES;
2121

22+
const categoriesOptions = [
23+
{
24+
label: 'Dictionary',
25+
value: 'Dictionary',
26+
},
27+
{
28+
label: 'DeFi',
29+
value: 'DeFi',
30+
},
31+
{
32+
label: 'Oracle',
33+
value: 'Oracle',
34+
},
35+
{
36+
label: 'Wallet',
37+
value: 'Wallet',
38+
},
39+
{
40+
label: 'NFT',
41+
value: 'NFT',
42+
},
43+
];
44+
2245
const Create: React.FC = () => {
2346
const { t } = useTranslation();
2447

@@ -47,6 +70,7 @@ const Create: React.FC = () => {
4770
version: project.version,
4871
versionDescription: project.versionDescription,
4972
type: project.type,
73+
categories: project.categories,
5074
};
5175
await updateMetadata(payload);
5276
} else {
@@ -56,7 +80,8 @@ const Create: React.FC = () => {
5680
resultId = BigNumber.from(queryId).toHexString();
5781
}
5882

59-
const { destroy } = Modal.info({
83+
const { destroy } = Modal.success({
84+
className: styles.successModal,
6085
width: 572,
6186
icon: (
6287
<div style={{ display: 'flex', justifyContent: 'flex-end', width: '100%' }}>
@@ -80,6 +105,7 @@ const Create: React.FC = () => {
80105
size="large"
81106
onClick={() => {
82107
navigate(`${STUDIO_PROJECT_NAV}/${resultId}`);
108+
destroy();
83109
}}
84110
>
85111
View project in Explorer
@@ -122,6 +148,7 @@ const Create: React.FC = () => {
122148
version: '1.0.0',
123149
versionDescription: '',
124150
deploymentId: query.get('deploymentId') ?? '',
151+
categories: [],
125152
...(isEdit ? asyncProject.data?.metadata : {}),
126153
}}
127154
validationSchema={
@@ -186,6 +213,54 @@ const Create: React.FC = () => {
186213
);
187214
}}
188215
</Field>
216+
<Typography>
217+
Categories
218+
<Typography type="secondary" variant="medium" style={{ marginLeft: 8 }}>
219+
Select up to 2
220+
</Typography>
221+
</Typography>
222+
223+
<FieldArray
224+
name="categories"
225+
render={(arrayHelper) => {
226+
return (
227+
<div className={styles.checkbox}>
228+
<Checkbox.Group
229+
options={categoriesOptions}
230+
value={arrayHelper.form.values.categories}
231+
onChange={(e) => {
232+
arrayHelper.form.setFieldValue('categories', e);
233+
}}
234+
></Checkbox.Group>
235+
</div>
236+
);
237+
}}
238+
></FieldArray>
239+
240+
<Typography>Project Type</Typography>
241+
<Field name="type">
242+
{({
243+
field,
244+
form,
245+
}: {
246+
field: { name: string; value: string };
247+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
248+
form: { setFieldValue: (field: string, val: any) => void };
249+
}) => {
250+
return (
251+
<Radio.Group
252+
value={field.value}
253+
onChange={(val) => {
254+
form.setFieldValue(field.name, val.target.value);
255+
}}
256+
disabled={isEdit ? true : false}
257+
>
258+
<Radio value="SUBQUERY">SubQuery</Radio>
259+
<Radio value="RPC">RPC</Radio>
260+
</Radio.Group>
261+
);
262+
}}
263+
</Field>
189264
<FTextInput label={t('studio.create.websiteUrl')} id="websiteUrl" />
190265
<FTextInput label={t('studio.create.codeUrl')} id="codeUrl" />
191266
{isEdit ? (

Diff for: ‎src/pages/studio/Project/Project.tsx

+26-3
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import clsx from 'clsx';
1212
import { IPFSImage, Spinner } from '../../../components';
1313
import { useWeb3 } from '../../../containers';
1414
import { useCreateDeployment, useProject } from '../../../hooks';
15-
import { renderAsync } from '../../../utils';
15+
import { parseError, renderAsync } from '../../../utils';
1616
import DeploymentsTab from './Deployments';
1717
import styles from './Project.module.css';
1818

@@ -34,7 +34,9 @@ const Project: React.FC = () => {
3434

3535
return renderAsync(asyncProject, {
3636
loading: () => <Spinner />,
37-
error: (error: Error) => <span>{`Failed to load project: ${error.message}`}</span>,
37+
error: (error: Error) => {
38+
return <Typography>{`Failed to load project: ${parseError(error)}`}</Typography>;
39+
},
3840
data: (project) => {
3941
if (!project) {
4042
// Should never happen
@@ -134,14 +136,35 @@ const Project: React.FC = () => {
134136
</div>
135137
</div>
136138

137-
<Typography variant="large" weight={600} style={{ marginBottom: 24 }}>
139+
<Typography variant="large" weight={600} style={{ margin: '24px 0' }}>
138140
Project Detail
139141
</Typography>
140142

141143
<div style={{ marginBottom: 16 }}>
142144
<Markdown.Preview>{project.metadata.description}</Markdown.Preview>
143145
</div>
144146

147+
<Typography variant="large" style={{ margin: '24px 0 8px 0' }}>
148+
Categories
149+
</Typography>
150+
151+
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 16 }}>
152+
{project.metadata.categories?.map((category) => {
153+
return (
154+
<div
155+
style={{
156+
padding: '8px 16px',
157+
background: 'rgba(67, 136, 221, 0.10)',
158+
color: 'var(--sq-blue600)',
159+
borderRadius: 100,
160+
}}
161+
>
162+
{category}
163+
</div>
164+
);
165+
})}
166+
</div>
167+
145168
<ExternalLink icon="globe" link={project.metadata.websiteUrl} />
146169
<ExternalLink icon="github" link={project.metadata.codeUrl} />
147170

0 commit comments

Comments
 (0)