Links

Getting Started

The first steps in development are initializing the plugin, and defining the type of plugin through templates. At the bottom of the page, we will begin to follow a simple example
Make sure you run npm install in the /plugins directory in HollaEx Kit before any other steps.
To start the development process, you need to initialize the plugin template. This template includes the folder structure and some pre-defined configurations to facilitate the development experience.
Below is a list of available plugin templates:
Type
Template Details
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
onramp
adds an on-ramp section for the fiat controls feature
app
adds an app view to the apps section tables
server
adds a template without any view (Server-only)

Initializing the Plugin Template

  1. 1.
    Once you decide on the type of plugin, go to /plugins and run npm run add:plugin --plugin=<PLUGIN_NAME> --type=<PLUGIN_TYPE> to initialize the plugin template.
npm run add:plugin --plugin=<PLUGIN_NAME> --type=<PLUGIN_TYPE>
This will create a folder named the plugin's name in the /plugins folder.

Moving Forward - Plugin Components

In order to develop a plugin, we need to understand all the main components of a plugin. These main components of any HollaEx plugin will be looked at in the next sections.
  1. 4.
    Plugin JSON

Plugin Walkthrough - 'hello-exchange'

What We Are Going to Do

Over the next few pages, each of the pages' concepts will be illustrated with a simple example plugin hello-exchange.
What the hello-exchange plugin will allow is calling the endpoint GET /plugins/hello-exchange/info and receive the following response:
{
public_message: 'Hello Exchange!',
private_message: 'Hello exchange...',
library_message: 'Hello World NPM',
moment_timestamp: <ISO_STRING>
exchange_info: {...}
}
The elements of this output come from the following sources:
  • public_message: A value set in public_meta.
  • private_message: A value set in meta
  • library_message: The string produced by our third-party npm library.
  • moment_timestamp: Date ISO string produced by a default library (moment).
  • exchange_info: The exchange's basic information.
We will also be adding a new page to our exchange web_view that displays our custom client-side interface for hello-exchange.
In the next sections, we go through all the components in the plugin and gradually develop each component for our hello-exchange plugin step by step.
The full source code of hello-exchange can be found here.

First Step - Initializing 'hello-exchange'

Note that since there is already a hello-exchange plugin in HollaEx Kit by default, you must delete it to avoid clashes. It is found ashello-exchange in theplugins/src/plugins folder.
  1. 1.
    From the HollaEx root directory, in your terminal, access the plugins folder with cd plugin.
  2. 2.
    From the plugins folder, In order to initialize our hello-exchange plugin, simply run the following command in the plugins/ directory:
npm run add:plugin --plugin=hello-exchange --type=page
This command will create a hello-exchange folder in our plugins directory (plugins/srs/plugins/hello-exchange), and display us a success message in the terminal (see below).
Accessing the plugins folder, and initializing the hello-exchange plugin
The hello-exchange folder and its location