config, ocean, publish form

config/ocean.ts

@@ -0,0 +1,25 @@
+export const nodeScheme = 'http';
+export const nodeHost = 'localhost';
+export const nodePort = 8545;
+
+export const aquariusScheme = 'http';
+export const aquariusHost = 'localhost';
+export const aquariusPort = 5000;
+
+export const brizoScheme = 'https';
+export const brizoHost = 'localhost';
+export const brizoPort = 8030;
+
+export const parityScheme = 'http';
+export const parityHost = 'localhost';
+export const parityPort = 8545;
+
+export const secretStoreScheme = 'http';
+export const secretStoreHost = 'localhost';
+export const secretStorePort = 12001;
+
+export const threshold = 0;
+export const password = 'node0';
+export const address = '0x00bd138abd70e2f00903268f3db08f2d25677c9e';
+
+export const verbose = true;

src/App.css

@@ -1,32 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 40vmin;
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/App.tsx

@@ -1,12 +1,11 @@
 import React, { Component } from 'react';
-import { userDefults, User } from './context/User';
+import { userDefaults, User } from './context/User';
 import Routes from './Routes';
-import './App.css';
 
 class App extends Component {
   render() {
     return (
-      <User.Provider value={userDefults}>
+      <User.Provider value={userDefaults}>
         <Routes />
       </User.Provider>
     );

src/Routes.tsx

@@ -1,12 +1,20 @@
 import React from 'react';
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 import Home from './pages/Home';
+import About from './pages/About';
+import Publish from './pages/Publish';
+import Details from './pages/Details';
+import List from './pages/List';
 import NotFound from './pages/NotFound';
 
 const Routes = () => (
     <Router>
         <Switch>
             <Route exact component={Home} path="/" />
+            <Route exact component={About} path="/about" />
+            <Route exact component={Publish} path="/publish" />
+            <Route exact component={List} path="/list" />
+            <Route exact component={Details} path="/asset/:did" />
             <Route component={NotFound} />
         </Switch>
     </Router>

src/context/User.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 
-export const userDefults = {
+export const userDefaults = {
   logged: false
 };
 
 export const User = React.createContext(
-  userDefults
+  userDefaults
 );

src/ocean.ts

@@ -0,0 +1,49 @@
+import {
+    Ocean
+} from '@oceanprotocol/squid/dist/node/squid'
+
+import {
+    nodeScheme,
+    nodeHost,
+    nodePort,
+    aquariusScheme,
+    aquariusHost,
+    aquariusPort,
+    brizoScheme,
+    brizoHost,
+    brizoPort,
+    parityScheme,
+    parityHost,
+    parityPort,
+    secretStoreScheme,
+    secretStoreHost,
+    secretStorePort,
+    threshold,
+    password,
+    address,
+    verbose
+} from '../config/ocean'
+
+export async function provideOcean() {
+    const nodeUri = `${nodeScheme}://${nodeHost}:${nodePort}`
+    const aquariusUri = `${aquariusScheme}://${aquariusHost}:${aquariusPort}`
+    const brizoUri = `${brizoScheme}://${brizoHost}:${brizoPort}`
+    const parityUri = `${parityScheme}://${parityHost}:${parityPort}`
+    const secretStoreUri = `${secretStoreScheme}://${secretStoreHost}:${secretStorePort}`
+
+    const config = {
+        nodeUri,
+        aquariusUri,
+        brizoUri,
+        parityUri,
+        secretStoreUri,
+        threshold,
+        password,
+        address,
+        verbose
+    }
+
+    const ocean = await Ocean.getInstance(config)
+
+    return { ocean }
+}

src/pages/About.tsx

@@ -0,0 +1,13 @@
+import React, { Component } from 'react';
+
+class About extends Component {
+  render() {
+    return (
+      <div>
+        About
+      </div>
+    );
+  }
+}
+
+export default About;

src/pages/Details.tsx

@@ -0,0 +1,13 @@
+import React, { Component } from 'react';
+
+class Details extends Component {
+  render() {
+    return (
+      <div>
+        Details
+      </div>
+    );
+  }
+}
+
+export default Details;

src/pages/Home.tsx

@@ -1,5 +1,8 @@
 import React, { Component } from 'react';
 
+// retrieve by tag? category?
+// search input -> redirect to list
+
 class Home extends Component {
   render() {
     return (

src/pages/List.tsx

@@ -0,0 +1,13 @@
+import React, { Component } from 'react';
+
+class List extends Component {
+  render() {
+    return (
+      <div>
+        List
+      </div>
+    );
+  }
+}
+
+export default List;

src/pages/Publish.tsx

@@ -0,0 +1,48 @@
+import React, { Component, FormEvent, ChangeEvent } from 'react';
+
+interface Props {
+
+}
+
+interface State {
+  value?: string
+}
+
+class Publish extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {value: ''};
+
+    this.inputChange = this.inputChange.bind(this);
+    this.registerAsset = this.registerAsset.bind(this);
+  }
+
+  inputChange(event: ChangeEvent<HTMLInputElement>) {
+    this.setState({
+      [event.target.name]: event.target.value
+    });
+  }
+
+  registerAsset(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault()
+    console.log("submit", this.state.value)
+
+  }
+
+  render() {
+    return (
+      <div>
+        <h1>Publish</h1>
+        <form onSubmit={this.registerAsset}>
+          <label>
+            Name:
+            <input type="text" name="value" value={this.state.value} onChange={this.inputChange} />
+          </label>
+          <input type="submit" value="Submit" />
+        </form>
+      </div>
+    );
+  }
+}
+
+export default Publish;