1
0
mirror of https://github.com/oceanprotocol/market.git synced 2024-06-15 17:03:30 +02:00
market/src/components/Asset/AssetActions/index.tsx

166 lines
5.2 KiB
TypeScript
Raw Normal View History

2020-08-11 08:20:40 +02:00
import React, { ReactElement, useState, useEffect } from 'react'
2020-07-08 17:57:53 +02:00
import Compute from './Compute'
import Consume from './Download'
import { FileInfo, LoggerInstance, Datatoken } from '@oceanprotocol/lib'
import Tabs, { TabsItem } from '@shared/atoms/Tabs'
2021-10-13 18:48:59 +02:00
import { compareAsBN } from '@utils/numbers'
2020-08-18 17:14:54 +02:00
import Pool from './Pool'
Swap tokens (#204) * swap Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro> * validation and calculation Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro> * refactor Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro> * remove unused effect Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro> * fix interval Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro> * increase refresh timer, remove optional params Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro> * make inputs show up without wallet * style fixes * restyling * styling * more styling * fix refresh price Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro> * remove test effect * fixes, get data as early as possible from DDO and initial state * refactor * refactor * refactor * label tweaks * copy * typo * prototype output * remove price header * ouput swap fee * fix * spacing * copy * refactor pool transaction titles * copy * update math Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro> * use messaging tweaks * tab tweaks, output refactor * fix dark mode selection style * prototype output * method tweaks * slippage to 1%, added warnig banner Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro> * form tweaks * error fix * empty inputs by default * longer intervals * maxOcean validation fix * slippage tolerance UI * modified slippage UI * refactor, refresh ocean user balance * move typings/models around * typing fix * fixed output values Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro> * bump oceanlib Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro> * remove console.log * remove placeholder * tweak * non-web3 browser tweak Co-authored-by: Matthias Kretschmann <m@kretschmann.io>
2020-11-16 16:21:15 +01:00
import Trade from './Trade'
2021-10-13 18:48:59 +02:00
import { useAsset } from '@context/Asset'
import { useWeb3 } from '@context/Web3'
import Web3Feedback from '@shared/Web3Feedback'
2022-02-04 16:58:11 +01:00
import { getFileDidInfo, getFileUrlInfo } from '@utils/provider'
2021-10-13 18:48:59 +02:00
import { getOceanConfig } from '@utils/ocean'
import { useCancelToken } from '@hooks/useCancelToken'
import { useIsMounted } from '@hooks/useIsMounted'
import styles from './index.module.css'
import { useFormikContext } from 'formik'
import { FormPublishData } from 'src/components/Publish/_types'
import { AssetExtended } from 'src/@types/AssetExtended'
import PoolProvider from '@context/Pool'
import AssetStats from './AssetStats'
2020-07-08 17:57:53 +02:00
export default function AssetActions({
asset
}: {
asset: AssetExtended
}): ReactElement {
const { accountId, balance, web3 } = useWeb3()
const { isAssetNetwork } = useAsset()
const newCancelToken = useCancelToken()
const isMounted = useIsMounted()
2022-01-14 15:38:30 +01:00
// TODO: using this for the publish preview works fine, but produces a console warning
// on asset details page as there is no formik context there:
// Warning: Formik context is undefined, please verify you are calling useFormikContext()
// as child of a <Formik> component.
const formikState = useFormikContext<FormPublishData>()
Pool statistics from the graph (#288) * graphql Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro> * ignore generated Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro> * delete generated Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro> * fix travis Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro> * fix travis Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro> * fix fetch Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro> * fix travis Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro> * fix fetch Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro> * update readme Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro> * pool creator liquidit& statistics Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro> * graph with the graph Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro> * cleanup Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro> * fix query Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro> * update poll interval Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro> * update graph url Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro> * ocean bump Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro> * run apollo codegen before starting gatsby * put back graph loading state * typing fix * graph tweak, add error state * readme update * remove unused functions, move graph provider Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro> * fix package-lock * fix graph when switching tabs * generate apollo files into one folder * fix loading Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro> * fix codegen camelcase Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro> * bump apollo packages * document subgraph usage, add example * rewrite into Data Sources, add quick examples * more data sources docs * docs updates, typos Co-authored-by: Matthias Kretschmann <m@kretschmann.io>
2021-01-21 16:02:48 +01:00
const [isBalanceSufficient, setIsBalanceSufficient] = useState<boolean>()
const [dtBalance, setDtBalance] = useState<string>()
const [fileMetadata, setFileMetadata] = useState<FileInfo>()
const [fileIsLoading, setFileIsLoading] = useState<boolean>(false)
const isCompute = Boolean(
asset?.services.filter((service) => service.type === 'compute')[0]
)
2020-08-07 18:12:39 +02:00
// Get and set file info
useEffect(() => {
const oceanConfig = getOceanConfig(asset?.chainId)
if (!oceanConfig) return
async function initFileInfo() {
setFileIsLoading(true)
const providerUrl =
formikState?.values?.services[0].providerUrl.url ||
2022-02-04 16:58:11 +01:00
asset?.services[0]?.serviceEndpoint
try {
2022-02-04 16:58:11 +01:00
const fileInfoResponse = formikState?.values?.services?.[0].files?.[0]
.url
? await getFileUrlInfo(
formikState?.values?.services?.[0].files?.[0].url,
providerUrl
)
: await getFileDidInfo(asset?.id, asset?.services[0]?.id, providerUrl)
fileInfoResponse && setFileMetadata(fileInfoResponse[0])
// set the content type in the Dataset Schema
const datasetSchema = document.scripts?.namedItem('datasetSchema')
if (datasetSchema) {
const datasetSchemaJSON = JSON.parse(datasetSchema.innerText)
if (datasetSchemaJSON?.distribution[0]['@type'] === 'DataDownload') {
const contentType = fileInfoResponse[0]?.contentType
datasetSchemaJSON.distribution[0].encodingFormat = contentType
datasetSchema.innerText = JSON.stringify(datasetSchemaJSON)
}
}
setFileIsLoading(false)
} catch (error) {
LoggerInstance.error(error.message)
}
}
initFileInfo()
}, [asset, isMounted, newCancelToken, formikState?.values?.services])
// Get and set user DT balance
useEffect(() => {
if (!web3 || !accountId || !isAssetNetwork) return
async function init() {
try {
const datatokenInstance = new Datatoken(web3)
const dtBalance = await datatokenInstance.balance(
asset.services[0].datatokenAddress,
accountId
)
setDtBalance(dtBalance)
} catch (e) {
LoggerInstance.error(e.message)
}
}
init()
}, [web3, accountId, asset, isAssetNetwork])
2020-08-11 08:20:40 +02:00
// Check user balance against price
useEffect(() => {
if (asset?.accessDetails?.type === 'free') setIsBalanceSufficient(true)
if (
!asset?.accessDetails?.price ||
!accountId ||
!balance?.ocean ||
!dtBalance
)
return
2020-08-11 08:20:40 +02:00
setIsBalanceSufficient(
compareAsBN(balance.ocean, `${asset?.accessDetails.price}`) ||
Number(dtBalance) >= 1
)
2020-08-11 08:20:40 +02:00
return () => {
setIsBalanceSufficient(false)
}
}, [balance, accountId, asset?.accessDetails, dtBalance])
2020-08-11 08:20:40 +02:00
const UseContent = (
<>
{isCompute ? (
<Compute
asset={asset}
dtBalance={dtBalance}
file={fileMetadata}
fileIsLoading={fileIsLoading}
/>
) : (
<Consume
asset={asset}
dtBalance={dtBalance}
isBalanceSufficient={isBalanceSufficient}
file={fileMetadata}
fileIsLoading={fileIsLoading}
/>
)}
<AssetStats />
</>
2020-07-08 17:57:53 +02:00
)
2020-07-23 12:26:08 +02:00
const tabs: TabsItem[] = [{ title: 'Use', content: UseContent }]
2020-07-23 12:26:08 +02:00
asset?.accessDetails?.type === 'dynamic' &&
tabs.push({ title: 'Pool', content: <Pool /> })
2020-09-23 13:55:53 +02:00
return (
<>
<PoolProvider>
<Tabs items={tabs} className={styles.actions} />
<Web3Feedback
networkId={asset?.chainId}
isAssetNetwork={isAssetNetwork}
/>
</PoolProvider>
</>
)
2020-07-08 17:57:53 +02:00
}