Getting started
npm install
cd web/ && npm install
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 |
- 1.Run
npm run add-plugin --plugin=<PLUGIN_NAME> --type=<PLUGIN_TYPE>
to initialize a plugin template.
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.
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);
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];
Last modified 1yr ago