feat(launchpad): Add Collection Creation form front #1477

WaDadidou · 2025-01-05T20:29:52Z

more description could come soon...

Testable here: https://deploy-preview-1477--teritori-dapp.netlify.app/launchpad/apply (Teritori Testnet)

What's in this PR?

This PR is extracted from this one: #1024
It adds the Collection Creation form

The flow starts here:

teritori-dapp/packages/screens/Launchpad/LaunchpadApply/LaunchpadApplyScreen.tsx

Lines 79 to 89 in a8d6ccd

<OmniLink

noHoverEffect

to={{ screen: "LaunchpadCreate" }}

style={{

flex: 1,

marginHorizontal: width >= MD_BREAKPOINT ? layout.spacing_x1_5 : 0,

marginVertical: width >= MD_BREAKPOINT ? 0 : layout.spacing_x1_5,

}}

>

<LargeBoxButton {...BUTTONS[1]} />

</OmniLink>

The flow ends here:

teritori-dapp/packages/hooks/launchpad/useCreateCollection.ts

Lines 182 to 184 in 3344964

await nftLaunchpadContractClient.submitCollection({

collection,

});

I made this Zod object to pilot the Collection Creation form

teritori-dapp/packages/utils/types/launchpad.ts

Lines 80 to 153 in a8d6ccd

    
           export const ZodCollectionFormValues = z.object({ 
        
             name: z.string().trim().min(1, DEFAULT_FORM_ERRORS.required), 
        
             description: z.string().trim().min(1, DEFAULT_FORM_ERRORS.required), 
        
             symbol: z 
        
               .string() 
        
               .trim() 
        
               .toUpperCase() 
        
               .min(1, DEFAULT_FORM_ERRORS.required) 
        
               .refine( 
        
                 (value) => LETTERS_REGEXP.test(value), 
        
                 DEFAULT_FORM_ERRORS.onlyLetters, 
        
               ), 
        
             websiteLink: z 
        
               .string() 
        
               .trim() 
        
               .min(1, DEFAULT_FORM_ERRORS.required) 
        
               .refine((value) => URL_REGEX.test(value), DEFAULT_FORM_ERRORS.onlyUrl), 
        
             email: z 
        
               .string() 
        
               .trim() 
        
               .min(1, DEFAULT_FORM_ERRORS.required) 
        
               .refine((value) => EMAIL_REGEXP.test(value), DEFAULT_FORM_ERRORS.onlyEmail), 
        
             projectTypes: z.array(z.string().trim()).min(1, DEFAULT_FORM_ERRORS.required), 
        
             revealTime: z.number().optional(), 
        
             teamDescription: z.string().trim().min(1, DEFAULT_FORM_ERRORS.required), 
        
             partnersDescription: z.string().trim().min(1, DEFAULT_FORM_ERRORS.required), 
        
             investDescription: z.string().trim().min(1, DEFAULT_FORM_ERRORS.required), 
        
             investLink: z.string().trim().min(1, DEFAULT_FORM_ERRORS.required), 
        
             artworkDescription: z.string().trim().min(1, DEFAULT_FORM_ERRORS.required), 
        
             coverImage: ZodLocalFileData, 
        
             isPreviouslyApplied: z.boolean(), 
        
             isDerivativeProject: z.boolean(), 
        
             isReadyForMint: z.boolean(), 
        
             isDox: z.boolean(), 
        
             escrowMintProceedsPeriod: z 
        
               .string() 
        
               .trim() 
        
               .min(1, DEFAULT_FORM_ERRORS.required), 
        
             daoWhitelistCount: z 
        
               .string() 
        
               .trim() 
        
               .min(1, DEFAULT_FORM_ERRORS.required) 
        
               .refine( 
        
                 (value) => NUMBERS_REGEXP.test(value), 
        
                 DEFAULT_FORM_ERRORS.onlyNumbers, 
        
               ), 
        
             mintPeriods: z.array(ZodCollectionMintPeriodFormValues).nonempty(), 
        
             royaltyAddress: z.string().trim().optional(), 
        
             royaltyPercentage: z 
        
               .string() 
        
               .trim() 
        
               .refine( 
        
                 (value) => !value || NUMBERS_REGEXP.test(value), 
        
                 DEFAULT_FORM_ERRORS.onlyNumbers, 
        
               ) 
        
               .optional(), 
        
             assetsMetadatas: ZodCollectionAssetsMetadatasFormValues.optional(), 
        
             baseTokenUri: z 
        
               .string() 
        
               .trim() 
        
               .refine( 
        
                 (value) => !value || isIpfsPathValid(value), 
        
                 DEFAULT_FORM_ERRORS.onlyIpfsUri, 
        
               ) 
        
               .optional(), 
        
             coverImageUri: z 
        
               .string() 
        
               .trim() 
        
               .refine( 
        
                 (value) => !value || isIpfsPathValid(value), 
        
                 DEFAULT_FORM_ERRORS.onlyIpfsUri, 
        
               ) 
        
               .optional(), 
        
           });

