Create burn profile typed data

📘

full code repo https://github.com/lens-protocol/lens-api-examples

This API call allows you to get the typed data to then call the withSig method to burn your lens profile.

🚧

This request is protected by authentication

hint: this means it requires an x-access-token header put in the request with your authentication token.

Typed data is a way to try to show the users what they are signing in a more readable format. You can read more about it here.

Constructing that type of data is normally difficult. On the type data, you also need to get the nonce, deadline, contract version, contract address, chain id, and the name of the contract for the signature to be able to be signed and verified.

When using this API, the server checks every detail before it generates the typed data. For example: if you try to create typed data on an always-failing transaction, the server will throw an error in a human-readable form. This is great for debugging but also saves issues with users sending always failing transactions or a mismatch of a bad request.

We will show you the typed data approach using ethers and the API side by side. Keep in mind that with the typed data approach you use the withSig methods which can be called by you with your signature or with that signature any relay could call it for you on your behalf allowing gasless transactions.

API Design

mutation CreateBurnProfileTypedData {
  createBurnProfileTypedData(request: { profileId: "0x01"}) {
    id
    expiresAt
    typedData {
        domain {
          name
          chainId
          version
          verifyingContract
        }
        types {
          BurnWithSig {
            name
            type
          }
        }
        value {
          nonce
            deadline
            tokenId
        }
      }
  }
}
{
  "data": {
    "createBurnProfileTypedData": {
      "id": "ced2635e-2d5f-43b6-bb90-a45289be763d",
      "expiresAt": "2022-04-21T14:05:16.000Z",
      "typedData": {
        "domain": {
          "name": "Lens Protocol Profiles",
          "chainId": 80001,
          "version": "1",
          "verifyingContract": "0x4BF0c7AD32Fd2d32089790a54485e23f5C7736C0"
        },
        "types": {
          "BurnWithSig": [
            {
              "name": "tokenId",
              "type": "uint256"
            },
            {
              "name": "nonce",
              "type": "uint256"
            },
            {
              "name": "deadline",
              "type": "uint256"
            }
          ]
        },
        "value": {
          "nonce": 26,
          "deadline": 1650549916,
          "tokenId": "0x01"
        }
      }
    }
  }
}
type Mutation {
  createBurnProfileTypedData(
    options: TypedDataOptions
    request: BurnProfileRequest!
  ): CreateBurnProfileBroadcastItemResult!
}

Full code example

import { apolloClient } from './apollo-client';
import { gql } from '@apollo/client'

const CREATE_BURN_PROFILE_TYPED_DATA = `
  mutation($request: BurnProfileRequest!) { 
    createBurnProfileTypedData(request: $request) {
      id
      expiresAt
      typedData {
        domain {
          name
          chainId
          version
          verifyingContract
        }
        types {
          BurnWithSig {
            name
            type
          }
        }
        value {
          nonce
            deadline
            tokenId
        }
      }
    }
 }
`

export const createBurnProfileTypedData = (request) => {
   return apolloClient.mutate({
    mutation: gql(CREATE_BURN_PROFILE_TYPED_DATA),
    variables: {
      request
    },
  })
}
import { ApolloClient, InMemoryCache, HttpLink, ApolloLink } from '@apollo/client'

const httpLink = new HttpLink({ uri: 'https://api-mumbai.lens.dev/' });

// example how you can pass in the x-access-token into requests using `ApolloLink`
const authLink = new ApolloLink((operation, forward) => {
  // Retrieve the authorization token from local storage.
  const token = localStorage.getItem('auth_token');

  // Use the setContext method to set the HTTP headers.
  operation.setContext({
    headers: {
      'x-access-token': token ? `Bearer ${token}` : ''
    }
  });

  // Call the next link in the middleware chain.
  return forward(operation);
});

export const apolloClient = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache(),
})

Hooking typed data in with ethers

