Blink-parser NPM

Blinkz Parser

Overview

Blinkz Parser is a react component that allows rendering of Web3 interactable content defined by actions specification directly onto any custom or existing (via the extension) Web app. This tool leverages JSON-based action definitions stored on IPFS, allowing users to interact with Web3 content within Web2 environments.

Getting started

Importing the parser into your code

To use the parser, you firstly need to install the NPM package:

npm install blink-parser

After installing the package, you can import the BlinkEntry (component that renders a blink) this way:

import { BlinkEntry } from 'blink-parser';

And it can be used like this:

<BlinkEntry url={"BLINK_URL"} initialCid={"IPFS_CID"} style='x-light'></BlinkEntry>

Where BLINK_URL is the url that blink leads to if clicked, and IPFS_CID is the IPFS cid of the Blink's JSON, as defined in the actions specification.

The example use of the parser can be found in extension/src/pages/Content/index.js.

Parser Technical Overview

Parser package provides you with the ready-to-use React component, that you can plug in to any react project. One of its use cases can be to inject the blink into twitter, as shown in the extension, but it can also be used for injecting it into other websites, as well as adding the native blink support in Web apps.

This is a brief overview of how the component actually works:

In parser/src/App.tsx, we call the parseActions function (defined in parser/src/utils/parser.tsx) to differentiate Blink's list of actions into buttons (actions with no user inputs), inputs (actions with one user input) and forms (actions with multiple user inputs), and then render that, as well as other blink attributes (such as image, title and description) with the help of parser/src/ui/BlinkzActionLayout.tsx
After the user has entered his inputs, values of other inputs are calculated, and provided to the action that is to be done (in case of actions interacting with blockchain). Actions can also just open a link or switch to another CID.
Action is executed with the calculated parameters. You can see the parameter parsing from the previous step, and the action execution logic in parser/src/utils/actionExecuter.tsx

The parser tries to interact with the blockchain using the window.ethereum object, but since the extension's content script can not directly interact with the window.ethereum, we have built the parser to support custom Blinkz evets (as seen in parser/src/utils/blockchain.ts), if window.ethereum is not available.