Blinks
A complete, interactive data structure that includes all necessary information to display and interact with a Blink.
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.
Installation
Adding Component
To simplify the integration, the following hooks are exported from @dialectlabs/blinks/react
useBlink
- This is the overall hook, it fetches theBlinkInstance
, 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 forBlink
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:
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.
Installation
Adding Component
The following imports are needed to simplify the Blink integration:
useBlink
hook andBlinkAdapter
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 fromuseBlink
function (which requires the adapter fromgetWalletAdapter
and Blink Provider URL);websiteUrl
- the complete URL of the Blink;websiteText
- the domain name of the Blink URL;