Reblocks - React Nano Cryptocurrency Payments and other Components

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
• Usage
• API
• Contribute
• License

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:

• accountId {string} account to send funds to
• amount {string - optional} ammount of xrb to send (Note: 1 xrb = 1/1,000,000 XRB)
• label {string - optional} see - Nano QR Code specification
• message {string - optional} see - Nano QR Code specification

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

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:

• prettier - TypeScript formatting
• tslint - TypeScript linting
• markdownlint - Markdown linting

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