Skip to content

React Components for Nano cryptocurrency (formerly RaiBlocks) - including Payments via Brainblocks

License

Notifications You must be signed in to change notification settings

goldcaddy77/reblocks

Repository files navigation

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