Minting a TalentLayer ID is the first step that your users will need to do when registering for an account on your platform.
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.
// 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.
