Skip to content

Commit df7b494

Browse files
carlbarrdahlcarlbarrdahl
committed
Improve application form
1 parent ce313b9 commit df7b494

File tree

5 files changed

+104
-88
lines changed

5 files changed

+104
-88
lines changed

‎src/components/ui/Form.tsx

+17
Original file line numberDiff line numberDiff line change
@@ -227,6 +227,23 @@ export function FieldArray<S extends z.Schema>({
227227
</div>
228228
);
229229
}
230+
231+
export function FormSection({
232+
title,
233+
description,
234+
children,
235+
}: { title: string; description: string } & ComponentProps<"section">) {
236+
return (
237+
<section className="mb-8">
238+
<h3 className="mb-1 text-xl font-semibold">{title}</h3>
239+
<p className="mb-4 leading-loose text-gray-600 dark:text-gray-400">
240+
{description}
241+
</p>
242+
{children}
243+
</section>
244+
);
245+
}
246+
230247
export interface FormProps<S extends z.Schema> extends PropsWithChildren {
231248
defaultValues?: UseFormProps<z.infer<S>>["defaultValues"];
232249
values?: UseFormProps<z.infer<S>>["values"];

‎src/features/applications/components/ApplicationForm.tsx

+82-85
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {
88
FieldArray,
99
Form,
1010
FormControl,
11+
FormSection,
1112
Input,
1213
Label,
1314
Select,
@@ -75,78 +76,93 @@ export function ApplicationForm({ address = "" }) {
7576
create.mutate({ application, profile });
7677
}}
7778
>
78-
<Heading as="h3" size="xl">
79-
Profile
80-
</Heading>
81-
<FormControl name="profile.name" label="Name" required>
82-
<Input placeholder="Your name" />
83-
</FormControl>
84-
<div className="mb-4 gap-4 md:flex">
85-
<FormControl required label="Avatar" name="profile.profileImageUrl">
86-
<ImageUpload className="h-48 w-48 " />
79+
<FormSection
80+
title="Profile"
81+
description="Configure your profile name and choose your avatar and background for your project."
82+
>
83+
<FormControl name="profile.name" label="Profile name" required>
84+
<Input placeholder="Your name" />
8785
</FormControl>
88-
<FormControl
89-
required
90-
label="Cover image"
91-
name="profile.bannerImageUrl"
92-
className="flex-1"
93-
>
94-
<ImageUpload className="h-48 " />
86+
<div className="mb-4 gap-4 md:flex">
87+
<FormControl
88+
required
89+
label="Project avatar"
90+
name="profile.profileImageUrl"
91+
>
92+
<ImageUpload className="h-48 w-48 " />
93+
</FormControl>
94+
<FormControl
95+
required
96+
label="Project background image"
97+
name="profile.bannerImageUrl"
98+
className="flex-1"
99+
>
100+
<ImageUpload className="h-48 " />
101+
</FormControl>
102+
</div>
103+
</FormSection>
104+
<FormSection
105+
title="Application"
106+
description="Configure your application and the payout address to where tokens will be transferred."
107+
>
108+
<FormControl name="application.name" label="Name" required>
109+
<Input placeholder="Project name" />
95110
</FormControl>
96-
</div>
97-
<Heading as="h3" size="xl">
98-
Application
99-
</Heading>
100-
<FormControl name="application.name" label="Name" required>
101-
<Input placeholder="Project name" />
102-
</FormControl>
103111

104-
<FormControl name="application.bio" label="Description" required>
105-
<Input placeholder="Project description" />
106-
</FormControl>
107-
<div className="gap-4 md:flex">
112+
<FormControl name="application.bio" label="Description" required>
113+
<Textarea rows={4} placeholder="Project description" />
114+
</FormControl>
115+
<div className="gap-4 md:flex">
116+
<FormControl
117+
className="flex-1"
118+
name="application.websiteUrl"
119+
label="Website"
120+
required
121+
>
122+
<Input placeholder="https://" />
123+
</FormControl>
124+
125+
<FormControl
126+
className="flex-1"
127+
name="application.payoutAddress"
128+
label="Payout address"
129+
required
130+
>
131+
<Input placeholder="0x..." />
132+
</FormControl>
133+
</div>
134+
</FormSection>
135+
136+
<FormSection
137+
title="Contribution & Impact"
138+
description="Describe the contribution and impact of your project."
139+
>
108140
<FormControl
109-
className="flex-1"
110-
name="application.websiteUrl"
111-
label="Website"
141+
name="application.contributionDescription"
142+
label="Contribution description"
112143
required
113144
>
114-
<Input placeholder="https://" />
145+
<Textarea
146+
rows={4}
147+
placeholder="What have your project contributed to?"
148+
/>
115149
</FormControl>
116150

117151
<FormControl
118-
className="flex-1"
119-
name="application.payoutAddress"
120-
label="Payout address"
152+
name="application.impactDescription"
153+
label="Impact description"
121154
required
122155
>
123-
<Input placeholder="0x..." />
156+
<Textarea
157+
rows={4}
158+
placeholder="What impact has your project had?"
159+
/>
124160
</FormControl>
125-
</div>
161+
<ImpactTags />
162+
</FormSection>
126163

127-
<FormControl
128-
name="application.contributionDescription"
129-
label="Contribution description"
130-
required
131-
>
132-
<Textarea
133-
rows={4}
134-
placeholder="What have your project contributed to?"
135-
/>
136-
</FormControl>
137-
138-
<FormControl
139-
name="application.impactDescription"
140-
label="Impact description"
141-
required
142-
>
143-
<Textarea rows={4} placeholder="What impact has your project had?" />
144-
</FormControl>
145-
146-
<ImpactTags />
147-
148-
<ApplicationFormSection
149-
label="Contribution links"
164+
<FormSection
165+
title="Contribution links"
150166
description="Where can we find your contributions?"
151167
>
152168
<FieldArray
@@ -181,10 +197,10 @@ export function ApplicationForm({ address = "" }) {
181197
</>
182198
)}
183199
/>
184-
</ApplicationFormSection>
200+
</FormSection>
185201

