⚙️ Dashboard

Web View

For the user the plugin isn't useful if they can't see much, this page discusses how we create the front-end of the plugin

Web views are remote React components and are injected into the kit on the fly. HollaEx uses a package called remote component to get a component by providing the URL of the commonJS module bundle. These components are added to the kit using the SmartTarget component in the Hollaex web kit.

SmartTarget Component

To decide where to inject remote components, we are using the SmartTarget component in the kit.

A SmartTarget is actually a React component with a unique target id that renders a remote bundle when the id matches.

Smart targets are also responsible for passing props to the remote components. These props are divided into two different categories: common props and target-specific props.

Common Props

Common props are passed to all remote components within the smart target component. They include but are not limited to strings, icons, generateId function, renderFields function to generate forms, store values, edit and config context. You can always check the latest available common props for remote components by checking the SmartTarget component code.

Target Specific Props

Target-specific props are passed to the smart target component from its parent component and may be different for each target. To get the latest available target-specific props, you can check the parent component of each SmartTarget component. We can use these props using the kit context. See the kit context section for more details.

View types

There are two types of views in terms of the target field, static target view and dynamic target view.

Static Targets

Static targets are hard-coded in the Hollaex web kit and views are injected based on these targets. See the web_view array section for more information.

  • Verification Page Bank Tab

    • REMOTE_COMPONENT__BANK_VERIFICATION

    • REMOTE_COMPONENT__BANK_VERIFICATION_HOME

  • Verification Page KYC Tab

    • REMOTE_COMPONENT__KYC_VERIFICATION

    • REMOTE_COMPONENT__KYC_VERIFICATION_HOME

Dynamic Targets

Dynamic targets are generated on the Hollaex web kit before the injection. They are created based on the meta object values.

  • New Page

  • New verification tab

  • Fiat wallet deposit and withdrawal page

Web_view array

Web_view is an array of objects. Each object in the web_view array corresponds to a view of the plugin. The basic view structure is in the form of a JSON object.

{
    src: "string",
    target: "string",
    meta: "object",
    is_default: "bool",
    injected_html: {
        head: "string",
        body: "string"
    }
}

Let's go over each key in this JSON object.

Src

The src is the address of the view bundle file.

Target

Target is the id of the view in static target views. The target is used to inject the view into the corresponding SmartTarget.

Is_default

The is_default value specifies if a view is the default view.

Injected_html

Holds HTML strings for the head and the body. These values will be injected into the DOM. This field can be used to add script tags.

Meta

The meta object holds strings, icons, and some essential fields to define each plugin type for dynamic target views.

Meta Object

Below you can see essential fields to define each dynamic plugin type. These values should be added to the meta object under the view.json file to define the type of the plugin. These valuse are already set when you are using plugin starter templates.

New page:

{
    "meta": {
        "is_page": true,
        "path": "/route-name"
    }
}

New verification tab:

{
    "meta": {
        "is_verification_tab": true,
        "type": "home" or "verification",
    }
}

Fiat Wallet

{
    "meta": {
        "is_wallet": true,
        "type": "deposit" or "withdraw",
        "currency": "USD" /* currency symbol /*
     }
}

External Dependancies

The plugin web view bundle is self-contained with all of its dependencies bundled with the webpack. In order to optimize the bundle size, the following dependencies are provided as externals. These dependencies will not be included in the bundle. The web kit is expected to provide these dependencies.

Web views are remote react components and are injected into the kit on the fly. We are using a package called remote component to get a component by providing the URL of the commonJS module bundle. These components are added to the kit using the SmartTarget component in the Hollaex web kit.

SmartTarget component

To decide where to inject remote components, we are using the SmartTarget component in the kit.

A SmartTarget is actually a react component with a unique target id that renders a remote bundle when the id matches.

Smart targets are also responsible for passing props to the remote components. These props are divided into two different categories: common props and target-specific props.

Common props

Common props are passed to all remote components within the smart target component. They include but are not limited to strings, icons, generateId function, renderFields function to generate forms, store values, edit and config context. You can always check the latest available common props for remote components by checking the SmartTarget component code.

Target specific props

Target-specific props are passed to the smart target component from its parent component and may be different for each target. To get the latest available target-specific props, you can check the parent component of each SmartTarget component. We can use these props using the kit context. See the kit context section for more details.

View types

There are two types of views in terms of the target field, static target view and dynamic target view.

Static Targets

Static targets are hard-coded in the Hollaex web kit and views are injected based on these targets. See the web_view array section for more information.

  • Verification Page Bank Tab

    • REMOTE_COMPONENT__BANK_VERIFICATION

    • REMOTE_COMPONENT__BANK_VERIFICATION_HOME

  • Verification Page KYC Tab

    • REMOTE_COMPONENT__KYC_VERIFICATION

    • REMOTE_COMPONENT__KYC_VERIFICATION_HOME

Dynamic Targets

Dynamic targets are generated on the Hollaex web kit before the injection. They are created based on the meta object values.

  • New Page

  • New verification tab

  • Fiat wallet deposit and withdrawal page

  • Onramp section

  • App section

Web_view array

Web_view is an array of objects. Each object in the web_view array corresponds to a view of the plugin. The basic view structure is in the form of a JSON object.

{
    src: "string",
    target: "string",
    meta: "object",
    is_default: "bool",
    injected_html: {
        head: "string",
        body: "string"
    }
}

Let's go over each key in this JSON object.

Src

The src is the address of the view bundle file.

Target

Target is the id of the view in static target views. The target is used to inject the view into the corresponding SmartTarget.

Is_default

The is_default value specifies if a view is the default view.

Injected_html

Holds HTML strings for the head and the body. These values will be injected into the DOM. This field can be used to add script tags.

Meta

The meta object holds strings, icons, and some essential fields to determine each plugin type for dynamic target views.

Meta Object

Below you can see essential fields to define each dynamic plugin type. These values should be added to the meta object under the view.json file to determine the type of the plugin. These values are already set when you are using plugin starter templates.

New page:

{
    "meta": {
        "is_page": true,
        "path": "/route-name"
    }
}

New verification tab:

{
    "meta": {
        "is_verification_tab": true,
        "type": "home" or "verification",
    }
}

Fiat Wallet

{
    "meta": {
        "is_wallet": true,
        "type": "deposit" or "withdraw",
        "currency": "USD" /* currency symbol /*
     }
}

Onramp

{
    "meta": {
        "is_ultimate_fiat": true,
        "type": "onramp"
     }
}

App

{
    "meta": {
        "is_app": "true",
        "type": "kit" or "admin",
     }
}

External dependencies

The plugin web view bundle is self-contained, with all its dependencies bundled with the webpack. In order to optimize the bundle size, the following dependencies are provided as externals. These dependencies will not be included in the bundle. The web kit is expected to provide these dependencies.

Developing views

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);

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];

PreviousPlugin LibrariesNextFinal Plugin Product

Last updated