How to implement minting TalentLayer IDs?
Minting a TalentLayer ID is the first step that your users will need to do when registering for an account on your platform.
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.
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.
export const getUserByHandle = (handle: string): Promise<any> => {
const query = `
{
users(where: {handle_contains_nocase: "${handle}"}, first: 1) {
id
}
}
`;
return processRequest(query);
};
On submit, we create a new transaction and call the mint function of the TalentLayerId contract.
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);
}
};
After the transaction succeeds, the new user will be viewable via our subgraph api.
export const getUserByAddress = (address: string): Promise<any> => {
const query = `
{
users(where: {address: "${address.toLocaleLowerCase()}"}, first: 1) {
id
address
handle
}
}
`;
return processRequest(query);
};
Last modified 3mo ago