Web View

Moving from the back-end to the front now, let's work on actually seeing our plugin in action

The web view involves a few parts, here we will look at getting just our plugin working, but for the (very) detailed breakdown of how the front-end of plugins works and all the components that are utilized, check the 'Advanced/Web View' page.

Disabling CORS

The first step we need to sort out is to disable CORs in the browser otherwise your web client does not communicate with the server.

At this point, Google Chrome is recommended. To disable CORS we have two choices:

1. Run the following in your terminal to open Chrome with CORS disabled:

   google-chrome --user-data-dir="~/chrome-dev-disabled-security" --disable-web-security --disable-site-isolation-trials

2. For an easier solution, install the following extension which can be used to disable CORs with ease: https://webextension.org/listing/access-control.html

With this done let's get started on developing the web view!

Updating the Files

Now we are going to edit three files that are already inside the plugin (they have created automatically when we created the plugin initially). These files are:

1. views.json inside the plugins/hello-plugin/views/view directory.

2. Form.js in the same directory (plugins/hello-plugin/views/view).

3. strings.json inside the plugins/hello-plugin/assets directory.

views.js

views.js only requires a single line to be changed, from its current placeholder value. The path is what needs to be changed to the hello plugin, like in the code below.

views.js

{
  "meta": {
    "is_page": true,
    "path": "/hello-plugin",
    "hide_from_appbar": true,
    "hide_from_sidebar": false,
    "hide_from_menulist": false,
    "string": {
      "id": "title",
      "is_global": false
    },
    "icon": {
      "id": "SIDEBAR_HELP",
      "is_global": true
    }
  }
}

Form.js

This will send a request to the endpoint that we have created and display exchange information to the user. Copy and paste the code in the block below.

Form.js

Form.js

import React, { useEffect, useState } from 'react';
import { IconTitle, PanelInformationRow } from 'hollaex-web-lib';
import { withKit } from 'components/KitContext';
import Title from 'components/Title';
import axios from 'axios';

const Form = ({
  strings: STRINGS,
  icons: ICONS,
  generateId,
  plugin_url: PLUGIN_URL
}) => {

  const [info, setInfo] = useState();

  useEffect(() => {
    axios.get(`${PLUGIN_URL}/plugins/hello-plugin/info`).then(({ data: { exchange_info = {} }}) => {
      setInfo(exchange_info);
    })
  }, [])

  return (
    <div className="presentation_container apply_rtl verification_container">
      <IconTitle
        stringId={generateId('title')}
        text={STRINGS[generateId('title')]}
        textType="title"
        iconPath={ICONS['SIDEBAR_HELP']}
      />
      <form className="d-flex flex-column w-100 verification_content-form-wrapper">
        <div className="verification-form-panel mt-3 mb-5">
          <div className="my-4 py-4">
            <Title />
            <div className="py-4">
              {info ? Object.entries(info).map(([key, value]) => (
                <PanelInformationRow
                  key={key}
                  label={key}
                  information={value}
                  className="title-font"
                  disable
                />
              )) : (
                <div className="pt-4">Loading ...</div>
              )}
            </div>
          </div>
        </div>
      </form>
    </div>
  )
}

const mapContextToProps = ({ strings, activeLanguage, icons, generateId, plugin_url }) => ({
  strings,
  activeLanguage,
  icons,
  generateId,
  plugin_url
});

export default withKit(mapContextToProps)(Form);

strings.js

Finally, update the title and content in the strings.json file, from its default to what's in the code block below:

{
  "en": {
    "title": "Hello exchange",
    "hello": "Hello {0}"
  }
}

Compiling and Starting the Plugin

With the above changes, we can now actually take a look at the plugin on the page!

First up we will need to run the plugin. As always make sure you are in dev-mode and have docker-compose up and running in a terminal

In another terminal, navigate to the hollaex-kit/plugins folder, and run the following:

npm start --plugin=hello-plugin

If you receive the following error: sh: 1: concurrently: not found, this simply means the concurrently package isn't installed. Simply run npm start --plugin=hello-plugin inside the plugins folder, let it run, and then try the npm start command again.

This will begin the process and may take a little while but once you see the green 'Compiled Successfully!' message, we can move on to actually seeing the plugin!

Green = Good

Seeing the Plugin

Now for the moment of truth. Once the plugin has been compiled successfully, the browser may open to localhost:3000 automatically. If not automatically navigate to it yourself:

http://localhost:3000/localhost

If everything has worked thus far, you should see a landing screen like the one below. This is our development-ready exchange!

You will need to make an account to access it, so do this and then log in.

Upon entering the exchange, you may notice something new on the sidebar (also in the screenshots, the exchange I set up was for the testnet and so looks a little different from the conventional HollaEx main screen).

See if you can spot what we are looking for 👀

In the sidebar, we now have a new option 'Hello plugin' which is unsurprisingly the 'Hello Plugin' that we have been developing for the last few pages! Click on it and we will see the results of all our hard work.

Now it main not be the most exciting page in the world, but hopefully, this goes to show the foundation of plugin development and is the first stepping stone that will get you going toward more exciting and unique plugin ideas!