mirror of
https://github.com/oceanprotocol/market.git
synced 2024-12-02 05:57:29 +01:00
refactor for new react hooks
This commit is contained in:
parent
7b6cb91410
commit
c9a043adce
GPG Key ID:
606EEEF3C479A91F
121
package-lock.json
generated
121
package-lock.json
generated
@ -1375,8 +1375,7 @@
|
||||
"@emotion/stylis": {
|
||||
"version": "0.8.5",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
|
||||
"integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==",
|
||||
"dev": true
|
||||
"integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
|
||||
},
|
||||
"@emotion/unitless": {
|
||||
"version": "0.7.5",
|
||||
@ -3966,15 +3965,15 @@
|
||||
"resolved": "https://registry.npmjs.org/@oceanprotocol/art/-/art-3.0.0.tgz",
|
||||
"integrity": "sha512-j4PEZSVtKSqxDYMVh/hd5vk088Bg6a6QkrUMTXN9Q6OIFAMfHM235f1AxaakNrEyK0FKMD908KuJEdfFLRn9Hw=="
|
||||
},
|
||||
"@oceanprotocol/keeper-contracts": {
|
||||
"version": "0.13.2",
|
||||
"resolved": "https://registry.npmjs.org/@oceanprotocol/keeper-contracts/-/keeper-contracts-0.13.2.tgz",
|
||||
"integrity": "sha512-915dcnzCHEuvsmRKqVj0RxHT3T386lSJh8WREe4dsnrXHsi1ULNYxX0Ts/cvalv6bRL+aqyaZ6gN3l3nkfwEDg=="
|
||||
"@oceanprotocol/contracts": {
|
||||
"version": "0.2.2",
|
||||
"resolved": "https://registry.npmjs.org/@oceanprotocol/contracts/-/contracts-0.2.2.tgz",
|
||||
"integrity": "sha512-wu5Ub5F50vCAON0GKyv4anPPLm+oWfHViksiAewVS/xvbbnSCt4gHws2Uc1ct25tiO/2AHAyJkqEiC0ep8SHeQ=="
|
||||
},
|
||||
"@oceanprotocol/lib": {
|
||||
"version": "0.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-0.1.1.tgz",
|
||||
"integrity": "sha512-4lCF0jzBq735QzD7TSqyc7yMmcXL5eF0G1ZYx4bu4NS/vl2nzFVTa+QjqVbx31ZhHpFLgWr8d3QTsBGxTLXpmw==",
|
||||
"version": "0.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-0.1.2.tgz",
|
||||
"integrity": "sha512-v4Y0u7WnhhA33uIMuGKlWqGdlZLen7xRcwCBMvTlLp13Z3K+lOcg7UTByVxnKy2Tg2//wMYUWfuhSsk4nDA/DA==",
|
||||
"requires": {
|
||||
"@ethereum-navigator/navigator": "^0.5.0",
|
||||
"bignumber.js": "^9.0.0",
|
||||
@ -3989,39 +3988,16 @@
|
||||
}
|
||||
},
|
||||
"@oceanprotocol/react": {
|
||||
"version": "0.0.11",
|
||||
"resolved": "https://registry.npmjs.org/@oceanprotocol/react/-/react-0.0.11.tgz",
|
||||
"integrity": "sha512-uve2rxkqD83lNo77COSzw3/38JtUkxwfTtZHmMjLfOcvn0UD98RDS6oP1+BDzqH9K2AuDvIeTwu/YGAISskL/w==",
|
||||
"version": "0.0.12",
|
||||
"resolved": "https://registry.npmjs.org/@oceanprotocol/react/-/react-0.0.12.tgz",
|
||||
"integrity": "sha512-AVatjgQV4/fV4oIjj8Lz/TnK5OJUBEDx+jdQGx0fUPAT0m3X10EWbRx33x7mvxseHLsYrl/WU2SjlCbEYfED2g==",
|
||||
"requires": {
|
||||
"@oceanprotocol/squid": "^2.2.0",
|
||||
"@oceanprotocol/contracts": "^0.2.2",
|
||||
"@oceanprotocol/lib": "^0.1.2",
|
||||
"axios": "^0.19.2",
|
||||
"react": "^16.13.1",
|
||||
"web3connect": "^1.0.0-beta.33"
|
||||
}
|
||||
},
|
||||
"@oceanprotocol/secret-store-client": {
|
||||
"version": "0.0.15",
|
||||
"resolved": "https://registry.npmjs.org/@oceanprotocol/secret-store-client/-/secret-store-client-0.0.15.tgz",
|
||||
"integrity": "sha512-5yNNA+qdjut9/nMiFKJd4D4io+GhzdfvdqVd5YMkgT9RV1qDosGj6NVsKArYay6g+tQH7pCJ6Y1FiAbhaaFB9g==",
|
||||
"requires": {
|
||||
"node-fetch": "^2.6.0"
|
||||
}
|
||||
},
|
||||
"@oceanprotocol/squid": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@oceanprotocol/squid/-/squid-2.2.0.tgz",
|
||||
"integrity": "sha512-ISI+8mGl5lCPqLw/YPS/e0PhaqgexuGiwxKcCGAMSo1p8sgunr6FOrMVoYhYr52QpfodxOY8Iiy3zv4HC8O2Mg==",
|
||||
"requires": {
|
||||
"@ethereum-navigator/navigator": "^0.5.0",
|
||||
"@oceanprotocol/keeper-contracts": "^0.13.2",
|
||||
"@oceanprotocol/secret-store-client": "^0.0.15",
|
||||
"bignumber.js": "^9.0.0",
|
||||
"deprecated-decorator": "^0.1.6",
|
||||
"node-fetch": "^2.6.0",
|
||||
"save-file": "^2.3.1",
|
||||
"uuid": "^8.0.0",
|
||||
"web3": "^1.2.6",
|
||||
"whatwg-url": "^8.0.0"
|
||||
"react": "^16.9.41",
|
||||
"web3": "^1.2.9",
|
||||
"web3modal": "^1.7.0"
|
||||
}
|
||||
},
|
||||
"@oceanprotocol/typographies": {
|
||||
@ -11448,6 +11424,11 @@
|
||||
"repeat-string": "^1.5.4"
|
||||
}
|
||||
},
|
||||
"detect-browser": {
|
||||
"version": "5.1.1",
|
||||
"resolved": "https://registry.npmjs.org/detect-browser/-/detect-browser-5.1.1.tgz",
|
||||
"integrity": "sha512-5n2aWI57qC3kZaK4j2zYsG6L1LrxgLptGCNhMQgdKhVn6cSdcq43pp6xHPfTHG3TYM6myF4tIPWiZtfdVDgb9w=="
|
||||
},
|
||||
"detect-indent": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-6.0.0.tgz",
|
||||
@ -34241,6 +34222,66 @@
|
||||
"url-loader": "^1.1.2"
|
||||
}
|
||||
},
|
||||
"web3modal": {
|
||||
"version": "1.8.0",
|
||||
"resolved": "https://registry.npmjs.org/web3modal/-/web3modal-1.8.0.tgz",
|
||||
"integrity": "sha512-FsLZ3xnSK+jT22LCZz1M7Jibz/4e4Lf2wScKcNWKNJ4BzLWCp16Mmv6Hq4bgn5zOOqd3ADclH3TzS0l5DoCIKQ==",
|
||||
"requires": {
|
||||
"detect-browser": "^5.1.0",
|
||||
"prop-types": "^15.7.2",
|
||||
"react": "^16.8.6",
|
||||
"react-dom": "^16.8.6",
|
||||
"styled-components": "^5.1.1",
|
||||
"tslib": "^1.10.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/is-prop-valid": {
|
||||
"version": "0.8.8",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
|
||||
"integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
|
||||
"requires": {
|
||||
"@emotion/memoize": "0.7.4"
|
||||
}
|
||||
},
|
||||
"@emotion/memoize": {
|
||||
"version": "0.7.4",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
|
||||
"integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
|
||||
},
|
||||
"css-to-react-native": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz",
|
||||
"integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==",
|
||||
"requires": {
|
||||
"camelize": "^1.0.0",
|
||||
"css-color-keywords": "^1.0.0",
|
||||
"postcss-value-parser": "^4.0.2"
|
||||
}
|
||||
},
|
||||
"postcss-value-parser": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
|
||||
"integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ=="
|
||||
},
|
||||
"styled-components": {
|
||||
"version": "5.1.1",
|
||||
"resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.1.1.tgz",
|
||||
"integrity": "sha512-1ps8ZAYu2Husx+Vz8D+MvXwEwvMwFv+hqqUwhNlDN5ybg6A+3xyW1ECrAgywhvXapNfXiz79jJyU0x22z0FFTg==",
|
||||
"requires": {
|
||||
"@babel/helper-module-imports": "^7.0.0",
|
||||
"@babel/traverse": "^7.4.5",
|
||||
"@emotion/is-prop-valid": "^0.8.8",
|
||||
"@emotion/stylis": "^0.8.4",
|
||||
"@emotion/unitless": "^0.7.4",
|
||||
"babel-plugin-styled-components": ">= 1",
|
||||
"css-to-react-native": "^3.0.0",
|
||||
"hoist-non-react-statics": "^3.0.0",
|
||||
"shallowequal": "^1.1.0",
|
||||
"supports-color": "^5.5.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"webidl-conversions": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-5.0.0.tgz",
|
||||
|
||||
@ -22,8 +22,9 @@
|
||||
"@loadable/component": "^5.13.1",
|
||||
"@now/node": "^1.7.2",
|
||||
"@oceanprotocol/art": "^3.0.0",
|
||||
"@oceanprotocol/lib": "^0.1.1",
|
||||
"@oceanprotocol/react": "^0.0.11",
|
||||
"@oceanprotocol/contracts": "^0.2.2",
|
||||
"@oceanprotocol/lib": "^0.1.2",
|
||||
"@oceanprotocol/react": "^0.0.12",
|
||||
"@oceanprotocol/typographies": "^0.1.0",
|
||||
"@sindresorhus/slugify": "^1.0.0",
|
||||
"@tippyjs/react": "^4.1.0",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react'
|
||||
import styles from './Account.module.css'
|
||||
import { useWeb3, useOcean } from '@oceanprotocol/react'
|
||||
import { useOcean } from '@oceanprotocol/react'
|
||||
import { toDataUrl } from 'ethereum-blockies'
|
||||
import { ReactComponent as Caret } from '../../../images/caret.svg'
|
||||
import Status from '../../atoms/Status'
|
||||
@ -28,15 +28,16 @@ const Blockies = ({ account }: { account: string | undefined }) => {
|
||||
// Forward ref for Tippy.js
|
||||
// eslint-disable-next-line
|
||||
const Account = React.forwardRef((props, ref: any) => {
|
||||
const { account, web3Connect, ethProviderStatus } = useWeb3()
|
||||
const { status } = useOcean()
|
||||
const hasSuccess = ethProviderStatus === 1 && status === 1
|
||||
const { accountId, status, web3Modal } = useOcean()
|
||||
const hasSuccess = status === 1
|
||||
|
||||
return account ? (
|
||||
console.log(web3Modal)
|
||||
|
||||
return accountId ? (
|
||||
<button className={styles.button} aria-label="Account" ref={ref}>
|
||||
<Blockies account={account} />
|
||||
<span className={styles.address} title={account}>
|
||||
{accountTruncate(account)}
|
||||
<Blockies account={accountId} />
|
||||
<span className={styles.address} title={accountId}>
|
||||
{accountTruncate(accountId)}
|
||||
</span>
|
||||
{!hasSuccess && (
|
||||
<Status className={styles.status} state="warning" aria-hidden />
|
||||
@ -46,7 +47,7 @@ const Account = React.forwardRef((props, ref: any) => {
|
||||
) : (
|
||||
<button
|
||||
className={styles.button}
|
||||
onClick={() => web3Connect.connect()}
|
||||
onClick={() => web3Modal.toggleModal()}
|
||||
// Need the `ref` here although we do not want
|
||||
// the Tippy to show in this state.
|
||||
ref={ref}
|
||||
|
||||
@ -1,15 +1,16 @@
|
||||
import React, { ReactElement } from 'react'
|
||||
import Button from '../../atoms/Button'
|
||||
import styles from './Details.module.css'
|
||||
import { useWeb3, useOcean } from '@oceanprotocol/react'
|
||||
import { useOcean } from '@oceanprotocol/react'
|
||||
import Web3Feedback from './Feedback'
|
||||
import { formatNumber } from '../../../utils'
|
||||
|
||||
export default function Details({ attrs }: { attrs: any }): ReactElement {
|
||||
const { balance, web3Connect } = useWeb3()
|
||||
const { balanceInOcean } = useOcean()
|
||||
const ethBalanceText = formatNumber(Number(balance))
|
||||
const oceanBalanceText = formatNumber(Number(balanceInOcean))
|
||||
const { balance, web3Modal } = useOcean()
|
||||
const ethBalanceText = 'hello test'
|
||||
// || formatNumber(Number(balance.eth))
|
||||
const oceanBalanceText = 'hello test'
|
||||
// || formatNumber(Number(balance.ocean))
|
||||
|
||||
return (
|
||||
<div className={styles.details} {...attrs}>
|
||||
@ -24,7 +25,7 @@ export default function Details({ attrs }: { attrs: any }): ReactElement {
|
||||
<Button
|
||||
style="text"
|
||||
size="small"
|
||||
onClick={() => web3Connect.toggleModal()}
|
||||
onClick={() => web3Modal.toggleModal()}
|
||||
>
|
||||
Switch Wallet
|
||||
</Button>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React, { ReactElement } from 'react'
|
||||
import Status from '../../atoms/Status'
|
||||
import styles from './Feedback.module.css'
|
||||
import { useWeb3, useOcean } from '@oceanprotocol/react'
|
||||
import { useOcean } from '@oceanprotocol/react'
|
||||
|
||||
export declare type Web3Error = {
|
||||
status: 'error' | 'warning' | 'success'
|
||||
@ -14,37 +14,29 @@ export default function Web3Feedback({
|
||||
}: {
|
||||
isBalanceInsufficient?: boolean
|
||||
}): ReactElement {
|
||||
const { ethProviderStatus } = useWeb3()
|
||||
const { status } = useOcean()
|
||||
const isEthProviderAbsent = ethProviderStatus === -1
|
||||
const isEthProviderDisconnected = ethProviderStatus === 0
|
||||
const { web3, status } = useOcean()
|
||||
const isOceanDisconnected = status === 0
|
||||
const isOceanConnectionError = status === -1
|
||||
const hasSuccess = ethProviderStatus === 1 && status === 1
|
||||
|
||||
const state = isEthProviderAbsent
|
||||
const state = !web3
|
||||
? 'error'
|
||||
: hasSuccess && !isBalanceInsufficient
|
||||
: web3 && !isBalanceInsufficient
|
||||
? 'success'
|
||||
: 'warning'
|
||||
|
||||
const title = isEthProviderAbsent
|
||||
? 'No Web3 Browser'
|
||||
: isEthProviderDisconnected
|
||||
const title = !web3
|
||||
? 'No account connected'
|
||||
: isOceanDisconnected
|
||||
? 'Not connected to Pacific network'
|
||||
: isOceanConnectionError
|
||||
? 'Error connecting to Ocean'
|
||||
: hasSuccess
|
||||
: web3
|
||||
? isBalanceInsufficient === true
|
||||
? 'Insufficient balance'
|
||||
: 'Connected to Ocean'
|
||||
: 'Something went wrong'
|
||||
|
||||
const message = isEthProviderAbsent
|
||||
? 'To download data sets you need a browser with Web3 capabilties, like Firefox with MetaMask installed.'
|
||||
: isEthProviderDisconnected
|
||||
const message = !web3
|
||||
? 'Please connect your Web3 wallet.'
|
||||
: isOceanDisconnected
|
||||
? 'Please connect in MetaMask to custom RPC https://pacific.oceanprotocol.com.'
|
||||
@ -54,7 +46,7 @@ export default function Web3Feedback({
|
||||
? 'You do not have enough OCEAN in your wallet to purchase this asset.'
|
||||
: 'Something went wrong.'
|
||||
|
||||
return !hasSuccess ? (
|
||||
return web3 ? (
|
||||
<section className={styles.feedback}>
|
||||
<Status state={state} aria-hidden />
|
||||
<h3 className={styles.title}>{title}</h3>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import React, { ReactElement } from 'react'
|
||||
import loadable from '@loadable/component'
|
||||
import { useSpring, animated } from 'react-spring'
|
||||
import { useWeb3 } from '@oceanprotocol/react'
|
||||
import Account from './Account'
|
||||
import Details from './Details'
|
||||
import styles from './index.module.css'
|
||||
import { useOcean } from '@oceanprotocol/react'
|
||||
|
||||
const Tippy = loadable(() => import('@tippyjs/react/headless'))
|
||||
|
||||
@ -15,7 +15,7 @@ const animation = {
|
||||
}
|
||||
|
||||
export default function Wallet(): ReactElement {
|
||||
const { account, ethProviderStatus } = useWeb3()
|
||||
const { accountId } = useOcean()
|
||||
const [props, setSpring] = useSpring(() => animation.from)
|
||||
|
||||
function onMount() {
|
||||
@ -34,9 +34,6 @@ export default function Wallet(): ReactElement {
|
||||
})
|
||||
}
|
||||
|
||||
const isEthProviderAbsent = ethProviderStatus === -1
|
||||
if (isEthProviderAbsent) return null
|
||||
|
||||
return (
|
||||
<Tippy
|
||||
interactive
|
||||
@ -53,7 +50,7 @@ export default function Wallet(): ReactElement {
|
||||
animation
|
||||
onMount={onMount}
|
||||
onHide={onHide}
|
||||
disabled={!account}
|
||||
disabled={!accountId}
|
||||
fallback={<Account />}
|
||||
>
|
||||
<Account />
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React, { ReactElement } from 'react'
|
||||
import { Web3Provider, OceanProvider, Config } from '@oceanprotocol/react'
|
||||
import { OceanProvider } from '@oceanprotocol/react'
|
||||
import { oceanConfig } from '../../app.config'
|
||||
|
||||
const wrapRootElement = ({
|
||||
@ -7,9 +7,7 @@ const wrapRootElement = ({
|
||||
}: {
|
||||
element: ReactElement
|
||||
}): ReactElement => (
|
||||
<Web3Provider>
|
||||
<OceanProvider config={oceanConfig as Config}>{element}</OceanProvider>
|
||||
</Web3Provider>
|
||||
<OceanProvider config={oceanConfig}>{element}</OceanProvider>
|
||||
)
|
||||
|
||||
export default wrapRootElement
|
||||
|
||||
Loading…
Reference in New Issue
Block a user