This is a simple, one-page app that integrates with Mysten Lab's Enoki. The live testnet demo can be foud here.
In order to use Enoki, you need to sign into the Enoki Dev Portal and set up your new project. Below are the steps required for this.
-
Navigate to the Enoki Dev Portal and sign in with the email you want to manage your project with.
Note, that during your first time signing in, you'll be asked to provide some info to help Mysten Labs keep informed about who is using Enoki.
The portal should look something like this when you successfully log on:
-
Click
+ Create your first App
and enter the name of your app. -
Click
+ Create new
underNew API Key
.You will be given a prompt that looks like this:
You'll need to select the following:
-
API key type:
- Public: Select this type if you plan on using this key in a client-side app
- Private: Select this type if you plan on using this key in a private backend server
-
Enabled networks: The Sui networks that this api key will work on
- Devnet
- Testnet
- Mainnet - Note this will only work for published apps
-
Enabled features: The features that this api key will support
- zkLogin
- Sponsored transactions
When creating a key for this demo app, select:
- Public
- Testnet
- zkLogin
- Sponsored transactions
-
-
Now you have your Enoki API key!
To use the key in this demo, make a copy of .env.template named
.env.local
and paste in the key intoENOKI_PUB_KEY
. It should look something like this:ENOKI_PUB_KEY=enoki_public_1646656193035707ff4ef3aecafb455e GOOGLE_CLIENT_ID=
To use the zkLogin feature, you will need to connect your auth provider to the Enoki Dev Portal.
-
Navigate to the
Auth Providers
section of your Enoki project.The Auth Providers section is where you can add and manage your app's auth providers. Currently, Enoki supports:
- Twitch
- Apple
-
Click
+ New Auth Provider
You will be given a prompt that looks like this:
You'll need to select/input the following:
-
Auth provider:
- Twitch
- Apple
-
Client ID: The client given by your desired auth provider
When creating a key for this demo app, select
Google
and paste your google client id. Follow the instructions to get your client id from Google. -
-
Now you have your Enoki Auth Provider!
To use the auth provider in this demo, make a copy of .env.template named
.env.local
and paste in the client id intoGOOGLE_CLIENT_ID
. It should look something like this:ENOKI_PUB_KEY=enoki_public_1646656193035707ff4ef3aecafb455e GOOGLE_CLIENT_ID=1234567890
You can also add more auth providers by repeating the steps above.
Your
.env.local
file should look something like this:ENOKI_PUB_KEY=enoki_public_1646656193035707ff4ef3aecafb455e GOOGLE_CLIENT_ID=1234567890
Note that you can add more auth providers by repeating the steps above.
-
You have successfully connected your auth provider to Enoki!
Reference this demo code as an example of implementing the Enoki auth flow in your app.
In the Enoki Dev Portal, you can set up Sponsored Transactions by adding addresses and move targets that are supported.
-
Navigate to the
Sponsored Transactions
section of your Enoki project.The Sponsored Transactions section is where you can add and manage the addresses and move targets that you want to be supported in sponsored transactions.
-
Add the addresses and move call targets you want to be supported.
Any allowed addresses are senders that can use sponsored transactions. Any allowed move call targets are functions operations that any of your users can use sponsored transactions for.
In this demo, the target,
0x5794fff859ee70e28ec8a419f2a73830fb66bcaaaf76a68e41fcaf5e057d7bcc::global_counter::increment
is supported. This means that any users signed into the demo app can call this target and the transaction will be sponsored (meaning the user won't have to pay the gas for this transaction). -
You have successfully set up your Enoki Sponsored Transaction allow list!
Reference this demo code as an example to implementing sponsored transactions in your app.
You will need to set up a Google Auth API key to use the Google Sign-In feature in this demo app.
-
Navigate to the Google Developers Console.
-
Click
+ Create Credentials
and selectOAuth client ID
. -
Select
Web application
as the application type. -
Add
http://localhost:3000/
to theAuthorized redirect URIs
. -
Click
Create
and copy the client id. -
You can now paste this client id into the
.env.local
file as described in the Setting up your Enoki Auth Provider section.
Before running the app, following the setup instructions above to set up your Enoki API keys, Auth Providers, and Sponsored Transactions.
- Clone the repository and navigate to the root directory.
- Install the dependencies by running
yarn install
. - Ensure the
.env.local
file is set up with your Enoki API key and Google Auth Provider client id. - Start the app by running
yarn dev
.