# How to implement minting TalentLayer IDs?

## Good to Know

In this example, we will use reactJS, Ether.js and formik to handle the form on the frontend. You will find a full code example with all imports at the end of tutorial. 

## ① Create a Form for Choosing a TalentLayer ID Handle

*The user will create his handle.*

```javascript
// Imports can be find in the full example at the end of the tutorial

interface IFormValues {
  handle: string;
}

const initialValues: IFormValues = {
  handle: '',
};

function TalentLayerIdForm() {
  const validationSchema = Yup.object().shape({
    handle: Yup.string()
      .min(2)
      .max(10)
      .when('isConnected', {
        is: account && account.isConnected,
        then: schema => schema.required('handle is required'),
      }),
  });

  
  const onSubmit = async (
    submittedValues: IFormValues,
    { setSubmitting }: { setSubmitting: (isSubmitting: boolean) => void },
  ) => {
    // We will handle submit here on the next step
  };

  return (
    <Formik initialValues={initialValues} onSubmit={onSubmit} validationSchema={validationSchema}>
      {({ isSubmitting }) => (
        <Form>
            <Field
                type='text'
                placeholder='Choose your handle'
                id='handle'
                name='handle'
                required
            />
            <button type='submit'>Submit</button>
        </Form>
      )}
    </Formik>
  );
}

export default TalentLayerIdForm;
```

**Bonus:** You can check if an handle is already taken and include it in the form validation by using a subgraph query.

```javascript
export const getUserByHandle = (handle: string): Promise<any> => {
  const query = `
  {
    users(where: {handle_contains_nocase: "${handle}"}, first: 1) {
      id
    }
  }
  `;
  return processRequest(query);
};
```

## ②  Handle Submit and Post to the Blockchain

*On submit, we create a new transaction and call the mint function of the TalentLayerId contract.*

```javascript
const onSubmit = async (
    submittedValues: IFormValues,
    { setSubmitting }: { setSubmitting: (isSubmitting: boolean) => void },
  ) => {
    try {
        const contract = new ethers.Contract(
            config.contracts.talentLayerId,
            TalentLayerID.abi,
            signer,
        );

        const tx = await contract.mint('1', submittedValues.handle);
        setSubmitting(false);
    } catch (error) {
        console.error(error);
    }
  };
```

## ③  Get Your New User Information With Subgraph API

*After the transaction succeeds, the new user will be viewable via our subgraph api.*

```javascript
export const getUserByAddress = (address: string): Promise<any> => {
  const query = `
    {
      users(where: {address: "${address.toLocaleLowerCase()}"}, first: 1) {
        id
        address
        handle
      }
    }
    `;
  return processRequest(query);
};
```

## See the Full Code Implemented on Our Demo DAPP

* Form and submit: <https://github.com/TalentLayer-Labs/indie-frontend/blob/main/src/components/Form/TalentLayerIdForm.tsx>
* processRequest utils function: <https://github.com/TalentLayer-Labs/indie-frontend/blob/00e882431f3ad820374841070b7f7fe1a8053c44/src/utils/graphql.ts>