README

@bity/preact-exchange-client

A user interface to interact with the Bity Exchange API.

Installation

npm install @bity/preact-exchange-client preact@8 @bity/styles @bity/api

Deploy as an interfacing service

It is possible to deploy the component as an interfacing service. node serve.js starts a very simple web server which reads a configuration file from /etc/bity-preact-exchange-client/config.js. This configuration file is the configuration object which is used by the component. This path is currently not configurable.

There is a pre-configured example-interfacing-service.config.js which changes can be made to. It is commented explaining what the fields mean.

Be sure to place the component under the same domain as where you will integrate it. Because of web security policies, authentication will not work if you don't.

For example, if there is a web dashboard which is available on https://my.bity.com, the interfacing service should be hosted under it, for example: https://my.bity.com/exchange-client .

Again, do not under any circumstance host it any other way. Hosting it on its own sub-domain will cause authentication issues.

Usage

index.jsx:

import { h, render } from 'preact';
import ExchangeClient from '@bity/preact-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/api/models and pass it to the ExchangeClient component:

import { h, render } from 'preact';
import { Order } from '@bity/api/models';
import ExchangeClient from '@bity/preact-exchange-client';

// Look at @bity/api/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

Some companies only choose to support certain currencies for various reasons. To restrict the type of currencies a user can send and receive, the following properties can be passed (examples):

restrictCurrenciesToSend={['CHF']}
restrictCurrenciesToReceive={['ETH']}

This will restrict trading to the single pair CHF → ETH.

Bity dashboard URL

Specify the dashboard URL to navigate to. This will display a "dashboard" button.

bityDashboardUrl="https://my.bity.com"

Configuring to ask user for login

Depending on the context, sometimes it's not necessary to ask the user to chose if they want to login as a Bity user or a guest. In order to determine this, you can pass a function which returns true or false.

shouldAskForLogin={(): boolean => { /* true or false */ }}

Events

Below are a list of events which can be hooked into.

onOrderCreated={(order: Order): void => { /* ... */ }}
onOrderCreationFailure={(errors: { message: string }[]): void => { /* ... */ }}

Usage no npm install needed!