1
0
mirror of https://github.com/oceanprotocol/market.git synced 2024-12-02 05:57:29 +01:00

Merge pull request #52 from oceanprotocol/feature/price-refactor

refactor price component
This commit is contained in:
Matthias Kretschmann 2020-08-11 10:33:12 +02:00 committed by GitHub
commit 65b7b69aa3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 118 additions and 110 deletions

View File

@ -34,6 +34,7 @@
"axios": "^0.19.2",
"classnames": "^2.2.6",
"date-fns": "^2.15.0",
"decimal.js": "^10.2.0",
"dotenv": "^8.2.0",
"ethereum-blockies": "github:MyEtherWallet/blockies",
"filesize": "^6.1.0",

View File

@ -2,6 +2,7 @@
font-weight: var(--font-weight-bold);
font-size: var(--font-size-large);
color: var(--brand-grey-dark);
line-height: 1;
}
.price span:first-child {
@ -10,6 +11,11 @@
font-size: var(--font-size-base);
}
.empty {
color: var(--color-secondary);
font-weight: var(--font-weight-bold);
}
.small {
/* lazy making-conversion-smaller-with-same-markup */
transform: scale(0.8);

View File

@ -1,20 +1,39 @@
import React, { ReactElement } from 'react'
import React, { ReactElement, useState, useEffect } from 'react'
import classNames from 'classnames/bind'
import PriceConversion from './Conversion'
import styles from './index.module.css'
import { formatCurrency } from '@coingecko/cryptoformat'
import { useMetadata, useOcean } from '@oceanprotocol/react'
import { DDO } from '@oceanprotocol/lib'
import Loader from '../Loader'
import Tooltip from '../Tooltip'
const cx = classNames.bind(styles)
export default function Price({
price,
ddo,
className,
small
small,
setPriceOutside
}: {
price: string // expects price in OCEAN, not wei
ddo: DDO
className?: string
small?: boolean
setPriceOutside?: (price: string) => void
}): ReactElement {
const { chainId } = useOcean()
const { getBestPrice } = useMetadata()
const [price, setPrice] = useState<string>()
useEffect(() => {
async function init() {
const price = await getBestPrice(ddo.dataToken)
setPrice(price)
setPriceOutside && price !== '' && setPriceOutside(price)
}
init()
}, [chainId])
const styleClasses = cx({
price: true,
small: small,
@ -32,5 +51,14 @@ export default function Price({
</>
)
return <div className={styleClasses}>{displayPrice}</div>
return price ? (
<div className={styleClasses}>{displayPrice}</div>
) : price === '' ? (
<div className={styles.empty}>
No price found{' '}
<Tooltip content="We could not find a pool for this data set, which can have multiple reasons. Is your wallet connected to the correct network?" />
</div>
) : (
<Loader message="Retrieving price..." />
)
}

View File

@ -23,17 +23,6 @@ const AssetTeaser: React.FC<AssetTeaserProps> = ({
const { description } = metadata.additionalInformation
const isCompute = Boolean(ddo.findServiceByType('compute'))
const { getBestPrice } = useMetadata(ddo.id)
const [price, setPrice] = useState<string>()
useEffect(() => {
async function init() {
const price = await getBestPrice(ddo.dataToken)
setPrice(price)
}
init()
}, [])
return (
<article className={styles.teaser}>
<Link to={`/asset/${ddo.id}`} className={styles.link}>
@ -47,13 +36,7 @@ const AssetTeaser: React.FC<AssetTeaserProps> = ({
</div>
<footer className={styles.foot}>
{price ? (
<Price price={price} small />
) : price === '' ? (
'No price found'
) : (
<Loader message="Retrieving price..." />
)}
<Price ddo={ddo} small />
</footer>
</Link>
</article>

View File

@ -12,15 +12,20 @@ export declare type Web3Error = {
}
export default function Web3Feedback({
isBalanceInsufficient
isBalanceSufficient
}: {
isBalanceInsufficient?: boolean
isBalanceSufficient?: boolean
}): ReactElement {
const { appConfig } = useSiteMetadata()
const { account, status, chainId } = useOcean()
const isOceanConnectionError = status === -1
const correctNetwork = isCorrectNetwork(chainId)
const showFeedback = !account || isOceanConnectionError || !correctNetwork
const showFeedback =
!account ||
isOceanConnectionError ||
!correctNetwork ||
isBalanceSufficient === false
const desiredNetworkName = appConfig.network.replace(/^\w/, (c: string) =>
c.toUpperCase()
)
@ -29,7 +34,7 @@ export default function Web3Feedback({
? 'error'
: !correctNetwork
? 'warning'
: account && !isBalanceInsufficient
: account && isBalanceSufficient
? 'success'
: 'warning'
@ -40,7 +45,7 @@ export default function Web3Feedback({
: !correctNetwork
? 'Wrong Network'
: account
? isBalanceInsufficient === true
? isBalanceSufficient === false
? 'Insufficient balance'
: 'Connected to Ocean'
: 'Something went wrong'
@ -51,7 +56,7 @@ export default function Web3Feedback({
? 'Please try again.'
: !correctNetwork
? `Please connect to ${desiredNetworkName}.`
: isBalanceInsufficient === true
: isBalanceSufficient === false
? 'You do not have enough OCEAN in your wallet to purchase this asset.'
: 'Something went wrong.'

View File

@ -1,6 +1,5 @@
import React, { useState, useEffect, ReactElement } from 'react'
import React, { useState, ReactElement } from 'react'
import { DDO } from '@oceanprotocol/lib'
import compareAsBN, { Comparisson } from '../../../utils/compareAsBN'
import Loader from '../../atoms/Loader'
import Web3Feedback from '../../molecules/Wallet/Feedback'
import Dropzone from '../../atoms/Dropzone'
@ -18,10 +17,12 @@ import Alert from '../../atoms/Alert'
export default function Compute({
ddo,
price
isBalanceSufficient,
setPrice
}: {
ddo: DDO
price: string // in OCEAN, not wei
isBalanceSufficient: boolean
setPrice: (price: string) => void
}): ReactElement {
const { ocean } = useOcean()
const { compute, isLoading, computeStepText, computeError } = useCompute()
@ -29,7 +30,6 @@ export default function Compute({
const [isJobStarting, setIsJobStarting] = useState(false)
const [, setError] = useState('')
const [isBalanceSufficient, setIsBalanceSufficient] = useState(false)
const [computeType, setComputeType] = useState('')
const [computeContainer, setComputeContainer] = useState({
entrypoint: '',
@ -39,25 +39,13 @@ export default function Compute({
const [algorithmRawCode, setAlgorithmRawCode] = useState('')
const [isPublished, setIsPublished] = useState(false)
const [file, setFile] = useState(null)
const [isTermsAgreed, setIsTermsAgreed] = useState(true)
const isFree = price === '0'
const isComputeButtonDisabled =
isJobStarting ||
file === null ||
computeType === '' ||
!ocean ||
!isBalanceSufficient ||
!isTermsAgreed
// useEffect(() => {
// setIsBalanceSufficient(
// isFree ||
// (balance !== null &&
// compareAsBN(balance, fromWei(computeService.cost), Comparisson.gte))
// )
// }, [balance])
!isBalanceSufficient
const onDrop = async (files: any) => {
setFile(files[0])
@ -101,13 +89,7 @@ export default function Compute({
return (
<div className={styles.compute}>
{price ? (
<Price price={price} small />
) : price === '' ? (
'No price found'
) : (
<Loader message="Retrieving price..." />
)}
<Price ddo={ddo} setPriceOutside={setPrice} />
<div className={styles.info}>
<div className={styles.selectType}>
@ -133,7 +115,6 @@ export default function Compute({
Start job
</Button>
</div>
{/* <TermsCheckbox onChange={onCheck} /> */}
</div>
<footer className={styles.feedback}>
@ -148,7 +129,7 @@ export default function Compute({
state="success"
/>
)}
<Web3Feedback isBalanceInsufficient={!isBalanceSufficient} />
<Web3Feedback isBalanceSufficient={isBalanceSufficient} />
</footer>
</div>
</div>

View File

@ -12,16 +12,18 @@
flex-shrink: 0;
}
.consume button {
margin-left: calc(var(--spacer) / 4);
.pricewrapper {
display: flex;
flex-wrap: wrap;
}
.consume button:first-of-type {
margin-left: 0;
.pricewrapper button {
margin-top: calc(var(--spacer) / 2);
align-self: flex-end;
}
.price {
margin-bottom: calc(var(--spacer) / 2);
.pricewrapper > div {
min-height: 30px;
}
.feedback {

View File

@ -1,7 +1,6 @@
import React, { ReactElement } from 'react'
import { toast } from 'react-toastify'
import { File as FileMetadata, DDO } from '@oceanprotocol/lib'
import compareAsBN, { Comparisson } from '../../../utils/compareAsBN'
import Button from '../../atoms/Button'
import File from '../../atoms/File'
import Price from '../../atoms/Price'
@ -12,21 +11,19 @@ import { useOcean, useConsume } from '@oceanprotocol/react'
export default function Consume({
ddo,
price,
file
file,
isBalanceSufficient,
setPrice
}: {
ddo: DDO
price: string // in OCEAN, not wei
file: FileMetadata
isBalanceSufficient: boolean
setPrice: (price: string) => void
}): ReactElement {
const accessService = ddo.findServiceByType('access')
const { ocean } = useOcean()
const { consumeStepText, consume, consumeError } = useConsume()
const isFree = price === '0'
// const isBalanceSufficient =
// isFree || compareAsBN(balanceInOcean, fromWei(cost), Comparisson.gte)
const isDisabled = !ocean
const isDisabled = !ocean || !isBalanceSufficient
if (consumeError) {
toast.error(consumeError)
@ -41,7 +38,7 @@ export default function Consume({
onClick={() => consume(ddo.id, ddo.dataToken, 'access')}
disabled={isDisabled}
>
{isFree ? 'Download' : 'Buy'}
Buy
</Button>
)
@ -52,19 +49,13 @@ export default function Consume({
<File file={file} />
</div>
<div className={styles.pricewrapper}>
{price ? (
<Price price={price} small />
) : price === '' ? (
'No price found'
) : (
<Loader message="Retrieving price..." />
)}
<Price ddo={ddo} setPriceOutside={setPrice} />
<PurchaseButton />
</div>
</div>
<footer className={styles.feedback}>
<Web3Feedback isBalanceInsufficient />
<Web3Feedback isBalanceSufficient={isBalanceSufficient} />
</footer>
</aside>
)

View File

@ -5,7 +5,8 @@ import Consume from './Consume'
import { MetadataMarket } from '../../../@types/Metadata'
import { DDO } from '@oceanprotocol/lib'
import Tabs from '../../atoms/Tabs'
import { useMetadata } from '@oceanprotocol/react'
import { useOcean } from '@oceanprotocol/react'
import compareAsBN from '../../../utils/compareAsBN'
export default function AssetActions({
metadata,
@ -14,22 +15,37 @@ export default function AssetActions({
metadata: MetadataMarket
ddo: DDO
}): ReactElement {
const { getBestPrice } = useMetadata(ddo.id)
const { balance } = useOcean()
const [price, setPrice] = useState<string>()
useEffect(() => {
async function init() {
const price = await getBestPrice(ddo.dataToken)
setPrice(price)
}
init()
}, [])
const [isBalanceSufficient, setIsBalanceSufficient] = useState<boolean>()
const isCompute = Boolean(ddo.findServiceByType('compute'))
// Check user balance against price
useEffect(() => {
if (!price || !balance || !balance.ocean) return
const isFree = price === '0'
setIsBalanceSufficient(isFree ? true : compareAsBN(balance.ocean, price))
return () => {
setIsBalanceSufficient(false)
}
}, [balance, price])
const UseContent = isCompute ? (
<Compute ddo={ddo} price={price} />
<Compute
ddo={ddo}
isBalanceSufficient={isBalanceSufficient}
setPrice={setPrice}
/>
) : (
<Consume ddo={ddo} price={price} file={metadata.main.files[0]} />
<Consume
ddo={ddo}
isBalanceSufficient={isBalanceSufficient}
file={metadata.main.files[0]}
setPrice={setPrice}
/>
)
const tabs = [

View File

@ -1,21 +1,16 @@
import BN from 'bn.js'
import { Decimal } from 'decimal.js'
export enum Comparisson {
'lt' = 'lt',
'lte' = 'lte',
'gt' = 'gt',
'gte' = 'gte',
'eq' = 'eq'
}
// Run decimal.js comparison
// http://mikemcl.github.io/decimal.js/#cmp
export default function compareAsBN(balance: string, price: string): boolean {
const aBN = new Decimal(balance)
const bBN = new Decimal(price)
const compare = aBN.comparedTo(bBN)
// Run the corresponding bn.js comparisson:
// https://github.com/indutny/bn.js/#utilities
export default function compareAsBN(
a: string,
b: string,
comparisson: Comparisson
) {
const aBN = new BN(a)
const bBN = new BN(b)
return aBN[comparisson](bBN)
switch (compare) {
case 1 || 0: // balance is greater or equal to price
return true
default:
return false
}
}