The data will be send onchain using the nft-launchpad contract's submit_collection:

teritori-dapp/rust/cw-contracts/nft-launchpad/src/contract.rs

Line 83 in 3c3a39e

pub fn submit_collection(

About Assets & Metadata

Use these files to test the step 6: test-files-step-6.zip
You will get these 2 warnings. It's expected, I wrongly filled the files to have these warnings as a demo.
So, you will get 3 images instead of 4 at the end.
You can fix the CSV files if you want, add assets, break the files, etc

The warnings are don't block the flow, it just ignores the wrong assets. But I added errors that block the flow and ask the user to provide correct mapping files:

All these behaviors are handled here: https://github.com/TERITORI/teritori-dapp/blob/6ca68e031a528902d29ea9d559b466175de57902/packages/screens/Launchpad/LaunchpadApply/LaunchpadCreate/components/steps/LaunchpadAssetsAndMetadata/AssetsTab.tsx
I tried to well comment the code

What after this PR?

I want to separate the front in parts

Apply - Create Collection (This PR)
Apply - My Collections + Complete Collection
Admin - Overview
Admin - Collection Review

Possible enhancement that can be done in another PRs

Add a label prop to Checkbox.
Related to chore(jsx-component): Enhance Checkbox #1481
Make MultipleSelectInput reusable (Extract it from launchpad scope).
Related to chore(jsx-component): Make a MultipleSelectInput #1482
Make a NumberInput. For now, we type numbers as string in forms and use a text input..
Related to chore(jsx-component): Make a Number input #1483
Make CurrencyInput (Extract it from launchpad scope).
Related to chore(jsx-component): Make a CurrencyInput #1484
Make Organizations/comonents/RightSection reusable (Create a reusable form wizard)
And use it in these forms: Launchpad Create, DAO Creation, Multisig Creation, ... Everytime we have a form with steps
Related to chore(jsx-component): Make a form wizard #1475

We have to write a documentation

Especialy to guide the user on this step:

We must also provide two CSV templates: Attributes mapping file and an Assets mapping file

netlify · 2025-01-05T20:30:12Z

✅ Deploy Preview for teritori-dapp ready!

Name	Link
🔨 Latest commit	`6ca68e0`
🔍 Latest deploy log	https://app.netlify.com/sites/teritori-dapp/deploys/677d83c2243a0c00083a6e36
😎 Deploy Preview	https://deploy-preview-1477--teritori-dapp.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify · 2025-01-05T20:30:12Z

✅ Deploy Preview for gno-dapp ready!

Name	Link
🔨 Latest commit	`6ca68e0`
🔍 Latest deploy log	https://app.netlify.com/sites/gno-dapp/deploys/677d83c21227d60008e77133
😎 Deploy Preview	https://deploy-preview-1477--gno-dapp.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

MikaelVallenet

LGTM

MikaelVallenet · 2025-01-07T21:16:33Z

packages/screens/Launchpad/LaunchpadApply/LaunchpadCreate/components/LaunchpadStepper.tsx

+  const hasErrors = (stepKey: number) => {
+    if (
+      (stepKey === 1 &&
+        (!!collectionForm.getFieldState("name").error ||
+          !!collectionForm.getFieldState("description").error ||
+          !!collectionForm.getFieldState("symbol").error)) ||
+      !!collectionForm.getFieldState("coverImage").error ||
+      !!collectionForm.getFieldState("assetsMetadatas.nftApiKey").error
+    ) {
+      return true;
+    }
+    if (
+      stepKey === 2 &&
+      (!!collectionForm.getFieldState("websiteLink").error ||
+        !!collectionForm.getFieldState("isDerivativeProject").error ||
+        !!collectionForm.getFieldState("projectTypes").error ||
+        !!collectionForm.getFieldState("isPreviouslyApplied").error ||
+        !!collectionForm.getFieldState("email").error)
+    ) {
+      return true;
+    }
+    if (
+      stepKey === 3 &&
+      (!!collectionForm.getFieldState("teamDescription").error ||
+        !!collectionForm.getFieldState("partnersDescription").error ||
+        !!collectionForm.getFieldState("investDescription").error ||
+        !!collectionForm.getFieldState("investLink").error)
+    ) {
+      return true;
+    }
+    if (
+      stepKey === 4 &&
+      (!!collectionForm.getFieldState("artworkDescription").error ||
+        !!collectionForm.getFieldState("isReadyForMint").error ||
+        !!collectionForm.getFieldState("isDox").error ||
+        !!collectionForm.getFieldState("daoWhitelistCount").error ||
+        !!collectionForm.getFieldState("escrowMintProceedsPeriod").error)
+    ) {
+      return true;
+    }
+    if (
+      stepKey === 5 &&
+      (!!collectionForm.getFieldState("mintPeriods").error ||
+        !!collectionForm.getFieldState("royaltyAddress").error ||
+        !!collectionForm.getFieldState("royaltyPercentage").error)
+    ) {
+      return true;
+    }
+    if (
+      stepKey === 6 &&
+      !!collectionForm.getFieldState("assetsMetadatas").error
+    ) {
+      return true;
+    }
+  };


Do react hook form not give some methods to handle this cleaner ?
Or should we do a map[step]list of field key to just loop through the fields corresponding to the steps
like for_, val := map[step] { if !! colectionForm.getFieldState(val).error} kinda

In the return of useForm hook you have an object named formState and inside of it you have errors. I don't know what infos you have exactly but can be a solution.

const { formState: { errors } } = useForm()

But agree with @MikaelVallenet that this if forest is not very clean, and if you can't handle this with errors the map can be a better solution too

MikaelVallenet · 2025-01-07T21:22:10Z

What is this about, i can choose between 1, 2 & 3

MikaelVallenet · 2025-01-07T21:26:44Z

Why would they give us some whitelist ? should we incentivize it or maybe turn this like "Teritori develop these tools with ❤️, if you appreciate it you could contribute by giving some WL spot to our DAO" this way it does not look like "we would love to have some WL to share to our DAO members" but more like you can reward use for the dev. of these tools by giving some. wdyt

MikaelVallenet · 2025-01-07T21:27:36Z

Would be nice to display the timezone to avoid misunderstandings

clegirar

In general could you please use fontRegular instead of fontMedium or fontSemiBold ? I can do it if you want 👍

About using useFormContext i think my mind can change because when you call it, you specify the type of the form so i'm not confusing when you call it, and found it better to read, it's not a lot of additional abstraction.

clegirar · 2025-01-08T10:25:16Z

packages/components/NetworkSelector/NetworkSelectorWithLabel.tsx

This component is used once and it's almost the same than MultipleSelectInput maybe you can use MultipleSelectInput instead of create an other one ?

clegirar · 2025-01-08T10:33:28Z

packages/screens/Launchpad/LaunchpadApply/LaunchpadCreate/components/LaunchpadStepper.tsx

+  const hasErrors = (stepKey: number) => {
+    if (
+      (stepKey === 1 &&
+        (!!collectionForm.getFieldState("name").error ||
+          !!collectionForm.getFieldState("description").error ||
+          !!collectionForm.getFieldState("symbol").error)) ||
+      !!collectionForm.getFieldState("coverImage").error ||
+      !!collectionForm.getFieldState("assetsMetadatas.nftApiKey").error
+    ) {
+      return true;
+    }
+    if (
+      stepKey === 2 &&
+      (!!collectionForm.getFieldState("websiteLink").error ||
+        !!collectionForm.getFieldState("isDerivativeProject").error ||
+        !!collectionForm.getFieldState("projectTypes").error ||
+        !!collectionForm.getFieldState("isPreviouslyApplied").error ||
+        !!collectionForm.getFieldState("email").error)
+    ) {
+      return true;
+    }
+    if (
+      stepKey === 3 &&
+      (!!collectionForm.getFieldState("teamDescription").error ||
+        !!collectionForm.getFieldState("partnersDescription").error ||
+        !!collectionForm.getFieldState("investDescription").error ||
+        !!collectionForm.getFieldState("investLink").error)
+    ) {
+      return true;
+    }
+    if (
+      stepKey === 4 &&
+      (!!collectionForm.getFieldState("artworkDescription").error ||
+        !!collectionForm.getFieldState("isReadyForMint").error ||
+        !!collectionForm.getFieldState("isDox").error ||
+        !!collectionForm.getFieldState("daoWhitelistCount").error ||
+        !!collectionForm.getFieldState("escrowMintProceedsPeriod").error)
+    ) {
+      return true;
+    }
+    if (
+      stepKey === 5 &&
+      (!!collectionForm.getFieldState("mintPeriods").error ||
+        !!collectionForm.getFieldState("royaltyAddress").error ||
+        !!collectionForm.getFieldState("royaltyPercentage").error)
+    ) {
+      return true;
+    }
+    if (
+      stepKey === 6 &&
+      !!collectionForm.getFieldState("assetsMetadatas").error
+    ) {
+      return true;
+    }
+  };


In the return of useForm hook you have an object named formState and inside of it you have errors. I don't know what infos you have exactly but can be a solution.

const { formState: { errors } } = useForm()

But agree with @MikaelVallenet that this if forest is not very clean, and if you can't handle this with errors the map can be a better solution too

clegirar · 2025-01-08T10:38:40Z

packages/screens/Launchpad/LaunchpadApply/LaunchpadCreate/components/LaunchpadStepper.tsx

+  const { width: windowWidth } = useWindowDimensions();
+  const scrollViewRef = useRef<ScrollView>(null);
+  const isMobile = useIsMobile();
+  const collectionForm = useFormContext<CollectionFormValues>();


In my refacto on react-hook-form, with norman we said to each other that don't use useFormContext to handle our form. I don't have final opinion actually on how to use it, but i just want to be consistent when we use it

clegirar · 2025-01-08T10:45:20Z

...pad/LaunchpadApply/LaunchpadCreate/components/steps/LaunchpadAssetsAndMetadata/AssetsTab.tsx

Found this file too big.. Can't extract functions ?

clegirar · 2025-01-08T10:45:53Z

...y/LaunchpadCreate/components/steps/LaunchpadAssetsAndMetadata/LaunchpadAssetsAndMetadata.tsx

+          style={[
+            fontMedium14,
+            {
+              color: neutral77,
+            },
+          ]}


Can fit in one line

clegirar · 2025-01-08T10:46:02Z

...y/LaunchpadCreate/components/steps/LaunchpadAssetsAndMetadata/LaunchpadAssetsAndMetadata.tsx

+              fontMedium14,
+              {
+                color: primaryColor,
+              },
+            ]}


