mirror of
https://github.com/oceanprotocol/market.git
synced 2024-12-02 05:57:29 +01:00
refactor for new useMetadata
This commit is contained in:
parent
0af06792e6
commit
e114c3f650
6
package-lock.json
generated
6
package-lock.json
generated
@ -3232,9 +3232,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"@oceanprotocol/react": {
|
"@oceanprotocol/react": {
|
||||||
"version": "0.0.37",
|
"version": "0.0.38",
|
||||||
"resolved": "https://registry.npmjs.org/@oceanprotocol/react/-/react-0.0.37.tgz",
|
"resolved": "https://registry.npmjs.org/@oceanprotocol/react/-/react-0.0.38.tgz",
|
||||||
"integrity": "sha512-mdAjvitXjzHFCuBeRmdL3cgpcPMaKJJxBDi3gql7zg/Pgq5suOgBbswwTxjtYR56Za58E8ILFXjbsrq5O7Qzqg==",
|
"integrity": "sha512-ij7/8B1BsX+ZwKJGkXq7KdbHBwnAZyreIpJK4etksaSt0PjC5KbizfM4ElnED7VVkckqhgp+6W5nx9+6ULBeGA==",
|
||||||
"requires": {
|
"requires": {
|
||||||
"@oceanprotocol/lib": "^0.1.12",
|
"@oceanprotocol/lib": "^0.1.12",
|
||||||
"axios": "^0.19.2",
|
"axios": "^0.19.2",
|
||||||
|
@ -23,7 +23,7 @@
|
|||||||
"@loadable/component": "^5.13.1",
|
"@loadable/component": "^5.13.1",
|
||||||
"@oceanprotocol/art": "^3.0.0",
|
"@oceanprotocol/art": "^3.0.0",
|
||||||
"@oceanprotocol/lib": "^0.1.14",
|
"@oceanprotocol/lib": "^0.1.14",
|
||||||
"@oceanprotocol/react": "^0.0.37",
|
"@oceanprotocol/react": "0.0.38",
|
||||||
"@oceanprotocol/typographies": "^0.1.0",
|
"@oceanprotocol/typographies": "^0.1.0",
|
||||||
"@sindresorhus/slugify": "^1.0.0",
|
"@sindresorhus/slugify": "^1.0.0",
|
||||||
"@tippyjs/react": "^4.1.0",
|
"@tippyjs/react": "^4.1.0",
|
||||||
|
@ -10,32 +10,18 @@ export default function Price({
|
|||||||
ddo,
|
ddo,
|
||||||
className,
|
className,
|
||||||
small,
|
small,
|
||||||
conversion,
|
conversion
|
||||||
setPriceOutside
|
|
||||||
}: {
|
}: {
|
||||||
ddo: DDO
|
ddo: DDO
|
||||||
className?: string
|
className?: string
|
||||||
small?: boolean
|
small?: boolean
|
||||||
conversion?: boolean
|
conversion?: boolean
|
||||||
setPriceOutside?: (price: string) => void
|
|
||||||
}): ReactElement {
|
}): ReactElement {
|
||||||
const { ocean, chainId, accountId } = useOcean()
|
const { ocean } = useOcean()
|
||||||
const { getBestPrice } = useMetadata()
|
const { price } = useMetadata(ddo.id)
|
||||||
const [price, setPrice] = useState<string>()
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!ocean || !accountId || !chainId) return
|
|
||||||
|
|
||||||
async function init() {
|
|
||||||
const price = await getBestPrice(ddo.dataToken)
|
|
||||||
setPrice(price)
|
|
||||||
setPriceOutside && price !== '' && setPriceOutside(price)
|
|
||||||
}
|
|
||||||
init()
|
|
||||||
}, [chainId, accountId, ocean])
|
|
||||||
|
|
||||||
return !ocean ? (
|
return !ocean ? (
|
||||||
<div className={styles.empty}>Please connect your wallet to view price</div>
|
<div className={styles.empty}>Connect your wallet to view price</div>
|
||||||
) : price ? (
|
) : price ? (
|
||||||
<PriceUnit
|
<PriceUnit
|
||||||
price={price}
|
price={price}
|
||||||
|
@ -17,12 +17,10 @@ import Alert from '../../atoms/Alert'
|
|||||||
|
|
||||||
export default function Compute({
|
export default function Compute({
|
||||||
ddo,
|
ddo,
|
||||||
isBalanceSufficient,
|
isBalanceSufficient
|
||||||
setPrice
|
|
||||||
}: {
|
}: {
|
||||||
ddo: DDO
|
ddo: DDO
|
||||||
isBalanceSufficient: boolean
|
isBalanceSufficient: boolean
|
||||||
setPrice: (price: string) => void
|
|
||||||
}): ReactElement {
|
}): ReactElement {
|
||||||
const { ocean } = useOcean()
|
const { ocean } = useOcean()
|
||||||
const { compute, isLoading, computeStepText, computeError } = useCompute()
|
const { compute, isLoading, computeStepText, computeError } = useCompute()
|
||||||
@ -89,7 +87,7 @@ export default function Compute({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.compute}>
|
<div className={styles.compute}>
|
||||||
<Price ddo={ddo} setPriceOutside={setPrice} conversion />
|
<Price ddo={ddo} conversion />
|
||||||
|
|
||||||
<div className={styles.info}>
|
<div className={styles.info}>
|
||||||
<div className={styles.selectType}>
|
<div className={styles.selectType}>
|
||||||
|
@ -12,13 +12,11 @@ import { useOcean, useConsume } from '@oceanprotocol/react'
|
|||||||
export default function Consume({
|
export default function Consume({
|
||||||
ddo,
|
ddo,
|
||||||
file,
|
file,
|
||||||
isBalanceSufficient,
|
isBalanceSufficient
|
||||||
setPrice
|
|
||||||
}: {
|
}: {
|
||||||
ddo: DDO
|
ddo: DDO
|
||||||
file: FileMetadata
|
file: FileMetadata
|
||||||
isBalanceSufficient: boolean
|
isBalanceSufficient: boolean
|
||||||
setPrice: (price: string) => void
|
|
||||||
}): ReactElement {
|
}): ReactElement {
|
||||||
const { ocean } = useOcean()
|
const { ocean } = useOcean()
|
||||||
const { consumeStepText, consume, consumeError } = useConsume()
|
const { consumeStepText, consume, consumeError } = useConsume()
|
||||||
@ -49,7 +47,7 @@ export default function Consume({
|
|||||||
<File file={file} />
|
<File file={file} />
|
||||||
</div>
|
</div>
|
||||||
<div className={styles.pricewrapper}>
|
<div className={styles.pricewrapper}>
|
||||||
<Price ddo={ddo} setPriceOutside={setPrice} conversion />
|
<Price ddo={ddo} conversion />
|
||||||
<PurchaseButton />
|
<PurchaseButton />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -18,28 +18,29 @@ interface Balance {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
|
export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
|
||||||
const { ocean, accountId, account } = useOcean()
|
const { ocean, accountId } = useOcean()
|
||||||
const { getBestPool } = useMetadata()
|
const { price, poolAddress } = useMetadata(ddo.id)
|
||||||
const [poolAddress, setPoolAddress] = useState<string>()
|
|
||||||
const [poolTokens, setPoolTokens] = useState<string>()
|
const [poolTokens, setPoolTokens] = useState<string>()
|
||||||
const [totalBalance, setTotalBalance] = useState<Balance>()
|
const [totalBalance, setTotalBalance] = useState<Balance>()
|
||||||
const [dtPrice, setDtPrice] = useState<string>()
|
|
||||||
const [dtSymbol, setDtSymbol] = useState<string>()
|
const [dtSymbol, setDtSymbol] = useState<string>()
|
||||||
const [userBalance, setUserBalance] = useState<Balance>()
|
const [userBalance, setUserBalance] = useState<Balance>()
|
||||||
const [showAdd, setShowAdd] = useState<boolean>()
|
|
||||||
const [showRemove, setShowRemove] = useState<boolean>()
|
|
||||||
|
|
||||||
const isLoading = !ocean || !totalBalance || !userBalance || !dtPrice
|
const [showAdd, setShowAdd] = useState(false)
|
||||||
|
const [showRemove, setShowRemove] = useState(false)
|
||||||
|
const [isLoading, setIsLoading] = useState(true)
|
||||||
|
|
||||||
|
// const isLoading = !ocean || !totalBalance || !userBalance || !price
|
||||||
const hasAddedLiquidity =
|
const hasAddedLiquidity =
|
||||||
userBalance && (Number(userBalance.ocean) > 0 || Number(userBalance.dt) > 0)
|
userBalance && (Number(userBalance.ocean) > 0 || Number(userBalance.dt) > 0)
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
async function init() {
|
if (!ocean || !accountId || !poolAddress || !price) return
|
||||||
try {
|
|
||||||
const { poolAddress, poolPrice } = await getBestPool(ddo.dataToken)
|
|
||||||
setPoolAddress(poolAddress)
|
|
||||||
setDtPrice(poolPrice)
|
|
||||||
|
|
||||||
|
async function init() {
|
||||||
|
setIsLoading(true)
|
||||||
|
|
||||||
|
try {
|
||||||
const dtSymbol = await ocean.datatokens.getSymbol(
|
const dtSymbol = await ocean.datatokens.getSymbol(
|
||||||
ddo.dataToken,
|
ddo.dataToken,
|
||||||
accountId
|
accountId
|
||||||
@ -63,11 +64,8 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
|
|||||||
setPoolTokens(poolTokens)
|
setPoolTokens(poolTokens)
|
||||||
|
|
||||||
// TODO: figure out how to get that
|
// TODO: figure out how to get that
|
||||||
const totalPoolTokens = await ocean.accounts.getTokenBalance(
|
// const totalPoolTokens = await ocean.pool.totalSupply(poolAddress)
|
||||||
poolAddress,
|
// console.log(totalPoolTokens)
|
||||||
account
|
|
||||||
)
|
|
||||||
console.log(totalPoolTokens)
|
|
||||||
|
|
||||||
// TODO: replace `dtReserve` with `totalPoolTokens`
|
// TODO: replace `dtReserve` with `totalPoolTokens`
|
||||||
const userBalance = {
|
const userBalance = {
|
||||||
@ -80,10 +78,12 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
|
|||||||
setUserBalance(userBalance)
|
setUserBalance(userBalance)
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error(error.message)
|
console.error(error.message)
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
init()
|
init()
|
||||||
}, [ocean, accountId])
|
}, [ocean, accountId, price, poolAddress])
|
||||||
|
|
||||||
const poolShare =
|
const poolShare =
|
||||||
totalBalance &&
|
totalBalance &&
|
||||||
@ -92,7 +92,7 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{isLoading ? (
|
{isLoading && !userBalance ? (
|
||||||
<Loader message="Retrieving pools..." />
|
<Loader message="Retrieving pools..." />
|
||||||
) : showAdd ? (
|
) : showAdd ? (
|
||||||
<Add
|
<Add
|
||||||
@ -106,8 +106,8 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
|
|||||||
<>
|
<>
|
||||||
<div className={styles.dataToken}>
|
<div className={styles.dataToken}>
|
||||||
<PriceUnit price="1" symbol={dtSymbol} /> ={' '}
|
<PriceUnit price="1" symbol={dtSymbol} /> ={' '}
|
||||||
<PriceUnit price={dtPrice} />
|
<PriceUnit price={price} />
|
||||||
<Conversion price={dtPrice} />
|
<Conversion price={price} />
|
||||||
<Tooltip content="Explain how this price is determined..." />
|
<Tooltip content="Explain how this price is determined..." />
|
||||||
<div className={styles.dataTokenLinks}>
|
<div className={styles.dataTokenLinks}>
|
||||||
<EtherscanLink network="rinkeby" path={`address/${poolAddress}`}>
|
<EtherscanLink network="rinkeby" path={`address/${poolAddress}`}>
|
||||||
@ -122,7 +122,7 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
|
|||||||
<div className={styles.poolTokens}>
|
<div className={styles.poolTokens}>
|
||||||
<div className={styles.tokens}>
|
<div className={styles.tokens}>
|
||||||
<h3 className={styles.title}>
|
<h3 className={styles.title}>
|
||||||
Your Pool Share{' '}
|
Your Liquidity{' '}
|
||||||
<Tooltip content="Explain what this represents, advantage of providing liquidity..." />
|
<Tooltip content="Explain what this represents, advantage of providing liquidity..." />
|
||||||
</h3>
|
</h3>
|
||||||
<Token symbol="OCEAN" balance={userBalance.ocean} />
|
<Token symbol="OCEAN" balance={userBalance.ocean} />
|
||||||
|
@ -5,7 +5,7 @@ import Consume from './Consume'
|
|||||||
import { MetadataMarket } from '../../../@types/Metadata'
|
import { MetadataMarket } from '../../../@types/Metadata'
|
||||||
import { DDO } from '@oceanprotocol/lib'
|
import { DDO } from '@oceanprotocol/lib'
|
||||||
import Tabs from '../../atoms/Tabs'
|
import Tabs from '../../atoms/Tabs'
|
||||||
import { useOcean } from '@oceanprotocol/react'
|
import { useOcean, useMetadata } from '@oceanprotocol/react'
|
||||||
import compareAsBN from '../../../utils/compareAsBN'
|
import compareAsBN from '../../../utils/compareAsBN'
|
||||||
import Pool from './Pool'
|
import Pool from './Pool'
|
||||||
|
|
||||||
@ -17,7 +17,7 @@ export default function AssetActions({
|
|||||||
ddo: DDO
|
ddo: DDO
|
||||||
}): ReactElement {
|
}): ReactElement {
|
||||||
const { balance } = useOcean()
|
const { balance } = useOcean()
|
||||||
const [price, setPrice] = useState<string>()
|
const { price } = useMetadata(ddo.id)
|
||||||
const [isBalanceSufficient, setIsBalanceSufficient] = useState<boolean>()
|
const [isBalanceSufficient, setIsBalanceSufficient] = useState<boolean>()
|
||||||
|
|
||||||
const isCompute = Boolean(ddo.findServiceByType('compute'))
|
const isCompute = Boolean(ddo.findServiceByType('compute'))
|
||||||
@ -35,17 +35,12 @@ export default function AssetActions({
|
|||||||
}, [balance, price])
|
}, [balance, price])
|
||||||
|
|
||||||
const UseContent = isCompute ? (
|
const UseContent = isCompute ? (
|
||||||
<Compute
|
<Compute ddo={ddo} isBalanceSufficient={isBalanceSufficient} />
|
||||||
ddo={ddo}
|
|
||||||
isBalanceSufficient={isBalanceSufficient}
|
|
||||||
setPrice={setPrice}
|
|
||||||
/>
|
|
||||||
) : (
|
) : (
|
||||||
<Consume
|
<Consume
|
||||||
ddo={ddo}
|
ddo={ddo}
|
||||||
isBalanceSufficient={isBalanceSufficient}
|
isBalanceSufficient={isBalanceSufficient}
|
||||||
file={metadata.main.files[0]}
|
file={metadata.main.files[0]}
|
||||||
setPrice={setPrice}
|
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user