Skip to content
This repository was archived by the owner on Feb 13, 2024. It is now read-only.

Commit db2952f

Browse files
cgcardonacgcardona
authored
Merge pull request #204 from Bitcoin-com/stage
3.6.0
2 parents fed4ee8 + 529615f commit db2952f

5 files changed

Lines changed: 817 additions & 980 deletions

File tree

‎package.json‎

Lines changed: 21 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,34 @@
11
{
22
"name": "developer.bitcoin.com",
33
"description": "Bitcoin.com developer resources and documentation",
4-
"version": "3.5.0",
4+
"version": "3.6.0",
55
"author": "Peter <peter@bitcoin.com> and Gabriel Cardona <gabriel@bitcoin.com>",
66
"dependencies": {
7-
"badger-components-react": "^0.2.1",
8-
"gatsby": "^2.0.118",
9-
"gatsby-image": "^2.0.29",
7+
"badger-components-react": "^0.3.0",
8+
"gatsby": "^2.1.18",
9+
"gatsby-image": "^2.0.30",
1010
"gatsby-plugin-flow": "^1.0.2",
1111
"gatsby-plugin-google-tagmanager": "^2.0.9",
12-
"gatsby-plugin-manifest": "^2.0.17",
13-
"gatsby-plugin-offline": "^2.0.23",
14-
"gatsby-plugin-react-helmet": "^3.0.6",
12+
"gatsby-plugin-manifest": "^2.0.19",
13+
"gatsby-plugin-offline": "^2.0.24",
14+
"gatsby-plugin-react-helmet": "^3.0.7",
1515
"gatsby-plugin-robots-txt": "^1.4.0",
16-
"gatsby-plugin-sharp": "^2.0.20",
17-
"gatsby-plugin-sitemap": "^2.0.5",
18-
"gatsby-plugin-styled-components": "^3.0.5",
16+
"gatsby-plugin-sharp": "^2.0.22",
17+
"gatsby-plugin-sitemap": "^2.0.6",
18+
"gatsby-plugin-styled-components": "^3.0.6",
1919
"gatsby-remark-autolink-headers": "^2.0.14",
2020
"gatsby-remark-component": "^1.1.3",
2121
"gatsby-remark-copy-linked-files": "^2.0.9",
22-
"gatsby-remark-images": "^3.0.3",
23-
"gatsby-source-filesystem": "^2.0.20",
24-
"gatsby-transformer-remark": "^2.2.4",
25-
"gatsby-transformer-sharp": "^2.1.13",
22+
"gatsby-remark-images": "^3.0.5",
23+
"gatsby-source-filesystem": "^2.0.23",
24+
"gatsby-transformer-remark": "^2.2.6",
25+
"gatsby-transformer-sharp": "^2.1.14",
2626
"isomorphic-fetch": "^2.2.1",
27-
"react": "^16.8.1",
28-
"react-dom": "^16.8.1",
27+
"react": "^16.8.3",
28+
"react-dom": "^16.8.3",
2929
"react-helmet": "^5.2.0",
30-
"react-icons": "^3.3.0",
31-
"react-syntax-highlighter": "^10.1.2",
30+
"react-icons": "^3.4.0",
31+
"react-syntax-highlighter": "^10.1.3",
3232
"recompose": "^0.30.0",
3333
"rehype-react": "^3.1.0",
3434
"styled-components": "^4.1.3"
@@ -37,7 +37,9 @@
3737
"gatsby",
3838
"bitcoin",
3939
"bitcoin cash",
40-
"bch"
40+
"bch",
41+
"bitcoin developer tools",
42+
"build on BCH"
4143
],
4244
"license": "MIT",
4345
"engines": {
@@ -60,9 +62,6 @@
6062
"type": "git",
6163
"url": "https://github.com/bitcoin-com/developer.bitcoin.com"
6264
},
63-
"resolutions": {
64-
"terser": "3.14.1"
65-
},
6665
"husky": {
6766
"hooks": {
6867
"pre-commit": "pretty-quick --staged"

‎src/data/docs/badger/badger-components-react.md‎

Lines changed: 129 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ A set of React components and helpers to integrate Bitcoin Cash (BCH) and the Ba
88

99
### Get Started
1010

11-
- [Component Showcase](http://badger-storybook.surge.sh)
11+
- [Badger Homepage](https://badger.bitcoin.com)
12+
- [Component Showcase / Storybook](http://badger-storybook.surge.sh)
1213
- [NPM page `badger-components-react`](https://www.npmjs.com/package/badger-components-react)
1314

1415
### Install Components
@@ -27,109 +28,175 @@ $ npm install --save styled-components react react-dom
2728

2829
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`.
2930

30-
#### Base props
31+
```jsx
32+
// eatBCH bitcoin cash address
33+
const toAddress = 'bitcoincash:pp8skudq3x5hzw8ew7vzsw8tn4k8wxsqsv0lt0mf3g'
34+
// Random SLP address
35+
const toSLPAddress = 'simpleledger:qq6qcjt6xlkeqzdwkhdvfyl2q2d2wafkgg8phzcqez'
36+
// tokenId
37+
const nakamotoID = 'df808a41672a0a0ae6475b44f272a107bc9961b90f29dc918d71301f24fe92fb'
38+
39+
{/* Price in fiat */}
40+
<BadgerBadge to={toAddress} price={0.5} currency='USD' />
41+
<BadgerButton to={toAddress} price={1} currency='JPY' />
42+
43+
{/* Price in bch */}
44+
<BadgerBadge to={toAddress} amount={0.01} coinType='BCH' />
45+
<BadgerButton to={toAddress} amount={0.0001} coinType='BCH' />
46+
47+
{/* Price in SLP tokens - NAKAMOTO in this example */}
48+
<BadgerBadge to={toSLPAddress} amount={5.01} coinType='SLP' tokenId={nakamotoID} />
49+
<BadgerButton to={toSLPAddress} amount={2.0001} coinType='SLP' tokenId={nakamotoID} />
50+
```
51+
52+
### Base Props
3153

3254
These props are required or supported by all components which build upon `BadgerBase`.
3355

56+
<spacer></spacer>
57+
3458
- `to: BCH Address` - Required - Bitcoin Cash address to send BCH to
35-
- `price: number` - Optional - Price in chosen fiat currency, will be turned into the satoshis equivalent
36-
- `amount: number` - Optional - Price in chosen ticker, currently only BCH
59+
- `stepControlled` - Optional [`fresh`, `pending`, `complete`] - Control the payment step manually. Useful for payment systems where the transaction is validated by a payment server.
3760
<spacer></spacer>
3861
- `currency: string` - Default `USD` - [ISO Country Code](https://en.wikipedia.org/wiki/ISO_4217) to charge in
39-
- `ticker: string` - Default `BCH` - Ticker to send, currently only BCH
62+
- `price: number` - Optional - Price in chosen fiat currency, will be turned into the satoshis equivalent
63+
<spacer></spacer>
64+
- `coinType: string` - `BCH` or `SLP` - Default `BCH`
65+
- `tokenId: string` - tokenId of the SLP token to be used, required when coinType is SLP
66+
- `amount: number` - Optional - Amount of BCH or SLP token
4067
<spacer></spacer>
4168
- `opReturn: string[]` - Optional - OP_RETURN message when paid with Badger
69+
- `showQR: boolean` - Optional - Show QR code if payment does not use OP_RETURN or SLP tokens
70+
- `watchAddress` - Optional - Go to confirmed if address receives any payment, best if used with unique payment codes
71+
<spacer></spacer>
4272
- `isRepeatable` - Optional - Payment can be done multiple times in a single visit
4373
- `repeatTimeout` - Optional - How many milliseconds until button reverts to a fresh state
44-
- `watchAddress` - Optional - Go to confirmed if address receives any payment, best if used with unique payment codes
4574
<spacer></spacer>
4675
- `successFn: Function` - Optional -Callback function when payment is successful
4776
- `failFn: Function` - Optional - Callback function when payment fails or is cancelled
4877

49-
#### Badger Button
78+
### BadgerButton
5079

51-
Simple Badger Button to display the price in local currency, satoshi amount, and have an optional message. Supports the following props
80+
Simple Badger Button to display the price in local currency, bch or token amount, and have an optional message. Supports the following props
5281

53-
- All props from Base Props
54-
- `showSatoshis: boolean` Default `true` - Show the value in BCH Satoshis below the button
82+
- [All props from Base Props](/badger/docs/badger-components-react/#base-props)
83+
- `showAmount: boolean` Default `true` - Show the value in BCH Satoshis below the button
5584
- `showBorder: boolean` - Default `false` - Border around button and text
56-
- `showQR: boolean` - Default `false` - Show a QR code attached to the button
5785
- `text: string` - Optional - Text between the button and border
5886

87+
```jsx
88+
<BadgerButton
89+
price={0.001}
90+
currency="USD"
91+
to="bitcoincash:pp8skudq3x5hzw8ew7vzsw8tn4k8wxsqsv0lt0mf3g"
92+
isRepeatable={true}
93+
repeatTimeout={4000}
94+
watchAddress={true}
95+
text="Badger Pay"
96+
successFn={() => console.log('success example function called')}
97+
failFn={() => console.log('fail example function called')}
98+
showAmount={true}
99+
showBorder={false}
100+
showQR={true}
101+
/>
102+
```
103+
59104
<spacer></spacer>
60-
<badger-button to="bitcoincash:pp8skudq3x5hzw8ew7vzsw8tn4k8wxsqsv0lt0mf3g" price="0.001" currency="CAD" text="Badger Button"></badger-button>
105+
<badger-button to="bitcoincash:pp8skudq3x5hzw8ew7vzsw8tn4k8wxsqsv0lt0mf3g" price="0.001" currency="USD" isrepeatable="true" repeattimeout="4000" watchaddress={true}></badger-button>
61106

62-
#### Badger Badge
107+
### BadgerBadge
63108

64109
A slightly larger display of payment details.
65110
Supports the following props.
66111

67-
- All from Base Props
68-
- `showSatoshis: boolean` Default `true` - Show the value in BCH Satoshis below the button
112+
- [All props from Base Props](/badger/docs/badger-components-react/#base-props)
113+
- `showAmount: boolean` Default `true` - Show the value in BCH Satoshis below the button
69114
- `showBrand: boolean` Default `true` - Show the branding text
70115
- `showBorder: boolean` - Default `true` - Border around button and text
71-
- `showQR: boolean` - Default `true` - Show a QR code attached to the button
72116
- `text: string` - Default `Payment Total` - Text between the button and border
73117
- `tag: string` - Default `Badger Pay` - Text on the button
74118

75119
<spacer></spacer>
76120
<badger-badge to="bitcoincash:pp8skudq3x5hzw8ew7vzsw8tn4k8wxsqsv0lt0mf3g" price="0.001" currency="USD" text="Badger Badger"></badger-button>
77121

78-
#### Price in fiat or BCH
79-
80-
Provide `price` for fiat, and `amount` for BCH
81-
82-
```jsx
83-
// Price in fiat, currency defaults to USD
84-
<BadgerBadge to="bitcoincash:pp8skudq3x5hzw8ew7vzsw8tn4k8wxsqsv0lt0mf3g" currency="CAD" price={0.01} />
85-
86-
// Price in BCH, ticker defaults to BCH
87-
<BadgerBadge to="bitcoincash:pp8skudq3x5hzw8ew7vzsw8tn4k8wxsqsv0lt0mf3g" ticker="BCH" amount={0.001} />
88-
```
89-
90-
#### Price in BCH
91-
92122
#### Code Examples
93123

94124
```js
95125
import React from 'react'
96126
import { BadgerButton, BadgerBadge } from 'badger-components-react'
97127

98128
const Example = props => {
99-
// EatBCH address for example purposes.
129+
// eatBCH bitcoin cash address
100130
const toAddress = 'bitcoincash:pp8skudq3x5hzw8ew7vzsw8tn4k8wxsqsv0lt0mf3g'
101131

132+
// Random SLP address
133+
const toSLPAddress = 'simpleledger:qq6qcjt6xlkeqzdwkhdvfyl2q2d2wafkgg8phzcqez'
134+
135+
// tokenId
136+
const nakamotoID =
137+
'df808a41672a0a0ae6475b44f272a107bc9961b90f29dc918d71301f24fe92fb'
138+
102139
return (
103140
<>
104141
{/* Minimal Examples */}
105-
<BadgerBadge to={toAddress} price={0.5} currency={'USD'} />
106-
<BadgerButton to={toAddress} price={1} currency={'JPY'} />
142+
<BadgerBadge to={toAddress} price={0.5} currency="USD" />
143+
<BadgerButton to={toAddress} price={1} currency="JPY" />
144+
145+
{/* Price in bch */}
146+
<BadgerBadge to={toAddress} amount={0.01} coinType="BCH" />
147+
<BadgerButton to={toAddress} amount={0.0001} coinType="BCH" />
107148

108-
{/* More Complex Examples */}
149+
{/* Price in SLP tokens - NAKAMOTO in this example */}
109150
<BadgerBadge
110-
price={0.01} // Price in currency
111-
currency={'CAD'} // Currency to convert from
112-
to={'bitcoincash:pp8skudq3x5hzw8ew7vzsw8tn4k8wxsqsv0lt0mf3g'} // Payment address
113-
opReturn={['0x6d02', 'Hello BadgerBadge!']}
114-
tag={'Badger Pay'} // Text on button
115-
text={'Payment Total'} // Text at top of badge
116-
showBrand={true} // Show link to badger website
117-
showSatoshis={true} // Show BCH satoshi amount
151+
to={toSLPAddress}
152+
amount={5.01}
153+
coinType="SLP"
154+
tokenId={nakamotoID}
155+
/>
156+
<BadgerButton
157+
to={toSLPAddress}
158+
amount={2.0001}
159+
coinType="SLP"
160+
tokenId={nakamotoID}
161+
/>
162+
163+
{/* More Complex Examples, pricing in fiat */}
164+
<BadgerBadge
165+
price={0.001} // Price in currency
166+
currency="CAD" // Currency to convert from
167+
to="bitcoincash:pp8skudq3x5hzw8ew7vzsw8tn4k8wxsqsv0lt0mf3g" // Payment address
168+
opReturn={['0x6d02', 'Hello badger-components-react']}
169+
tag="Badger Pay" // Text on button
170+
text="Payment Total" // Text at top of badge
171+
showBrand // Show link to badger website
172+
showAmount // Show BCH satoshi amount
173+
showQR // Intent to show QR if transaction is URI encodeable
118174
successFn={() => console.log('Payment success callback')}
119175
failFn={() => console.warn('Payment failed or cancelled callback')}
120176
/>
121177

122178
<BadgerButton
123179
price={0.003}
124-
currency={'USD'}
125-
to={'bitcoincash:pp8skudq3x5hzw8ew7vzsw8tn4k8wxsqsv0lt0mf3g'}
126-
opReturn={['0x6d02', 'Donated with Badger']}
127-
text={'Badger Pay'}
128-
showSatoshis={true}
129-
border={true}
180+
currency="USD"
181+
to="bitcoincash:pp8skudq3x5hzw8ew7vzsw8tn4k8wxsqsv0lt0mf3g"
182+
opReturn={['0x6d02', 'Hello badger-components-react']}
183+
text="Badger Pay"
184+
showAmount
185+
showBorder
186+
showQR
130187
successFn={() => console.log('success example function called')}
131188
failFn={() => console.log('fail example function called')}
132189
/>
190+
191+
{/* Pricing in BCH */}
192+
<BadgerBadge
193+
amount={0.001} // Amount in crypto
194+
coinType="BCH" // Defaults to BCH
195+
to="bitcoincash:pp8skudq3x5hzw8ew7vzsw8tn4k8wxsqsv0lt0mf3g" // Payment address
196+
isRepeatable // Reset to fresh state after a few seconds
197+
repeatTimeout={4000} // time in ms to reset button after payment
198+
watchAddress // Watch all payments to address
199+
/>
133200
</>
134201
)
135202
}
@@ -139,33 +206,27 @@ export default Example
139206

140207
### Creating Custom Badger Integrations
141208

142-
The library contains a Higher Order Component (HOC) `BadgerBase` which contains all of the required Badger interaction logic. This allows the creation of custom Badger integrations and components easily.
209+
The majority of the logic is handled by the Higher Order Component (HOC) `BadgerBase`. By wrapping your component with this HOC, it is very easy to create any Badger integration you want, and start using BCH and SLP tokens in your app.
143210

144211
Components wrapped in `BadgerBase` support the following props
145212

146-
- `to: BCH Address` - Required - Bitcoin Cash address to send BCH to
147-
- `price: number` - Optional - Price in chosen fiat currency, will be turned into the satoshis equivalent
148-
- `amount: number` - Optional - Price in chosen ticker, currently only BCH
149-
<spacer></spacer>
150-
- `currency: string` - Default `USD` - [ISO Country Code](https://en.wikipedia.org/wiki/ISO_4217) to charge in
151-
- `ticker: string` - Default `BCH` - Ticker to send, currently only BCH
152-
<spacer></spacer>
153-
- `opReturn: string[]` - Optional - OP_RETURN message when paid with Badger
154-
- `isRepeatable` - Optional - Payment can be done multiple times in a single visit
155-
- `repeatTimeout` - Optional - How many milliseconds until button reverts to a fresh state
156-
- `watchAddress` - Optional - Go to confirmed if address receives any payment, best if used with unique payment codes
157-
<spacer></spacer>
158-
- `successFn: Function` - Optional -Callback function when payment is successful
159-
- `failFn: Function` - Optional - Callback function when payment fails or is cancelled
213+
- [All props from Base Props](/badger/docs/badger-components-react/#base-props)
160214

161-
And get the following props added to them for use in the custom integration component
215+
<spacer></spacer>
216+
And get the following props added to be used in the custom component
162217

163218
- `handleClick: Function` - Call this to start the Badger transaction
164219
- `step: string` - State of the Badger transaction. One of `fresh`, `pending`, `complete`, `login`, `install`
220+
- `coinSymbol` - `ticker` of the coin or token. For Bitcoin Cash this will be BCH, for DogeCash this is DOGE, etc.
221+
- `coinName` - Full name of the coin or token. Bitcoin Cash for BCH, DogeCash for DOGE, etc
222+
- `coinDecimals` - Maximum decimals for the coin or token. 8 for BCH, variable for SLP tokens
223+
224+
<spacer></spacer>
225+
Like other components, components enhanced with BadgerBase are free to add any other props, and extend the functionality in new unique ways.
165226

166227
```js
167228
import React from 'react'
168-
import { BadgerBase, formatSatoshis } from 'badger-react-components'
229+
import { BadgerBase, formatAmount } from 'badger-react-components'
169230

170231
import styled from 'styled-components'
171232

@@ -178,12 +239,12 @@ const CoolButton = styled.button`
178239
const MyButton extends React.Component {
179240
render() {
180241
// Props from higher order component
181-
const {handleClick, to, price, currency, satoshis, step} = this.props;
242+
const {handleClick, to, price, currency, amount, coinDecimals step} = this.props;
182243
return (
183244
<div>
184245
<h3>Donate {price}{currency} to {to}</h3>
185-
<h4>Satoshis: {formatSatoshis(satoshiDisplay)}</h4>
186-
<CoolButton onClick={handleClick}>Custom button render</CoolButton>
246+
<h4>Satoshis: {formatAmount(amount, coinDecimals))}</h4>
247+
<CoolButton onClick={handleClick}>Pay with Badger</CoolButton>
187248
</div>
188249
)
189250
}

0 commit comments

Comments
 (0)