Merge pull request #191 from Bitcoin-com/docs/badger-react-0.2

badger-react doc update for 0.2.0

Author: SpicyPete

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.

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 <peter@bitcoin.com> and Gabriel Cardona <gabriel@bitcoin.com>",
   "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",

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
+  <spacer></spacer>
 - `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
+  <spacer></spacer>
+- `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
+  <spacer></spacer>
 - `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
+
 <spacer></spacer>
 <badger-button to="bitcoincash:pp8skudq3x5hzw8ew7vzsw8tn4k8wxsqsv0lt0mf3g" price="0.001" currency="CAD" text="Badger Button"></badger-button>
 
@@ -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
 
 <spacer></spacer>
 <badger-badge to="bitcoincash:pp8skudq3x5hzw8ew7vzsw8tn4k8wxsqsv0lt0mf3g" price="0.001" currency="USD" text="Badger Badger"></badger-button>
 
+#### Price in fiat or BCH
+
+Provide `price` for fiat, and `amount` for BCH
+
+```jsx
+// Price in fiat, currency defaults to USD
+<BadgerBadge to="bitcoincash:pp8skudq3x5hzw8ew7vzsw8tn4k8wxsqsv0lt0mf3g" currency="CAD" price={0.01} />
+
+// Price in BCH, ticker defaults to BCH
+<BadgerBadge to="bitcoincash:pp8skudq3x5hzw8ew7vzsw8tn4k8wxsqsv0lt0mf3g" ticker="BCH" amount={0.001} />
+```
+
+#### 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
+  <spacer></spacer>
 - `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
+  <spacer></spacer>
+- `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
+  <spacer></spacer>
+- `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 (
       <div>
         <h3>Donate {price}{currency} to {to}</h3>
-        <h4>Satoshis: {satoshiDisplay}</h4>
-        <CoolButton onClick={handleClick}>Custom looking button with render</CoolButton>
+        <h4>Satoshis: {formatSatoshis(satoshiDisplay)}</h4>
+        <CoolButton onClick={handleClick}>Custom button render</CoolButton>
       </div>
     )
   }

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"