add invoice view

src/Routes.tsx

@@ -8,6 +8,7 @@ import NotFound from './routes/NotFound'
 import Publish from './routes/Publish/'
 import Search from './routes/Search'
 import Faucet from './routes/Faucet'
+import Invoices from './routes/Invoices'
 import Styleguide from './routes/Styleguide'
 
 const Routes = () => (
@@ -19,6 +20,7 @@ const Routes = () => (
         <Route component={Search} path="/search" />
         <Route component={Details} path="/asset/:did" />
         <Route component={Faucet} path="/faucet" />
+        <Route component={Invoices} path="/invoices" />
         <Route component={NotFound} />
     </Switch>
 )

src/data/menu.json

@@ -3,6 +3,10 @@
     "title": "Publish",
     "link": "/publish"
   },
+  {
+    "title": "Invoices",
+    "link": "/invoices"
+  },
   {
     "title": "Faucet",
     "link": "/faucet"

src/routes/Invoices.tsx

@@ -0,0 +1,51 @@
+import React, { Component } from 'react'
+import Route from '../components/templates/Route'
+import { User } from '../context/User'
+import Asset from '../components/molecules/Asset'
+import styles from './Search.module.scss'
+
+interface InvoicesState {
+    results: any[]
+}
+
+export default class Invoices extends Component<{}, InvoicesState> {
+    public state = { results: [] }
+
+    public async componentDidMount() {
+        /*
+        TODO:
+        - squid-js with exposed contracts
+        - request user to sign (unlock account) to get public key? retrieve it form previous signatures?
+        - subscribe to the `AccessSecretStoreCondition.Fulfill` event filtering by `_grantee` : https://github.com/oceanprotocol/keeper-contracts/blob/release/v0.8/contracts/conditions/AccessSecretStoreCondition.sol#L13
+        AccessSecretStoreCondition.Fulfill({_grantee: 'public key'}, { fromBlock: 0, toBlock: 'latest' }).get((error, eventResult) => {
+        if (error)
+            console.log('Error in myEvent event handler: ' + error);
+        else
+            console.log('events: ' + JSON.stringify(eventResult.args));
+        });
+        */
+        const assets = await this.context.ocean.assets.search('')
+        this.setState({ results: assets })
+    }
+
+    public renderResults = () =>
+        this.state.results.length ? (
+            <div className={styles.results}>
+                {this.state.results.map(asset => (
+                    <Asset key={asset} asset={asset} />
+                ))}
+            </div>
+        ) : (
+            <div>No invoices yet</div>
+        )
+
+    public render() {
+        return (
+            <Route title="Your invoices" wide>
+                {this.renderResults()}
+            </Route>
+        )
+    }
+}
+
+Invoices.contextType = User