Have ideas to improve npm?Join in the discussion! »

cashtab-componentsTypeScript icon, indicating that this package has built-in type declarations

0.0.4 • Public • Published

Cashtab React Components

Interact with the Cashtab wallet to support BCHA payments in web apps. Download the Cashtab extension here

This project is based on badger-components-react

Notes

Some features from badger-components-react are not yet fully supported. Upcoming features:

  • [ ] SLPA transactions
  • [ ] OP Return text
  • [ ] successFn and failureFn props
  • [ ] Bip70-style invoices
  • [ ] Websocket monitoring of payment status

Build on Bitcoin ABC (BCHA)

A set of React components and helpers to integrate Bitcoin ABC (BCHA) and tokens into your app with ease. Integrates with the Cashtab wallet.

Get Started

Install Component

$ npm install --save cashtab-components

Install Peer Dependencies

This library depends on the following three peer dependencies

  • styled-components ^4.4.1
$ npm install --save styled-components@4.4.1

Add to React Project

import { CashtabButton, CashtabBadge } from 'cashtab-components'

const Example = (props) => {

  // eatBCH bitcoin cash address
  const toAddress = 'bitcoincash:pp8skudq3x5hzw8ew7vzsw8tn4k8wxsqsv0lt0mf3g'

  // Random SLP address
  const toSLPAddress = 'simpleledger:qq6qcjt6xlkeqzdwkhdvfyl2q2d2wafkgg8phzcqez'

  // tokenId
  const nakamotoID = 'df808a41672a0a0ae6475b44f272a107bc9961b90f29dc918d71301f24fe92fb'

  return (
    <>
      {/* Minimal Examples */}
      <CashtabBadge to={toAddress} price={0.5} currency='USD' />
      <CashtabButton to={toAddress} price={1} currency='JPY' />

      {/* Price in bcha */}
      <CashtabBadge to={toAddress} amount={0.01} coinType='BCHA' />
      <CashtabButton to={toAddress} amount={0.0001} coinType='BCHA' />

      {/* Price in SLP tokens - NAKAMOTO in this example */}
      <CashtabBadge to={toSLPAddress} amount={5.01} coinType='SLPA' tokenId={nakamotoID} />
      <CashtabButton to={toSLPAddress} amount={2.0001} coinType='SLPA' tokenId={nakamotoID} />

      {/* More Complex Examples, pricing in fiat */}
      <CashtabBadge
        price={0.001} // Price in currency
        currency='CAD' // Currency to convert from
        to='bitcoincash:pp8skudq3x5hzw8ew7vzsw8tn4k8wxsqsv0lt0mf3g' // Payment address
        opReturn={["0x6d02", "Hello cashtab-components"]}
        tag='Cashtab Pay' // Text on button
        text='Payment Total' // Text at top of badge

        showBrand// Show link to cashtab website
        showAmount // Show BCH satoshi amount
        showQR // Intent to show QR if transaction is URI encodeable

        successFn={() => console.log('Payment success callback')}
        failFn={() => console.warn('Payment failed or cancelled callback')}
      />

      <CashtabButton
        price={0.003}
        currency='USD'
        to='bitcoincash:pp8skudq3x5hzw8ew7vzsw8tn4k8wxsqsv0lt0mf3g'
        opReturn={["0x6d02", "Hello cashtab-components-react"]}
        text='cashtab Pay'
        showAmount
        showBorder
        showQR
        successFn={() => console.log('success example function called')}
        failFn={() => console.log('fail example function called')}
      />

      {/* Pricing in BCHA */}
      <CashtabBadge
        amount={0.001} // Amount in crypto
        coinType='BCHA' // Defaults to BCHA
        to='bitcoincash:pp8skudq3x5hzw8ew7vzsw8tn4k8wxsqsv0lt0mf3g' // Payment address

        isRepeatable // Reset to fresh state after a few seconds
        repeatTimeout={4000} // time in ms to reset button after payment
        watchAddress // Watch all payments to address
      />
    </>
  )
};

export default Example

Create a Custom Cashtab Button / Integration

import React from 'react'
import { CashtabBase, formatAmount } from 'cashtab-components'

import styled from 'styled-components'

const CoolButton = styled.button`
  background-color: rebeccapurple;
  color: lime;
  border-radius: 24px;
`

const MyButton extends React.Component {
  render() {
    // Props from higher order component
    const {
      handleClick,
      to,
      step,

      price,
      currency,

      coinType,
      coinDecimals,
      coinSymbol,
      amount,

      showQR,

      isRepeatable,
      repeatTimeout,
      watchAddress,
      } = this.props;

    return (
      <div>
        <h3>Donate {price}{currency} to {to}</h3>
        <h4>Satoshis: {formatAmount(amount, coinDecimals)}</h4>
        <CoolButton onClick={handleClick}>Custom looking button with render</CoolButton>
      </div>
    )
  }
}

// Wrap with CashtabBase higher order component
export default CashtabBase(MyButton);

Control Step from app

When accepting payments, the state of the payment should be handled by the backend of your application. As such, you can pass in stepControlled with the values of fresh, pending or complete to indicate which part of the payment the user is on.

Development with Storybook

To develop additions to this project, run the local storybook development server with

Setup

 $ npm i
 $ npm run storybook

Navigate to http://localhost:9001 to view your stories. They automatically update as you develop .

Storybook will pick up stories from the *stories.tsx file in each components folder.

To build a static version of storybook for deployment

 $ npm run build-storybook
 Deploy contents of  `/storybook-static`

Install

npm i cashtab-components

DownloadsWeekly Downloads

7

Version

0.0.4

License

MIT

Unpacked Size

273 kB

Total Files

128

Last publish

Collaborators

  • avatar