mirror of
https://github.com/oceanprotocol/market.git
synced 2024-12-02 05:57:29 +01:00
prepare datatoken & NFT display
This commit is contained in:
parent
a396615ed4
commit
94147026c0
@ -2,6 +2,13 @@
|
|||||||
"metadata": {
|
"metadata": {
|
||||||
"title": "Metadata",
|
"title": "Metadata",
|
||||||
"fields": [
|
"fields": [
|
||||||
|
{
|
||||||
|
"name": "nft",
|
||||||
|
"label": "Data NFT",
|
||||||
|
"type": "nft",
|
||||||
|
"help": "All metadata is stored on-chain in a newly deployed ERC-721 contract representing this asset.",
|
||||||
|
"required": true
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"name": "type",
|
"name": "type",
|
||||||
"label": "Asset Type",
|
"label": "Asset Type",
|
||||||
|
@ -9,12 +9,7 @@ import { publishFeedback } from '@utils/feedback'
|
|||||||
import { useOcean } from '@context/Ocean'
|
import { useOcean } from '@context/Ocean'
|
||||||
import { useWeb3 } from '@context/Web3'
|
import { useWeb3 } from '@context/Web3'
|
||||||
import { getOceanConfig } from '@utils/ocean'
|
import { getOceanConfig } from '@utils/ocean'
|
||||||
|
import { DataTokenOptions } from '@utils/datatokens'
|
||||||
export interface DataTokenOptions {
|
|
||||||
cap?: string
|
|
||||||
name?: string
|
|
||||||
symbol?: string
|
|
||||||
}
|
|
||||||
|
|
||||||
interface UsePublish {
|
interface UsePublish {
|
||||||
publish: (
|
publish: (
|
||||||
|
15
src/@utils/nft.ts
Normal file
15
src/@utils/nft.ts
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
export interface NftOptions {
|
||||||
|
name: string
|
||||||
|
symbol: string
|
||||||
|
tokenURI: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export function generateNftOptions(): NftOptions {
|
||||||
|
const newNft: NftOptions = {
|
||||||
|
name: 'Ocean Asset v4',
|
||||||
|
symbol: 'OCEAN-V4',
|
||||||
|
tokenURI: ''
|
||||||
|
}
|
||||||
|
|
||||||
|
return newNft
|
||||||
|
}
|
@ -1,5 +1,27 @@
|
|||||||
.datatoken {
|
.datatoken {
|
||||||
|
display: grid;
|
||||||
|
gap: var(--spacer);
|
||||||
|
grid-template-columns: 3fr 1fr;
|
||||||
|
margin-bottom: var(--spacer);
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token {
|
||||||
border: 1px solid var(--border-color);
|
border: 1px solid var(--border-color);
|
||||||
padding: calc(var(--spacer) / 3);
|
padding: calc(var(--spacer) / 3);
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.image {
|
||||||
|
width: 128px;
|
||||||
|
height: 128px;
|
||||||
|
padding: var(--spacer);
|
||||||
|
background: var(--brand-black);
|
||||||
|
fill: var(--brand-violet);
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image svg {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
@ -1,15 +1,16 @@
|
|||||||
import { useField } from 'formik'
|
import { useField } from 'formik'
|
||||||
import React, { ReactElement, useEffect } from 'react'
|
import React, { ReactElement, useEffect } from 'react'
|
||||||
import { utils } from '@oceanprotocol/lib'
|
|
||||||
import { InputProps } from '@shared/Form/Input'
|
import { InputProps } from '@shared/Form/Input'
|
||||||
|
import Logo from '@images/logo.svg'
|
||||||
import RefreshName from './RefreshName'
|
import RefreshName from './RefreshName'
|
||||||
import styles from './index.module.css'
|
import styles from './index.module.css'
|
||||||
|
import { generateDatatokenName } from '@utils/datatokens'
|
||||||
|
|
||||||
export default function Datatoken(props: InputProps): ReactElement {
|
export default function Datatoken(props: InputProps): ReactElement {
|
||||||
const [field, meta, helpers] = useField(props.name)
|
const [field, meta, helpers] = useField(props.name)
|
||||||
|
|
||||||
async function generateName() {
|
async function generateName() {
|
||||||
const dataTokenOptions = utils.generateDatatokenName()
|
const dataTokenOptions = generateDatatokenName()
|
||||||
helpers.setValue({ ...dataTokenOptions })
|
helpers.setValue({ ...dataTokenOptions })
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -22,9 +23,14 @@ export default function Datatoken(props: InputProps): ReactElement {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.datatoken}>
|
<div className={styles.datatoken}>
|
||||||
|
<div className={styles.token}>
|
||||||
<strong>{field?.value?.name}</strong> —{' '}
|
<strong>{field?.value?.name}</strong> —{' '}
|
||||||
<strong>{field?.value?.symbol}</strong>
|
<strong>{field?.value?.symbol}</strong>
|
||||||
<RefreshName generateName={generateName} />
|
<RefreshName generateName={generateName} />
|
||||||
</div>
|
</div>
|
||||||
|
<figure className={styles.image}>
|
||||||
|
<Logo />
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
18
src/components/@shared/Form/FormFields/Nft/index.module.css
Normal file
18
src/components/@shared/Form/FormFields/Nft/index.module.css
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
.nft {
|
||||||
|
display: grid;
|
||||||
|
gap: var(--spacer);
|
||||||
|
grid-template-columns: 3fr 1fr;
|
||||||
|
margin-bottom: var(--spacer);
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token {
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
padding: calc(var(--spacer) / 3);
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
}
|
||||||
|
|
||||||
|
.image {
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
}
|
32
src/components/@shared/Form/FormFields/Nft/index.tsx
Normal file
32
src/components/@shared/Form/FormFields/Nft/index.tsx
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
import { InputProps } from '@shared/Form/Input'
|
||||||
|
import { generateNftOptions } from '@utils/nft'
|
||||||
|
import { useField } from 'formik'
|
||||||
|
import React, { ReactElement, useEffect } from 'react'
|
||||||
|
import styles from './index.module.css'
|
||||||
|
|
||||||
|
export default function Nft(props: InputProps): ReactElement {
|
||||||
|
const [field, meta, helpers] = useField(props.name)
|
||||||
|
|
||||||
|
// Generate on first mount
|
||||||
|
useEffect(() => {
|
||||||
|
if (field.value?.name !== '') return
|
||||||
|
|
||||||
|
const nftOptions = generateNftOptions()
|
||||||
|
helpers.setValue({ ...nftOptions })
|
||||||
|
}, [field.value?.name])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={styles.nft}>
|
||||||
|
<div className={styles.token}>
|
||||||
|
<strong>{field?.value?.name}</strong> —{' '}
|
||||||
|
<strong>{field?.value?.symbol}</strong>
|
||||||
|
</div>
|
||||||
|
<img
|
||||||
|
src="//placekitten.com/g/128/128"
|
||||||
|
className={styles.image}
|
||||||
|
width="128"
|
||||||
|
height="128"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
@ -10,6 +10,7 @@ import classNames from 'classnames/bind'
|
|||||||
import AssetSelection, {
|
import AssetSelection, {
|
||||||
AssetSelectionAsset
|
AssetSelectionAsset
|
||||||
} from '../FormFields/AssetSelection'
|
} from '../FormFields/AssetSelection'
|
||||||
|
import Nft from '../FormFields/Nft'
|
||||||
|
|
||||||
const cx = classNames.bind(styles)
|
const cx = classNames.bind(styles)
|
||||||
|
|
||||||
@ -132,6 +133,8 @@ export default function InputElement({
|
|||||||
return <FilesInput name={name} {...field} {...props} />
|
return <FilesInput name={name} {...field} {...props} />
|
||||||
case 'providerUrl':
|
case 'providerUrl':
|
||||||
return <CustomProvider name={name} {...field} {...props} />
|
return <CustomProvider name={name} {...field} {...props} />
|
||||||
|
case 'nft':
|
||||||
|
return <Nft name={name} {...field} {...props} />
|
||||||
case 'datatoken':
|
case 'datatoken':
|
||||||
return <Datatoken name={name} {...field} {...props} />
|
return <Datatoken name={name} {...field} {...props} />
|
||||||
case 'boxSelection':
|
case 'boxSelection':
|
||||||
|
@ -31,6 +31,11 @@ export default function MetadataFields(): ReactElement {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
<Field
|
||||||
|
{...getFieldContent('nft', content.metadata.fields)}
|
||||||
|
component={Input}
|
||||||
|
name="metadata.nft"
|
||||||
|
/>
|
||||||
<Field
|
<Field
|
||||||
{...getFieldContent('type', content.metadata.fields)}
|
{...getFieldContent('type', content.metadata.fields)}
|
||||||
component={Input}
|
component={Input}
|
||||||
@ -97,15 +102,6 @@ export default function MetadataFields(): ReactElement {
|
|||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<div>
|
|
||||||
<strong>Fancy NFT display</strong>
|
|
||||||
<p>
|
|
||||||
Place to show that metadata becomes part of a NFT. Plan is to
|
|
||||||
autogenerate some graphic, display it here, and pass that graphic to
|
|
||||||
the publish methods.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Field
|
<Field
|
||||||
{...getFieldContent('termsAndConditions', content.metadata.fields)}
|
{...getFieldContent('termsAndConditions', content.metadata.fields)}
|
||||||
component={Input}
|
component={Input}
|
||||||
|
@ -3,7 +3,7 @@ import styles from './Coin.module.css'
|
|||||||
import InputElement from '@shared/Form/Input/InputElement'
|
import InputElement from '@shared/Form/Input/InputElement'
|
||||||
import Logo from '@images/logo.svg'
|
import Logo from '@images/logo.svg'
|
||||||
import Conversion from '@shared/Price/Conversion'
|
import Conversion from '@shared/Price/Conversion'
|
||||||
import { DataTokenOptions } from '@hooks/usePublish'
|
import { DataTokenOptions } from '@utils/datatokens'
|
||||||
import { useField } from 'formik'
|
import { useField } from 'formik'
|
||||||
import Error from './Error'
|
import Error from './Error'
|
||||||
|
|
||||||
|
@ -40,6 +40,11 @@ export default function ServicesFields(): ReactElement {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
<Field
|
||||||
|
{...getFieldContent('dataTokenOptions', content.services.fields)}
|
||||||
|
component={Input}
|
||||||
|
name="services[0].dataTokenOptions"
|
||||||
|
/>
|
||||||
{values.metadata.type === 'algorithm' ? (
|
{values.metadata.type === 'algorithm' ? (
|
||||||
<Field
|
<Field
|
||||||
{...getFieldContent('algorithmPrivacy', content.services.fields)}
|
{...getFieldContent('algorithmPrivacy', content.services.fields)}
|
||||||
@ -54,11 +59,6 @@ export default function ServicesFields(): ReactElement {
|
|||||||
options={accessTypeOptions}
|
options={accessTypeOptions}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
<Field
|
|
||||||
{...getFieldContent('dataTokenOptions', content.services.fields)}
|
|
||||||
component={Input}
|
|
||||||
name="services[0].dataTokenOptions"
|
|
||||||
/>
|
|
||||||
<Field
|
<Field
|
||||||
{...getFieldContent('providerUrl', content.services.fields)}
|
{...getFieldContent('providerUrl', content.services.fields)}
|
||||||
component={Input}
|
component={Input}
|
||||||
|
@ -36,6 +36,7 @@ export const initialValues: FormPublishData = {
|
|||||||
chainId: 1,
|
chainId: 1,
|
||||||
accountId: '',
|
accountId: '',
|
||||||
metadata: {
|
metadata: {
|
||||||
|
nft: { name: '', symbol: '', tokenURI: '' },
|
||||||
type: '',
|
type: '',
|
||||||
name: '',
|
name: '',
|
||||||
author: '',
|
author: '',
|
||||||
|
@ -1,4 +1,5 @@
|
|||||||
import { DataTokenOptions } from '@hooks/usePublish'
|
import { DataTokenOptions } from '@utils/datatokens'
|
||||||
|
import { NftOptions } from '@utils/nft'
|
||||||
import { ReactElement } from 'react'
|
import { ReactElement } from 'react'
|
||||||
|
|
||||||
export interface FormPublishService {
|
export interface FormPublishService {
|
||||||
@ -15,6 +16,7 @@ export interface FormPublishData {
|
|||||||
accountId: string
|
accountId: string
|
||||||
chainId: number
|
chainId: number
|
||||||
metadata: {
|
metadata: {
|
||||||
|
nft: NftOptions
|
||||||
type: 'Dataset' | 'Algorithm' | string
|
type: 'Dataset' | 'Algorithm' | string
|
||||||
name: string
|
name: string
|
||||||
description: string
|
description: string
|
||||||
|
Loading…
Reference in New Issue
Block a user