diff --git a/README.md b/README.md
index 864a6e1..7b00d87 100644
--- a/README.md
+++ b/README.md
@@ -1,12 +1,12 @@
-# DFOhub
+# Interfaces-Framework
-This project is a scaffold of a React app that leverages the Ethereum blockchain.
+This project is a scaffold of various react apps and plugins that leverage the Ethereum blockchain.
## How to install this project?
1. Clone it from the repository
2. `cd` into the project folder
-3. `npm install`
+3. `npm i`
## What is the project structure?
@@ -23,30 +23,29 @@ They are:
## How to build the application?
-From the root project folder, execute:
+Build all the packages executing from the root:
-```shell script
-npx lerna run build
```
-
-to build all the packages.
+npm run build
+```
## How to run the application?
-As a prerequisite, you need to install the [MetaMask Plugin](https://metamask.io/download.html) for your preferred browser.
+**If you're starting the app for the first time, you need first to build it with `npm run build` before starting any package in the monorepo, otherwise you'll get errors.**
-Then go to the `packages/app` folder and execute:
+As a prerequisite, you need to install the [MetaMask Plugin](https://metamask.io/download.html) for your preferred browser.
+Then go to the `packages/app`, for the DFOhub app for example, and execute:
-```shell script
-npm run start
+```
+npm start
```
## How to reinstall the project from scratch?
If you're experiencing unexpected behaviour in the installed packages, you can reinstall everything from scratch with the following commands from the root project folder:
-```shell script
-npx lerna clean
+```
+npm run clean
rm -rf node_modules
rm package-lock.json
npm i
@@ -54,15 +53,15 @@ npm i
## Deploy
-Deployment is done automatically with github actions when something is pushed on `main` (configured [here](https://github.com/b-u-i-d-l/js-framework/blob/main/.github/workflows/build-and-deploy.yml#L6)).
-The build is done autmoatically by the CI and the content of the `build` folder is pushed to the `gh-pages` branch ([here](https://github.com/b-u-i-d-l/js-framework/blob/main/.github/workflows/build-and-deploy.yml#L26))
+Deployment is done automatically with Github actions when something is pushed on `main` (configured [here](https://github.com/b-u-i-d-l/js-framework/blob/main/.github/workflows/build-and-deploy.yml#L6)).
+The build is done automatically by the CI, and the content of the `build` folder is pushed to the `gh-pages` branch ([here](https://github.com/b-u-i-d-l/js-framework/blob/main/.github/workflows/build-and-deploy.yml#L26))
-**NOTE**: if the github page is a under relative path (e.g. a project page), `homepage` must be set on `package.json` of `app`, otherwise the static content will be loaded using the wrong path. see: https://create-react-app.dev/docs/deployment/#building-for-relative-paths
+**NOTE**: if the Github page is under relative path (e.g. a project page), `homepage` must be set on `package.json` of `app`, otherwise the static content will be loaded using the wrong path. see: https://create-react-app.dev/docs/deployment/#building-for-relative-paths
## Development
-`development` is the development branch. Everything merged in `main` will be deployed automatically (this can be changed and a specific branch that trigger the deployment can be ued instead, see above). So every PR will be done against `development` and, after been reviewed, merged in `main` and deployed automatically
+`development` is the development branch. Everything merged in `main` will be deployed automatically (this can be changed and a specific branch that triggers the deployment can be used instead, see above). So every PR will be done against `development` and, after been reviewed, merged in `main` and deployed automatically
### Commits
-Commits are linted automatically using [Commitlint](https://commitlint.js.org/) which check if your commit messages meet the [conventional commit format)[https://www.conventionalcommits.org/en/v1.0.0/]
+Commits are linted automatically using [Commitlint](https://commitlint.js.org/) that checks if your commit messages meet the [conventional commit format)[https://www.conventionalcommits.org/en/v1.0.0/]
diff --git a/docs/.nojekyll b/docs/.nojekyll
deleted file mode 100644
index e69de29..0000000
diff --git a/docs/README.md b/docs/README.md
deleted file mode 100644
index 293cdca..0000000
--- a/docs/README.md
+++ /dev/null
@@ -1,68 +0,0 @@
-# DFOhub
-
-This project is a scaffold of a React app that leverages the Ethereum blockchain.
-
-## How to install this project?
-
-1. Clone it from the repository
-2. `cd` into the project folder
-3. `npm install`
-
-## What is the project structure?
-
-The project is a monorepo based on [lerna](https://lerna.js.org/).
-
-All the packages contained in this monorepo are inside the `packages` folder.
-They are:
-
-- [app](#): the actual React application
-- [core](core): the core logic which allows injecting plugins and other external functionalities in the app.
-- [design-system](design): the base component library used inside the app
-- [components](components): a widget library used inside the app
-- [sample-plugin](plugins): an example of a plugin which add some pages to the app
-
-## How to build the application?
-
-From the root project folder, execute:
-
-```shell script
-npx lerna run build
-```
-
-to build all the packages.
-
-## How to run the application?
-
-As a prerequisite, you need to install the [MetaMask Plugin](https://metamask.io/download.html) for your preferred browser.
-
-Then go to the `packages/app` folder and execute:
-
-```shell script
-npm run start
-```
-
-## How to reinstall the project from scratch?
-
-If you're experiencing unexpected behaviour in the installed packages, you can reinstall everything from scratch with the following commands from the root project folder:
-
-```shell script
-npx lerna clean
-rm -rf node_modules
-rm package-lock.json
-npm i
-```
-
-## Deploy
-
-Deployment is done automatically with github actions when something is pushed on `main` (configured [here](https://github.com/b-u-i-d-l/js-framework/blob/main/.github/workflows/build-and-deploy.yml#L6)).
-The build is done autmoatically by the CI and the content of the `build` folder is pushed to the `gh-pages` branch ([here](https://github.com/b-u-i-d-l/js-framework/blob/main/.github/workflows/build-and-deploy.yml#L26))
-
-**NOTE**: if the github page is a under relative path (e.g. a project page), `homepage` must be set on `package.json` of `app`, otherwise the static content will be loaded using the wrong path. see: https://create-react-app.dev/docs/deployment/#building-for-relative-paths
-
-## Development
-
-`development` is the development branch. Everything merged in `main` will be deployed automatically (this can be changed and a specific branch that trigger the deployment can be ued instead, see above). So every PR will be done against `development` and, after been reviewed, merged in `main` and deployed automatically
-
-### Commits
-
-Commits are linted automatically using [Commitlint](https://commitlint.js.org/) which check if your commit messages meet the [conventional commit format)[https://www.conventionalcommits.org/en/v1.0.0/]
diff --git a/docs/_coverpage.md b/docs/_coverpage.md
deleted file mode 100644
index 3f70e81..0000000
--- a/docs/_coverpage.md
+++ /dev/null
@@ -1,17 +0,0 @@
-
-
-
-
-# Create EthOS app
-
-> Welcome to the new Ethereum order
-
-A magical ✨ documentation for creating your first EthOS app.
-
-
-[Get Started](#dfohub)
-
-
-
-
\ No newline at end of file
diff --git a/docs/_sidebar.md b/docs/_sidebar.md
deleted file mode 100644
index 794c1e8..0000000
--- a/docs/_sidebar.md
+++ /dev/null
@@ -1,15 +0,0 @@
-
-
-
-
-* [Create Ethos app](cea.md)
- * [0. Cleanup and install](#_0-cleanup-and-install-the-core-module)
- * [1. Add the context](#_1-context-load-and-app-initialization)
- * [2. Add plugins system](#_2-integrate-the-plugin-system)
- * [3. Add routes](#_3-add-the-router)
- * [4. Add the design system](#_4-install-the-design-system-module)
-* [Core](core.md)
-* [Plugins system](plugins.md)
-* [Design system](design.md)
- * [Global style variables](#basic-global-style-variables)
- * [Typography style variables](#typography-global-style-variables)
\ No newline at end of file
diff --git a/docs/cea.md b/docs/cea.md
deleted file mode 100644
index 4e30b8d..0000000
--- a/docs/cea.md
+++ /dev/null
@@ -1,334 +0,0 @@
-# Create Ethos App
-
-This section describes the steps to create a new app from scratch starting from an application generated by `create react app`.
-
-The example create an app called `ethos-sample`
-
-## Create a new app
-
-Create a new app using Create react app:
-
-```js
- npx create-react-app ethos-sample
-```
-
-Start the app
-
-```js
- npm start
-```
-
-## 0 - Cleanup and install the `core` module
-
-First of all add the `core` module
-
-```js
- npm i --save @ethereansos/interfaces-core
-```
-
-and clean up the App.js file:
-
-```js
-
Sample test
-```
-
-You can find more about the `core` module [here](/core).
-
-## 1 - Context load and app initialization
-
-Every app requires a `context` file that defines properties, contracts, etc.
-This file is not part of the app and should be loaded dynamically at bootstrap time.
-
-```json
-// A sample of the context.json
-{
- "ethereumNetwork": {
- "1": "",
- "3": "Ropsten"
- },
- "dappVersion": "BETA 0.3",
- "etherscanURL": "https://etherscan.io/",
- "etherscanURLRopsten": "https://ropsten.etherscan.io/",
- "uniSwapInfoURL": "https://uniswap.info/token/",
- "uniSwapSwapURLTemplate": "https://app.uniswap.org/#/swap?inputCurrency={0}&outputCurrency={1}",
- "penSwapSwapURLTemplate": "https://penguinswap.eth.link/#/swap?inputCurrency={0}&outputCurrency={1}",
- "uniSwapPoolURLTemplate": "https://app.uniswap.org/#/pool?inputCurrency={0}&outputCurrency={1}",
- ...
- "oneTimeProposalTemplate": [
- "contract DFOHubGeneratedProposal {",
- "",
- " string private _metadataLink;",
- "",
- " constructor(string memory metadataLink) {",
- " _metadataLink = metadataLink;",
- " }",
- "",
- " function getMetadataLink() public view returns(string memory) {",
- " return _metadataLink;",
- " }",
- "",
- " function callOneTime(address proposal) public {",
- "function_body",
- " }",
- "}"
- ]
-}
-```
-
-### InitContextProvider
-
-To load and share in the app the `context` it's required to add to the app the `InitContextProvider`.
-
-```js
-import { InitContextProvider } from '@ethereansos/interfaces-core'
-
-function App() {
- return (
-
-
Hello world!
-
- )
-}
-```
-
-The provider requires a `initMethod` props to do the initialization.
-The props expect an async function that inject the `setReady` and the `setValue` method to allow the finalization of the `context` loading.
-
-```js
- {
- try {
- // Fetch the context
- const response = await fetch(
- `${process.env.PUBLIC_URL}/data/context.json`
- )
- const context = await response.json()
-
- // Set the value of the context
- setValue('context', context)
-
- // Set the initialization ready
- setReady()
- } catch (e) {
- // Set the error
- setError('Context not loaded')
- }
- }}>
-
Hello world!
-
-```
-
-Duting the application initialization the component shows the content of the `Loading` property and if it fails shows the `Error` property content.
-
-```js
- {
- // Fetch the context
- ...
- }}
- Loading={() =>
Loading..
}
- Error={({ error }) =>
Error..{error}
}
- >
-
Hello world!
-
-```
-
-### useEthosContext
-
-The `context` is exposed to the app with the hook `useEthosContext`
-
-Create a ContextViewer component
-
-```js
-const ContextViewer = () => {
- const context = useEthosContext()
- return
{JSON.stringify(context, null, 2)}
-}
-```
-
-Add the component to the app
-
-```js
- {
- // Fetch the context
- ...
- }}
- Loading={() =>
Loading..
}
- Error={({ error }) =>
Error..{error}
}
- >
-
Hello world!
-
-
-```
-
-## 2 - Integrate the plugin system
-
-Before starting to configure our plugins, let's import the `PluginsContextProvider` from the `@ethereansos/interfaces-core` module in `App.js`, and create your `plugins.js` file in the root folder and wrap your app.
-
-```js
- import { PluginsContextProvider } from '@ethereansos/interfaces-core'
- import appPlugin from './plugins'
-
-
-
-
Hello world!
-
-
-```
-
-The basic configuration of our `plugin.js` file, is:
-
-```js
- const initPlugin = () => {
- ...
- }
- const pluginDefinition = {
- name: 'your-plugin-name',
- init: initPlugin,
- }
- export default pluginDefinition
-```
-
-There are severals functions exposed from the `plugins` system.
-You can find more about the `plugins` module [here](/plugins).
-
-For the purpose of this tutorial, let's use `addElement()` to add the routes and the app props to for the navigation.
-
-```js
-import ExamplePage from './pages/ExamplePage'
-
-const initPlugin = ({ addElement }) => {
- addElement('router', {
- index: 10,
- path: '/example',
- Component: ExamplePage,
- exact: true,
- requireConnection: false,
- templateProps: {
- menuName: 'appMenu',
- },
- })
-
- addElement('appMenu', {
- name: 'example',
- label: 'Example',
- link: '/example',
- index: 10,
- })
-}
-```
-
-In this way, your app will expose the routes and custom menu props based on your elements added in the plugins.
-
-## 3 - Add the router
-
-Before starting to configure our router, let's create a `router.js` file in the root filder, and import the `usePlaceholder` from the `@ethereansos/interfaces-core` module.
-Be sure that `react-router-dom` is installed also as dependency in the project.
-
-```js
- npm i --save react-router-dom
-```
-
-```js
-import React, { useMemo } from 'react'
-import { Switch, Route } from 'react-router-dom'
-import { usePlaceholder } from '@ethereansos/interfaces-core'
-import Connect from './components/Connect'
-import MainTemplate from './components/MainTemplate'
-
-const NoMatch = () =>
No Match
-
-const AppRouter = () => {
- const routes = usePlaceholder('router')
-
- const memoedRoutes = useMemo(() => {
- return routes.map(
- ({ path, exact, Component, requireConnection, templateProps }) => {
- return (
-
- {requireConnection ? (
-
-
-
- ) : (
-
- )}
-
- )
- }
- )
- }, [routes])
-
- return (
-
- {memoedRoutes}
-
-
-
-
- )
-}
-
-export default AppRouter
-```
-
-And then import your `` in your `App.js`.
-
-```js
- import { HashRouter } from 'react-router-dom'
- import AppRouter from './router'
-
-
-
-
-
-
-
-
-```
-
-Et voilà, the app now has dynamic routes, based on your plugins file, and exposes the menu props where you can build your navigation component.
-
-## 4 - Install the `design-system` module
-
-First of all add the `design-system` module
-
-```js
- npm i --save @dfohub/design-system
-```
-
-Be sure you create and import `typography.css` and `app.css` in your global `App.js`.
-You can find more about the `design-system` module and the global style variables [here](/design).
-
-There are plenty of components to reuse in your application, but in this case we will import our basic `` one.
-
-Let's create an `` component and let's use the previous `appMenu` props exposed from the `plugins` system to map the links.
-
-```js
-import React from 'react'
-import { Link, useLocation } from 'react-router-dom'
-import { usePlaceholder } from '@ethereansos/interfaces-core'
-import { Typography } from '@dfohub/design-system'
-
-function Navigation({ menuName }) {
- const menuItems = usePlaceholder(menuName)
- const location = useLocation()
-
- const navItem = (item) => {
- return (
-
-
- {item.label}
-
-
- )
- }
-
- return
-}
-
-export default Navigation
-```
-
-You will see the navigation links based on your `plugins.js` configuration working smoothly.
diff --git a/docs/core.md b/docs/core.md
deleted file mode 100644
index 30404ce..0000000
--- a/docs/core.md
+++ /dev/null
@@ -1 +0,0 @@
-TODO
\ No newline at end of file
diff --git a/docs/createNewApp.md b/docs/createNewApp.md
deleted file mode 100644
index d649054..0000000
--- a/docs/createNewApp.md
+++ /dev/null
@@ -1,163 +0,0 @@
-# Create a new app
-
-This section describes the steps to create a new app from scratch starting from an application generated by `create react app`.
-
-The example create an app called `ethos-sample`
-
-## Create a new app
-
-Create a new app using Crate react app:
-
-```js
-npx create-react-app ethos-sample
-```
-
-Start the app
-
-```js
-npm start
-```
-
-## Step 0 - Cleanup and install the `core` module
-
-First of all add the `core` module
-
-```js
-npm i @ethereansos/interfaces-core
-```
-
-and clean up the App.js file:
-
-```js
-
Sample test
-```
-
-## Step 1 - Context load and app initialization
-
-Every app requires a `context` file that defines properties, contracts, etc.
-This file is not part of the app and should be loaded dynamically at bootstrap time.
-
-```json
-// A sample of the context.json
-{
- "ethereumNetwork": {
- "1": "",
- "3": "Ropsten"
- },
- "dappVersion": "BETA 0.3",
- "etherscanURL": "https://etherscan.io/",
- "etherscanURLRopsten": "https://ropsten.etherscan.io/",
- "uniSwapInfoURL": "https://uniswap.info/token/",
- "uniSwapSwapURLTemplate": "https://app.uniswap.org/#/swap?inputCurrency={0}&outputCurrency={1}",
- "penSwapSwapURLTemplate": "https://penguinswap.eth.link/#/swap?inputCurrency={0}&outputCurrency={1}",
- "uniSwapPoolURLTemplate": "https://app.uniswap.org/#/pool?inputCurrency={0}&outputCurrency={1}",
- ...
- "oneTimeProposalTemplate": [
- "contract DFOHubGeneratedProposal {",
- "",
- " string private _metadataLink;",
- "",
- " constructor(string memory metadataLink) {",
- " _metadataLink = metadataLink;",
- " }",
- "",
- " function getMetadataLink() public view returns(string memory) {",
- " return _metadataLink;",
- " }",
- "",
- " function callOneTime(address proposal) public {",
- "function_body",
- " }",
- "}"
- ]
-}
-```
-
-### InitContextProvider
-
-To load and share in the app the `context` it's required to add to the app the `InitContextProvider`.
-
-```js
-import { InitContextProvider } from '@ethereansos/interfaces-core'
-
-function App() {
- return (
-
-
Sample App
-
- )
-}
-```
-
-The provider requires a `initMethod` props to do the initialization.
-The props expect an async function that inject the `setReady` and the `setValue` method to allow the finalization of the `context` loading.
-
-```js
- {
- try {
- // Fetch the context
- const response = await fetch(
- `${process.env.PUBLIC_URL}/data/context.json`
- )
- const context = await response.json()
-
- // Set the value of the context
- setValue('context', context)
-
- // Set the initialization ready
- setReady()
- } catch (e) {
- // Set the error
- setError('Context not loaded')
- }
- }}>
-
Sample App
-
-```
-
-Duting the application iniztialization the component shows the content of the `Loading` property and if it fails shows the `Error` property content.
-
-```js
- {
- // Fetch the context
- ...
- }}
- Loading={() =>
Loading..
}
- Error={({ error }) =>
Error..{error}
}
- >
-
Sample App
-
-```
-
-### useEthosContext
-
-The `context` is exposed to the app with the hook `useEthosContext`
-
-Create a ContextViewer component
-
-```js
-const ContextViewer = () => {
- const context = useEthosContext()
- return
{JSON.stringify(context, null, 2)}
-}
-```
-
-Add the component to the app
-
-```js
- {
- // Fetch the context
- ...
- }}
- Loading={() =>