react-carbon-fiber

Fiber carbon widget made available as a react component. Easily add a CUSD on/off ramp to your site or application.

Install

npm install react-carbon-fiber --save

Example Usage

import React, { Component } from 'react'
import CarbonFiber from 'react-carbon-fiber'
 
class YourApp extends Component {
  render() {
    return (
      <div>
        This is my App!
        <CarbonFiber
          apikey="CARBON_FIBER_PUBLIC_KEY"
          clientName="Your app name"
          env="production" />
      </div>
    )
  }
}
export default App

Props

apikey (required)

Your applications API key. You can get your key by visiting https://fiber.carbon.money/.

env (required)

This will be either 'sandbox' or 'production'.

defaultWallet

The wallets you would like displayed, options are "METAMASK", "SCATTER", "LYNX", "TRON". If you would like more than one specify as comma separated string ex: "METAMASK, SCATTER".

clientName

Your application's name.

widgetWidth

We allow you to customize the width of your widget. Acceptable width values range from 300px-1000px. Default width is 380px.

widgetHeight

We allow you to customize the height of your widget. The minimum height is 500px. Default height is 520px.

displayAsDialog

If you'd like to display Carbon Fiber as a button that opens up to a modal, set this prop to true.

dialogButtonSize

If you've set displayAsDialog to true, you can choose the size of the button shown between 'sm', and 'lg'. Default is 'sm'.

displayMinimized

If you'd like to display Carbon Fiber as a collapsible tab, set this prop to true.

styles

If you'd like to customize the colors used in the widget to better blend with your app, we allow you to change the color of the blue headings, the blue section headers, and the primary (purple) and seconday (red) buttons. You can specify one or all of the following:

  {
    headings: 'COLOR_AS_STRING',
    sectionHeader: 'COLOR_AS_STRING',
    primary: {
      background: 'COLOR_AS_STRING',
      color: 'COLOR_AS_STRING'
    },
    secondary: {
      background: 'COLOR_AS_STRING',
      color: 'COLOR_AS_STRING'
    }
  }

What is CUSD?

Not familiar with CUSD? CarbonUSD is a price-stable cryptocurrency that is one-to-one backed with USD. Learn more about us at https://www.carbon.money/.