mirror of
https://github.com/oceanprotocol/react.git
synced 2024-12-23 01:29:49 +01:00
update example
This commit is contained in:
parent
f2573bee23
commit
fd1e4f0a57
23
example/.gitignore
vendored
23
example/.gitignore
vendored
@ -1,23 +0,0 @@
|
|||||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
|
||||||
|
|
||||||
# dependencies
|
|
||||||
/node_modules
|
|
||||||
/.pnp
|
|
||||||
.pnp.js
|
|
||||||
|
|
||||||
# testing
|
|
||||||
/coverage
|
|
||||||
|
|
||||||
# production
|
|
||||||
/build
|
|
||||||
|
|
||||||
# misc
|
|
||||||
.DS_Store
|
|
||||||
.env.local
|
|
||||||
.env.development.local
|
|
||||||
.env.test.local
|
|
||||||
.env.production.local
|
|
||||||
|
|
||||||
npm-debug.log*
|
|
||||||
yarn-debug.log*
|
|
||||||
yarn-error.log*
|
|
@ -0,0 +1,8 @@
|
|||||||
|
# Example
|
||||||
|
|
||||||
|
Simple example app based on Create React App.
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm install
|
||||||
|
npm start
|
||||||
|
```
|
6279
example/package-lock.json
generated
6279
example/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -5,22 +5,19 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"-": "0.0.1",
|
"-": "0.0.1",
|
||||||
"@oceanprotocol/react": "file:../",
|
"@oceanprotocol/react": "file:../",
|
||||||
"@testing-library/jest-dom": "^4.2.4",
|
"@toruslabs/torus-embed": "^1.8.2",
|
||||||
"@testing-library/react": "^9.5.0",
|
|
||||||
"@testing-library/user-event": "^7.2.1",
|
|
||||||
"@toruslabs/torus-embed": "^1.7.3",
|
|
||||||
"@types/jest": "^24.9.1",
|
"@types/jest": "^24.9.1",
|
||||||
"@types/node": "^12.12.47",
|
"@types/node": "^12.12.47",
|
||||||
"@types/react": "^16.9.41",
|
"@types/react": "^16.9.41",
|
||||||
"@types/react-dom": "^16.9.8",
|
"@types/react-dom": "^16.9.8",
|
||||||
"@types/shortid": "0.0.29",
|
"@types/shortid": "^0.0.29",
|
||||||
"@walletconnect/web3-provider": "^1.0.14",
|
"@walletconnect/web3-provider": "^1.1.0",
|
||||||
"react": "^16.13.1",
|
"react": "^16.13.1",
|
||||||
"react-dom": "^16.13.1",
|
"react-dom": "^16.13.1",
|
||||||
"react-scripts": "3.4.1",
|
"react-scripts": "3.4.1",
|
||||||
"shortid": "^2.2.15",
|
"shortid": "^2.2.15",
|
||||||
"typescript": "^3.7.5",
|
"typescript": "^3.9.7",
|
||||||
"web3-eth-contract": "^1.2.9"
|
"web3-eth-contract": "^1.2.11"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "react-scripts start",
|
"start": "react-scripts start",
|
||||||
@ -31,16 +28,10 @@
|
|||||||
"eslintConfig": {
|
"eslintConfig": {
|
||||||
"extends": "react-app"
|
"extends": "react-app"
|
||||||
},
|
},
|
||||||
"browserslist": {
|
"browserslist": [
|
||||||
"production": [
|
|
||||||
">0.2%",
|
">0.2%",
|
||||||
"not dead",
|
"not dead",
|
||||||
|
"not ie <= 11",
|
||||||
"not op_mini all"
|
"not op_mini all"
|
||||||
],
|
|
||||||
"development": [
|
|
||||||
"last 1 chrome version",
|
|
||||||
"last 1 firefox version",
|
|
||||||
"last 1 safari version"
|
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
@ -10,11 +10,6 @@
|
|||||||
content="Web site created using create-react-app"
|
content="Web site created using create-react-app"
|
||||||
/>
|
/>
|
||||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||||
<!--
|
|
||||||
manifest.json provides metadata used when your web app is installed on a
|
|
||||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
|
||||||
-->
|
|
||||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
|
||||||
<!--
|
<!--
|
||||||
Notice the use of %PUBLIC_URL% in the tags above.
|
Notice the use of %PUBLIC_URL% in the tags above.
|
||||||
It will be replaced with the URL of the `public` folder during the build.
|
It will be replaced with the URL of the `public` folder during the build.
|
||||||
|
@ -1,25 +0,0 @@
|
|||||||
{
|
|
||||||
"short_name": "React App",
|
|
||||||
"name": "Create React App Sample",
|
|
||||||
"icons": [
|
|
||||||
{
|
|
||||||
"src": "favicon.ico",
|
|
||||||
"sizes": "64x64 32x32 24x24 16x16",
|
|
||||||
"type": "image/x-icon"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"src": "logo192.png",
|
|
||||||
"type": "image/png",
|
|
||||||
"sizes": "192x192"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"src": "logo512.png",
|
|
||||||
"type": "image/png",
|
|
||||||
"sizes": "512x512"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"start_url": ".",
|
|
||||||
"display": "standalone",
|
|
||||||
"theme_color": "#000000",
|
|
||||||
"background_color": "#ffffff"
|
|
||||||
}
|
|
@ -7,7 +7,9 @@ import { Config } from '@oceanprotocol/lib'
|
|||||||
import { AllDdos } from './AllDdos'
|
import { AllDdos } from './AllDdos'
|
||||||
import { ConsumeDdo } from './ConsumeDdo'
|
import { ConsumeDdo } from './ConsumeDdo'
|
||||||
|
|
||||||
function App() {
|
import WalletConnectProvider from '@walletconnect/web3-provider'
|
||||||
|
import Torus from '@toruslabs/torus-embed'
|
||||||
|
|
||||||
// factory Address needs to be updated each time you deploy the contract on local network
|
// factory Address needs to be updated each time you deploy the contract on local network
|
||||||
const config = {
|
const config = {
|
||||||
metadataStoreUri: 'http://aquarius:5000',
|
metadataStoreUri: 'http://aquarius:5000',
|
||||||
@ -22,14 +24,41 @@ function App() {
|
|||||||
nodeUri: `https://rinkeby.infura.io/a983b53583044593956054de049922fd`,
|
nodeUri: `https://rinkeby.infura.io/a983b53583044593956054de049922fd`,
|
||||||
factoryAddress: '0xB9d406D24B310A7D821D0b782a36909e8c925471'
|
factoryAddress: '0xB9d406D24B310A7D821D0b782a36909e8c925471'
|
||||||
} as Config
|
} as Config
|
||||||
|
|
||||||
|
const providerOptions = {
|
||||||
|
walletconnect: {
|
||||||
|
package: WalletConnectProvider,
|
||||||
|
options: {
|
||||||
|
infuraId: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
torus: {
|
||||||
|
package: Torus,
|
||||||
|
options: {
|
||||||
|
networkParams: {
|
||||||
|
host: config.nodeUri // optional
|
||||||
|
// chainId: 1337, // optional
|
||||||
|
// networkId: 1337 // optional
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const web3ModalOpts = {
|
||||||
|
cacheProvider: true,
|
||||||
|
providerOptions
|
||||||
|
}
|
||||||
|
|
||||||
|
function App() {
|
||||||
const init = async () => {}
|
const init = async () => {}
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
init()
|
init()
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="app">
|
<div className="app">
|
||||||
<OceanProvider config={config}>
|
<OceanProvider config={config} web3ModalOpts={web3ModalOpts}>
|
||||||
<div className="container">
|
<div className="container">
|
||||||
<div>
|
<div>
|
||||||
<Wallet />
|
<Wallet />
|
||||||
|
@ -29,10 +29,8 @@ export function Publish() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const marketAddress = '0x4D156A2ef69ffdDC55838176C6712C90f60a2285'
|
|
||||||
|
|
||||||
const publishAsset = async () => {
|
const publishAsset = async () => {
|
||||||
const ddo = await publish(asset as Metadata, '4', marketAddress, [
|
const ddo = await publish(asset as Metadata, '4', [
|
||||||
{ serviceType: 'access', cost: '1' },
|
{ serviceType: 'access', cost: '1' },
|
||||||
{ serviceType: 'compute', cost: '1' }
|
{ serviceType: 'compute', cost: '1' }
|
||||||
])
|
])
|
||||||
|
@ -3,29 +3,19 @@ import { useOcean } from '@oceanprotocol/react'
|
|||||||
import { useEffect } from 'react'
|
import { useEffect } from 'react'
|
||||||
|
|
||||||
export function Wallet() {
|
export function Wallet() {
|
||||||
const { web3, ocean, connect, logout, accountId } = useOcean()
|
const { ocean, connect, logout, accountId } = useOcean()
|
||||||
|
|
||||||
const conn = async () => {
|
const conn = async () => {
|
||||||
const { default: WalletConnectProvider } = await import(
|
await connect()
|
||||||
'@walletconnect/web3-provider'
|
|
||||||
)
|
|
||||||
const providerOptions = {
|
|
||||||
/* See Provider Options Section */
|
|
||||||
walletconnect: {
|
|
||||||
package: WalletConnectProvider, // required
|
|
||||||
options: {
|
|
||||||
infuraId: 'INFURA_ID' // required
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
await connect({ cacheProvider: true, providerOptions })
|
|
||||||
}
|
|
||||||
const init = async () => {
|
const init = async () => {
|
||||||
if (ocean === undefined || accountId === undefined) return
|
if (ocean === undefined || accountId === undefined) return
|
||||||
|
|
||||||
const assets = await ocean.assets.ownerAssets(accountId)
|
const assets = await ocean.assets.ownerAssets(accountId)
|
||||||
console.log(assets)
|
console.log(assets)
|
||||||
}
|
}
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
init()
|
init()
|
||||||
}, [ocean, accountId])
|
}, [ocean, accountId])
|
||||||
@ -34,6 +24,7 @@ export function Wallet() {
|
|||||||
await logout()
|
await logout()
|
||||||
await conn()
|
await conn()
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div>wallet</div>
|
<div>wallet</div>
|
||||||
|
@ -27,7 +27,6 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@oceanprotocol/lib": "^0.1.10",
|
"@oceanprotocol/lib": "^0.1.10",
|
||||||
"axios": "^0.19.2",
|
"axios": "^0.19.2",
|
||||||
"react": "^16.13.1",
|
|
||||||
"web3": "^1.2.11",
|
"web3": "^1.2.11",
|
||||||
"web3modal": "^1.9.0"
|
"web3modal": "^1.9.0"
|
||||||
},
|
},
|
||||||
|
Loading…
Reference in New Issue
Block a user