Building Solana Actions and Blinks

Don't blink and get some action!

TLDR;

• Blinks is a new experience that brings Web3 experience to your favorite non-Web3 applications - swap tokens, mint NFTs, participate in governance within your favorite social media apps like Twitter/X!

• To understand Blinks, you must first understand the BLINK lifecycle

• Blinks uses Solana Actions which are basically Web APIs the is responsible for the metadata of the Blink UI and building the transaction as a result of interacting with the UI

• Building Blinks requires full-stack web development skills and a some understanding of building Solana transactions

• There are lots of opportunities for Blink developers - an Instagrant coming from Superteam and Dialect and a cash prizes for the upcoming Colosseum Radar Hackathon

If you haven’t heard about Blinks it’s either you are living on a cave or you haven’t been onboarded to the Solana Ecosystem. Once of the things that we can say that is “Only Possible On Solana” (OPOS) is the new experience we call “BLINKS”.

Blockchain Links or BLINKS let you experience Web3 within your favorite Web2 application. It let’s you swap tokens, mint NFTs, participate in DAO governance, play a blockchain game, and many more blockchain-related actions within Twitter/X, Telegram, Discord and many other applications in the near future!

Building Blinks

Creating blinks involves a few steps

1. Understanding the Blink lifecycle

2. Creating your Solana Actions backend

3. Registering your Blink

Understanding the BLINK lifecycle

The image above describes the whole lifecycle of a BLINK. From a mere link/URL, to rendering the UI capable of asking user to execute blockchain transaction until it is sent to the Solana blockchain.

Let’s go through each major step

1. The BLINK. The lifecycle begins with the Blink itself. It’s basically a link to a traditional web page - say a link to an NFT you are currently selling. When a Blink is shared in a website that currently supports Blink (with the help of some browser extension), the extension will check the root for the presence of a file called `actions.json`. If it does, it will match the URL to any of the rules present and will perform a HTTP GET request to the corresponding `apiPath`.

   

2. The HTTP GET request will then return a metadata response that will describe the UI that will be rendered. It is handled by an API that you will need to write as well.

   

3. The browser extension (in our case Dialect, or Solana wallets that implements the Dialect Blinks SDK) is responsible for rendering the UI that will convert the normal link into a Blink.

   

4. The final step will be for the user to interact with the UI by clicking the buttons or entering parameters (if there’s any) which will require a wallet-signing to trigger the corresponding blockchain transactions. And voila! - Blockchain transaction executed without leaving your favorite social media platform!

Creating Your Solana Actions Backend

I’ve mentioned that there’s an API that is responsible for describing what kind of UI will be rendered to the user. At the very least, you can return a single button which means your Blink does one single thing.

Aside from that, you will also need to create another API endpoint (this time handling the HTTP POST request) that is responsible for creating the transaction object based on the action done by the user on the UI. For this, you will need some knowledge about creating Solana instructions and creating the transaction.

All the examples below are from Solana Developers solana-actions GitHub repo

Building the Solana Action GET request

The example above just shows that the GET request needs to return a JSON response with the fields required as described in the Solana Actions spec

Building the Solana Action POST request

This code is quite longer than the previous one, so let me explain it piece-by-piece.

One of the things that you probably want to get from the client-side is the public key used by the user who is trying to execute the transaction. It is automatically sent to the POST request inside the HTTP Body as JSON property named `account`.

While you can use existing Web2 skills in building Blinks, you still have to understand basics of Solana transactions if you are building the POST response since this is the part where you need to construct the transaction that will be sent back to the user in order for him/her to sign and send to the Solana blockchain.

In the code above, the transaction is basically calling the Memo Program. We also have to initialize the connection object, set the compute unit price and also set the fee payer which basically tells the transaction who will pay the transaction fees.

This last bit is just forming the shape of the response the Solana Action client will understand. The function `createPostResponse` is a helper utility from @solana/actions library that will help us serialize the transaction object so we can send it back to the client.

Registering Your Blink

Once you’re done with building your Solana Actions and Blinks, you need to register it in Dialect. This is a security measure since it will prevent malicious use of the Solana Actions and Blinks. If you’re Blink is not yet registered, it will not unfurl to a Blink UI event if the user has enabled it via the browser extension.

Opportunities and Grants

Solana Radar Hackathon

One of the tracks in the upcoming Colosseum Radar Hackathon is - BLINKS! Bring the next best experience via Blinks. Build a novel, exciting and unique implementation of Solana Actions and BLINKS!

Superteam x Dialect Blinks Instagrant

Superteam with Dialect also can give an instagrant upto 1000 USD if you can develop a Blink that tackles the ff areas - Social, Payments/DeFi, Governance and Games!

Check it out here

Developer Tips For Building BLINKS

• Learn Web Development - it will require knowledge of full-stack web development since you are basically building Web Apps. While most examples are written in React/NextJS and Express, you can technically use any programming language you use in Web development.

• The @solana/actions library is written in JS/TS - an opportunity for people to port this library to other programming language

• One challenge for those who are new to Solana is the building of transaction in the Solana Action POST request. I will advise you to build around existing programs such as System Programs and SPL programs first to get some experience first before moving to your own custom programs.

• Publish the Blink/Solana Actions first to at least devnet/testnet before applying for the Instagrant

• Follow Dialect’s social media to follow the developments on this new and exciting technology stack