Documentation - badger-components-react basic

package.json

@@ -1,9 +1,10 @@
 {
   "name": "developer.bitcoin.com",
   "description": "Bitcoin.com developer resources and documentation",
-  "version": "3.1.2",
+  "version": "3.1.3",
   "author": "Peter <peter@bitcoin.com> and Gabriel Cardona <gabriel@bitcoin.com>",
   "dependencies": {
+    "badger-components-react": "^0.1.3",
     "gatsby": "^2.0.50",
     "gatsby-image": "^2.0.20",
     "gatsby-plugin-flow": "^1.0.2",

src/atoms/Button.js

@@ -3,20 +3,23 @@
 import styled from 'styled-components'
 
 const Button = styled.button`
+  transition: all 0.15s;
   align-items: center;
-  background-color: ${props => props.theme.primary};
-  border-radius: ${props => (props.round ? '32px' : '3px')};
-  border: none;
-  color: ${props => props.theme.background};
+  background-color: transparent;
+  border-radius: ${props => (props.round ? '25px' : '3px')};
+  border: 2px solid ${props => props.theme.primary500};
+  color: ${props => props.theme.primary500};
   cursor: pointer;
   display: flex;
   font-weight: 800;
-  padding: 0.65em 1.5em;
+  padding: 0.55em 1.2em;
   touch-action: manipulation;
   width: fit-content;
   font-size: 16px;
   &:hover {
     background-color: ${props => props.theme.primary600};
+    border-color: ${props => props.theme.primary600};
+    color: ${props => props.theme.background};
   }
 `
 

src/atoms/Pre.js

@@ -9,11 +9,12 @@ const Pre = defaultProps({ monospace: true })(styled.span`
   ${textBase};
   font-size: inherit !important;
   display: inline;
-  padding: 3px;
+  padding: 2px;
   background-color: ${props => props.theme.primaryMuted};
   color: ${props => props.theme.foreground};
   overflow-y: scroll;
   border-radius: 4px;
+  margin-top: 12px;
 `)
 
 export default Pre

src/atoms/Text.js

@@ -17,7 +17,7 @@ const sizeMap = {
     large: ['19px', '23.75px'],
   },
   large: {
-    normal: ['18px', '24.75px'],
+    normal: ['18px', '22px'],
     tiny: ['12px', '16.5px'],
     small: ['16px', '22px'],
     large: ['20px', '27.5px'],

src/components/InfoCard.js

@@ -27,7 +27,7 @@ const Right = styled.div`
 type Props = {
   title: string,
   text: string,
-  to: string,
+  to?: string,
   cta?: string,
   disabledcta?: string,
 }
@@ -36,9 +36,13 @@ class InfoCard extends React.PureComponent<Props> {
     const { title, text, to, cta, disabledcta } = this.props
     return (
       <Main>
-        <SmartLink to={to} subtle>
+        {to ? (
+          <SmartLink to={to} subtle>
+            <H3>{title}</H3>
+          </SmartLink>
+        ) : (
           <H3>{title}</H3>
-        </SmartLink>
+        )}
         <Text muted>{text}</Text>
         <Right>
           {cta && (

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

@@ -0,0 +1,155 @@
+---
+title: Badger React
+icon: react
+ordinal: 6
+---
+
+A set of React components and helpers to integrate Bitcoin Cash (BCH) and the Badger wallet into your app with ease.
+
+### Get Started
+
+- [Component Showcase](http://badger-storybook.surge.sh)
+- [NPM page `badger-components-react`](https://www.npmjs.com/package/badger-components-react)
+
+### Install Components
+
+Start by installing the `badger-components-react` library and it's 3 peer depenencies, `react`, `react-dom` and `styled-components`
+
+```bash
+Install library
+$ npm install --save badger-components-react
+
+Install peerDependencies
+$ npm install --save styled-components react react-dom
+```
+
+### Add to React Application
+
+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
+
+Simple Badger Button to display the price in local currency, satoshi amount, and have an optional message. 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
+- `showSatoshis: boolean` Default `true` - Show the value in BCH Satoshis below the button
+- `border: boolean` - Default `true` - Border around button and text
+- `text: string` - Optional - Text between the button and border
+- `successFn: Function` - Optional -Callback function when payment is successful
+- `failFn: Function` - Optional - Callback function when payment fails or is cancelled
+
+<spacer></spacer>
+<badger-button to="bitcoincash:pp8skudq3x5hzw8ew7vzsw8tn4k8wxsqsv0lt0mf3g" price="0.01" currency="CAD" text="Badger Button"></badger-button>
+
+#### Badger Badge
+
+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
+- `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
+- `text: string` - Default `Payment Total` - Text between the button and border
+- `tag: string` - Default `Badger Pay` - Text on the button
+- `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.01" currency="CAD" text="Badger Badger"></badger-button>
+
+#### Code Examples
+
+```js
+import React from 'react'
+import { BadgerButton, BadgerBadge } from 'badger-components-react'
+
+const Example = props => {
+  // EatBCH address for example purposes.
+  const toAddress = 'bitcoincash:pp8skudq3x5hzw8ew7vzsw8tn4k8wxsqsv0lt0mf3g'
+
+  return (
+    <>
+      {/* Minimal Examples */}
+      <BadgerBadge to={toAddress} price={0.5} currency={'USD'} />
+      <BadgerButton to={toAddress} price={1} currency={'JPY'} />
+
+      {/* More Complex Examples */}
+      <BadgerBadge
+        price={0.01} // Price in currency
+        currency={'CAD'} // Currency to convert from
+        to={'bitcoincash:pp8skudq3x5hzw8ew7vzsw8tn4k8wxsqsv0lt0mf3g'} // Payment address
+        tag={'Badger Pay'} // Text on button
+        text={'Payment Total'} // Text at top of badge
+        showBrand={true} // Show link to badger website
+        showSatoshis={true} // Show BCH satoshi amount
+        successFn={() => console.log('Payment success callback')}
+        failFn={() => console.warn('Payment failed or cancelled callback')}
+      />
+
+      <BadgerButton
+        price={0.003}
+        currency={'USD'}
+        to={'bitcoincash:pp8skudq3x5hzw8ew7vzsw8tn4k8wxsqsv0lt0mf3g'}
+        text={'Badger Pay'}
+        showSatoshis={true}
+        border={true}
+        successFn={() => console.log('success example function called')}
+        failFn={() => console.log('fail example function called')}
+      />
+    </>
+  )
+}
+
+export default Example
+```
+
+### Creating Custom Badger Integrations
+
+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.
+
+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
+- `currency: string` - Default `USD` - [ISO Country Code](https://en.wikipedia.org/wiki/ISO_4217) to charge in
+
+And get the following props added to them for use in 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 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, price, currency, satoshiDisplay, 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>
+      </div>
+    )
+  }
+}
+
+// Wrap with BadgerBase higher order component
+export default BadgerBase(MyButton);
+```

src/pages/badger.js

@@ -37,17 +37,18 @@ const PreviewLayout = styled.div`
   grid-gap: ${spacing.medium};
   grid-template-columns: 1fr;
   ${media.medium`
-    grid-template-columns: repeat(auto-fit, minmax(400px, .5fr));
+    grid-template-columns: repeat(auto-fit, minmax(300px, .5fr));
   `};
 `
 
 const ItemLayout = styled.div`
   display: grid;
   grid-gap: ${spacing.tiny};
-  grid-auto-rows: min-content;
+  grid-auto-rows: max-content;
   grid-column: span 2;
   ${media.medium`
-    grid-column: 'span 2';
+    grid-column: span 1;
+    grid-template-rows: max-content max-content 1fr;
   `};
 `
 
@@ -60,16 +61,25 @@ const PreviewItem = ({ children, to }: ItemProps) => (
   <ItemLayout>
     {children}
     {to && (
-      <StyledLink to={to}>
-        <Button round>More</Button>
-      </StyledLink>
+      <div style={{ display: 'flex', alignItems: 'flex-end' }}>
+        <StyledLink to={to}>
+          <Button round>View</Button>
+        </StyledLink>
+      </div>
     )}
   </ItemLayout>
 )
 
 type Props = {
   location: Object,
-  data: { heroImage: any },
+  data: {
+    site: {
+      siteMetadata: {
+        title: string,
+      },
+    },
+    heroImage: any,
+  },
 }
 
 const BadgerPage = ({ location, data }: Props) => (
@@ -103,14 +113,21 @@ const BadgerPage = ({ location, data }: Props) => (
     </Hero>
     <Container>
       <PreviewLayout>
-        <PreviewItem>
+        <PreviewItem to="/badger/docs/getting-started">
           <H3>Badger SDK</H3>
           <Text>
             Badger Wallet injects an API into pages a user visits to allow apps
             to request a users's permission to send Bitcoin Cash, send tokens,
             or authenticate with CashID.
           </Text>
         </PreviewItem>
+        <PreviewItem to="/badger/docs/badger-components-react">
+          <H3>Badger React Components</H3>
+          <Text>
+            React based components and tools to make integrating Bitcoin Cash
+            (BCH) into your next project easy.
+          </Text>
+        </PreviewItem>
       </PreviewLayout>
     </Container>
   </DefaultLayout>

src/pages/develop.js

@@ -94,6 +94,12 @@ const DevelopPage = ({ location, data }: Props) => (
           text="BIP44 development wallet. Convert between cashaddr/legacy addresses. Create QR codes for WIF, XPub and XPrivs. Sign and verify messages."
           cta="View"
         />
+        <InfoCard
+          to="/faucets"
+          title="Faucets"
+          text="Testnet BCH and WHC for developers."
+          cta="View"
+        />
         <InfoCard
           title="Cloud"
           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) => (
           text="Paid downloads, streaming media, in-app purchases, tokens and more ways for you to monetize."
           disabledcta="Coming soon"
         />
-        <InfoCard
-          to="/faucets"
-          title="Faucets"
-          text="Testnet BCH and WHC for developers."
-          cta="View"
-        />
       </CardLayout>
     </Container>
   </DefaultLayout>

src/styles/spacing.js

@@ -1,7 +1,7 @@
 // @flow
 
 const spacing = {
-  tiny: '8px',
+  tiny: '6px',
   small: '12px',
   small2: '16px',
   medium: '24px',

src/utils/icon-helpers.js

@@ -31,6 +31,7 @@ import {
   FaTerminal,
   FaUserCircle,
   FaWallet,
+  FaReact,
 } from 'react-icons/fa'
 
 // Whitelist of valid icons
@@ -88,6 +89,8 @@ export const getIcon = (icon: string): React.Node => {
       return <FaDatabase />
     case 'user-circle':
       return <FaUserCircle />
+    case 'react':
+      return <FaReact />
     default:
       return <FaAngleRight />
   }