TalentLayer Documentation
  • 👋Introduction
    • Value Proposition
    • Options for Integration
      • On-Demand Integration
      • Native Integration
    • TalentLayer's Functions
      • PlatformID
        • Fees & Economics
      • TalentLayerID
      • Reviews
      • Services
      • Escrow and Dispute
        • Dispute Workflow
        • Arbitration
          • Kleros Arbitration
          • Platform Managed Arbitration
    • Current Network Liquidity
    • Decentralization
  • ⚙️Technical Guides
    • Web 3 SDK & API
    • StarterKit Template
    • Technical Schemas
    • Network Support
    • Lower-Level Guides
      • Smart Contracts
        • Deployments
        • TalentLayerPlatformID.sol
        • TalentLayerID.sol
        • TalentLayerService.sol
        • TalentLayerReview.sol
        • Escrow & Dispute Contracts
      • The Graph
        • Introduction
        • Querying from an application
        • Queries examples
        • Implementing the pagination
      • Metadata
      • Third-Party Modules
        • Lens Protocol - Social
        • XMTP - Messaging
        • Sismo - Privacy
        • Iexec - Web3Mail
      • Messaging
        • Integrating XMTP
      • Standards
        • ERC-792: Arbitration standard
        • ERC-1497: Evidence Standard
      • How-To Guides
        • How to implement minting TalentLayer IDs?
        • How to implement the service creation?
        • How to implement the proposal creation?
        • How to implement the proposal validation?
    • Delegation
      • Meta Transaction
      • Delegate System
        • Setting
        • User workflow
        • Service creation example
        • How mintForAddress works
  • ⭐Get a Platform ID
  • 🧠Inspiration for Builders
  • 💬Contact The Team
  • 🦝Core Developer Guides
    • Subgraph Local Setup
    • Smart Contracts Local Setup
    • Advanced Documentation
    • Contract & Graph Deployment Guide
    • TalentLayer Improvement Proposals
    • Audit Report
Powered by GitBook
On this page
  • Good to Know
  • ① Create a Form for Choosing a TalentLayer ID Handle
  • ② Handle Submit and Post to the Blockchain
  • ③ Get Your New User Information With Subgraph API
  • See the Full Code Implemented on Our Demo DAPP

Was this helpful?

  1. Technical Guides
  2. Lower-Level Guides
  3. How-To Guides

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.

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.

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.

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.

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

PreviousHow-To GuidesNextHow to implement the service creation?

Last updated 1 year ago

Was this helpful?

Form and submit:

processRequest utils function:

⚙️
https://github.com/TalentLayer-Labs/indie-frontend/blob/main/src/components/Form/TalentLayerIdForm.tsx
https://github.com/TalentLayer-Labs/indie-frontend/blob/00e882431f3ad820374841070b7f7fe1a8053c44/src/utils/graphql.ts