Blinks

A Blink contains the complete, interactive data structure. It includes all necessary information to display and interact with a Blink, including its current state, possible actions, and related data.

Web

This section covers adding Blinks directly to your React dApp using our Blinks React SDK. The SDK is open-source and can be found on our Github. Blinks component rendered on desktop

Installation

npm
yarn
pnpm

npm install @dialectlabs/blinks

yarn add @dialectlabs/blinks

pnpm add @dialectlabs/blinks

Adding Component

To simplify the integration, the following hooks are exported from @dialectlabs/blinks/react

useBlink - This is the overall hook, it fetches the BlinkInstance, initializes a security registry, and refreshes it every 10 minutes.
useBlinksRegistryInterval - This fetches the security registry and refreshes it.
useBlinkSolanaWalletAdapter - This sets up an adapter for Blink using a wallet provider.

If you want to build your own hooks, use Blink , BlinksRegistry , and BlinkConfig/BlinkAdapter classes and interfaces.

If you are using the useBlinkSolanaWalletAdapter hook, then be sure to have<WalletProvider />and<WalletModalProvider /> above in the component tree.

Usage

Here’s a basic setup:

/**
 * Important: This component must be wrapped with <WalletProvider />
 * and <WalletModalProvider /> in your application.
 */

import "@dialectlabs/blinks/index.css";

import {
  Blink,
  useBlink,
  useBlinksRegistryInterval,
} from "@dialectlabs/blinks";
import { useBlinkSolanaWalletAdapter } from "@dialectlabs/blinks/hooks/solana";

const App = () => {
  // URL of your endpoint (blink provider)
  const blinkApiUrl = "...";

  // Initiates adapter
  const { adapter } = useBlinkSolanaWalletAdapter(
    "<YOUR_RPC_URL_OR_CONNECTION>"
  );

  // Fetches the blink from the provided URL
  const { blink, isLoading } = useBlink({ url: blinkApiUrl });

  if (isLoading) return null;

  return <Blink blink={blink} adapter={adapter} />;
};

The URLs in blinkApiUrl must be direct Blink provider URLs and not interstitials or website urls with actions.json

Mobile

This section covers adding blinks directly to your React Native dApp through our React Native SDK for Blinks. The SDK is completely open-source and can be found on our GitHub. Blinks component on mobile device

Installation

npm
yarn
pnpm

npm install @dialectlabs/blinks @dialectlabs/blinks-react-native

yarn add @dialectlabs/blinks @dialectlabs/blinks-react-native

pnpm add @dialectlabs/blinks @dialectlabs/blinks-react-native

Adding Component

The following imports are needed to simplify the Blink integration:

useBlink hook and BlinkAdapter type from @dialectlabs/blinks
Blink component from @dialectlabs/blinks-react-native

Usage

A getWalletAdapter function has to be defined to generate an BlinkAdapter for interactions with user wallets, like wallet connect and signing transactions through the React Native dApp. After that, the <Blink /> component can be used in the React Native dApp to render the Blink. It takes the following props:

theme - has the styling for the blink to be rendered;
blink - object returned from useBlink function (which requires the adapter from getWalletAdapter and Blink Provider URL);
websiteUrl - the complete URL of the Blink;
websiteText - the domain name of the Blink URL;

import { useBlink, type BlinkAdapter } from "@dialectlabs/blinks";
import { Blink } from "@dialectlabs/blinks-react-native";
import { PublicKey } from "@solana/web3.js";
import type React from "react";

function getWalletAdapter(): BlinkAdapter {
  return {
    connect: async (_context) => {
      console.log("connect");
      return PublicKey.default.toString();
    },
    signTransaction: async (_tx, _context) => {
      console.log("signTransaction");
      return {
        signature: "signature",
      };
    },
    confirmTransaction: async (_signature, _context) => {
      console.log("confirmTransaction");
    },
  };
}

export const BlinkInTheWalletIntegrationExample: React.FC<{
  url: string; // could be blink api or website url
}> = ({ url }) => {
  const adapter = getWalletAdapter();
  const { blink } = useBlink({ url });

  if (!blink) {
    // return placeholder component
  }
  const blinkUrl = new URL(url);
  return (
    <Blink
      theme={{
        "--blink-button": "#1D9BF0",
        "--blink-border-radius-rounded-button": 9999,
        // and any other custom styles
      }}
      blink={blink}
      adapter={adapter}
      websiteUrl={blinkUrl.href}
      websiteText={blinkUrl.hostname}
    />
  );
};

GETTING STARTED

CLIENT

PROVIDER (API)

STARTERS

API REFERENCE

Web

Installation

Adding Component

Usage

Mobile

Installation

Adding Component

Usage

​Web

​Installation

​Adding Component

​Usage

​Mobile

​Installation

​Adding Component

​Usage

Web

Installation

Adding Component

Usage

Mobile

Installation

Adding Component

Usage