feat: add ipfs hash in mint form (#267)

* feat: add ipfs hash in mint form

* chore: remove harcoded verifier from mint form

ui/src/integrations/ethereum/hooks/ethereum-hooks.tsx

@@ -179,6 +179,7 @@ export namespace ArgumentsMaps {
       string, // string ENS
       string, // string commitHash
       string, // string gitRepository
+      string, // string ipfsHash
       string, // string logo
       number, // uint24 color
       boolean, // bool accessPointAutoApproval

ui/src/integrations/ethereum/lib/fleek-erc721.ts

@@ -39,6 +39,7 @@ export const FleekERC721 = {
       params.description.replaceAll(/\n/g, '\\n'), //replace break lines with \\n so it doesn't break the json,
       params.image,
       params.externalUrl,
+      params.ipfsHash,
       params.ens,
       params.commitHash,
       params.repo
@@ -155,6 +156,7 @@ export namespace FleekERC721 {
     description: string;
     owner: string;
     externalUrl: string;
+    ipfsHash: string;
     image: string;
     ens?: string;
     commitHash: string;

ui/src/providers/connectkit-provider.tsx

@@ -3,12 +3,12 @@ import {
   getDefaultClient,
 } from 'connectkit';
 import { createClient, WagmiConfig } from 'wagmi';
-import { goerli } from 'wagmi/chains';
+import { goerli, polygonMumbai } from 'wagmi/chains';
 
 import { env } from '@/constants';
 
 const alchemyId = env.alchemy.id;
-const chains = [goerli];
+const chains = [polygonMumbai];
 
 const wagmiClient = createClient(
   getDefaultClient({

ui/src/views/components-test/combobox-test.tsx

@@ -20,7 +20,7 @@ const ItemsDropdown: ItemDropdown[] = [
 
 export const ComboboxTest: React.FC = () => {
   const selected = useState<Item>();
-  const selectedDropdown = useState<ItemDropdown>(ItemsDropdown[0]);
+  const selectedDropdown = useState<ItemDropdown>();
 
   return (
     <Flex

ui/src/views/mint/nfa-step/form-step/fields/index.ts

@@ -2,3 +2,4 @@ export * from './logo-field';
 export * from './app-name-field';
 export * from './app-description-field';
 export * from './ens-domain-field';
+export * from './ipfs-hash-field';

ui/src/views/mint/nfa-step/form-step/fields/ipfs-hash-field.tsx

@@ -0,0 +1,17 @@
+import { Form } from '@/components';
+
+import { useMintFormContext } from '../mint-form.context';
+
+export const IPFSHashField: React.FC = () => {
+  const {
+    form: { ipfsHash },
+  } = useMintFormContext();
+
+  return (
+    <Form.Field context={ipfsHash}>
+      <Form.Label>IPFS Hash</Form.Label>
+      <Form.Input placeholder="Your IPFS hash" />
+      <Form.Overline />
+    </Form.Field>
+  );
+};

ui/src/views/mint/nfa-step/form-step/mint-form.context.ts

@@ -13,6 +13,7 @@ export type MintFormContext = {
     logoColor: FormField;
     ens: FormField;
     domainURL: FormField;
+    ipfsHash: FormField;
     verifier: FormField;
     isValid: ReactState<boolean>;
   };
@@ -51,6 +52,7 @@ export const useMintFormContextInit = (): MintFormContext => ({
       StringValidators.required,
       StringValidators.isUrl,
     ]),
+    ipfsHash: useFormField('ipfsHash', [StringValidators.required]),
     ens: useFormField('ens', [], ''),
     verifier: useFormField('verifier', [StringValidators.required]),
     isValid: useState(false),

ui/src/views/mint/nfa-step/form-step/mint-form.tsx

@@ -16,6 +16,7 @@ import {
   AppDescriptionField,
   AppNameField,
   EnsDomainField,
+  IPFSHashField,
   LogoField,
 } from './fields';
 import { useMintFormContext } from './mint-form.context';
@@ -38,12 +39,18 @@ export const MintFormStep: React.FC = () => {
       domainURL: {
         value: [domainURL],
       },
+      ipfsHash: {
+        value: [ipfsHash],
+      },
       gitCommit: {
         value: [gitCommit],
       },
       gitBranch: {
         value: [gitBranch],
       },
+      verifier: {
+        value: [verifier],
+      },
       logoColor: {
         value: [logoColor],
       },
@@ -69,10 +76,11 @@ export const MintFormStep: React.FC = () => {
       ens,
       gitCommit,
       `${repositoryName?.url}/tree/${gitBranch}`,
+      ipfsHash,
       appLogo,
       parseColorToNumber(logoColor),
       verifyNFA,
-      '0xdBb04e00D5ec8C9e3aeF811D315Ee7C147c5DBFD', //TODO remove hardcode
+      verifier,
       { value: billing },
     ]);
 
@@ -99,6 +107,7 @@ export const MintFormStep: React.FC = () => {
           <Flex css={{ gap: '$4', flexDirection: 'column' }}>
             <AppNameField />
             <AppDescriptionField />
+            <IPFSHashField />
             <EnsDomainField />
             <LogoField />
           </Flex>

ui/src/views/mint/nfa-step/verify-step/select-verifier.tsx

@@ -9,6 +9,7 @@ import { useMintFormContext } from '../form-step';
 
 // TODO: remove mocked items after graphql api is fixed
 const mockedItems = [
+  '0xd4997d0facc83231b9f26a8b2155b4869e99946f',
   '0xdBb04e00D5ec8C9e3aeF811D315Ee7C147c5DBFD',
   '0x7ED735b7095C05d78dF169F991f2b7f1A1F1A049',
 ];