Web View
Here we are going to improve the hello-exchange view to display the exchange information.
In order to see the plugin's changes, we need to refresh the page after every change.
Make sure you have disabled CORS on your browser.
We are going to update the
path
for the hello-exchange page inside the view.json file. After updating the path you will be able to see the page under localhost:3000/hello-exchange
{
"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
}
}
}
Update the strings.json file under the assets folder so it looks like the following:
{
"en": {
"title": "Hello exchange",
"hello": "Hello {0}"
}
}
Update Form.js component under the view folder. This will send a request to the endpoint that we have created and display exchange information to the user.
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
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);
Last modified 11d ago