From e114c3f65069599b4cb75cc63d3b6b3ba36d68d3 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Thu, 20 Aug 2020 14:22:32 +0200 Subject: [PATCH] refactor for new useMetadata --- package-lock.json | 6 +-- package.json | 2 +- src/components/atoms/Price/index.tsx | 22 ++-------- .../organisms/AssetActions/Compute.tsx | 6 +-- .../organisms/AssetActions/Consume.tsx | 6 +-- .../organisms/AssetActions/Pool/index.tsx | 44 +++++++++---------- .../organisms/AssetActions/index.tsx | 11 ++--- 7 files changed, 37 insertions(+), 60 deletions(-) diff --git a/package-lock.json b/package-lock.json index 88fb4c581..5861856f4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3232,9 +3232,9 @@ } }, "@oceanprotocol/react": { - "version": "0.0.37", - "resolved": "https://registry.npmjs.org/@oceanprotocol/react/-/react-0.0.37.tgz", - "integrity": "sha512-mdAjvitXjzHFCuBeRmdL3cgpcPMaKJJxBDi3gql7zg/Pgq5suOgBbswwTxjtYR56Za58E8ILFXjbsrq5O7Qzqg==", + "version": "0.0.38", + "resolved": "https://registry.npmjs.org/@oceanprotocol/react/-/react-0.0.38.tgz", + "integrity": "sha512-ij7/8B1BsX+ZwKJGkXq7KdbHBwnAZyreIpJK4etksaSt0PjC5KbizfM4ElnED7VVkckqhgp+6W5nx9+6ULBeGA==", "requires": { "@oceanprotocol/lib": "^0.1.12", "axios": "^0.19.2", diff --git a/package.json b/package.json index d01d785cc..3c4ab970b 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "@loadable/component": "^5.13.1", "@oceanprotocol/art": "^3.0.0", "@oceanprotocol/lib": "^0.1.14", - "@oceanprotocol/react": "^0.0.37", + "@oceanprotocol/react": "0.0.38", "@oceanprotocol/typographies": "^0.1.0", "@sindresorhus/slugify": "^1.0.0", "@tippyjs/react": "^4.1.0", diff --git a/src/components/atoms/Price/index.tsx b/src/components/atoms/Price/index.tsx index def1ce106..2971d8da6 100644 --- a/src/components/atoms/Price/index.tsx +++ b/src/components/atoms/Price/index.tsx @@ -10,32 +10,18 @@ export default function Price({ ddo, className, small, - conversion, - setPriceOutside + conversion }: { ddo: DDO className?: string small?: boolean conversion?: boolean - setPriceOutside?: (price: string) => void }): ReactElement { - const { ocean, chainId, accountId } = useOcean() - const { getBestPrice } = useMetadata() - const [price, setPrice] = useState() - - 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]) + const { ocean } = useOcean() + const { price } = useMetadata(ddo.id) return !ocean ? ( -
Please connect your wallet to view price
+
Connect your wallet to view price
) : price ? ( void }): ReactElement { const { ocean } = useOcean() const { compute, isLoading, computeStepText, computeError } = useCompute() @@ -89,7 +87,7 @@ export default function Compute({ return (
- +
diff --git a/src/components/organisms/AssetActions/Consume.tsx b/src/components/organisms/AssetActions/Consume.tsx index 7b2bb9e50..fb94fd154 100644 --- a/src/components/organisms/AssetActions/Consume.tsx +++ b/src/components/organisms/AssetActions/Consume.tsx @@ -12,13 +12,11 @@ import { useOcean, useConsume } from '@oceanprotocol/react' export default function Consume({ ddo, file, - isBalanceSufficient, - setPrice + isBalanceSufficient }: { ddo: DDO file: FileMetadata isBalanceSufficient: boolean - setPrice: (price: string) => void }): ReactElement { const { ocean } = useOcean() const { consumeStepText, consume, consumeError } = useConsume() @@ -49,7 +47,7 @@ export default function Consume({
- +
diff --git a/src/components/organisms/AssetActions/Pool/index.tsx b/src/components/organisms/AssetActions/Pool/index.tsx index 572e78508..2e461e8f5 100644 --- a/src/components/organisms/AssetActions/Pool/index.tsx +++ b/src/components/organisms/AssetActions/Pool/index.tsx @@ -18,28 +18,29 @@ interface Balance { } export default function Pool({ ddo }: { ddo: DDO }): ReactElement { - const { ocean, accountId, account } = useOcean() - const { getBestPool } = useMetadata() - const [poolAddress, setPoolAddress] = useState() + const { ocean, accountId } = useOcean() + const { price, poolAddress } = useMetadata(ddo.id) + const [poolTokens, setPoolTokens] = useState() const [totalBalance, setTotalBalance] = useState() - const [dtPrice, setDtPrice] = useState() const [dtSymbol, setDtSymbol] = useState() const [userBalance, setUserBalance] = useState() - const [showAdd, setShowAdd] = useState() - const [showRemove, setShowRemove] = useState() - 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 = userBalance && (Number(userBalance.ocean) > 0 || Number(userBalance.dt) > 0) useEffect(() => { - async function init() { - try { - const { poolAddress, poolPrice } = await getBestPool(ddo.dataToken) - setPoolAddress(poolAddress) - setDtPrice(poolPrice) + if (!ocean || !accountId || !poolAddress || !price) return + async function init() { + setIsLoading(true) + + try { const dtSymbol = await ocean.datatokens.getSymbol( ddo.dataToken, accountId @@ -63,11 +64,8 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement { setPoolTokens(poolTokens) // TODO: figure out how to get that - const totalPoolTokens = await ocean.accounts.getTokenBalance( - poolAddress, - account - ) - console.log(totalPoolTokens) + // const totalPoolTokens = await ocean.pool.totalSupply(poolAddress) + // console.log(totalPoolTokens) // TODO: replace `dtReserve` with `totalPoolTokens` const userBalance = { @@ -80,10 +78,12 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement { setUserBalance(userBalance) } catch (error) { console.error(error.message) + } finally { + setIsLoading(false) } } init() - }, [ocean, accountId]) + }, [ocean, accountId, price, poolAddress]) const poolShare = totalBalance && @@ -92,7 +92,7 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement { return ( <> - {isLoading ? ( + {isLoading && !userBalance ? ( ) : showAdd ? (
={' '} - - + +
@@ -122,7 +122,7 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {

- Your Pool Share{' '} + Your Liquidity{' '}

diff --git a/src/components/organisms/AssetActions/index.tsx b/src/components/organisms/AssetActions/index.tsx index 150614226..4df5077f0 100644 --- a/src/components/organisms/AssetActions/index.tsx +++ b/src/components/organisms/AssetActions/index.tsx @@ -5,7 +5,7 @@ import Consume from './Consume' import { MetadataMarket } from '../../../@types/Metadata' import { DDO } from '@oceanprotocol/lib' import Tabs from '../../atoms/Tabs' -import { useOcean } from '@oceanprotocol/react' +import { useOcean, useMetadata } from '@oceanprotocol/react' import compareAsBN from '../../../utils/compareAsBN' import Pool from './Pool' @@ -17,7 +17,7 @@ export default function AssetActions({ ddo: DDO }): ReactElement { const { balance } = useOcean() - const [price, setPrice] = useState() + const { price } = useMetadata(ddo.id) const [isBalanceSufficient, setIsBalanceSufficient] = useState() const isCompute = Boolean(ddo.findServiceByType('compute')) @@ -35,17 +35,12 @@ export default function AssetActions({ }, [balance, price]) const UseContent = isCompute ? ( - + ) : ( )