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

Commit ecad0a5

Browse files
cgcardonacgcardona
authored
Merge pull request #157 from Bitcoin-com/stage
Badger components docs
2 parents 984162b + 022b43f commit ecad0a5

12 files changed

Lines changed: 1918 additions & 26 deletions

File tree

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
{
22
"name": "developer.bitcoin.com",
33
"description": "Bitcoin.com developer resources and documentation",
4-
"version": "3.1.2",
4+
"version": "3.1.3",
55
"author": "Peter <peter@bitcoin.com> and Gabriel Cardona <gabriel@bitcoin.com>",
66
"dependencies": {
7+
"badger-components-react": "^0.1.3",
78
"gatsby": "^2.0.50",
89
"gatsby-image": "^2.0.20",
910
"gatsby-plugin-flow": "^1.0.2",

‎src/atoms/Button.js‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,23 @@
33
import styled from 'styled-components'
44

55
const Button = styled.button`
6+
transition: all 0.15s;
67
align-items: center;
7-
background-color: ${props => props.theme.primary};
8-
border-radius: ${props => (props.round ? '32px' : '3px')};
9-
border: none;
10-
color: ${props => props.theme.background};
8+
background-color: transparent;
9+
border-radius: ${props => (props.round ? '25px' : '3px')};
10+
border: 2px solid ${props => props.theme.primary500};
11+
color: ${props => props.theme.primary500};
1112
cursor: pointer;
1213
display: flex;
1314
font-weight: 800;
14-
padding: 0.65em 1.5em;
15+
padding: 0.55em 1.2em;
1516
touch-action: manipulation;
1617
width: fit-content;
1718
font-size: 16px;
1819
&:hover {
1920
background-color: ${props => props.theme.primary600};
21+
border-color: ${props => props.theme.primary600};
22+
color: ${props => props.theme.background};
2023
}
2124
`
2225

‎src/atoms/Pre.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,12 @@ const Pre = defaultProps({ monospace: true })(styled.span`
99
${textBase};
1010
font-size: inherit !important;
1111
display: inline;
12-
padding: 3px;
12+
padding: 2px;
1313
background-color: ${props => props.theme.primaryMuted};
1414
color: ${props => props.theme.foreground};
1515
overflow-y: scroll;
1616
border-radius: 4px;
17+
margin-top: 12px;
1718
`)
1819

1920
export default Pre

‎src/atoms/Text.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const sizeMap = {
1717
large: ['19px', '23.75px'],
1818
},
1919
large: {
20-
normal: ['18px', '24.75px'],
20+
normal: ['18px', '22px'],
2121
tiny: ['12px', '16.5px'],
2222
small: ['16px', '22px'],
2323
large: ['20px', '27.5px'],

‎src/components/InfoCard.js‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ const Right = styled.div`
2727
type Props = {
2828
title: string,
2929
text: string,
30-
to: string,
30+
to?: string,
3131
cta?: string,
3232
disabledcta?: string,
3333
}
@@ -36,9 +36,13 @@ class InfoCard extends React.PureComponent<Props> {
3636
const { title, text, to, cta, disabledcta } = this.props
3737
return (
3838
<Main>
39-
<SmartLink to={to} subtle>
39+
{to ? (
40+
<SmartLink to={to} subtle>
41+
<H3>{title}</H3>
42+
</SmartLink>
43+
) : (
4044
<H3>{title}</H3>
41-
</SmartLink>
45+
)}
4246
<Text muted>{text}</Text>
4347
<Right>
4448
{cta && (

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

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
---
2+
title: Badger React
3+
icon: react
4+
ordinal: 6
5+
---
6+
7+
A set of React components and helpers to integrate Bitcoin Cash (BCH) and the Badger wallet into your app with ease.
8+
9+
### Get Started
10+
11+
- [Component Showcase](http://badger-storybook.surge.sh)
12+
- [NPM page `badger-components-react`](https://www.npmjs.com/package/badger-components-react)
13+
14+
### Install Components
15+
16+
Start by installing the `badger-components-react` library and it's 3 peer depenencies, `react`, `react-dom` and `styled-components`
17+
18+
```bash
19+
Install library
20+
$ npm install --save badger-components-react
21+
22+
Install peerDependencies
23+
$ npm install --save styled-components react react-dom
24+
```
25+
26+
### Add to React Application
27+
28+
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`.
29+
30+
#### Badger Button
31+
32+
Simple Badger Button to display the price in local currency, satoshi amount, and have an optional message. Supports the following props
33+
34+
- `to: BCH Address` - Required - Bitcoin Cash address to send BCH to
35+
- `price: number` - Required - Price in chosen currency, will be turned into satoshis
36+
- `currency: string` - Default `USD` - [ISO Country Code](https://en.wikipedia.org/wiki/ISO_4217) to charge in
37+
- `showSatoshis: boolean` Default `true` - Show the value in BCH Satoshis below the button
38+
- `border: boolean` - Default `true` - Border around button and text
39+
- `text: string` - Optional - Text between the button and border
40+
- `successFn: Function` - Optional -Callback function when payment is successful
41+
- `failFn: Function` - Optional - Callback function when payment fails or is cancelled
42+
43+
<spacer></spacer>
44+
<badger-button to="bitcoincash:pp8skudq3x5hzw8ew7vzsw8tn4k8wxsqsv0lt0mf3g" price="0.01" currency="CAD" text="Badger Button"></badger-button>
45+
46+
#### Badger Badge
47+
48+
A slightly larger display of payment details.
49+
Supports the following props.
50+
51+
- `to: BCH Address` - Required - Bitcoin Cash address to send BCH to
52+
- `price: number` - Required - Price in chosen currency, will be turned into satoshis
53+
- `currency: string` - Default `USD` - [ISO Country Code](https://en.wikipedia.org/wiki/ISO_4217) to charge in
54+
- `showSatoshis: boolean` Default `true` - Show the value in BCH Satoshis below the button
55+
- `showBrand: boolean` Default `true` - Show the branding text
56+
- `border: boolean` - Default `true` - Border around button and text
57+
- `text: string` - Default `Payment Total` - Text between the button and border
58+
- `tag: string` - Default `Badger Pay` - Text on the button
59+
- `successFn: Function` - Optional - Callback function when payment is successful
60+
- `failFn: Function` - Optional - Callback function when payment fails or is cancelled
61+
62+
<spacer></spacer>
63+
<badger-badge to="bitcoincash:pp8skudq3x5hzw8ew7vzsw8tn4k8wxsqsv0lt0mf3g" price="0.01" currency="CAD" text="Badger Badger"></badger-button>
64+
65+
#### Code Examples
66+
67+
```js
68+
import React from 'react'
69+
import { BadgerButton, BadgerBadge } from 'badger-components-react'
70+
71+
const Example = props => {
72+
// EatBCH address for example purposes.
73+
const toAddress = 'bitcoincash:pp8skudq3x5hzw8ew7vzsw8tn4k8wxsqsv0lt0mf3g'
74+
75+
return (
76+
<>
77+
{/* Minimal Examples */}
78+
<BadgerBadge to={toAddress} price={0.5} currency={'USD'} />
79+
<BadgerButton to={toAddress} price={1} currency={'JPY'} />
80+
81+
{/* More Complex Examples */}
82+
<BadgerBadge
83+
price={0.01} // Price in currency
84+
currency={'CAD'} // Currency to convert from
85+
to={'bitcoincash:pp8skudq3x5hzw8ew7vzsw8tn4k8wxsqsv0lt0mf3g'} // Payment address
86+
tag={'Badger Pay'} // Text on button
87+
text={'Payment Total'} // Text at top of badge
88+
showBrand={true} // Show link to badger website
89+
showSatoshis={true} // Show BCH satoshi amount
90+
successFn={() => console.log('Payment success callback')}
91+
failFn={() => console.warn('Payment failed or cancelled callback')}
92+
/>
93+
94+
<BadgerButton
95+
price={0.003}
96+
currency={'USD'}
97+
to={'bitcoincash:pp8skudq3x5hzw8ew7vzsw8tn4k8wxsqsv0lt0mf3g'}
98+
text={'Badger Pay'}
99+
showSatoshis={true}
100+
border={true}
101+
successFn={() => console.log('success example function called')}
102+
failFn={() => console.log('fail example function called')}
103+
/>
104+
</>
105+
)
106+
}
107+
108+
export default Example
109+
```
110+
111+
### Creating Custom Badger Integrations
112+
113+
The library contains a Higher Order Component (HOC) `BadgerBase` which contains all of the required Badger interaction logic. This allows for any component to integrate with Badger easily.
114+
115+
Components wrapped in `BadgerBase` support the following props
116+
117+
- `to: BCH Address` - Required - Bitcoin Cash address to send BCH to
118+
- `price: number` - Required - Price in chosen currency, will be turned into satoshis
119+
- `currency: string` - Default `USD` - [ISO Country Code](https://en.wikipedia.org/wiki/ISO_4217) to charge in
120+
121+
And get the following props added to them for use in custom integration component
122+
123+
- `handleClick: Function` - Call this to start the Badger transaction
124+
- `step: string` - State of the Badger transaction. One of `fresh`, `pending`, `complete`, `login`, `install`
125+
- `satoshiDisplay: string` - Transaction value in satoshis, converted from the price and currency every minute
126+
127+
```js
128+
import React from 'react'
129+
import { BadgerBase } from 'badger-react-components'
130+
131+
import styled from 'styled-components'
132+
133+
const CoolButton = styled.button`
134+
background-color: rebeccapurple;
135+
color: lime;
136+
border-radius: 24px;
137+
`
138+
139+
const MyButton extends React.Component {
140+
render() {
141+
// Props from higher order component
142+
const {handleClick, to, price, currency, satoshiDisplay, step} = this.props;
143+
return (
144+
<div>
145+
<h3>Donate {price}{currency} to {to}</h3>
146+
<h4>Satoshis: {satoshiDisplay}</h4>
147+
<CoolButton onClick={handleClick}>Custom looking button with render</CoolButton>
148+
</div>
149+
)
150+
}
151+
}
152+
153+
// Wrap with BadgerBase higher order component
154+
export default BadgerBase(MyButton);
155+
```

‎src/pages/badger.js‎

Lines changed: 25 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -37,17 +37,18 @@ const PreviewLayout = styled.div`
3737
grid-gap: ${spacing.medium};
3838
grid-template-columns: 1fr;
3939
${media.medium`
40-
grid-template-columns: repeat(auto-fit, minmax(400px, .5fr));
40+
grid-template-columns: repeat(auto-fit, minmax(300px, .5fr));
4141
`};
4242
`
4343

4444
const ItemLayout = styled.div`
4545
display: grid;
4646
grid-gap: ${spacing.tiny};
47-
grid-auto-rows: min-content;
47+
grid-auto-rows: max-content;
4848
grid-column: span 2;
4949
${media.medium`
50-
grid-column: 'span 2';
50+
grid-column: span 1;
51+
grid-template-rows: max-content max-content 1fr;
5152
`};
5253
`
5354

@@ -60,16 +61,25 @@ const PreviewItem = ({ children, to }: ItemProps) => (
6061
<ItemLayout>
6162
{children}
6263
{to && (
63-
<StyledLink to={to}>
64-
<Button round>More</Button>
65-
</StyledLink>
64+
<div style={{ display: 'flex', alignItems: 'flex-end' }}>
65+
<StyledLink to={to}>
66+
<Button round>View</Button>
67+
</StyledLink>
68+
</div>
6669
)}
6770
</ItemLayout>
6871
)
6972

7073
type Props = {
7174
location: Object,
72-
data: { heroImage: any },
75+
data: {
76+
site: {
77+
siteMetadata: {
78+
title: string,
79+
},
80+
},
81+
heroImage: any,
82+
},
7383
}
7484

7585
const BadgerPage = ({ location, data }: Props) => (
@@ -103,14 +113,21 @@ const BadgerPage = ({ location, data }: Props) => (
103113
</Hero>
104114
<Container>
105115
<PreviewLayout>
106-
<PreviewItem>
116+
<PreviewItem to="/badger/docs/getting-started">
107117
<H3>Badger SDK</H3>
108118
<Text>
109119
Badger Wallet injects an API into pages a user visits to allow apps
110120
to request a users's permission to send Bitcoin Cash, send tokens,
111121
or authenticate with CashID.
112122
</Text>
113123
</PreviewItem>
124+
<PreviewItem to="/badger/docs/badger-components-react">
125+
<H3>Badger React Components</H3>
126+
<Text>
127+
React based components and tools to make integrating Bitcoin Cash
128+
(BCH) into your next project easy.
129+
</Text>
130+
</PreviewItem>
114131
</PreviewLayout>
115132
</Container>
116133
</DefaultLayout>

‎src/pages/develop.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,12 @@ const DevelopPage = ({ location, data }: Props) => (
9494
text="BIP44 development wallet. Convert between cashaddr/legacy addresses. Create QR codes for WIF, XPub and XPrivs. Sign and verify messages."
9595
cta="View"
9696
/>
97+
<InfoCard
98+
to="/faucets"
99+
title="Faucets"
100+
text="Testnet BCH and WHC for developers."
101+
cta="View"
102+
/>
97103
<InfoCard
98104
title="Cloud"
99105
text="Blockchain-as-a-Service. Infrastructure to deploy and scale your apps. An ecosystem of add-ons for data, monitoring, logging, metrics, testing and more all built w/ BITBOX."
@@ -104,12 +110,6 @@ const DevelopPage = ({ location, data }: Props) => (
104110
text="Paid downloads, streaming media, in-app purchases, tokens and more ways for you to monetize."
105111
disabledcta="Coming soon"
106112
/>
107-
<InfoCard
108-
to="/faucets"
109-
title="Faucets"
110-
text="Testnet BCH and WHC for developers."
111-
cta="View"
112-
/>
113113
</CardLayout>
114114
</Container>
115115
</DefaultLayout>

‎src/styles/spacing.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// @flow
22

33
const spacing = {
4-
tiny: '8px',
4+
tiny: '6px',
55
small: '12px',
66
small2: '16px',
77
medium: '24px',

‎src/utils/icon-helpers.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ import {
3131
FaTerminal,
3232
FaUserCircle,
3333
FaWallet,
34+
FaReact,
3435
} from 'react-icons/fa'
3536

3637
// Whitelist of valid icons
@@ -88,6 +89,8 @@ export const getIcon = (icon: string): React.Node => {
8889
return <FaDatabase />
8990
case 'user-circle':
9091
return <FaUserCircle />
92+
case 'react':
93+
return <FaReact />
9194
default:
9295
return <FaAngleRight />
9396
}

0 commit comments

Comments
 (0)