clegirar · 2025-01-08T10:49:18Z

...ges/screens/Launchpad/LaunchpadApply/components/inputs/selectInputs/SelectInputLaunchpad.tsx

Same here you can't use MultipleSelectInput ?

clegirar · 2025-01-08T10:54:09Z

Select file button is not centered, found that weird

WaDadidou mentioned this pull request Jan 7, 2025

chore(jsx-component): Make a MultipleSelectInput #1482

Open

WaDadidou self-assigned this Jan 7, 2025

WaDadidou force-pushed the feat-launchpad-submit-collection-front branch from ce9dd57 to 2bf16bf Compare January 7, 2025 18:56

WaDadidou requested review from hthieu1110, n0izn0iz, omarsy, Villaquiranm, clegirar, zxxma and MikaelVallenet January 7, 2025 18:56

feat(launchpad): Add Collection Creation form front

6ca68e0

WaDadidou force-pushed the feat-launchpad-submit-collection-front branch from 2bf16bf to 6ca68e0 Compare January 7, 2025 19:42

MikaelVallenet reviewed Jan 7, 2025

View reviewed changes

clegirar requested changes Jan 8, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(launchpad): Add Collection Creation form front #1477

feat(launchpad): Add Collection Creation form front #1477

WaDadidou commented Jan 5, 2025 •

