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 the service creation
  • ② Handle Submit and Post the service
  • ③ Get the Proposal by User 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 the service creation?

In the Post Job section, users can create a service. We will use and detail the function createService

PreviousHow to implement minting TalentLayer IDs?NextHow to implement the proposal creation?

Last updated 2 years ago

Was this helpful?

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 the service creation

The user will create a service ()

// The interface for the inupt field of your form
interface IFormValues {
  title: string;
  about: string;
  keywords: string;
  rateToken: string;
  rateAmount: number;
}

// As we using Formik we use the validationSchema to check all the input value
const validationSchema = Yup.object({
    title: Yup.string().required('Please provide a title for your service'),
    about: Yup.string().required('Please provide a description of your service'),
    keywords: Yup.string().required('Please provide keywords for your service'),
    rateToken: Yup.string().required('Please select a payment token'),
    rateAmount: Yup.number()
      .required('Please provide an amount for your service')
      .when('rateToken', {
        is: (rateToken: string) => rateToken !== '',
        then: schema =>
          schema.moreThan(
            selectedToken
              ? FixedNumber.from(
                  ethers.utils.formatUnits(
                    selectedToken?.minimumTransactionAmount as BigNumberish,
                    selectedToken?.decimals,
                  ),
                ).toUnsafeFloat()
              : 0,
            `Amount must be greater than ${
              selectedToken
                ? FixedNumber.from(
                    ethers.utils.formatUnits(
                      selectedToken?.minimumTransactionAmount as BigNumberish,
                      selectedToken?.decimals,
                    ),
                  ).toUnsafeFloat()
                : 0
            }`,
          ),
      }),
  });

Let's create our form

return (
  <Formik initialValues={initialValues} onSubmit={onSubmit} validationSchema={validationSchema}>
    {({ isSubmitting, setFieldValue }) => (
      <Form>
        <div className='grid grid-cols-1 gap-6 border border-gray-200 rounded-md p-8'>
          <label className='block'>
            <span className='text-gray-700'>Title</span>
            <Field
              type='text'
              id='title'
              name='title'
              className='mt-1 mb-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50'
              placeholder=''
            />
            <span className='text-red-500'>
              <ErrorMessage name='title' />
            </span>
          </label>

          <label className='block'>
            <span className='text-gray-700'>About</span>
            <Field
              as='textarea'
              id='about'
              name='about'
              className='mt-1 mb-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50'
              placeholder=''
            />
            <span className='text-red-500'>
              <ErrorMessage name='about' />
            </span>
          </label>
          ....................
          ....................
          
        /*
         Formik will catch the submit button and trigger the onSubmit function
        in the next section
        */ 
        <SubmitButton isSubmitting={isSubmitting} label='Post' />
  );

② Handle Submit and Post the service

On submit, we create a new transaction and call the createService for that we will need our contract instance and all the parameter including the CID (offchain data stored on IPFS)

const onSubmit = async (
    values: IFormValues,
    {
      setSubmitting,
      resetForm,
    }: { setSubmitting: (isSubmitting: boolean) => void; resetForm: () => void },
  ) => {
  
  /*.............................
   we proceed to different check and date formatting 
  .............................*/
  
  /*
   as we using the defender API to manage signature we need to get it
   as it's a parameter of the service creation function 
   */

  // Get platform signature
  const signature = await getServiceSignature({ profileId: Number(user?.id), cid });

  
  // We need to create the CID to post some data off-chain
   const cid = await postToIPFS(
        JSON.stringify({
          title: values.title,
          about: values.about,
          keywords: values.keywords,
          role: 'buyer',
          rateToken: values.rateToken,
          rateAmount: parsedRateAmountString,
      }),
    );
    
  // We need the contract instance to call the function
  const contract = new ethers.Contract(
    config.contracts.serviceRegistry,
    ServiceRegistry.abi,
    signer,
  );
  
  
  // we call the createService function
  const tx = await contract.createService(
      user?.id,
      process.env.NEXT_PUBLIC_PLATFORM_ID,
      cid,
      signature,
    );

/*............................. */
    

③ Get the Proposal by User With Subgraph API

Here is an example of a Graph Query you can use to get the service by id

export const getServiceById = (id: string): Promise<any> => {
  const query = `
    {
      service(id: "${id}") {
        ${serviceQueryFields}
        description {
          ${serviceDescriptionQueryFields}
        }
      }
    }
    `;
  return processRequest(query);
};

See the Full Code Implemented on Our Demo DAPP

  • processRequest utils function:

Form and submit:

Services query:

Contract:

GraphQL :

IPFS :

⚙️
ServiceForm component
https://github.com/TalentLayer-Labs/indie-frontend/blob/main/src/components/Form/ProposalForm.tsx
https://github.com/TalentLayer-Labs/indie-frontend/blob/main/src/queries/services.ts
https://github.com/TalentLayer/talentlayer-contracts/blob/main/contracts/TalentLayerService.sol
https://github.com/TalentLayer-Labs/indie-frontend/blob/00e882431f3ad820374841070b7f7fe1a8053c44/src/utils/graphql.ts
https://github.com/TalentLayer-Labs/indie-frontend/blob/main/src/utils/ipfs.ts