Getting started
Step 1: Clone the Hollaex plugin starter
Step 2: Install dependencies.
1
npm install
2
cd web/ && npm install
Copied!
Step 3: Choose the plugin type
Type
Text
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.
1
import React from "react";
2
import { withKit } from 'components/KitContext';
3
4
const Title = ({ user: { username } = {}, strings: STRINGS, generateId }) => (
5
<div className="secondary-text">
6
{STRINGS.formatString(STRINGS[generateId('hello')], username)}
7
</div>
8
);
9
10
const mapContextToProps = ({ user, generateId, strings }) => (
11
{user, generateId, strings}
12
);
13
14
export default withKit(mapContextToProps)(Title);
Copied!
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.
1
{
2
"en": {
3
"title": "Hello exchange"
4
}
5
}
Copied!
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.1
const globalTitleId = generateId('title');
Copied!
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.
1
const titleString = STRINGS[globalTitleId];
Copied!
Last modified 6mo ago