Overview

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.

• New Page

• Fiat Wallet

  • Deposit

  • Withdraw

• New Verification Tab

  • Home

  • Page Content

• Bank Verification Tab

  • Home

  • Page Content

• KYC Verification Tab

  • Home

  • Page Content

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 /*
     }
}