Installation
npm install @bity/react-exchange-client react react-dom
Usage
index.jsx:
import { createElement } from 'react';
import { render } from 'react-dom';
import ExchangeClient from '@bity/react-exchange-client';
const root = document.querySelector('#root');
render(<ExchangeClient
exchangeApiUrl="https://exchange.api.bity.com"
legacyV2ApiUrl="https://bity.com"
/>, root);
index.html:
<html>
<head>
<title></title>
<!-- Bity's base styles - without this, everything would look horrible. -->
<link rel="stylesheet" href="./node_modules/@bity/styles/index.css"/>
<!-- Yes, you read that right: preact. This react component is built on it, so we pull its built styles from there. -->
<link rel="stylesheet" href="./node_modules/@bity/preact-exchange-client/index.css"/>
</head>
<body>
<div id="root"></div>
<script src="./index.js"></script>
</body>
</html>
Prefilled information
To pass in prefilled information, all you need is to create an order object from @bity/models and pass it to the ExchangeClient component:
import { createElement } from 'react';
import { render } from 'react-dom';
import { Order } from '@bity/models';
import ExchangeClient from '@bity/react-exchange-client';
// Look at @bity/models for more details
const order = new Order();
order
.setContactEmail('me@example.org')
.setInput('ETH', 1)
.input
.setCryptoAddress('0xaebd912312841deaebe82939281');
const root = document.querySelector('#root');
render(<ExchangeClient order={order} />, root);
Restrict inputs to certain currencies
import { createElement } from 'react';
import { render } from 'react-dom';
import ExchangeClient from '@bity/react-exchange-client';
const root = document.querySelector('#root');
render(<ExchangeClient
restrictCurrenciesToReceive={['ETH']}
restrictCurrenciesToSend={['CHF']}
/>, root);