Basic Tutorial: Hello Exchange Plugin web view
We will go over how to develop a web view for the hello-exchange plugin. After developing this web view, we will see a new page that displays some of the exchange information.
Run the following commands to initialize the plugin web view:
cd web/
npm run add-plugin --plugin=hello-exchange --type=page
Run the following commands to build the initial plugin with a default view and install the plugin.
cd ..
npm run build --plugin=hello-exchange
The web view JSON file and bundles are served on the localhost port 8080. In order to allow the kit to access them in plugin development mode, we need to disable the CORS issue on the browser. This can be achieved by using a browser extension.
To start using plugin interactive development mode, we need to run the commands of steps 5 and 6 simultaneously.
Run the following command on the plugin starter kit web directory:
npm start --plugin=hello-exchange
Run the following command on the Hollaex kit web directory:
npm run dev:plugin --plugin=hello-exchange
In order to see the plugin's changes, we need to refresh the page after every change.
{
"meta": {
"is_page": true,
"path": "/hello-exchange",
"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
}
}
}
{
"en": {
"title": "Hello exchange",
"hello": "Hello {0}"
}
}
touch src/plugins/hello-exchange/views/view/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-exchange/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
label={key}
information={String(value)}
className="title-font"
disable
/>
))}
</div>
</div>
</div>
</form>
</div>
)
}
const mapContextToProps = ({ strings, activeLanguage, icons, generateId, plugin_url }) => ({
strings,
activeLanguage,
icons,
generateId,
plugin_url
});
export default withKit(mapContextToProps)(Form);
Uninstall the initial plugin. Then run the following commands to build the plugin again. Then install the plugin json file on the kit.
cd ..
npm run build --plugin=hello-exchange
Last modified 1yr ago