Add blinks to your web app

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.

Installation

# npm
npm i @dialectlabs/blinks

#yarn
yard add @dialectlabs/blinks

Adding the Blink Component

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

• useAction - This is the overall hook, it fetches the Action, sets up an adapter, initializes a registry, and refreshes it every 10 minutes.

• useActionsRegistry - This fetches the registry and refreshes it.

• useActionSolanaWalletAdapter - This sets up an adapter for Action using a wallet provider.

If you want to build your own hooks, use Action , ActionsRegistry , and ActionConfig/ActionAdapter classes and interfaces.

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

Basic Usage

Here's a basic setup:

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

import { useState, useEffect } from 'react';
import { Action, Blink, ActionsRegistry, useAction } from "@dialectlabs/blinks";
import { useActionSolanaWalletAdapter } from "@dialectlabs/blinks/hooks/solana"

// needs to be wrapped with <WalletProvider /> and <WalletModalProvider />
const App = () => {
  const actionApiUrl = '...';
  // useAction initiates registry, adapter and fetches the action.
  const { adapter } = useActionSolanaWalletAdapter('<YOUR_RPC_URL_OR_CONNECTION>');
  const { action, isLoading } = useAction({url: actionApiUrl});
  
   if (isLoading) return null; 

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

The URLs in ActionApiUrl and apiUrls must be direct action URLs and not interstitials or website urls with actions.json

Customize Blink Styles

Dialect's Blinks SDK supports customizable styles so you can render Blinks that match the style of your dApp or 3rd party site, such as Twitter.

To render a Blink with a preset, pass stylePreset prop (which defaults to default , the dial.to theme) to <Blink /> component:

import { Blink } from '@dialectlabs/blinks';
...
return <Blink stylePreset="x-dark" ... />;

Style presets are mapped to classes in the following way:

• x-dark -> .x-dark

• x-light -> .x-light

• default -> .dial-light

• custom -> .custom

To override a certain preset use the following CSS variables:

/* 
    Use .x-dark, .x-light, .dial-light, or .custom classes 
    .custom - does not contain any colors, radii or shadow
*/
.blink.x-dark {
  --blink-bg-primary: #202327;
  --blink-button: #1d9bf0;
  --blink-button-disabled: #2f3336;
  --blink-button-hover: #3087da;
  --blink-button-success: #00ae661a;
  --blink-icon-error: #ff6565;
  --blink-icon-error-hover: #ff7a7a;
  --blink-icon-primary: #6e767d;
  --blink-icon-primary-hover: #949ca4;
  --blink-icon-warning: #ffb545;
  --blink-icon-warning-hover: #ffc875;
  --blink-input-bg: #202327;
  --blink-input-stroke: #3d4144;
  --blink-input-stroke-disabled: #2f3336;
  --blink-input-stroke-error: #ff6565;
  --blink-input-stroke-hover: #6e767d;
  --blink-input-stroke-selected: #1d9bf0;
  --blink-stroke-error: #ff6565;
  --blink-stroke-primary: #1d9bf0;
  --blink-stroke-secondary: #3d4144;
  --blink-stroke-warning: #ffb545;
  --blink-text-brand: #35aeff;
  --blink-text-button: #ffffff;
  --blink-text-button-disabled: #768088;
  --blink-text-button-success: #12dc88;
  --blink-text-error: #ff6565;
  --blink-text-error-hover: #ff7a7a;
  --blink-text-input: #ffffff;
  --blink-text-input-disabled: #566470;
  --blink-text-input-placeholder: #6e767d;
  --blink-text-link: #6e767d;
  --blink-text-link-hover: #949ca4;
  --blink-text-primary: #ffffff;
  --blink-text-secondary: #949ca4;
  --blink-text-success: #12dc88;
  --blink-text-warning: #ffb545;
  --blink-text-warning-hover: #ffc875;
  --blink-transparent-error: #aa00001a;
  --blink-transparent-grey: #6e767d1a;
  --blink-transparent-warning: #a966001a;
    
  --blink-border-radius-rounded-lg: 0.25rem;
  --blink-border-radius-rounded-xl: 0.5rem;
  --blink-border-radius-rounded-2xl: 1.125rem;
  --blink-border-radius-rounded-button: 624.9375rem;
  --blink-border-radius-rounded-input: 624.9375rem;
    
  /* box-shadow */
  --blink-shadow-container: 0px 2px 8px 0px rgba(59, 176, 255, 0.22), 0px 1px 48px 0px rgba(29, 155, 240, 0.24);
}

Be sure to override with CSS specificity in mind or by import order.

Using these CSS classes, you can customize the styles to fit the UI of your application.