# Getting started

## Step 1: Clone the Hollaex plugin starter

Clone the [Hollaex plugin starter](https://github.com/bitholla/hollaex-plugin-starter) package from the Github repository.

## Step 2: Install dependencies.

```bash
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. <br>
* Run `npm run dev:plugin --plugin=<PLUGIN_NAME>` on the Hollaex kit web dir,

{% hint style="info" %}
In order to see the plugin's changes, we need to refresh the page after every change.
{% endhint %}

## 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.

```jsx
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.

```json
{
  "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.

```javascript
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.

```javascript
const titleString = STRINGS[globalTitleId];
```