import { signedTypeData, getAddressFromSigner, splitSignature, getSigner } from './ethers.service';
import { createBurnProfileTypedData } from './create-burn-profile-typed-data';
import { lensHub } from './lens-hub';

export const setProfileImageUriNormal = async () => {
  // hard coded to make the code example clear
  const burnProfileRequest = {
    profileId: "0x1d"
  };
  
  const result = await createBurnProfileTypedData(burnProfileRequest);
  const typedData = result.data.createBurnProfileTypedData.typedData;
  
  const signature = await signedTypeData(typedData.domain, typedData.types, typedData.value);
  const { v, r, s } = splitSignature(signature);
  
  const tx = await lensHub.burnWithSig(
      typedData.value.tokenId,
      {
        v,
        r,
        s,
        deadline: typedData.value.deadline
      }
    );
  console.log(tx.hash);
  // 0x64464dc0de5aac614a82dfd946fc0e17105ff6ed177b7d677ddb88ec772c52d3
  // you can look at how to know when its been indexed here: 
  //   - https://docs.lens.dev/docs/has-transaction-been-indexed
}
import { apolloClient } from './apollo-client';
import { gql } from '@apollo/client'

const CREATE_BURN_PROFILE_TYPED_DATA = `
  mutation($request: BurnProfileRequest!) { 
    createBurnProfileTypedData(request: $request) {
      id
      expiresAt
      typedData {
        domain {
          name
          chainId
          version
          verifyingContract
        }
        types {
          BurnWithSig {
            name
            type
          }
        }
        value {
          nonce
            deadline
            tokenId
        }
      }
    }
 }
`

export const createBurnProfileTypedData = (request) => {
   return apolloClient.mutate({
    mutation: gql(CREATE_BURN_PROFILE_TYPED_DATA),
    variables: {
      request
    },
  })
}
// this is showing you how you use it with react for example
// if your using node or something else you can import using
// @apollo/client/core!
import { ApolloClient, InMemoryCache, HttpLink, ApolloLink } from '@apollo/client'

const httpLink = new HttpLink({ uri: 'https://api-mumbai.lens.dev/' });

// example how you can pass in the x-access-token into requests using `ApolloLink`
const authLink = new ApolloLink((operation, forward) => {
  // Retrieve the authorization token from local storage.
  // if your using node etc you have to handle your auth different
  const token = localStorage.getItem('auth_token');

  // Use the setContext method to set the HTTP headers.
  operation.setContext({
    headers: {
      'x-access-token': token ? `Bearer ${token}` : ''
    }
  });

  // Call the next link in the middleware chain.
  return forward(operation);
});

export const apolloClient = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache(),
})
import { ethers, utils } from 'ethers';
import omitDeep from 'omit-deep';

// This code will assume you are using MetaMask.
// It will also assume that you have already done all the connecting to metamask
// this is purely here to show you how the public API hooks together
export const ethersProvider = new ethers.providers.Web3Provider(window.ethereum);

export const getSigner = () => {
    return ethersProvider.getSigner();
}

export const getAddressFromSigner = () => {
  return getSigner().address;
}

export const init = async() => {
    const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
  return accounts[0];
}

export const signedTypeData = (domain, types, value) => {
  const signer = getSigner();
  // remove the __typedname from the signature!
  return signer._signTypedData(
    omitDeep(domain, '__typename'),
    omitDeep(types, '__typename'),
    omitDeep(value, '__typename')
  );
}

export const splitSignature = (signature) => {
    return utils.splitSignature(signature)
}

export const sendTx = (transaction) => {
  const signer = ethersProvider.getSigner();
  return signer.sendTransaction(transaction);
}

export const signText = (text) => {
  return ethersProvider.signMessage(text);
}
import { getSigner } from './ethers.service';

// lens contract info can all be found on the deployed
// contract address on polygon.
// not defining here as it will bloat the code example
export const lensHub = new ethers.Contract(
  LENS_HUB_CONTRACT_ADDRESS,
  LENS_HUB_ABI,
  getSigner()
)

Did this page help you?