solana-action-blinker

Quicknode Solana Action Blinker

Overview

This is a simple demo let's you create Solana Actions and will parse Solana action URLs to their respective actions.

The demo uses Next.js 14 project bootstrapped with create-next-app.

Background

Solana Actions provide a standardized way to deliver signable transactions or messages from an application directly to a user. Blinks are client apps that convert Solana Actions into shareable, metadata-rich UIs for interacting with and executing Actions. For more information, check out our Guide on Solana Actions.

Getting Started

Install Dependencies

Open the project dictory:

cd sample-dapps/solana-action-blinker

Then, install the dependencies:

npm install
# or
yarn
# or
pnpm install
# or
bun install

Set Environment Variables

Make sure you have a Quicknode endpoint handy--you can get one free here.

• Rename .env.example to .env.local and update with your Quicknode Solana Node Endpoint.
• Make sure to update the cluster to ensure your transaction URLs point to the correct explorer (use only of the enum values provided in the .env.example file).

QN_ENDPOINT=https://example.solana-mainnet.quiknode.pro/123456
NEXT_PUBLIC_CLUSTER=mainnet-beta # mainnet-beta | devnet | testnet | local

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

Using the Dapp

1. Enter a valid Solana Action URL in the input field. You may copy and paste one of the example links on the homepage.
2. Click "Parse Action" to see the parsed action details.
3. You will see the parsed details of the action URL. To see and execute available actions, connect a wallet.

4. Click any of the available actions to execute the action (you will need to sign the transaction when prompted by your wallet).
5. You may create additional actions by following the structure in solana-action-blinker/app/api/actions

Architecture

src/
├── app/
│   ├── page.tsx # Main page for Blink
│   └── layout.tsx # layout for the page
│   └── api/
│       └── solana/
│           └── sendAndConfirm/route.ts # Send and Confirm Transaction
│       └── actions/
│           └── memo/route.ts  # Creates a Memo Solana Action
│           └── donate/route.ts  # Creates a Donate Solana Action
└── components/
│   ├── ActionComponents/     # includes components for parsing and executing Solana Actions
│   ├── Blink.tsx        # Main component
│   ├── SolanaProviders.tsx     # Wallet Adapter Context providers
│   └── [supporting components]
└── hooks/
│   ├── useActionFetch.ts  # Fetches and parses Solana Actions from URLs
│   └── useTransactionProcessor.ts  # Executes Solana Transactions
└── utils/ # includes various utility functions and constants

Deploy on Vercel

Next.js Documentation

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!