Getting started

Step 1: Clone the Hollaex plugin starter

Clone the Hollaex plugin starter package from the Github repository.

Step 2: Install dependencies.

npm install
cd web/ && npm install

Step 3: Choose the plugin type

Type
page	adds a new page with customizable access from the side and top menus
verification-tab	adds a new verification tab to the user verification page
fiat-wallet	adds a deposit and withdraw page for a fiat currency
kyc	adds KYC tab to the user verification page
bank	adds bank verification tab to the user verification page
raw	adds a template without initial meta object values

Step 4: Initialize the plugin template

1. Run npm run add-plugin --plugin=<PLUGIN_NAME> --type=<PLUGIN_TYPE> to initialize a plugin template.

Step 5: Disable CORS on your browser.

Step 6: Plugin interactive development mode

Once the plugin is initialized, run the following commands simultaneously:

• Run npm start --plugin=<PLUGIN_NAME> on the Hollaex plugin starter kit web dir.

• Run npm run dev:plugin --plugin=<PLUGIN_NAME> on the Hollaex kit web dir,

In order to see the plugin's changes, we need to refresh the page after every change.

Step 7: Using the kit context

We can always directly use props passed from the kit to the remote component. However, to prevent passing some props through many levels, a context is provided to make these props globally accessible. You can partially subscribe to the context to access props from the kit in a more efficient way.

import React from "react";
import { withKit } from 'components/KitContext';

const Title = ({ user: { username } = {}, strings: STRINGS, generateId }) => (
  <div className="secondary-text">
    {STRINGS.formatString(STRINGS[generateId('hello')], username)}
  </div>
);

const mapContextToProps = ({ user, generateId, strings }) => (
{user, generateId, strings}
);

export default withKit(mapContextToProps)(Title);

Step 8: Using strings and icons

We can use strings and icons from the main kit.

We also can define new strings and icons by adding them to strings.json and icons.json under the assets folder respectively.

These values are added to the kit strings and icons object during kit initialization. To use local assets in your component, you should convert the local id to the global one by using the generateId function from the kit context.

Consider we have the following strings.json file.

{
  "en": {
    "title": "Hello exchange"
  }
}

To use the title string, we need to make the string key global using the generateId function. This function is globally accessible in the kit context.

const globalTitleId = generateId('title');

Then we can get the string from the global strings object using the above-mentioned global id. The global strings object is also available in the kit context.

const titleString = STRINGS[globalTitleId];