Hello, Permits
In this tutorial we show you how to create Permits for authenticating a SNIP-20 contract.
Last updated
In this tutorial we show you how to create Permits for authenticating a SNIP-20 contract.
Last updated
When you finish this Hello Permit tutorial you will have a web app connected to pulsar-2
with the ability to query the sSCRT
balance using permits. Creating permits and connecting the app to Keplr
.
Checkout the full example in our repo here
In order to go through this tutorial you'll need to have a React app created. You can find how to do it here. Also, install your dependencies and install Griptape.
We highly recommend have done Hello, Griptape
before starting this tutorial for higher understanding of Griptape.
This tutorial consist of these steps.
Grip an application.
Creating contract definition.
Import necessary Griptape APIs and Contract Definition.
Bootstrap app.
Creating Permit .
Get Balance.
As you may know the first thing that we need to do is Grip our application, in this case our app is in src/main.js
. This is how our main.js
should look like.
Let's create a folder named contracts
inside contracts, let's create a file called sscrt.js
. You can copy and paste the next command.
src/contracts/sscrt.js
Now let's move and start working in src/contracts/sscrt.js
, we need to import some APIs from Griptape.
Brief explanation of Griptape APIs imported.
createContractClient : Help us create an object based on a definition passed in as a parameter.
snip20Def : Is a pre-defined contract definition following Secret Network reference.
extendContract : API created to create a single contract definition binding two definition, similarly to inheritance in POO.
Defining a custom contract definition, in this case we have a definition with queries where we defined that we want to query the balance for sSCRT using permits.
In a contract definition there are queries
and messages
. Both are objects with functions, all these functions are binding internally and always receive its first parameter what we called in Griptape as Context
. In case you don't need any data from context to do the following. getBalance( _ , anyParameter,secondaryParameter)
.
Finally we just need to create our contract and export it.
Brief explanation of createContractClient
API. This function receives a obj with three values.
id : Custom id you want to called the contract, is up to you but shouldn't be two or more contracts with same ids, this will cause conflicts.
at : Contract address to use.
definition : Contract definition to use, in this case we create one based on Secret Network reference and our custom definition created a step before.
This is what your src/contracts/sscrt.js
should look like.
Okay, now that we have Grip our app and created our contract definition, let's import some APIs in src/App.js
.
enablePermit
help us create a permit very easily and hasPermit
returns a boolean indicating if a contract already has permit or not. All others APIs have already been explain in Hello tutorials before.
We also import our contract sscrt
we just created in a section before.
Before bootstrapping our app, we are going to create some stores using useState hook from React and use one of our events APIs, onAccountAvailable
explained in tutorials before (more info in Hello, Events
).
As you see we used hasPermit
Griptape API, this API returns Boolean and receives a contract as parameter which we imported before.
Now, let's create a simple function to connect the app.
With Griptape creating a permit is very easy, enablePermit
is an API that receives two parameters, the first is a contract, in this case the one we imported before (sscrt
), and an array of permissions to approve, in this case we want to see the balance
.
Possible permissions for a SNIP-20
contract "balance"
, "history"
, "allowance"
.
Possible permissions for a SNIP-721
contract "owner"
We are going to create a simple util function to create a permit. like the following.
To get the balance as easy as create a simple function like this.
Finally just show the information:
src/App.js
Checkout the full example in our repo here