edited

Loading

netlify bot commented Jan 5, 2025 •

edited

Loading

netlify bot commented Jan 5, 2025 •

edited

Loading

MikaelVallenet left a comment

MikaelVallenet Jan 7, 2025

clegirar Jan 8, 2025

MikaelVallenet commented Jan 7, 2025

MikaelVallenet commented Jan 7, 2025

MikaelVallenet commented Jan 7, 2025

clegirar left a comment

clegirar Jan 8, 2025

clegirar Jan 8, 2025

clegirar Jan 8, 2025

clegirar Jan 8, 2025

clegirar Jan 8, 2025

clegirar Jan 8, 2025

clegirar Jan 8, 2025

clegirar commented Jan 8, 2025

	<OmniLink
	noHoverEffect
	to={{ screen: "LaunchpadCreate" }}
	style={{
	flex: 1,
	marginHorizontal: width >= MD_BREAKPOINT ? layout.spacing_x1_5 : 0,
	marginVertical: width >= MD_BREAKPOINT ? 0 : layout.spacing_x1_5,
	}}
	>
	<LargeBoxButton {...BUTTONS[1]} />
	</OmniLink>

	await nftLaunchpadContractClient.submitCollection({
	collection,
	});

	export const ZodCollectionFormValues = z.object({
	name: z.string().trim().min(1, DEFAULT_FORM_ERRORS.required),
	description: z.string().trim().min(1, DEFAULT_FORM_ERRORS.required),
	symbol: z
	.string()
	.trim()
	.toUpperCase()
	.min(1, DEFAULT_FORM_ERRORS.required)
	.refine(
	(value) => LETTERS_REGEXP.test(value),
	DEFAULT_FORM_ERRORS.onlyLetters,
	),
	websiteLink: z
	.string()
	.trim()
	.min(1, DEFAULT_FORM_ERRORS.required)
	.refine((value) => URL_REGEX.test(value), DEFAULT_FORM_ERRORS.onlyUrl),
	email: z
	.string()
	.trim()
	.min(1, DEFAULT_FORM_ERRORS.required)
	.refine((value) => EMAIL_REGEXP.test(value), DEFAULT_FORM_ERRORS.onlyEmail),
	projectTypes: z.array(z.string().trim()).min(1, DEFAULT_FORM_ERRORS.required),
	revealTime: z.number().optional(),
	teamDescription: z.string().trim().min(1, DEFAULT_FORM_ERRORS.required),
	partnersDescription: z.string().trim().min(1, DEFAULT_FORM_ERRORS.required),
	investDescription: z.string().trim().min(1, DEFAULT_FORM_ERRORS.required),
	investLink: z.string().trim().min(1, DEFAULT_FORM_ERRORS.required),
	artworkDescription: z.string().trim().min(1, DEFAULT_FORM_ERRORS.required),
	coverImage: ZodLocalFileData,
	isPreviouslyApplied: z.boolean(),
	isDerivativeProject: z.boolean(),
	isReadyForMint: z.boolean(),
	isDox: z.boolean(),
	escrowMintProceedsPeriod: z
	.string()
	.trim()
	.min(1, DEFAULT_FORM_ERRORS.required),
	daoWhitelistCount: z
	.string()
	.trim()
	.min(1, DEFAULT_FORM_ERRORS.required)
	.refine(
	(value) => NUMBERS_REGEXP.test(value),
	DEFAULT_FORM_ERRORS.onlyNumbers,
	),
	mintPeriods: z.array(ZodCollectionMintPeriodFormValues).nonempty(),
	royaltyAddress: z.string().trim().optional(),
	royaltyPercentage: z
	.string()
	.trim()
	.refine(
	(value) => !value \|\| NUMBERS_REGEXP.test(value),
	DEFAULT_FORM_ERRORS.onlyNumbers,
	)
	.optional(),
	assetsMetadatas: ZodCollectionAssetsMetadatasFormValues.optional(),
	baseTokenUri: z
	.string()
	.trim()
	.refine(
	(value) => !value \|\| isIpfsPathValid(value),
	DEFAULT_FORM_ERRORS.onlyIpfsUri,
	)
	.optional(),
	coverImageUri: z
	.string()
	.trim()
	.refine(
	(value) => !value \|\| isIpfsPathValid(value),
	DEFAULT_FORM_ERRORS.onlyIpfsUri,
	)
	.optional(),
	});

