React Components for Nano cryptocurrency (formerly RaiBlocks) - including Payments via Brainblocks
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
.storybook
src
typings
.editorconfig
.eslintrc
.gitignore
.markdownlint.json
.nvmrc
CHANGELOG.md
LICENSE
README.md
package.json
tsconfig.json
tslint.json
webpack.config.js
yarn.lock

README.md

Reblocks - React Nano Cryptocurrency Payments and other Components

styled with prettier npm version CircleCI semantic-release

Various React components for the Nano Cryptocurrency including a wrapper around the Brainblocks payment button that makes it simple to start taking Nano payments in React projects.

Demo: goldcaddy77.github.io/reblocks

Table of Contents

Install

yarn add reblocks

Usage

import { ReblocksPayment } from 'reblocks';

const onSuccess = (data: PaymentResponse) => {
  console.log('Got transaction token', data.token);
};

const Button = (
  <ReblocksPayment
    accountId="xrb_3ritoyx4zcixshfbezg4aycb49xbupw9ggink1rfm43tm6uh87t4ifuxg5dm"
    amount={200000}
    onPaymentSuccess={onSuccess}
  />
);

Note: this package is built with TypeScript and already contains the relevant TypeScript type definitions.

API

ReblocksPayment

To initiate a payment, use the ReblocksPayment component. The ReblocksPayment takes in the following props:

  • accountId {string} account to send funds to
  • amount {string} ammount of xrb to send (Note: 1 xrb = 1/1,000,000 XRB)
  • onPaymentSuccess {function} function to run on successful payment. This is passed { token: 'TOKEN'}

Link to demo

ReblocksFiatConversion

To display the current value of XRB in a fiat currency, use the ReblocksFiatConversion component. The ReblocksFiatConversion takes in the following props:

  • currency {currency} 3 digit fiat currency you want to display the current value of 1 XRB

Link to demo

ReblocksQRCode

To create a QR code for payments, use the ReblocksQRCode component. The ReblocksQRCode component takes in the following props:

You can also style the QR Code itself using the params we pass into qrcode.react:

  • size {number - optional} Size
  • bgColor {string (CSS color) - optional} Background color
  • fgColor {string (CSS color) - optional} Foreground color

    Nano Light Blue   Nano Dark Blue   Nano Orange  

Link to demo

Donate

If you like this project and want to help support future development, test it out by buying me a 🍺: xrb_3ritoyx4zcixshfbezg4aycb49xbupw9ggink1rfm43tm6uh87t4ifuxg5dm

Contribute

PRs accepted. Note that this library uses a bunch of linters/code formatters to keep things consistent:

To get the project running locally, run yarn to install dependencies, and then run:

yarn run storybook

This will build the project and run storybook on localhost:6006. Storybook is also what drives the demo page. You can test out your changes by editing the *.story.ts files. These are what generate the stories on the left navigation.

License

MIT © Dan Caddigan