Learn how you can tip $MON to another wallet using the Monad Blockchain and blinks
NextJS
framework and TypeScript
. You will learn the basic project setup and how a blink is structured. At the end, you have a blink that send a tip to a wallet and can be implemented by a blink client.
This guide will not show you how to implement a blink client. If you are looking for a guide, that explains how to integrate an existing blink, checkout our blink integration guide.
NextJS
project and add some basic configuration.
actions.json
file which will be hosted in the root directory of our application. This file is needed to tell other applications which blink providers are available on your website. Think of it as a sitemap for blinks.
You can read more about the actions.json in the official dialect documentation.
public
folder in your NextJS
project and copy/paste an image there.
In our example we will paste a file called tip-mon.png
into this public folder.
environment
variables.
.env.example
or a .env
-file. If you find a .env.example
-file, make sure to rename it to .env
..env
variables, in this case the NEXT_PUBLIC_RPC_URL
.
CORS
for cross-origin requests and standard headers for the API endpoints. This is standard configuration you do for every blink.
GET
returns the Blink metadata and UI configuration.
It describes:
GET
previews for EVM
. To test your POST
endpoint, please follow the tutorial to the end, where we implement the blink client in the frontend.localhost:3000
the url should be like this: http://localhost:3000/api/actions/tip-mon
POST
handles the actual MON transfer transaction.
destinationWallet
on top of the file.
amount
param.
POST
request.
ActionPostResponse
and return it to the client.