186-
<ApplicationFormSection
187-
label="Impact metrics"
202+
<FormSection
203+
title="Impact metrics"
188204
description="What kind of impact have your project made?"
189205
>
190206
<FieldArray
@@ -214,10 +230,10 @@ export function ApplicationForm({ address = "" }) {
214230
</>
215231
)}
216232
/>
217-
</ApplicationFormSection>
233+
</FormSection>
218234

219-
<ApplicationFormSection
220-
label="Funding sources"
235+
<FormSection
236+
title="Funding sources"
221237
description="From what sources have you received funding?"
222238
>
223239
<FieldArray
@@ -261,7 +277,7 @@ export function ApplicationForm({ address = "" }) {
261277
</>
262278
)}
263279
/>
264-
</ApplicationFormSection>
280+
</FormSection>
265281

266282
{error ? (
267283
<div className="mb-4 text-center text-gray-600 dark:text-gray-400">
@@ -319,25 +335,6 @@ function CreateApplicationButton({
319335
);
320336
}
321337

322-
function ApplicationFormSection({
323-
label,
324-
description,
325-
children,
326-
}: PropsWithChildren<{ label: string; description: string }>) {
327-
return (
328-
<div>
329-
<div>
330-
<Heading as="h3" size="xl">
331-
{label}
332-
</Heading>
333-
<p className="mb-4 leading-loose text-gray-400">{description}</p>
334-
</div>
335-
336-
<div>{children}</div>
337-
</div>
338-
);
339-
}
340-
341338
function ImpactTags() {
342339
const { control, watch, formState } =
343340
useFormContext<z.infer<typeof ApplicationCreateSchema>>();

‎src/features/applications/types/index.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { z } from "zod";
2+
import { EthAddressSchema } from "~/features/distribute/types";
23
import { reverseKeys } from "~/utils/reverseKeys";
34

45
export const MetadataSchema = z.object({
@@ -32,7 +33,7 @@ export const ApplicationSchema = z.object({
3233
name: z.string().min(3),
3334
bio: z.string().min(3),
3435
websiteUrl: z.string().url().min(1),
35-
payoutAddress: z.string().startsWith("0x"),
36+
payoutAddress: EthAddressSchema,
3637
contributionDescription: z.string().min(3),
3738
impactDescription: z.string().min(3),
3839
impactCategory: z.array(z.string()).min(1),

‎src/features/distribute/types/index.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { type Address, isAddress } from "viem";
22
import { z } from "zod";
33

4-
const EthAddressSchema = z.custom<string>(
4+
export const EthAddressSchema = z.custom<string>(
55
(val) => isAddress(val as Address),
66
"Invalid address",
77
);

‎src/features/voters/components/ApproveVoters.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { useApproveVoters } from "../hooks/useApproveVoters";
1313
import { useIsAdmin } from "~/hooks/useIsAdmin";
1414
import { useIsCorrectNetwork } from "~/hooks/useIsCorrectNetwork";
1515
import dynamic from "next/dynamic";
16+
import { EthAddressSchema } from "~/features/distribute/types";
1617

1718
function parseAddresses(addresses: string): Address[] {
1819
return addresses
@@ -61,7 +62,7 @@ function ApproveVoters() {
6162
</p>
6263
<Form
6364
schema={z.object({
64-
voters: z.string().startsWith("0x"),
65+
voters: EthAddressSchema,
6566
})}
6667
onSubmit={(values) => {
6768
const voters = parseAddresses(values.voters);

0 commit comments

Comments
 (0)