diff --git a/README.md b/README.md index fa676005..454d1559 100644 --- a/README.md +++ b/README.md @@ -6,6 +6,10 @@ Bitcoin.com’s developer plaform is based on the popular BITBOX javascript framework. Offering utility methods for Mnemonics, HDNodes, ECPairs, Crypto, Address conversion, Transactions and much more. +### Badger + +Integrate Bitcoin Cash (BCH) into your next app with ease. Helpers, tools, and SDK's to help connect your website to the Badger wallet. + ### REST The BCH JSON RPC over HTTP including a fully documented and interactive GUI which developers can use to test their ideas and confirm their code is making proper API calls. diff --git a/package.json b/package.json index 6d423488..57618219 100644 --- a/package.json +++ b/package.json @@ -1,10 +1,10 @@ { "name": "developer.bitcoin.com", "description": "Bitcoin.com developer resources and documentation", - "version": "3.4.0", + "version": "3.4.1", "author": "Peter and Gabriel Cardona ", "dependencies": { - "badger-components-react": "^0.1.3", + "badger-components-react": "^0.2.0", "gatsby": "^2.0.118", "gatsby-image": "^2.0.29", "gatsby-plugin-flow": "^1.0.2", diff --git a/src/data/docs/badger/badger-components-react.md b/src/data/docs/badger/badger-components-react.md index 158ae0a3..e549cda4 100644 --- a/src/data/docs/badger/badger-components-react.md +++ b/src/data/docs/badger/badger-components-react.md @@ -13,7 +13,7 @@ A set of React components and helpers to integrate Bitcoin Cash (BCH) and the Ba ### Install Components -Start by installing the `badger-components-react` library and it's 3 peer depenencies, `react`, `react-dom` and `styled-components` +Start by installing the `badger-components-react` library and it's 3 peer dependencies, `react`, `react-dom` and `styled-components` ```bash Install library @@ -27,20 +27,35 @@ $ npm install --save styled-components react react-dom The library comes with some ready-to-use Badger components, `BadgerBadge` and `BadgerButton`, with more coming soon. These components are can be added quickly to any React projects. If you require a different solution then continue reading to learn how to create custom Badger integrations using `BadgerBase`. -#### Badger Button +#### Base props -Simple Badger Button to display the price in local currency, satoshi amount, and have an optional message. Supports the following props +These props are required or supported by all components which build upon `BadgerBase`. - `to: BCH Address` - Required - Bitcoin Cash address to send BCH to -- `price: number` - Required - Price in chosen currency, will be turned into satoshis +- `price: number` - Optional - Price in chosen fiat currency, will be turned into the satoshis equivalent +- `amount: number` - Optional - Price in chosen ticker, currently only BCH + - `currency: string` - Default `USD` - [ISO Country Code](https://en.wikipedia.org/wiki/ISO_4217) to charge in -- `showSatoshis: boolean` Default `true` - Show the value in BCH Satoshis below the button -- `border: boolean` - Default `true` - Border around button and text -- `opReturn: string[]` - Optional - OP_RETURN message -- `text: string` - Optional - Text between the button and border +- `ticker: string` - Default `BCH` - Ticker to send, currently only BCH + +- `opReturn: string[]` - Optional - OP_RETURN message when paid with Badger +- `isRepeatable` - Optional - Payment can be done multiple times in a single visit +- `repeatTimeout` - Optional - How many milliseconds until button reverts to a fresh state +- `watchAddress` - Optional - Go to confirmed if address receives any payment, best if used with unique payment codes + - `successFn: Function` - Optional -Callback function when payment is successful - `failFn: Function` - Optional - Callback function when payment fails or is cancelled +#### Badger Button + +Simple Badger Button to display the price in local currency, satoshi amount, and have an optional message. Supports the following props + +- All props from Base Props +- `showSatoshis: boolean` Default `true` - Show the value in BCH Satoshis below the button +- `showBorder: boolean` - Default `false` - Border around button and text +- `showQR: boolean` - Default `false` - Show a QR code attached to the button +- `text: string` - Optional - Text between the button and border + @@ -49,21 +64,31 @@ Simple Badger Button to display the price in local currency, satoshi amount, and A slightly larger display of payment details. Supports the following props. -- `to: BCH Address` - Required - Bitcoin Cash address to send BCH to -- `price: number` - Required - Price in chosen currency, will be turned into satoshis -- `currency: string` - Default `USD` - [ISO Country Code](https://en.wikipedia.org/wiki/ISO_4217) to charge in +- All from Base Props - `showSatoshis: boolean` Default `true` - Show the value in BCH Satoshis below the button - `showBrand: boolean` Default `true` - Show the branding text -- `border: boolean` - Default `true` - Border around button and text +- `showBorder: boolean` - Default `true` - Border around button and text +- `showQR: boolean` - Default `true` - Show a QR code attached to the button - `text: string` - Default `Payment Total` - Text between the button and border - `tag: string` - Default `Badger Pay` - Text on the button -- `opReturn: string[]` - Optional - OP_RETURN message -- `successFn: Function` - Optional - Callback function when payment is successful -- `failFn: Function` - Optional - Callback function when payment fails or is cancelled +#### Price in fiat or BCH + +Provide `price` for fiat, and `amount` for BCH + +```jsx +// Price in fiat, currency defaults to USD + + +// Price in BCH, ticker defaults to BCH + +``` + +#### Price in BCH + #### Code Examples ```js @@ -119,19 +144,28 @@ The library contains a Higher Order Component (HOC) `BadgerBase` which contains Components wrapped in `BadgerBase` support the following props - `to: BCH Address` - Required - Bitcoin Cash address to send BCH to -- `price: number` - Required - Price in chosen currency, will be turned into satoshis +- `price: number` - Optional - Price in chosen fiat currency, will be turned into the satoshis equivalent +- `amount: number` - Optional - Price in chosen ticker, currently only BCH + - `currency: string` - Default `USD` - [ISO Country Code](https://en.wikipedia.org/wiki/ISO_4217) to charge in -- `opReturn: string[]` - Optional - OP_RETURN message to send with transaction +- `ticker: string` - Default `BCH` - Ticker to send, currently only BCH + +- `opReturn: string[]` - Optional - OP_RETURN message when paid with Badger +- `isRepeatable` - Optional - Payment can be done multiple times in a single visit +- `repeatTimeout` - Optional - How many milliseconds until button reverts to a fresh state +- `watchAddress` - Optional - Go to confirmed if address receives any payment, best if used with unique payment codes + +- `successFn: Function` - Optional -Callback function when payment is successful +- `failFn: Function` - Optional - Callback function when payment fails or is cancelled -And get the following props added to them for use in custom integration component +And get the following props added to them for use in the custom integration component - `handleClick: Function` - Call this to start the Badger transaction - `step: string` - State of the Badger transaction. One of `fresh`, `pending`, `complete`, `login`, `install` -- `satoshiDisplay: string` - Transaction value in satoshis, converted from the price and currency every minute ```js import React from 'react' -import { BadgerBase } from 'badger-react-components' +import { BadgerBase, formatSatoshis } from 'badger-react-components' import styled from 'styled-components' @@ -144,12 +178,12 @@ const CoolButton = styled.button` const MyButton extends React.Component { render() { // Props from higher order component - const {handleClick, to, price, currency, satoshiDisplay, step} = this.props; + const {handleClick, to, price, currency, satoshis, step} = this.props; return (

