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
})
)
}
}
5 years ago