Use MiniBlinks to integrate individual buttons & actions
MiniBlinks are a way to integrate smaller portions of the full blink into your product. In other words, they let you teleport buttons and other small actions between web3 products.
This section describes how to add MiniBlinks directly to your web dapp using our Blinks React SDK, or into your mobile dapp using our React Native SDK. The SDK is open-source and can be found on our Github.
You can find an example using MiniBlinks here.
Miniblinks let you select individual actions
Blinks often contain more than one button or atomic unit of action. In the Donation blink below, there are 4 individual, independent actions:
Donate 1 SOL
Donate 5 SOL
Donate 10 SOL
Donate a custom amount of SOL.
Because each of these are actions that can be taken individually, they are usable as MiniBlinks. For example, you can integrate just the "Donate 1 SOL" Button, or just the input field and button to donate a custom amount of SOL.
Using the MiniBlink component to target a specific button or action
In this example we'll use the MiniBlink SDK component to select just the action corresponding to the custom input field, and render just that.
As usual, we use useAction
to fetch the full action data from an action URL. The action object then has all 4 of the possible actions in the links.actions
attribute.
With the above action, the client will fetch the following JSON
MiniBlinks let us select for just one of the sub actions above using the selector
attribute, from which we can apply any logic. In this case we use .find
to select the sub action whose label has "Donate" in the button label, which corresponds to the input field action.
You can do any kind of logic in the selector
to identify which sub action you want to extract, including using labels, names, existence of parameters
, or any other data.
Last updated