Skip to content

Commit

Permalink
added documentation to web app
Browse files Browse the repository at this point in the history
  • Loading branch information
@mruv
mruv committed Apr 20, 2019
1 parent da26a89 commit a66cdac
Show file tree
Hide file tree
Showing 7 changed files with 122 additions and 53 deletions.
8 changes: 4 additions & 4 deletions web-app/resources/built/bundle.js
View file

Large diffs are not rendered by default.

61 changes: 40 additions & 21 deletions web-app/teloseosapi.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,16 @@ const { JsSignatureProvider } = require('eosjs/dist/eosjs-jssig')
const fetch = require('node-fetch')
const { TextEncoder, TextDecoder } = require('text-encoding')

// Bob's -- eosyelosbobb
// and
// Erik's -- eosyeloserik
// private keys
const signatureProvider = new JsSignatureProvider([
'5JQT9qoFwHq6fi4HmG8x6kdXFKJNGyRN7bz8yRqdbJ3omiaDVKK',
'5Khg26SQ9F2okyjtJQWW1kVd4jMQeZwTeaAEE4ppFyDVinUA2nr'
])

// Telos EOS RPC API
const rpc = new JsonRpc('http://testnet.theteloscope.io:18888', { fetch })
const api = new Api(
{
Expand All @@ -18,29 +23,41 @@ const api = new Api(
})

module.exports = {
transact: (actor, action, data) => {

return api.transact(
{
actions: [
{
account: 'eosyelosbobb', // smart contract owner
name: action,
authorization: [
{ actor: actor, permission: 'active', }
],
data: data,
}]
},
{
blocksBehind: 3,
expireSeconds: 30,
})

// CLEOS PUSH ACTION CONTRACT_ACCT='eosyelosbobb' ACTION=action DATA=data PERMISSION='actor@active'
//
transact: async (actor, action, data) => {

try {
const resData = await api.transact(
{
actions: [
{
account: 'eosyelosbobb', // smart contract owner
name: action,
authorization: [
{ actor: actor, permission: 'active', }
],
data: data,
}]
},
{
blocksBehind: 3,
expireSeconds: 30,
})
return { code: 200, resData: resData }
} catch (error) {
return {code: 500}
}
},

info: async (account) => await rpc.get_account(account),
// CLEOS GET ACCOUNT NAME=account
//
info: (account) => rpc.get_account(account),

getInventoryReqs: async () => await rpc.get_table_rows({
// CLEOS GET TABLE ACCOUNT='eosyelosbobb' SCOPE='eosyelosbobb' TABLE='inventreqs' LIMIT=100
//
getInventoryReqs: () => rpc.get_table_rows({
json: true,
code: 'eosyelosbobb',
scope: 'eosyelosbobb',
Expand All @@ -50,5 +67,7 @@ module.exports = {
show_payer: false,
}),

getCurrencyBal: async (account, symbol) => await rpc.get_currency_balance("eosyelosbobb", account, symbol)
// CLEOS GET CURRENCY BALANCE CONTRACT_ACCT='eosyelosbobb' ACCOUNT=account SYMBOL=symbol
//
getCurrencyBal: (account, symbol) => rpc.get_currency_balance("eosyelosbobb", account, symbol)
}
47 changes: 29 additions & 18 deletions web-app/ui/Bob.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export default class Bob extends React.Component {

e.persist()
const value = e.target.value
this.setState((state) => { return {sellIron: value}})
this.setState((state) => { return { sellIron: value } })
}

render() {
Expand All @@ -40,6 +40,19 @@ export default class Bob extends React.Component {
</Card.Body>
<Card.Header>Commodities</Card.Header>
<Card.Body>
<p>
To trigger an Inventory Request, try and sell some pounds of IRON so that the balance falls below 20.0 IRON.
The automatic Inventory Request send is for 50.0 IRON (50.0 lbs of iron). To Fulfill the Request, go to Erik's tab and click 'Fulfill'.
After that, a new button for 'Pay' appears on the Bob's side which once clicked settles the debt by send some YELOS to Erik.
</p>
<p>
An Inventory Request goes through 3 stages --> REQ (By Bob) -> PENDING (By Bob) -> FULFILLED (By Erik) -> PAID (By Bob).
</p>
<p>
Everytime a Request is updated (requested, fulfilled or paid), the balances (YELOS and IRON) are updated to reflect the change.
</p>
<p>For more info about the smart contract go <a href="https://mon-test.telosfoundation.io/account/eosyelosbobb">here.</a></p>

<ListGroup>
<ListGroup.Item>
<Row>
Expand All @@ -50,19 +63,19 @@ export default class Bob extends React.Component {
size="sm" value={this.state.sellIron} type="text"
placeholder="Simulate Stock Sale"
onChange={this.handleChange} />
<Button
variant="outline-primary" size="sm"
onClick={(e) => {
e.persist()
onPushAction({
actor: name,
action: "sell",
data: {
payer: name,
quantity: parseFloat(this.state.sellIron).toFixed(1) + ' IRON'
}
})
}}>Sell</Button>
<Button
variant="outline-primary" size="sm"
onClick={(e) => {
e.persist()
onPushAction({
actor: name,
action: "sell",
data: {
payer: name,
quantity: parseFloat(this.state.sellIron).toFixed(1) + ' IRON'
}
})
}}>Sell</Button>
</Form>
</Col>
</Row>
Expand All @@ -79,9 +92,7 @@ export default class Bob extends React.Component {
<Col>Quantity <i>(lbs)</i></Col>
<Col>Price</Col>
<Col>Status</Col>
<Col>
<Button variant="outline-primary" size="sm">New</Button>
</Col>
<Col></Col>
</Row>
</ListGroup.Item>
{
Expand Down Expand Up @@ -120,7 +131,7 @@ export default class Bob extends React.Component {
</ListGroup>
</Container>
</Card.Body>
</Card>
</Card >
)
}
}
2 changes: 1 addition & 1 deletion web-app/ui/Erik.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export default class Erik extends React.Component {
<ListGroup>
<ListGroup.Item key={1000}>
<Row style={{ color: 'teal' }}>
<Col>To</Col>
<Col>From</Col>
<Col>Quantity <i>(lbs)</i></Col>
<Col>Price</Col>
<Col>Status</Col>
Expand Down
40 changes: 35 additions & 5 deletions web-app/ui/Main.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react'
import { Tabs, Tab, Container, Spinner } from 'react-bootstrap';
import { Tabs, Tab, Container, Spinner, Alert } from 'react-bootstrap';
import Bob from './Bob';
import Erik from './Erik';
import Axios from 'axios';
Expand All @@ -10,6 +10,7 @@ export default class Main extends React.Component {

this.state = {
isLoading: true,
alert: { show: false, isSuccess: false },
bob: { name: '', tlos: '', ylos: '', iron: '' },
erik: { name: '', tlos: '', ylos: '', iron: '' }
}
Expand All @@ -19,6 +20,8 @@ export default class Main extends React.Component {
this.fetchInfo = this.fetchInfo.bind(this)
this.handlePushActionOver = this.handlePushActionOver.bind(this)
this.pushAction = this.pushAction.bind(this)
this.handleAlertClose = this.handleAlertClose.bind(this)
this.handleHttp5xx = this.handleHttp5xx.bind(this)
}

componentDidMount() {
Expand All @@ -29,6 +32,7 @@ export default class Main extends React.Component {

fetchInfo() {
Axios.get("/info").then((res) => {
// console.log(res)
this.setState((state) => {
const bob_e = state.bob
const erik_e = state.erik
Expand Down Expand Up @@ -85,25 +89,51 @@ export default class Main extends React.Component {
}

handlePushActionOver(res) {

this.setState((state) => {
return {isLoading: true}
return {
isLoading: true,
alert: { show: true, isSuccess: true }
}
})

this.fetchInfo()
this.fetchInvReqs()
this.fetchYelosBal()
}

pushAction(conf) {
console.log(conf)
Axios.post('/transact', conf).then(this.handlePushActionOver)
Axios.post('/transact', conf)
.then(this.handlePushActionOver)
.catch(this.handleHttp5xx)
}

handleHttp5xx(err) {
this.setState((state) => {
return { alert: { show: true, isSuccess: false } }
})
}

handleAlertClose(e) {
this.setState((state) => {
return { alert: { show: false, isSuccess: true } }
})
}

render() {
const { bob, erik, isLoading, invReqs } = this.state
const { bob, erik, isLoading, invReqs, alert } = this.state

const view = isLoading ?
<Spinner animation="grow" /> : (
<Container style={{ marginTop: '20px' }}>
{
alert.show &&
<Alert onClose={this.handleAlertClose}
dismissible variant={alert.isSuccess ? "success" : "danger"}> {
alert.isSuccess ? "Request successfully processed" : "Request could not be processed"}
</Alert>
}

<Tabs defaultActiveKey="bob">
<Tab eventKey="bob" title="Bob">
<Bob {...bob} invReqs={invReqs} onPushAction={this.pushAction} />
Expand Down
2 changes: 1 addition & 1 deletion web-app/ui/NavBar.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react'
import { Navbar, Dropdown } from 'react-bootstrap'
import { Navbar } from 'react-bootstrap'

export default class NavBar extends React.Component {
constructor(props) { super(props) }
Expand Down
15 changes: 12 additions & 3 deletions web-app/webapp.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,23 @@ const teloseosapi = require('./teloseosapi')
const app = express()
const port = 3000

// config
app.set('views', __dirname);
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'ejs');
app.use(express.static('resources'))
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));


// Routes
app.get('/', (req, res) => res.render('index.html'))

// get basic user info -- RAM, BANDWIDTH, TLOS balance, ...
app.get('/info', async (req, res) => {

const bob = await teloseosapi.info('eosyelosbobb')
const erik = await teloseosapi.info('eosyeloserik')
const bob = await teloseosapi.info('eosyelosbobb')
const erik = await teloseosapi.info('eosyeloserik')

res.json(
{
Expand All @@ -32,10 +36,12 @@ app.get('/info', async (req, res) => {
})
})

// get a list of Inventory Requests
app.get('/invreqs', async (req, res) => {
res.json((await teloseosapi.getInventoryReqs()).rows)
})

// get currency balance for a token asset -- YELOS or IRON
app.get('/assets_bal', async (req, res) => {

const bob_y = await teloseosapi.getCurrencyBal('eosyelosbobb', 'YELOS')
Expand All @@ -49,10 +55,13 @@ app.get('/assets_bal', async (req, res) => {
})
})

// push an action
app.post('/transact', async (req, res) => {
// console.log(req.body)
const {actor, action, data} = req.body
res.json(await teloseosapi.transact(actor, action, data))
const {code, resData} = await teloseosapi.transact(actor, action, data)
res.status(code).json(resData)
})

// start web app
app.listen(port, () => console.log(`Example app listening on port ${port}!`))

0 comments on commit a66cdac

Please sign in to comment.