feat(launchpad): Add Collection Creation form front #1477

Are you sure you want to change the base?

feat(launchpad): Add Collection Creation form front #1477

Conversation

WaDadidou commented Jan 5, 2025 • edited Loading

What's in this PR?

The flow ends here: teritori-dapp/packages/hooks/launchpad/useCreateCollection.ts Lines 182 to 184 in 3344964 await nftLaunchpadContractClient.submitCollection({ collection, });

I made this Zod object to pilot the Collection Creation form

About Assets & Metadata

What after this PR?

I want to separate the front in parts

Possible enhancement that can be done in another PRs

We have to write a documentation

netlify bot commented Jan 5, 2025 • edited Loading

✅ Deploy Preview for teritori-dapp ready!

netlify bot commented Jan 5, 2025 • edited Loading

✅ Deploy Preview for gno-dapp ready!

MikaelVallenet left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MikaelVallenet commented Jan 7, 2025

MikaelVallenet commented Jan 7, 2025

MikaelVallenet commented Jan 7, 2025

clegirar left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

clegirar commented Jan 8, 2025

WaDadidou commented Jan 5, 2025 •

edited

Loading

The flow ends here:

teritori-dapp/packages/hooks/launchpad/useCreateCollection.ts

Lines 182 to 184 in 3344964

await nftLaunchpadContractClient.submitCollection({

collection,

});

netlify bot commented Jan 5, 2025 •

edited

Loading

netlify bot commented Jan 5, 2025 •

edited

Loading