Donate {price}{currency} to {to}

-

Satoshis: {satoshiDisplay}

- Custom looking button with render +

Satoshis: {formatSatoshis(satoshiDisplay)}

+ Custom button render
) } diff --git a/yarn.lock b/yarn.lock index ec165b8c..614dab83 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1616,10 +1616,13 @@ backo2@1.0.2: resolved "https://registry.yarnpkg.com/backo2/-/backo2-1.0.2.tgz#31ab1ac8b129363463e35b3ebb69f4dfcfba7947" integrity sha1-MasayLEpNjRj41s+u2n038+6eUc= -badger-components-react@^0.1.3: - version "0.1.3" - resolved "https://registry.yarnpkg.com/badger-components-react/-/badger-components-react-0.1.3.tgz#98aaf9567c1d1e3446bd7623e27d3a7c095b3fae" - integrity sha512-wZw403Tc2Gw4XT2w3lVGJg+H2rd4hlbXDz+Ee1RXU0JRK6CdcRX2UCshhB3DTRtdr0w2Bdy8GSsN0bsq4VWTrQ== +badger-components-react@^0.2.0: + version "0.2.0" + resolved "https://registry.yarnpkg.com/badger-components-react/-/badger-components-react-0.2.0.tgz#164b37b90b8bd770a46079a7194d711407cffedd" + integrity sha512-XoW7Pz1VGvXiAxRbUNdrCZfdTHr+9GLY9usFnB+Rtp5A6A/qnIbA6y5P8AdLlUaXw16NO2sr8vtcdzL5Hzj9xA== + dependencies: + lodash "^4.17.11" + qrcode.react "^0.9.2" bail@^1.0.0: version "1.0.3" @@ -9366,6 +9369,15 @@ prop-types@^15.5.4, prop-types@^15.6.1, prop-types@^15.6.2: object-assign "^4.1.1" react-is "^16.8.1" +prop-types@^15.6.0: + version "15.7.2" + resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" + integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ== + dependencies: + loose-envify "^1.4.0" + object-assign "^4.1.1" + react-is "^16.8.1" + property-information@^4.0.0: version "4.2.0" resolved "https://registry.yarnpkg.com/property-information/-/property-information-4.2.0.tgz#f0e66e07cbd6fed31d96844d958d153ad3eb486e" @@ -9473,6 +9485,19 @@ q@^1.1.2: resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7" integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc= +qr.js@0.0.0: + version "0.0.0" + resolved "https://registry.yarnpkg.com/qr.js/-/qr.js-0.0.0.tgz#cace86386f59a0db8050fa90d9b6b0e88a1e364f" + integrity sha1-ys6GOG9ZoNuAUPqQ2baw6IoeNk8= + +qrcode.react@^0.9.2: + version "0.9.3" + resolved "https://registry.yarnpkg.com/qrcode.react/-/qrcode.react-0.9.3.tgz#91de1287912bdc5ccfb3b091737b828d6ced60c5" + integrity sha512-gGd30Ez7cmrKxyN2M3nueaNLk/f9J7NDRgaD5fVgxGpPLsYGWMn9UQ+XnDpv95cfszTQTdaf4QGLNMf3xU0hmw== + dependencies: + prop-types "^15.6.0" + qr.js "0.0.0" + qs@6.5.2, qs@~6.5.2: version "6.5.2" resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"