react-bitbus v0.0.1

react-bitbus

$ npm i @planaria/react-bitbus -S

This react API will allow you to easily build a completely serverless bitcoin web frontend in react. The library uses the Bitbus streaming API to crawl past transactions, and Bitsocket SEE API for listening to real time events.

Simply wrap the root of your react app with the bitbus module with a given query, and your app now has access to the transactions in its state. You can use then use transactions in your application however you please.

import { render } from 'react-dom'
import Bitbus from '@planaria/react-bitbus'
const App = require('./App')
render(
  <Bitbus {...conf} app={App} />, 
  document.getElementById('entry')
)

Authentication

API calls to bitbus require a JWT authenitcation token. If you have not authenticated, the module will fire a prompt to ask for the key. Go to token.planaria.network and copy/paste your token to proceed. It will be stored as a cookie to automate future login authentications.

Crawl

This library allows you to use the Bitbus streaming API to scan the past history of the chain for relevant transaction to your app. If you specify crawl=true in your Bitbus app config, your app will first scan the most recent transactions for transactions matching your query.

The limit atribute will cap your query so you do not overfload your frontend with data.

This example will fetch the most recent 20 videos from the b:// protocol to create a movie player application.

import { render } from 'react-dom'
import React from 'react'
import App from './APP'
import Bitbus from '../index'
const conf = {
  query: {
    q: {
      find: { 
        "out.s2": "19HxigV4QyBv3tHpQVcUEQyq1pzZVdoAut", 
        "$or": [ 
          { "out.s4": "video/mp4" }, 
          { "out.s4": "video/mp3" }, 
          { "out.s4": "video/ogg" }, 
          { "out.s4": "video/mpeg" },
        ], 
      },
      sort: { "blk.i": -1 },
    }
  },
  limit: 20,
  crawl: true,
}
render(
  <Bitbus {...conf} app={App} />, 
  document.getElementById('entry')
)

During the crawling process, the application will enter a loading state where it waits until the crawling process is complete. A loading UI will pop up until the crawl stream is complete. Upon completion your App UI will boot with the crawled transactions inside of this.props.txs

Don't be afraid to pull in lots of transactions. Because of the seperation between Bitfs and Bitbus database, the json being retrieved should be quite small. You can easily pull in thousands of transactions a second into the browser. Observed ingestion rate is over 2MB per second.

Listen

If your app needs any realtime updates, listen mode can be invoked to subscribe your query to the Bitsocket SSE endpoint.

import { render } from 'react-dom'
import React from 'react'
import App from './APP'
import Bitbus from '../index'
const conf = {
  query: {
    q: {
      find: { 
        "out.o1": "OP_RETURN" 
      },
    }
  },
  listen: true
}
render(<Bitbus {...conf} app={App} />, document.getElementById('entry'))

Your app can run while the SSE connection is handled in the background. When realtime transaction events are picked up, state of the bitbus component is updated, causing your app to re-render with the new transactions available.

You can toggle the SSE event stream on and off by accessing this.props.togle function.

Build Your App

The app given to Bitbus now has access to the full list of transactions from crawling and listening located in the components props.txs. You can use those transactions and bitfs pointers to build a video explorer in 20 lines of code.

import React, { Component } from 'react'
export default class App extends Component {
  constructor(props) {
    super(props)
  }
  render() {
    return(
      this.props.txs.flatMap((tx, i) => { 
        const videos = tx.out
          .filter(xput => Boolean(xput.f3) === true)
          .map(xput => xput.f3)
          .map(f3 => {
            return (
              <video width="100%" height="900" controls>
                <source src={`http://x.bitfs.network/${f3}`} />
              </video>
            ) 
          })
        return videos
      })
    )
  }
}