mirror of
https://github.com/oceanprotocol/market.git
synced 2024-12-02 05:57:29 +01:00
Merge branch 'v4' into feature/v4-c2d
This commit is contained in:
Bogdan Fazakas
commit
6e2e9875f1
8397
package-lock.json
generated
8397
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -21,7 +21,7 @@
|
||||
"@coingecko/cryptoformat": "^0.4.4",
|
||||
"@loadable/component": "^5.15.2",
|
||||
"@oceanprotocol/art": "^3.2.0",
|
||||
"@oceanprotocol/lib": "^1.0.0-next.32",
|
||||
"@oceanprotocol/lib": "^1.0.0-next.33",
|
||||
"@oceanprotocol/typographies": "^0.1.0",
|
||||
"@portis/web3": "^4.0.7",
|
||||
"@tippyjs/react": "^4.2.6",
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { LoggerInstance } from '@oceanprotocol/lib'
|
||||
import { LoggerInstance, Pool } from '@oceanprotocol/lib'
|
||||
import { isValidNumber } from '@utils/numbers'
|
||||
import Decimal from 'decimal.js'
|
||||
import React, {
|
||||
@ -16,6 +16,7 @@ import {
|
||||
} from 'src/@types/subgraph/PoolData'
|
||||
import { useAsset } from '../Asset'
|
||||
import { useWeb3 } from '../Web3'
|
||||
import { calculateSharesVL } from '@utils/pool'
|
||||
import { PoolProviderValue, PoolInfo, PoolInfoUser } from './_types'
|
||||
import { getFee, getPoolData, getWeight } from './_utils'
|
||||
|
||||
@ -37,7 +38,7 @@ const initialPoolInfoUser: Partial<PoolInfoUser> = {
|
||||
const initialPoolInfoCreator: Partial<PoolInfoUser> = initialPoolInfoUser
|
||||
|
||||
function PoolProvider({ children }: { children: ReactNode }): ReactElement {
|
||||
const { accountId } = useWeb3()
|
||||
const { accountId, web3, chainId } = useWeb3()
|
||||
const { isInPurgatory, asset, owner } = useAsset()
|
||||
|
||||
const [poolData, setPoolData] = useState<PoolDataPoolData>()
|
||||
@ -54,6 +55,8 @@ function PoolProvider({ children }: { children: ReactNode }): ReactElement {
|
||||
const [hasUserAddedLiquidity, setUserHasAddedLiquidity] = useState(false)
|
||||
const [isRemoveDisabled, setIsRemoveDisabled] = useState(false)
|
||||
// const [fetchInterval, setFetchInterval] = useState<NodeJS.Timeout>()
|
||||
const [ownerPoolShares, setOwnerPoolShares] = useState('0')
|
||||
const [userPoolShares, setUserPoolShares] = useState('0')
|
||||
|
||||
const fetchAllData = useCallback(async () => {
|
||||
if (
|
||||
@ -84,30 +87,6 @@ function PoolProvider({ children }: { children: ReactNode }): ReactElement {
|
||||
LoggerInstance.log('[pool] Fetched pool snapshots:', response.poolSnapshots)
|
||||
}, [asset?.chainId, asset?.accessDetails?.addressOrId, owner, accountId])
|
||||
|
||||
// Helper: start interval fetching
|
||||
// const initFetchInterval = useCallback(() => {
|
||||
// if (fetchInterval) return
|
||||
|
||||
// const newInterval = setInterval(() => {
|
||||
// fetchAllData()
|
||||
// LoggerInstance.log(
|
||||
// `[pool] Refetch interval fired after ${refreshInterval / 1000}s`
|
||||
// )
|
||||
// }, refreshInterval)
|
||||
// setFetchInterval(newInterval)
|
||||
|
||||
// // Having `accountId` as dependency is important for interval to
|
||||
// // change after user account switch.
|
||||
// // eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
// }, [fetchInterval, fetchAllData, accountId])
|
||||
|
||||
// useEffect(() => {
|
||||
// return () => {
|
||||
// clearInterval(fetchInterval)
|
||||
// }
|
||||
// }, [fetchInterval])
|
||||
|
||||
//
|
||||
// 0 Fetch all the data on mount if we are on a pool.
|
||||
// All further effects depend on the fetched data
|
||||
// and only do further data checking and manipulation.
|
||||
@ -116,7 +95,6 @@ function PoolProvider({ children }: { children: ReactNode }): ReactElement {
|
||||
if (asset?.accessDetails?.type !== 'dynamic') return
|
||||
|
||||
fetchAllData()
|
||||
// initFetchInterval()
|
||||
}, [fetchAllData, asset?.accessDetails?.type])
|
||||
|
||||
//
|
||||
@ -125,12 +103,19 @@ function PoolProvider({ children }: { children: ReactNode }): ReactElement {
|
||||
useEffect(() => {
|
||||
if (!poolData) return
|
||||
|
||||
// once we have poolData, we need to get owner's pool shares (OVL)
|
||||
calculateSharesVL(
|
||||
poolData.id,
|
||||
poolData.baseToken.address,
|
||||
poolData.shares[0].shares,
|
||||
asset.chainId
|
||||
).then((shares) => {
|
||||
setOwnerPoolShares(shares)
|
||||
})
|
||||
// Total Liquidity
|
||||
const totalLiquidityInOcean = isValidNumber(poolData.spotPrice)
|
||||
? new Decimal(poolData.baseTokenLiquidity).add(
|
||||
new Decimal(poolData.datatokenLiquidity).mul(poolData.spotPrice)
|
||||
)
|
||||
: new Decimal(0)
|
||||
const totalLiquidityInOcean = new Decimal(
|
||||
poolData.baseTokenLiquidity * 2 || 0
|
||||
)
|
||||
|
||||
const newPoolInfo = {
|
||||
liquidityProviderSwapFee: getFee(poolData.liquidityProviderSwapFee),
|
||||
@ -145,48 +130,42 @@ function PoolProvider({ children }: { children: ReactNode }): ReactElement {
|
||||
totalPoolTokens: poolData.totalShares,
|
||||
totalLiquidityInOcean
|
||||
}
|
||||
|
||||
setPoolInfo(newPoolInfo)
|
||||
LoggerInstance.log('[pool] Created new pool info:', newPoolInfo)
|
||||
}, [poolData])
|
||||
}, [asset?.chainId, chainId, poolData, web3])
|
||||
|
||||
//
|
||||
// 2 Pool Creator Info
|
||||
//
|
||||
useEffect(() => {
|
||||
if (!poolData || !poolInfo?.totalPoolTokens) return
|
||||
|
||||
// Staking bot receives half the pool shares so for display purposes
|
||||
// we can multiply by 2 as we have a hardcoded 50/50 pool weight.
|
||||
const ownerPoolShares = new Decimal(poolData.shares[0]?.shares)
|
||||
.mul(2)
|
||||
.toString()
|
||||
|
||||
// Liquidity in base token, calculated from pool share tokens.
|
||||
const liquidity =
|
||||
isValidNumber(ownerPoolShares) &&
|
||||
isValidNumber(poolInfo.totalPoolTokens) &&
|
||||
isValidNumber(poolData.baseTokenLiquidity)
|
||||
? new Decimal(ownerPoolShares)
|
||||
.dividedBy(new Decimal(poolInfo.totalPoolTokens))
|
||||
.mul(poolData.baseTokenLiquidity)
|
||||
: new Decimal(0)
|
||||
if (
|
||||
!poolData ||
|
||||
!poolInfo?.totalPoolTokens ||
|
||||
!poolInfo.totalLiquidityInOcean ||
|
||||
ownerPoolShares === '0'
|
||||
)
|
||||
return
|
||||
|
||||
// Pool share tokens.
|
||||
const poolShare =
|
||||
isValidNumber(ownerPoolShares) && isValidNumber(poolInfo.totalPoolTokens)
|
||||
? new Decimal(ownerPoolShares)
|
||||
.dividedBy(new Decimal(poolInfo.totalPoolTokens))
|
||||
.mul(100)
|
||||
.toFixed(2)
|
||||
: '0'
|
||||
const poolShare = new Decimal(ownerPoolShares)
|
||||
.dividedBy(poolInfo.totalLiquidityInOcean)
|
||||
.mul(100)
|
||||
.toFixed(2)
|
||||
|
||||
const newPoolOwnerInfo = {
|
||||
liquidity,
|
||||
liquidity: new Decimal(ownerPoolShares), // liquidity in base token, values from from `calcSingleOutGivenPoolIn` method
|
||||
poolShares: ownerPoolShares,
|
||||
poolShare
|
||||
}
|
||||
setPoolInfoOwner(newPoolOwnerInfo)
|
||||
LoggerInstance.log('[pool] Created new owner pool info:', newPoolOwnerInfo)
|
||||
}, [poolData, poolInfo?.totalPoolTokens])
|
||||
}, [
|
||||
ownerPoolShares,
|
||||
poolData,
|
||||
poolInfo.totalLiquidityInOcean,
|
||||
poolInfo.totalPoolTokens
|
||||
])
|
||||
|
||||
//
|
||||
// 3 User Pool Info
|
||||
@ -196,40 +175,34 @@ function PoolProvider({ children }: { children: ReactNode }): ReactElement {
|
||||
!poolData ||
|
||||
!poolInfo?.totalPoolTokens ||
|
||||
!poolInfoUser?.poolShares ||
|
||||
!poolInfo?.totalLiquidityInOcean ||
|
||||
!poolData?.baseTokenLiquidity ||
|
||||
!asset?.chainId ||
|
||||
!accountId ||
|
||||
!poolInfoUser
|
||||
)
|
||||
return
|
||||
// Staking bot receives half the pool shares so for display purposes
|
||||
// we can multiply by 2 as we have a hardcoded 50/50 pool weight.
|
||||
const userPoolShares = new Decimal(poolInfoUser.poolShares || 0)
|
||||
.mul(2)
|
||||
.toString()
|
||||
|
||||
// once we have poolData, we need to get user's pool shares (VL)
|
||||
calculateSharesVL(
|
||||
poolData.id,
|
||||
poolData.baseToken.address,
|
||||
poolInfoUser.poolShares,
|
||||
asset.chainId
|
||||
).then((shares) => {
|
||||
setUserPoolShares(shares)
|
||||
})
|
||||
|
||||
// Pool share in %.
|
||||
const poolShare =
|
||||
isValidNumber(userPoolShares) &&
|
||||
isValidNumber(poolInfo.totalPoolTokens) &&
|
||||
new Decimal(userPoolShares)
|
||||
.dividedBy(new Decimal(poolInfo.totalPoolTokens))
|
||||
.mul(100)
|
||||
.toFixed(2)
|
||||
const poolShare = new Decimal(userPoolShares)
|
||||
.dividedBy(new Decimal(poolInfo.totalLiquidityInOcean))
|
||||
.mul(100)
|
||||
.toFixed(2)
|
||||
|
||||
setUserHasAddedLiquidity(Number(poolShare) > 0)
|
||||
|
||||
// Liquidity in base token, calculated from pool share tokens.
|
||||
const liquidity =
|
||||
isValidNumber(userPoolShares) &&
|
||||
isValidNumber(poolInfo.totalPoolTokens) &&
|
||||
isValidNumber(poolData.baseTokenLiquidity)
|
||||
? new Decimal(userPoolShares)
|
||||
.dividedBy(new Decimal(poolInfo.totalPoolTokens))
|
||||
.mul(poolData.baseTokenLiquidity)
|
||||
: new Decimal(0)
|
||||
|
||||
const newPoolInfoUser = {
|
||||
liquidity,
|
||||
liquidity: new Decimal(userPoolShares), // liquidity in base token, values from from `calcSingleOutGivenPoolIn` method
|
||||
poolShare
|
||||
}
|
||||
setPoolInfoUser((prevState: PoolInfoUser) => ({
|
||||
@ -247,6 +220,7 @@ function PoolProvider({ children }: { children: ReactNode }): ReactElement {
|
||||
poolData,
|
||||
poolInfoUser?.poolShares,
|
||||
accountId,
|
||||
userPoolShares,
|
||||
asset?.chainId,
|
||||
owner,
|
||||
poolInfo?.totalPoolTokens
|
||||
|
||||
@ -5,7 +5,8 @@ import {
|
||||
Nft,
|
||||
ProviderInstance,
|
||||
DDO,
|
||||
MetadataAndTokenURI
|
||||
MetadataAndTokenURI,
|
||||
NftCreateData
|
||||
} from '@oceanprotocol/lib'
|
||||
import { SvgWaves } from './SvgWaves'
|
||||
import Web3 from 'web3'
|
||||
@ -62,12 +63,18 @@ export function generateNftMetadata(): NftMetadata {
|
||||
|
||||
const tokenUriPrefix = 'data:application/json;base64,'
|
||||
|
||||
export function generateNftCreateData(nftMetadata: NftMetadata): any {
|
||||
const nftCreateData = {
|
||||
export function generateNftCreateData(
|
||||
nftMetadata: NftMetadata,
|
||||
accountId: string,
|
||||
transferable = true
|
||||
): any {
|
||||
const nftCreateData: NftCreateData = {
|
||||
name: nftMetadata.name,
|
||||
symbol: nftMetadata.symbol,
|
||||
templateIndex: 1,
|
||||
tokenURI: ''
|
||||
tokenURI: '',
|
||||
transferable,
|
||||
owner: accountId
|
||||
}
|
||||
|
||||
return nftCreateData
|
||||
|
||||
@ -114,3 +114,26 @@ export function calculateUserTVL(
|
||||
const tvl = new Decimal(liquidity).mul(2) // we multiply by 2 because of 50/50 weight
|
||||
return tvl.toDecimalPlaces(MAX_DECIMALS).toString()
|
||||
}
|
||||
|
||||
export async function calculateSharesVL(
|
||||
pool: string,
|
||||
tokenAddress: string,
|
||||
shares: string,
|
||||
chainId?: number
|
||||
): Promise<string> {
|
||||
if (!chainId) throw new Error("chainId can't be undefined at the same time!")
|
||||
|
||||
// we only use the dummyWeb3 connection here
|
||||
const web3 = await getDummyWeb3(chainId)
|
||||
|
||||
const poolInstance = new Pool(web3)
|
||||
// get shares VL in ocean
|
||||
const amountOcean = await poolInstance.calcSingleOutGivenPoolIn(
|
||||
pool,
|
||||
tokenAddress,
|
||||
shares
|
||||
)
|
||||
|
||||
const tvl = new Decimal(amountOcean || 0).mul(2) // we multiply by 2 because of 50/50 weight
|
||||
return tvl.toDecimalPlaces(MAX_DECIMALS).toString()
|
||||
}
|
||||
|
||||
@ -6,21 +6,6 @@
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hasError {
|
||||
border-color: var(--brand-alert-red);
|
||||
background-color: var(--brand-white);
|
||||
}
|
||||
|
||||
.url {
|
||||
margin: 0;
|
||||
font-size: var(--font-size-base);
|
||||
line-height: var(--line-height);
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
padding-right: calc(var(--spacer) / 2);
|
||||
}
|
||||
|
||||
.info ul {
|
||||
margin: 0;
|
||||
}
|
||||
@ -32,6 +17,25 @@
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
|
||||
.info li.success {
|
||||
color: var(--brand-alert-green);
|
||||
}
|
||||
|
||||
.url {
|
||||
margin: 0;
|
||||
font-size: var(--font-size-base);
|
||||
line-height: var(--line-height);
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
padding-right: calc(var(--spacer) / 2);
|
||||
}
|
||||
|
||||
.warning {
|
||||
margin-top: calc(var(--spacer) / 3);
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.removeButton {
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
@ -43,11 +47,3 @@
|
||||
color: var(--font-color-text);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.info li.success {
|
||||
color: var(--brand-alert-green);
|
||||
}
|
||||
|
||||
.info li.error {
|
||||
color: var(--brand-alert-red);
|
||||
}
|
||||
|
||||
@ -3,6 +3,7 @@ import { prettySize } from './utils'
|
||||
import cleanupContentType from '@utils/cleanupContentType'
|
||||
import styles from './Info.module.css'
|
||||
import { FileMetadata } from '@oceanprotocol/lib'
|
||||
import Alert from '@shared/atoms/Alert'
|
||||
|
||||
export default function FileInfo({
|
||||
file,
|
||||
@ -11,29 +12,30 @@ export default function FileInfo({
|
||||
file: FileMetadata
|
||||
handleClose(): void
|
||||
}): ReactElement {
|
||||
return file.valid ? (
|
||||
const contentTypeCleaned = file.contentType
|
||||
? cleanupContentType(file.contentType)
|
||||
: null
|
||||
|
||||
// Prevent accidential publishing of error pages (e.g. 404) for
|
||||
// popular file hosting services by warning about it.
|
||||
// See https://github.com/oceanprotocol/market/issues/1246
|
||||
const shouldWarnAboutFile = file.valid && contentTypeCleaned === 'html'
|
||||
|
||||
return (
|
||||
<div className={styles.info}>
|
||||
<h3 className={styles.url}>{file.url}</h3>
|
||||
<ul>
|
||||
<li className={styles.success}>✓ URL confirmed</li>
|
||||
{file.contentLength && <li>{prettySize(+file.contentLength)}</li>}
|
||||
{file.contentType && <li>{cleanupContentType(file.contentType)}</li>}
|
||||
</ul>
|
||||
<button className={styles.removeButton} onClick={handleClose}>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className={`${styles.info} ${!file.valid ? styles.hasError : ''}`}>
|
||||
<h3 className={styles.url}>{file.url}</h3>
|
||||
<ul>
|
||||
<li className={styles.error}>
|
||||
{' '}
|
||||
✗ No valid file detected. Check your URL and try again.
|
||||
</li>
|
||||
{file.contentLength && <li>{prettySize(+file.contentLength)}</li>}
|
||||
{file.contentType && <li>{cleanupContentType(file.contentType)}</li>}
|
||||
{contentTypeCleaned && <li>{contentTypeCleaned}</li>}
|
||||
</ul>
|
||||
{shouldWarnAboutFile && (
|
||||
<Alert
|
||||
state="info"
|
||||
text={`Your file was detected as ${contentTypeCleaned}, which is unusal for a data asset. If you did not intend to use a ${contentTypeCleaned} file, try a different URL pointing directly to your data asset file.`}
|
||||
className={styles.warning}
|
||||
/>
|
||||
)}
|
||||
<button className={styles.removeButton} onClick={handleClose}>
|
||||
×
|
||||
</button>
|
||||
|
||||
@ -1,80 +1,59 @@
|
||||
import React, { ReactElement, useCallback, useEffect, useState } from 'react'
|
||||
import React, { ReactElement, useState } from 'react'
|
||||
import { useField, useFormikContext } from 'formik'
|
||||
import { toast } from 'react-toastify'
|
||||
import FileInfo from './Info'
|
||||
import UrlInput from '../URLInput'
|
||||
import { InputProps } from '@shared/FormInput'
|
||||
import { initialValues } from 'src/components/Publish/_constants'
|
||||
import { getFileUrlInfo } from '@utils/provider'
|
||||
import { FormPublishData } from 'src/components/Publish/_types'
|
||||
import { LoggerInstance } from '@oceanprotocol/lib'
|
||||
|
||||
export default function FilesInput(props: InputProps): ReactElement {
|
||||
const [field, meta, helpers] = useField(props.name)
|
||||
const [isInvalidUrl, setIsInvalidUrl] = useState(false)
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const { values } = useFormikContext<FormPublishData>()
|
||||
const { values, setFieldError } = useFormikContext<FormPublishData>()
|
||||
|
||||
const loadFileInfo = useCallback(
|
||||
(url: string) => {
|
||||
const providerUri =
|
||||
(values.services && values.services[0].providerUrl.url) ||
|
||||
'https://provider.mainnet.oceanprotocol.com'
|
||||
|
||||
async function validateUrl() {
|
||||
try {
|
||||
setIsLoading(true)
|
||||
const checkedFile = await getFileUrlInfo(url, providerUri)
|
||||
setIsInvalidUrl(!checkedFile[0].valid)
|
||||
checkedFile && helpers.setValue([{ url, ...checkedFile[0] }])
|
||||
} catch (error) {
|
||||
toast.error(
|
||||
'Could not fetch file info. Please check URL and try again'
|
||||
)
|
||||
console.error(error.message)
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
validateUrl()
|
||||
},
|
||||
[helpers, values.services]
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
// try load from initial values, kinda hacky but it works
|
||||
if (
|
||||
props.value &&
|
||||
props.value.length > 0 &&
|
||||
typeof props.value[0] === 'string'
|
||||
) {
|
||||
loadFileInfo(props.value[0].toString())
|
||||
}
|
||||
}, [loadFileInfo, props])
|
||||
|
||||
async function handleButtonClick(e: React.SyntheticEvent, url: string) {
|
||||
async function handleValidation(e: React.SyntheticEvent, url: string) {
|
||||
// File example 'https://oceanprotocol.com/tech-whitepaper.pdf'
|
||||
e.preventDefault()
|
||||
loadFileInfo(url)
|
||||
|
||||
try {
|
||||
const providerUrl = values?.services[0].providerUrl.url
|
||||
setIsLoading(true)
|
||||
const checkedFile = await getFileUrlInfo(url, providerUrl)
|
||||
|
||||
// error if something's not right from response
|
||||
if (!checkedFile)
|
||||
throw Error('Could not fetch file info. Is your network down?')
|
||||
|
||||
if (checkedFile[0].valid === false)
|
||||
throw Error('✗ No valid file detected. Check your URL and try again.')
|
||||
|
||||
// if all good, add file to formik state
|
||||
helpers.setValue([{ url, ...checkedFile[0] }])
|
||||
} catch (error) {
|
||||
setFieldError(`${field.name}[0].url`, error.message)
|
||||
LoggerInstance.error(error.message)
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
function handleClose() {
|
||||
helpers.setValue(initialValues.services[0].files)
|
||||
helpers.setValue(meta.initialValue)
|
||||
helpers.setTouched(false)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{field?.value && field?.value[0]?.valid !== undefined ? (
|
||||
{field?.value?.[0]?.valid === true ? (
|
||||
<FileInfo file={field.value[0]} handleClose={handleClose} />
|
||||
) : (
|
||||
<UrlInput
|
||||
submitText="Validate"
|
||||
{...props}
|
||||
name={`${field.name}[0].url`}
|
||||
hasError={Boolean(meta.touched && isInvalidUrl)}
|
||||
isLoading={isLoading}
|
||||
handleButtonClick={handleButtonClick}
|
||||
handleButtonClick={handleValidation}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
|
||||
@ -17,7 +17,7 @@ const getEstGasFee = async (
|
||||
return
|
||||
|
||||
const { web3 } = nftFactory
|
||||
const nft = generateNftCreateData(nftMetadata)
|
||||
const nft = generateNftCreateData(nftMetadata, address)
|
||||
|
||||
const gasPrice = await web3.eth.getGasPrice()
|
||||
const gasLimit = await nftFactory?.estGasCreateNFT(address, nft)
|
||||
|
||||
@ -2,8 +2,14 @@
|
||||
composes: error from '@shared/FormInput/index.module.css';
|
||||
}
|
||||
|
||||
.restore {
|
||||
.default {
|
||||
font-family: var(--font-family-base);
|
||||
text-transform: none;
|
||||
font-weight: var(--font-weight-base);
|
||||
|
||||
/* take it out of layout so error messages
|
||||
are not pushed down */
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -30%;
|
||||
}
|
||||
|
||||
@ -1,52 +1,56 @@
|
||||
import React, { ReactElement, useState } from 'react'
|
||||
import { ErrorMessage, useField } from 'formik'
|
||||
import { useField, useFormikContext } from 'formik'
|
||||
import UrlInput from '../URLInput'
|
||||
import { InputProps } from '@shared/FormInput'
|
||||
import FileInfo from '../FilesInput/Info'
|
||||
import styles from './index.module.css'
|
||||
import Button from '@shared/atoms/Button'
|
||||
import { initialValues } from 'src/components/Publish/_constants'
|
||||
import { ProviderInstance } from '@oceanprotocol/lib'
|
||||
import { LoggerInstance, ProviderInstance } from '@oceanprotocol/lib'
|
||||
import { FormPublishData } from 'src/components/Publish/_types'
|
||||
|
||||
export default function CustomProvider(props: InputProps): ReactElement {
|
||||
const [field, meta, helpers] = useField(props.name)
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const { setFieldError } = useFormikContext<FormPublishData>()
|
||||
|
||||
async function validateProvider(url: string) {
|
||||
setIsLoading(true)
|
||||
async function handleValidation(e: React.SyntheticEvent) {
|
||||
e.preventDefault()
|
||||
|
||||
try {
|
||||
const isValid = await ProviderInstance.isValidProvider(url)
|
||||
helpers.setValue({ url, valid: isValid })
|
||||
helpers.setError(undefined)
|
||||
setIsLoading(true)
|
||||
const isValid = await ProviderInstance.isValidProvider(field.value.url)
|
||||
|
||||
// error if something's not right from response
|
||||
// No way to detect a failed request with ProviderInstance.isValidProvider,
|
||||
// making this error show up for multiple cases it shouldn't, like network
|
||||
// down.
|
||||
if (!isValid)
|
||||
throw Error(
|
||||
'✗ No valid provider detected. Check your network, your URL and try again.'
|
||||
)
|
||||
|
||||
// if all good, add provider to formik state
|
||||
helpers.setValue({ url: field.value.url, valid: isValid })
|
||||
} catch (error) {
|
||||
helpers.setError(
|
||||
'Could not validate provider. Please check URL and try again.'
|
||||
)
|
||||
setFieldError(`${field.name}.url`, error.message)
|
||||
LoggerInstance.error(error.message)
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleValidateButtonClick(
|
||||
e: React.SyntheticEvent,
|
||||
url: string
|
||||
) {
|
||||
e.preventDefault()
|
||||
validateProvider(url)
|
||||
}
|
||||
|
||||
function handleFileInfoClose() {
|
||||
helpers.setValue({ url: '', valid: false })
|
||||
helpers.setTouched(false)
|
||||
}
|
||||
|
||||
function handleRestore(e: React.SyntheticEvent) {
|
||||
function handleDefault(e: React.SyntheticEvent) {
|
||||
e.preventDefault()
|
||||
helpers.setValue(initialValues.services[0].providerUrl)
|
||||
}
|
||||
|
||||
return field?.value?.valid ? (
|
||||
return field?.value?.valid === true ? (
|
||||
<FileInfo file={field.value} handleClose={handleFileInfoClose} />
|
||||
) : (
|
||||
<>
|
||||
@ -54,23 +58,17 @@ export default function CustomProvider(props: InputProps): ReactElement {
|
||||
submitText="Validate"
|
||||
{...props}
|
||||
name={`${field.name}.url`}
|
||||
hasError={Boolean(meta.touched && meta.error)}
|
||||
isLoading={isLoading}
|
||||
handleButtonClick={handleValidateButtonClick}
|
||||
handleButtonClick={handleValidation}
|
||||
/>
|
||||
<Button
|
||||
style="text"
|
||||
size="small"
|
||||
onClick={handleRestore}
|
||||
className={styles.restore}
|
||||
onClick={handleDefault}
|
||||
className={styles.default}
|
||||
>
|
||||
Use Default Provider
|
||||
</Button>
|
||||
{typeof meta.error === 'string' && meta.touched && meta.error && (
|
||||
<div className={styles.error}>
|
||||
<ErrorMessage name={field.name} />
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@ -10,8 +10,3 @@
|
||||
.error {
|
||||
composes: error from '@shared/FormInput/index.module.css';
|
||||
}
|
||||
|
||||
.success {
|
||||
background: var(--brand-alert-green);
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
@ -12,14 +12,12 @@ export default function URLInput({
|
||||
handleButtonClick,
|
||||
isLoading,
|
||||
name,
|
||||
hasError,
|
||||
...props
|
||||
}: {
|
||||
submitText: string
|
||||
handleButtonClick(e: React.SyntheticEvent, data: string): void
|
||||
isLoading: boolean
|
||||
name: string
|
||||
hasError: boolean
|
||||
}): ReactElement {
|
||||
const [field, meta] = useField(name)
|
||||
const [isButtonDisabled, setIsButtonDisabled] = useState(true)
|
||||
|
||||
@ -5,8 +5,6 @@ import Link from 'next/link'
|
||||
import get3BoxProfile from '@utils/profile'
|
||||
import { accountTruncate } from '@utils/web3'
|
||||
import axios from 'axios'
|
||||
import Add from './Add'
|
||||
import { useWeb3 } from '@context/Web3'
|
||||
import { getEnsName } from '@utils/ens'
|
||||
import { useIsMounted } from '@hooks/useIsMounted'
|
||||
|
||||
@ -21,17 +19,18 @@ export default function Publisher({
|
||||
minimal?: boolean
|
||||
className?: string
|
||||
}): ReactElement {
|
||||
// const { accountId } = useWeb3()
|
||||
const isMounted = useIsMounted()
|
||||
const [profile, setProfile] = useState<Profile>()
|
||||
const [name, setName] = useState(accountTruncate(account))
|
||||
const [name, setName] = useState('')
|
||||
const [accountEns, setAccountEns] = useState<string>()
|
||||
|
||||
// const showAdd = account === accountId && !profile
|
||||
|
||||
useEffect(() => {
|
||||
if (!account) return
|
||||
|
||||
// set default name on hook
|
||||
// to avoid side effect (UI not updating on account's change)
|
||||
setName(accountTruncate(account))
|
||||
|
||||
const source = axios.CancelToken.source()
|
||||
|
||||
async function getExternalName() {
|
||||
@ -70,7 +69,6 @@ export default function Publisher({
|
||||
<Link href={`/profile/${accountEns || account}`}>
|
||||
<a title="Show profile page.">{name}</a>
|
||||
</Link>
|
||||
{/* {showAdd && <Add />} */}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@ -53,6 +53,7 @@ export const initialValues: FormPublishData = {
|
||||
},
|
||||
metadata: {
|
||||
nft: { name: '', symbol: '', description: '', image_data: '' },
|
||||
transferable: true,
|
||||
type: 'dataset',
|
||||
name: '',
|
||||
author: '',
|
||||
|
||||
@ -29,6 +29,7 @@ export interface FormPublishData {
|
||||
}
|
||||
metadata: {
|
||||
nft: NftMetadata
|
||||
transferable: boolean
|
||||
type: 'dataset' | 'algorithm'
|
||||
name: string
|
||||
description: string
|
||||
|
||||
@ -181,8 +181,7 @@ export async function transformPublishFormToDdo(
|
||||
}
|
||||
],
|
||||
nft: {
|
||||
...generateNftCreateData(values?.metadata.nft),
|
||||
owner: accountId
|
||||
...generateNftCreateData(values?.metadata.nft, accountId)
|
||||
}
|
||||
})
|
||||
}
|
||||
@ -198,7 +197,9 @@ export async function createTokensAndPricing(
|
||||
web3: Web3
|
||||
) {
|
||||
const nftCreateData: NftCreateData = generateNftCreateData(
|
||||
values.metadata.nft
|
||||
values.metadata.nft,
|
||||
accountId,
|
||||
values.metadata.transferable
|
||||
)
|
||||
const { appConfig } = getSiteMetadata()
|
||||
LoggerInstance.log('[publish] Creating NFT with metadata', nftCreateData)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user