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

Merge branch 'feature/v4-c2d' into fix/issue-1069-c2d-unsupported-networks

Browse Source
This commit is contained in:
Enzo Vezzaro 2022-06-21 08:32:20 -04:00
commit 56583c5e7a
68 changed files with 5006 additions and 4407 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
.github/dependabot.yml vendored Normal file
View File

@ -0,0 +1,8 @@
version: 2
updates:
- package-ecosystem: npm
directory: '/'
schedule:
interval: monthly
time: '03:00'
timezone: Europe/Berlin

9
.github/workflows/ci.yml vendored
View File

@ -5,6 +5,7 @@ on:
branches:
- main
- v4
- v3
tags:
- '**'
pull_request:
@ -36,7 +37,7 @@ jobs:
key: ${{ runner.os }}-${{ matrix.node }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
restore-keys: ${{ runner.os }}-${{ matrix.node }}-build-${{ env.cache-name }}-
- run: npm ci
- run: npm ci --legacy-peer-deps
- run: npm run build
test:
@ -63,7 +64,7 @@ jobs:
key: ${{ runner.os }}-${{ matrix.node }}-test-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
restore-keys: ${{ runner.os }}-${{ matrix.node }}-test-${{ env.cache-name }}-
- run: npm ci
- run: npm ci --legacy-peer-deps
- run: npm test
- name: Upload coverage artifact
@ -95,7 +96,7 @@ jobs:
with:
name: coverage-${{ runner.os }}
- run: npm ci
- run: npm ci --legacy-peer-deps
- run: npm run codegen:apollo
- uses: paambaati/codeclimate-action@v3.0.0
@ -126,6 +127,6 @@ jobs:
key: ${{ runner.os }}-${{ matrix.node }}-storybook-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
restore-keys: ${{ runner.os }}-${{ matrix.node }}-storybook-${{ env.cache-name }}-
- run: npm ci
- run: npm ci --legacy-peer-deps
- run: npm run pregenerate
- run: npm run storybook:build

2
.github/workflows/deploy.yml vendored
View File

@ -12,7 +12,7 @@ jobs:
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v2
- run: npm ci
- run: npm ci --legacy-peer-deps
- run: npm run build
env:

12
app.config.js
View File

@ -9,12 +9,20 @@ module.exports = {
process.env.NEXT_PUBLIC_METADATACACHE_URI ||
'https://v4.aquarius.oceanprotocol.com',
v3MetadataCacheUri:
process.env.NEXT_PUBLIC_V3_METADATACACHE_URI ||
'https://aquarius.oceanprotocol.com',
v3MarketUri:
process.env.NEXT_PUBLIC_V3_MARKET_URI ||
'https://v3.market.oceanprotocol.com',
// List of chainIds which metadata cache queries will return by default.
// This preselects the Chains user preferences.
chainIds: [3, 4, 80001, 1287],
chainIds: [1, 137, 56, 246, 1285],
// List of all supported chainIds. Used to populate the Chains user preferences list.
chainIdsSupported: [3, 4, 80001, 1287],
chainIdsSupported: [1, 137, 56, 246, 1285, 3, 4, 80001, 1287],
infuraProjectId: process.env.NEXT_PUBLIC_INFURA_PROJECT_ID || 'xxx',

5
content/footer.json
View File

@ -12,5 +12,8 @@
"name": "Discord",
"url": "https://discord.gg/TnXjkR5"
}
]
],
"stats": {
"note": "Counted on-chain from our NFT and pool factories. Includes assets in all Ocean Market forks and [purgatory](https://github.com/oceanprotocol/list-purgatory)."
}
}

17
content/pages/edit.json
View File

@ -30,13 +30,22 @@
"required": true
},
{
"name": "links",
"label": "Sample file",
"placeholder": "e.g. https://file.com/samplefile.json",
"help": "Please provide a URL to a sample of your data set file. This file should reveal the data structure of your data set, e.g. by including the header and one line of a CSV file. This file URL will be publicly available after publishing. **Please make sure that the endpoint is accessible over the internet and is not protected by a firewall or by credentials.**",
"name": "files",
"label": "New file",
"placeholder": "e.g. https://file.com/file.json",
"help": "This URL will be stored encrypted after publishing. **Please make sure that the endpoint is accessible over the internet and is not protected by a firewall or by credentials.** For a compute data set, your file should match the file type required by the algorithm, and should not exceed 1 GB in file size. Leaving this field empty will not remove the current value.",
"prominentHelp": true,
"type": "files"
},
{
"name": "links",
"label": "New sample file",
"placeholder": "e.g. https://file.com/samplefile.json",
"help": "Please provide a URL to a sample of your data set file. This file should reveal the data structure of your data set, e.g. by including the header and one line of a CSV file. This file URL will be publicly available after publishing. **Please make sure that the endpoint is accessible over the internet and is not protected by a firewall or by credentials.** Leaving this field empty will not remove the current value.",
"prominentHelp": true,
"type": "files"
},
{
"name": "timeout",
"label": "Timeout",

10
content/site.json
View File

@ -1,7 +1,7 @@
{
"siteTitle": "Ocean Market",
"siteTagline": "A marketplace to find, publish and trade data sets in the Ocean Network.",
"siteUrl": "https://v4.market.oceanprotocol.com",
"siteUrl": "https://market.oceanprotocol.com",
"siteImage": "/share.png",
"copyright": "All Rights Reserved. Powered by ",
"menu": [
@ -14,12 +14,8 @@
"link": "/profile"
}
],
"announcement": "Data NFTs, One-Sided Staking and more. [Explore OceanONDA V4](https://blog.oceanprotocol.com/oceanonda-v4-production-has-arrived-cb4fe8faaf39).",
"warning": {
"main": "",
"polygonPublish": "Only republish data sets with a pool from ETH Mainnet into Polygon/Matic if the liquidity is **less than or equal to 1000 OCEAN in the original pool**. Doing otherwise will lead to [purgatory](https://github.com/oceanprotocol/list-purgatory) for the data set in Polygon/Matic."
},
"announcement": {
"main": "Ocean Market is [available on Polygon](https://blog.oceanprotocol.com/ocean-on-polygon-network-8abad19cbf47).",
"polygon": "Polygon/Matic EVM support is in early stages. [Use the Polygon Bridge](https://docs.oceanprotocol.com/tutorials/polygon-bridge/) to get mOCEAN."
"ctd": "Compute-to-Data is still in a testing phase, please use it only on test networks."
}
}

8221
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

62
package.json
View File

@ -17,28 +17,28 @@
"type-check": "tsc --noEmit",
"deploy:s3": "bash scripts/deploy-s3.sh",
"postinstall": "husky install",
"codegen:apollo": "apollo client:codegen --endpoint=https://v4.subgraph.rinkeby.oceanprotocol.com/subgraphs/name/oceanprotocol/ocean-subgraph --target typescript --tsFileExtension=d.ts --outputFlat src/@types/subgraph/",
"codegen:apollo": "apollo client:codegen --endpoint=https://v4.subgraph.ropsten.oceanprotocol.com/subgraphs/name/oceanprotocol/ocean-subgraph --target typescript --tsFileExtension=d.ts --outputFlat src/@types/subgraph/",
"storybook": "cross-env NODE_ENV=test start-storybook -p 6006 --quiet",
"storybook:build": "cross-env NODE_ENV=test build-storybook"
},
"dependencies": {
"@coingecko/cryptoformat": "^0.4.4",
"@coingecko/cryptoformat": "^0.5.4",
"@loadable/component": "^5.15.2",
"@oceanprotocol/art": "^3.2.0",
"@oceanprotocol/lib": "^1.0.0-next.44",
"@oceanprotocol/lib": "^1.1.2",
"@oceanprotocol/typographies": "^0.1.0",
"@portis/web3": "^4.0.7",
"@tippyjs/react": "^4.2.6",
"@urql/exchange-refocus": "^0.2.5",
"@walletconnect/web3-provider": "^1.7.8",
"axios": "^0.27.2",
"chart.js": "^3.7.1",
"chart.js": "^3.8.0",
"classnames": "^2.3.1",
"date-fns": "^2.28.0",
"decimal.js": "^10.3.1",
"dom-confetti": "^0.2.2",
"dotenv": "^16.0.1",
"filesize": "^8.0.7",
"filesize": "^9.0.1",
"formik": "^2.2.9",
"gray-matter": "^4.0.3",
"is-url-superb": "^6.1.0",
@ -50,7 +50,7 @@
"next": "^12.1.6",
"query-string": "^7.1.1",
"react": "^18.1.0",
"react-chartjs-2": "^4.1.0",
"react-chartjs-2": "^4.2.0",
"react-clipboard.js": "^2.0.16",
"react-data-table-component": "^6.11.7",
"react-dom": "^18.1.0",
@ -59,66 +59,66 @@
"react-paginate": "^8.1.3",
"react-spring": "^9.4.5",
"react-tabs": "^5.1.0",
"react-toastify": "^8.2.0",
"react-toastify": "^9.0.4",
"remark": "^13.0.0",
"remark-gfm": "^1.0.0",
"remark-html": "^13.0.1",
"remove-markdown": "^0.3.0",
"remove-markdown": "^0.5.0",
"slugify": "^1.6.5",
"swr": "^1.3.0",
"urql": "^2.2.0",
"urql": "^2.2.1",
"use-dark-mode": "^2.3.1",
"web3": "^1.7.3",
"web3modal": "^1.9.7",
"yup": "^0.32.11"
},
"devDependencies": {
"@storybook/addon-essentials": "^6.5.4",
"@storybook/addon-storyshots": "^6.5.4",
"@storybook/builder-webpack5": "^6.5.4",
"@storybook/manager-webpack5": "^6.5.4",
"@storybook/react": "^6.5.4",
"@storybook/addon-essentials": "^6.5.7",
"@storybook/addon-storyshots": "^6.5.7",
"@storybook/builder-webpack5": "^6.5.7",
"@storybook/manager-webpack5": "^6.5.7",
"@storybook/react": "^6.5.7",
"@storybook/testing-library": "^0.0.11",
"@storybook/testing-react": "^1.3.0",
"@svgr/webpack": "^6.2.1",
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.2.0",
"@testing-library/react": "^13.3.0",
"@types/chart.js": "^2.9.37",
"@types/js-cookie": "^3.0.1",
"@types/loadable__component": "^5.13.1",
"@types/lodash.debounce": "^4.0.3",
"@types/lodash.omit": "^4.5.6",
"@types/node": "^17.0.35",
"@types/react": "^18.0.9",
"@types/react-dom": "^18.0.4",
"@types/js-cookie": "^3.0.2",
"@types/loadable__component": "^5.13.4",
"@types/lodash.debounce": "^4.0.7",
"@types/lodash.omit": "^4.5.7",
"@types/node": "^17.0.41",
"@types/react": "^18.0.12",
"@types/react-dom": "^18.0.5",
"@types/react-modal": "^3.13.1",
"@types/react-paginate": "^7.1.1",
"@types/remove-markdown": "^0.3.1",
"@types/yup": "^0.29.13",
"@typescript-eslint/eslint-plugin": "^5.25.0",
"@typescript-eslint/parser": "^5.25.0",
"apollo": "^2.33.9",
"@types/yup": "^0.29.14",
"@typescript-eslint/eslint-plugin": "^5.27.1",
"@typescript-eslint/parser": "^5.27.1",
"apollo": "^2.34.0",
"cross-env": "^7.0.3",
"eslint": "^8.16.0",
"eslint": "^8.17.0",
"eslint-config-oceanprotocol": "^2.0.1",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-jest-dom": "^4.0.2",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react": "^7.30.0",
"eslint-plugin-react-hooks": "^4.5.0",
"eslint-plugin-testing-library": "^5.5.0",
"eslint-plugin-testing-library": "^5.5.1",
"file-loader": "^6.2.0",
"https-browserify": "^1.0.0",
"husky": "^8.0.1",
"jest": "^28.1.0",
"jest-environment-jsdom": "^28.1.0",
"jest": "^28.1.1",
"jest-environment-jsdom": "^28.1.1",
"prettier": "^2.6.2",
"pretty-quick": "^3.1.3",
"process": "^0.11.10",
"serve": "^13.0.2",
"stream-http": "^3.2.0",
"tsconfig-paths-webpack-plugin": "^3.5.2",
"typescript": "^4.6.4"
"typescript": "^4.7.3"
},
"repository": {
"type": "git",

8
src/@context/Asset.tsx
View File

@ -9,7 +9,7 @@ import React, {
} from 'react'
import { Config, LoggerInstance, Purgatory } from '@oceanprotocol/lib'
import { CancelToken } from 'axios'
import { retrieveAsset } from '@utils/aquarius'
import { checkV3Asset, retrieveAsset } from '@utils/aquarius'
import { useWeb3 } from './Web3'
import { useCancelToken } from '@hooks/useCancelToken'
import { getOceanConfig, getDevelopmentConfig } from '@utils/ocean'
@ -18,7 +18,7 @@ import { getAccessDetails } from '@utils/accessDetailsAndPricing'
import { useIsMounted } from '@hooks/useIsMounted'
import { useMarketMetadata } from './MarketMetadata'
interface AssetProviderValue {
export interface AssetProviderValue {
isInPurgatory: boolean
purgatoryData: Purgatory
asset: AssetExtended
@ -26,6 +26,7 @@ interface AssetProviderValue {
owner: string
error?: string
isAssetNetwork: boolean
isV3Asset: boolean
oceanConfig: Config
loading: boolean
fetchAsset: (token?: CancelToken) => Promise<void>
@ -51,6 +52,7 @@ function AssetProvider({
const [error, setError] = useState<string>()
const [loading, setLoading] = useState(false)
const [isAssetNetwork, setIsAssetNetwork] = useState<boolean>()
const [isV3Asset, setIsV3Asset] = useState<boolean>()
const [oceanConfig, setOceanConfig] = useState<Config>()
const newCancelToken = useCancelToken()
@ -68,6 +70,7 @@ function AssetProvider({
const asset = await retrieveAsset(did, token)
if (!asset) {
setIsV3Asset(await checkV3Asset(did, token))
setError(
`\`${did}\`` +
'\n\nWe could not find an asset for this DID in the cache. If you just published a new asset, wait some seconds and refresh this page.'
@ -168,6 +171,7 @@ function AssetProvider({
loading,
fetchAsset,
isAssetNetwork,
isV3Asset,
oceanConfig
} as AssetProviderValue
}

10
src/@context/MarketMetadata/_types.ts
View File

@ -29,6 +29,8 @@ export interface AppConfig {
classNameLight: string
storageKey: string
}
v3MetadataCacheUri: string
v3MarketUri: string
}
export interface SiteContent {
siteTitle: string
@ -40,13 +42,9 @@ export interface SiteContent {
name: string
link: string
}[]
announcement: string
warning: {
main: string
polygonPublish: string
}
announcement: {
main: string
polygon: string
ctd: string
}
}

2
src/@context/MarketMetadata/index.tsx
View File

@ -36,7 +36,7 @@ function MarketMetadataProvider({
opcData.push({
chainId: appConfig.chainIdsSupported[i],
approvedTokens: response.data?.opc.approvedTokens,
approvedTokens: response.data?.opc.approvedTokens?.map((x) => x.id),
swapApprovedFee: response.data?.opc.swapOceanFee,
swapNotApprovedFee: response.data?.opc.swapNonOceanFee
} as unknown as OpcFee)

2
src/@context/UserPreferences.tsx
View File

@ -31,7 +31,7 @@ interface UserPreferencesValue {
const UserPreferencesContext = createContext(null)
const localStorageKey = 'ocean-user-preferences'
const localStorageKey = 'ocean-user-preferences-v4'
function getLocalStorage(): UserPreferencesValue {
const storageParsed =

9
src/@utils/accessDetailsAndPricing.ts
View File

@ -319,15 +319,6 @@ export async function getOrderPriceAndFees(
orderPriceAndFee.price = new Decimal(+orderPriceAndFee.price || 0)
.add(new Decimal(+orderPriceAndFee?.consumeMarketOrderFee || 0))
.add(new Decimal(+orderPriceAndFee?.publisherMarketOrderFee || 0))
.add(
new Decimal(
(await unitsToAmount(
web3,
orderPriceAndFee?.providerFee?.providerFeeToken,
orderPriceAndFee?.providerFee?.providerFeeAmount.toString()
)) || 0
)
)
.toString()
return orderPriceAndFee
}

24
src/@utils/aquarius.ts
View File

@ -2,7 +2,7 @@ import { Asset, LoggerInstance } from '@oceanprotocol/lib'
import { AssetSelectionAsset } from '@shared/FormFields/AssetSelection'
import axios, { CancelToken, AxiosResponse } from 'axios'
import { OrdersData_orders as OrdersData } from '../@types/subgraph/OrdersData'
import { metadataCacheUri } from '../../app.config'
import { metadataCacheUri, v3MetadataCacheUri } from '../../app.config'
import {
SortDirectionOptions,
SortTermOptions
@ -133,6 +133,28 @@ export async function retrieveAsset(
}
}
export async function checkV3Asset(
did: string,
cancelToken: CancelToken
): Promise<boolean> {
try {
const response: AxiosResponse<Asset> = await axios.get(
`${v3MetadataCacheUri}/api/v1/aquarius/assets/ddo/${did}`,
{ cancelToken }
)
if (!response || response.status !== 200 || !response.data) return false
return true
} catch (error) {
if (axios.isCancel(error)) {
LoggerInstance.log(error.message)
} else {
LoggerInstance.error(error.message)
}
return false
}
}
export async function getAssetsNames(
didList: string[],
cancelToken: CancelToken

57
src/@utils/order.ts
View File

@ -1,13 +1,13 @@
import {
approve,
approveWei,
Datatoken,
FreOrderParams,
LoggerInstance,
OrderParams,
ProviderComputeInitialize,
ProviderFees,
ProviderInstance,
unitsToAmount
ProviderInstance
} from '@oceanprotocol/lib'
import { AssetExtended } from 'src/@types/AssetExtended'
import Web3 from 'web3'
@ -53,17 +53,10 @@ export async function order(
asset.services[0].serviceEndpoint
))
const providerFeesSanitized = providerFees || initializeData.providerFee
providerFeesSanitized.providerFeeAmount = await unitsToAmount(
web3,
providerFeesSanitized.providerFeeToken,
providerFeesSanitized.providerFeeAmount.toString()
)
const orderParams = {
consumer: computeConsumerAddress || accountId,
serviceIndex: 0,
_providerFee: providerFeesSanitized,
_providerFee: providerFees || initializeData.providerFee,
_consumeMarketFee: {
consumeMarketFeeAddress: marketFeeAddress,
consumeMarketFeeAmount: consumeMarketOrderFee,
@ -71,7 +64,6 @@ export async function order(
}
} as OrderParams
// TODO: we need to approve provider fee
switch (asset.accessDetails?.type) {
case 'fixed': {
// this assumes all fees are in ocean
@ -94,8 +86,6 @@ export async function order(
swapMarketFee: consumeMarketFixedSwapFee,
marketFeeAddress
} as FreOrderParams
console.log('freParams', freParams)
console.log('orderParams', orderParams)
const tx = await datatoken.buyFromFreAndOrder(
asset.accessDetails.datatoken.address,
accountId,
@ -155,30 +145,6 @@ export async function reuseOrder(
asset.services[0].serviceEndpoint
))
if (
providerFees?.providerFeeAmount ||
initializeData?.providerFee?.providerFeeAmount
) {
const txApprove = await approve(
web3,
accountId,
providerFees.providerFeeToken ||
initializeData.providerFee.providerFeeToken,
asset.accessDetails.datatoken.address,
await unitsToAmount(
web3,
providerFees.providerFeeToken ||
initializeData.providerFee.providerFeeToken,
providerFees.providerFeeAmount ||
initializeData.providerFee.providerFeeAmount
),
false
)
if (!txApprove) {
return
}
}
const tx = await datatoken.reuseOrder(
asset.accessDetails.datatoken.address,
accountId,
@ -215,6 +181,23 @@ export async function handleComputeOrder(
'[compute] Handle compute order for asset type: ',
asset.metadata.type
)
if (
initializeData.providerFee &&
initializeData.providerFee.providerFeeAmount !== '0'
) {
const txApproveWei = await approveWei(
web3,
accountId,
asset.accessDetails.baseToken.address,
asset.accessDetails.datatoken.address,
initializeData.providerFee.providerFeeAmount
)
if (!txApproveWei) {
toast.error('Failed to approve provider fees!')
return
}
}
if (initializeData.validOrder && !initializeData.providerFee) {
LoggerInstance.log('[compute] Has valid order: ', initializeData.validOrder)
return initializeData.validOrder

8
src/@utils/provider.ts
View File

@ -3,7 +3,7 @@ import {
ComputeAsset,
ComputeEnvironment,
downloadFileBrowser,
FileMetadata,
FileInfo,
LoggerInstance,
ProviderComputeInitializeResults,
ProviderInstance
@ -53,7 +53,7 @@ export async function initializeProviderForCompute(
// TODO: Why do we have these one line functions ?!?!?!
export async function getEncryptedFiles(
files: FileMetadata[],
files: any,
providerUrl: string
): Promise<string> {
try {
@ -69,7 +69,7 @@ export async function getFileDidInfo(
did: string,
serviceId: string,
providerUrl: string
): Promise<FileMetadata[]> {
): Promise<FileInfo[]> {
try {
const response = await ProviderInstance.checkDidFiles(
did,
@ -85,7 +85,7 @@ export async function getFileDidInfo(
export async function getFileUrlInfo(
url: string,
providerUrl: string
): Promise<FileMetadata[]> {
): Promise<FileInfo[]> {
try {
const response = await ProviderInstance.checkFileUrl(url, providerUrl)
return response

5
src/components/@shared/ButtonBuy/index.module.css
View File

@ -3,6 +3,11 @@
margin-top: calc(var(--spacer) / 2);
}
.actionsCenter {
margin: auto !important;
display: block;
}
.help {
font-size: var(--font-size-mini);
color: var(--color-secondary);

22
src/components/@shared/ButtonBuy/index.tsx
View File

@ -31,6 +31,7 @@ interface ButtonBuyProps {
algorithmPriceType?: string
isAlgorithmConsumable?: boolean
isSupportedOceanNetwork?: boolean
hasProviderFee?: boolean
}
// TODO: we need to take a look at these messages
@ -109,7 +110,8 @@ function getComputeAssetHelpText(
selectedComputeAssetType?: string,
isAlgorithmConsumable?: boolean,
isSupportedOceanNetwork?: boolean,
web3?: any
web3?: any,
hasProviderFee?: boolean
) {
const computeAssetHelpText = getConsumeHelpText(
dtBalance,
@ -138,11 +140,15 @@ function getComputeAssetHelpText(
isSupportedOceanNetwork
)
const providerFeeHelpText = hasProviderFee
? 'In order to start the job you also need to pay the fees for renting the c2d resources.'
: 'C2D resources required to start the job are available, no payment required for those fees.'
const computeHelpText = selectedComputeAssettLowPoolLiquidity
? computeAlgoHelpText
: lowPoolLiquidity
? computeAssetHelpText
: `${computeAssetHelpText} ${computeAlgoHelpText}`
: `${computeAssetHelpText} ${computeAlgoHelpText} ${providerFeeHelpText}`
return computeHelpText
}
@ -172,7 +178,8 @@ export default function ButtonBuy({
priceType,
algorithmPriceType,
isAlgorithmConsumable,
isSupportedOceanNetwork
isSupportedOceanNetwork,
hasProviderFee
}: ButtonBuyProps): ReactElement {
const { web3 } = useWeb3()
const buttonText =
@ -182,7 +189,9 @@ export default function ButtonBuy({
: priceType === 'free'
? 'Get'
: `Buy ${assetTimeout === 'Forever' ? '' : ` for ${assetTimeout}`}`
: hasPreviousOrder && hasPreviousOrderSelectedComputeAsset
: hasPreviousOrder &&
hasPreviousOrderSelectedComputeAsset &&
!hasProviderFee
? 'Start Compute Job'
: priceType === 'free' && algorithmPriceType === 'free'
? 'Order Compute Job'
@ -199,7 +208,7 @@ export default function ButtonBuy({
type={type}
onClick={onClick}
disabled={disabled}
className="center"
className={action === 'compute' ? styles.actionsCenter : ''}
>
{buttonText}
</Button>
@ -236,7 +245,8 @@ export default function ButtonBuy({
selectedComputeAssetType,
isAlgorithmConsumable,
isSupportedOceanNetwork,
web3
web3,
hasProviderFee
)}
</div>
</>

4
src/components/@shared/FileIcon/index.tsx
View File

@ -4,7 +4,7 @@ import classNames from 'classnames/bind'
import cleanupContentType from '@utils/cleanupContentType'
import styles from './index.module.css'
import Loader from '@shared/atoms/Loader'
import { FileMetadata } from '@oceanprotocol/lib'
import { FileInfo } from '@oceanprotocol/lib'
const cx = classNames.bind(styles)
@ -22,7 +22,7 @@ export default function FileIcon({
small,
isLoading
}: {
file: FileMetadata
file: FileInfo
className?: string
small?: boolean
isLoading?: boolean

4
src/components/@shared/FormFields/FilesInput/Info.tsx
View File

@ -2,13 +2,13 @@ import React, { ReactElement } from 'react'
import { prettySize } from './utils'
import cleanupContentType from '@utils/cleanupContentType'
import styles from './Info.module.css'
import { FileMetadata } from '@oceanprotocol/lib'
import { FileInfo as FileInfoData } from '@oceanprotocol/lib'
export default function FileInfo({
file,
handleClose
}: {
file: FileMetadata
file: FileInfoData
handleClose(): void
}): ReactElement {
const contentTypeCleaned = file.contentType

7
src/components/@shared/PoolTransactions/Title.tsx
View File

@ -39,15 +39,10 @@ function getTitle(row: PoolTransaction, locale: string) {
case 'SETUP': {
const firstToken = row.baseToken
const firstTokenSymbol = firstToken?.symbol
const secondToken = row.datatoken
const secondTokenSymbol = secondToken?.symbol
title += `Create pool with ${formatPrice(
Math.abs(row.baseTokenValue).toString(),
locale
)}${firstTokenSymbol} and ${formatPrice(
Math.abs(row.datatokenValue).toString(),
locale
)}${secondTokenSymbol}`
)}${firstTokenSymbol}`
break
}
case 'JOIN':

2
src/components/@shared/PoolTransactions/index.tsx
View File

@ -187,7 +187,7 @@ export default function PoolTransactions({
poolTransactions.push({
...data[i],
networkId: !minimal
? getAsset(ddoList, data[i].pool.datatoken.id).chainId
? getAsset(ddoList, data[i].pool.datatoken.id)?.chainId
: poolChainId,
asset: !minimal ? getAsset(ddoList, data[i].pool.datatoken.id) : null
})

4
src/components/@shared/atoms/Badge/index.tsx
View File

@ -1,11 +1,11 @@
import React, { ReactElement } from 'react'
import React, { ReactElement, ReactNode } from 'react'
import styles from './index.module.css'
import classNames from 'classnames/bind'
const cx = classNames.bind(styles)
export interface BadgeProps {
label: string
label: string | ReactNode
className?: string
}

14
src/components/@shared/atoms/Button/index.module.css
View File

@ -20,15 +20,6 @@
text-align: center;
}
.button:first-child {
margin-left: 0;
}
.button:last-child {
margin-right: 0;
min-width: auto;
}
.button:hover,
.button:focus {
color: var(--brand-white);
@ -82,11 +73,6 @@
min-width: auto;
}
.center {
margin: auto !important;
display: block;
}
/* Size Modifiers */
.small {
font-size: var(--font-size-small);

5
src/components/@shared/atoms/Loader/index.module.css
View File

@ -23,6 +23,11 @@
margin-left: calc(var(--spacer) / 4);
}
.loader.white {
border-color: rgba(255 255 255 / 0.3);
border-top-color: var(--brand-white);
}
@keyframes loader {
to {
transform: rotate(360deg);

5
src/components/@shared/atoms/Loader/index.tsx
View File

@ -3,12 +3,13 @@ import styles from './index.module.css'
export interface LoaderProps {
message?: string
white?: boolean
}
export default function Loader({ message }: LoaderProps): ReactElement {
export default function Loader({ message, white }: LoaderProps): ReactElement {
return (
<div className={styles.loaderWrap}>
<span className={styles.loader} />
<span className={`${styles.loader} ${white ? styles.white : ''}`} />
{message && <span className={styles.message}>{message}</span>}
</div>
)

13
src/components/App/index.tsx
View File

@ -8,8 +8,7 @@ import AnnouncementBanner from '@shared/AnnouncementBanner'
import PrivacyPreferenceCenter from '../Privacy/PrivacyPreferenceCenter'
import styles from './index.module.css'
import { ToastContainer } from 'react-toastify'
import { useRouter } from 'next/router'
import content from '../../../content/purgatory.json'
import contentPurgatory from '../../../content/purgatory.json'
import { useMarketMetadata } from '@context/MarketMetadata'
export default function App({
@ -17,24 +16,22 @@ export default function App({
}: {
children: ReactElement
}): ReactElement {
const router = useRouter()
const { siteContent, appConfig } = useMarketMetadata()
const { accountId } = useWeb3()
const { isInPurgatory, purgatoryData } = useAccountPurgatory(accountId)
return (
<div className={styles.app}>
{router.pathname === '/' && siteContent?.warning.main !== '' && (
<AnnouncementBanner text={siteContent?.warning.main} />
{siteContent?.announcement !== '' && (
<AnnouncementBanner text={siteContent?.announcement} />
)}
<Header />
{isInPurgatory && (
<Alert
title={content.account.title}
title={contentPurgatory.account.title}
badge={`Reason: ${purgatoryData?.reason}`}
text={content.account.description}
text={contentPurgatory.account.description}
state="error"
/>
)}

4
src/components/Asset/AssetActions/Compute/FormComputeDataset.module.css
View File

@ -22,3 +22,7 @@
border-right: 0;
padding: 0;
}
.warning {
margin-bottom: var(--spacer);
}

21
src/components/Asset/AssetActions/Compute/FormComputeDataset.tsx
View File

@ -18,6 +18,8 @@ import {
import { AssetExtended } from 'src/@types/AssetExtended'
import Decimal from 'decimal.js'
import { MAX_DECIMALS } from '@utils/constants'
import { useMarketMetadata } from '@context/MarketMetadata'
import Alert from '@shared/atoms/Alert'
import { getDummyWeb3 } from '@utils/web3'
export default function FormStartCompute({
@ -45,7 +47,9 @@ export default function FormStartCompute({
isConsumable,
consumableFeedback,
datasetOrderPriceAndFees,
algoOrderPriceAndFees
algoOrderPriceAndFees,
providerFeeAmount,
validUntil
}: {
algorithms: AssetSelectionAsset[]
ddoListAlgorithms: Asset[]
@ -72,7 +76,10 @@ export default function FormStartCompute({
consumableFeedback: string
datasetOrderPriceAndFees?: OrderPriceAndFees
algoOrderPriceAndFees?: OrderPriceAndFees
providerFeeAmount?: string
validUntil?: string
}): ReactElement {
const { siteContent } = useMarketMetadata()
const { isValid, values }: FormikContextType<{ algorithm: string }> =
useFormikContext()
const { asset, isAssetNetwork } = useAsset()
@ -140,8 +147,12 @@ export default function FormStartCompute({
algoOrderPriceAndFees?.price ||
selectedAlgorithmAsset.accessDetails.price
).toDecimalPlaces(MAX_DECIMALS)
const providerFees = providerFeeAmount
? new Decimal(providerFeeAmount).toDecimalPlaces(MAX_DECIMALS)
: new Decimal(0)
const totalPrice = priceDataset
.plus(priceAlgo)
.plus(providerFees)
.toDecimalPlaces(MAX_DECIMALS)
.toString()
@ -166,6 +177,11 @@ export default function FormStartCompute({
return (
<Form className={styles.form}>
<Alert
className={styles.warning}
state="info"
text={siteContent.warning.ctd}
/>
{content.form.data.map((field: FormFieldContent) => (
<Field
key={field.name}
@ -190,6 +206,8 @@ export default function FormStartCompute({
totalPrice={totalPrice}
datasetOrderPrice={datasetOrderPrice}
algoOrderPrice={algoOrderPrice}
providerFeeAmount={providerFeeAmount}
validUntil={validUntil}
/>
<ButtonBuy
@ -230,6 +248,7 @@ export default function FormStartCompute({
selectedAlgorithmAsset?.accessDetails?.isPurchasable
}
isSupportedOceanNetwork={isSupportedOceanNetwork}
hasProviderFee={providerFeeAmount && providerFeeAmount !== '0'}
/>
</Form>
)

14
src/components/Asset/AssetActions/Compute/PriceOutput.module.css
View File

@ -36,8 +36,10 @@
border-bottom: 1px solid var(--border-color);
padding-top: calc(var(--spacer) / 7);
padding-bottom: calc(var(--spacer) / 7);
display: flex;
justify-content: space-between;
display: grid;
grid-template-columns: 5% 1fr auto;
column-gap: calc(var(--spacer) / 10);
/* justify-content: space-between; */
}
.priceRow:last-child {
@ -47,8 +49,14 @@
.sign {
display: inline-block;
width: 5%;
text-align: left;
color: var(--color-secondary);
font-size: var(--font-size-base);
}
.type {
display: inline-block;
text-align: left;
color: var(--color-secondary);
font-size: var(--font-size-mini);
}

20
src/components/Asset/AssetActions/Compute/PriceOutput.tsx
View File

@ -19,6 +19,8 @@ interface PriceOutputProps {
selectedComputeAssetTimeout: string
datasetOrderPrice?: number
algoOrderPrice?: number
providerFeeAmount?: string
validUntil?: string
}
function Row({
@ -27,7 +29,8 @@ function Row({
hasDatatoken,
symbol,
timeout,
sign
sign,
type
}: {
price: string
hasPreviousOrder?: boolean
@ -35,10 +38,12 @@ function Row({
symbol?: string
timeout?: string
sign?: string
type?: string
}) {
return (
<div className={styles.priceRow}>
<div className={styles.sign}>{sign}</div>
<div className={styles.type}>{type}</div>
<div>
<PriceUnit
price={hasPreviousOrder || hasDatatoken ? '0' : `${price}`}
@ -68,7 +73,9 @@ export default function PriceOutput({
algorithmConsumeDetails,
selectedComputeAssetTimeout,
datasetOrderPrice,
algoOrderPrice
algoOrderPrice,
providerFeeAmount,
validUntil
}: PriceOutputProps): ReactElement {
const { asset } = useAsset()
@ -89,6 +96,7 @@ export default function PriceOutput({
.toString()}
timeout={assetTimeout}
symbol={symbol}
type="DATASET"
/>
<Row
hasPreviousOrder={hasPreviousOrderSelectedComputeAsset}
@ -101,6 +109,14 @@ export default function PriceOutput({
timeout={selectedComputeAssetTimeout}
symbol={symbol}
sign="+"
type="ALGORITHM"
/>
<Row
price={providerFeeAmount} // initializeCompute.provider fee amount
timeout={`${validUntil} seconds`} // valid until value
symbol={symbol}
sign="+"
type="C2D RESOURCES"
/>
<Row price={totalPrice} symbol={symbol} sign="=" />
</div>

26
src/components/Asset/AssetActions/Compute/index.tsx
View File

@ -2,7 +2,7 @@ import React, { useState, ReactElement, useEffect, useCallback } from 'react'
import {
Asset,
DDO,
FileMetadata,
FileInfo,
Datatoken,
ProviderInstance,
ComputeAsset,
@ -11,7 +11,8 @@ import {
LoggerInstance,
ComputeAlgorithm,
ComputeOutput,
ProviderComputeInitializeResults
ProviderComputeInitializeResults,
unitsToAmount
} from '@oceanprotocol/lib'
import { toast } from 'react-toastify'
import Price from '@shared/Price'
@ -59,7 +60,7 @@ export default function Compute({
}: {
asset: AssetExtended
dtBalance: string
file: FileMetadata
file: FileInfo
fileIsLoading?: boolean
isConsumable?: boolean
consumableFeedback?: string
@ -94,7 +95,8 @@ export default function Compute({
const [computeEnv, setComputeEnv] = useState<ComputeEnvironment>()
const [initializedProviderResponse, setInitializedProviderResponse] =
useState<ProviderComputeInitializeResults>()
// const [computeValidUntil, setComputeValidUntil] = useState<number>()
const [providerFeeAmount, setProviderFeeAmount] = useState<string>('0')
const [computeValidUntil, setComputeValidUntil] = useState<string>('0')
const [datasetOrderPriceAndFees, setDatasetOrderPriceAndFees] =
useState<OrderPriceAndFees>()
const [isRequestingDataseOrderPrice, setIsRequestingDataseOrderPrice] =
@ -147,7 +149,18 @@ export default function Compute({
return
}
setInitializedProviderResponse(initializedProvider)
setProviderFeeAmount(
await unitsToAmount(
web3,
initializedProvider?.datasets?.[0]?.providerFee?.providerFeeToken,
initializedProvider?.datasets?.[0]?.providerFee?.providerFeeAmount
)
)
const computeDuration = (
parseInt(initializedProvider?.datasets?.[0]?.providerFee?.validUntil) -
Math.floor(Date.now() / 1000)
).toString()
setComputeValidUntil(computeDuration)
if (
asset?.accessDetails?.addressOrId !== ZERO_ADDRESS &&
asset?.accessDetails?.type !== 'free' &&
@ -258,6 +271,7 @@ export default function Compute({
setValidAlgorithmOrderTx(
selectedAlgorithmAsset?.accessDetails?.validOrderTx
)
setAlgoOrderPriceAndFees(null)
async function initSelectedAlgo() {
await checkAssetDTBalance(selectedAlgorithmAsset)
@ -479,6 +493,8 @@ export default function Compute({
consumableFeedback={consumableFeedback}
datasetOrderPriceAndFees={datasetOrderPriceAndFees}
algoOrderPriceAndFees={algoOrderPriceAndFees}
providerFeeAmount={providerFeeAmount}
validUntil={computeValidUntil}
/>
</Formik>
)}

4
src/components/Asset/AssetActions/Download.tsx
View File

@ -7,7 +7,7 @@ import ButtonBuy from '@shared/ButtonBuy'
import { secondsToString } from '@utils/ddo'
import AlgorithmDatasetsListForCompute from './Compute/AlgorithmDatasetsListForCompute'
import styles from './Download.module.css'
import { FileMetadata, LoggerInstance, ZERO_ADDRESS } from '@oceanprotocol/lib'
import { FileInfo, LoggerInstance, ZERO_ADDRESS } from '@oceanprotocol/lib'
import { order } from '@utils/order'
import { AssetExtended } from 'src/@types/AssetExtended'
import { buyDtFromPool } from '@utils/pool'
@ -29,7 +29,7 @@ export default function Download({
consumableFeedback
}: {
asset: AssetExtended
file: FileMetadata
file: FileInfo
isBalanceSufficient: boolean
dtBalance: string
fileIsLoading?: boolean

2
src/components/Asset/AssetActions/Pool/Add/index.tsx
View File

@ -149,7 +149,7 @@ export default function Add({
/>
</div>
<Output newPoolTokens={newPoolTokens} newPoolShare={newPoolShare} />
{/* TODO: will be fixed in #1481 <Output newPoolTokens={newPoolTokens} newPoolShare={newPoolShare} /> */}
<Actions
isDisabled={!isValid || !values.amount || values.amount === 0}

4
src/components/Asset/AssetActions/Pool/Sections/Update.module.css
View File

@ -4,8 +4,8 @@
font-size: var(--font-size-mini);
color: var(--color-secondary);
text-align: center;
padding-top: calc(var(--spacer) / 4);
padding-bottom: calc(var(--spacer) / 3);
padding-top: calc(var(--spacer) / 2);
padding-bottom: calc(var(--spacer) / 2);
}
.update:before {

15
src/components/Asset/AssetActions/Pool/Sections/index.module.css
View File

@ -18,3 +18,18 @@
margin-left: calc(var(--spacer) / 3);
margin-right: calc(var(--spacer) / 3);
}
.fees {
border-top: none;
padding-top: 0;
margin-top: -0.5rem;
}
.fees > div {
grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
text-align: center;
}
.fees figure {
display: none;
}

12
src/components/Asset/AssetActions/Pool/Sections/index.tsx
View File

@ -110,17 +110,9 @@ export default function PoolSections() {
titlePostfixTitle={`Weight of ${poolInfo?.weightBaseToken}% ${poolInfo?.baseTokenSymbol} & ${poolInfo?.weightDt}% ${poolInfo?.datatokenSymbol}`}
>
<Graph />
<Token
symbol={poolInfo?.baseTokenSymbol}
balance={`${poolData?.baseTokenLiquidity}`}
size="mini"
/>
<Token
symbol={poolInfo?.datatokenSymbol}
balance={`${poolData?.datatokenLiquidity}`}
size="mini"
/>
</PoolSection>
<PoolSection className={styles.fees}>
<Token
symbol="% swap fee"
balance={poolInfo?.liquidityProviderSwapFee}

4
src/components/Asset/AssetActions/index.tsx
View File

@ -1,7 +1,7 @@
import React, { ReactElement, useState, useEffect } from 'react'
import Compute from './Compute'
import Consume from './Download'
import { FileMetadata, LoggerInstance, Datatoken } from '@oceanprotocol/lib'
import { FileInfo, LoggerInstance, Datatoken } from '@oceanprotocol/lib'
import Tabs, { TabsItem } from '@shared/atoms/Tabs'
import { compareAsBN } from '@utils/numbers'
import Pool from './Pool'
@ -37,7 +37,7 @@ export default function AssetActions({
const [isBalanceSufficient, setIsBalanceSufficient] = useState<boolean>()
const [dtBalance, setDtBalance] = useState<string>()
const [fileMetadata, setFileMetadata] = useState<FileMetadata>()
const [fileMetadata, setFileMetadata] = useState<FileInfo>()
const [fileIsLoading, setFileIsLoading] = useState<boolean>(false)
const isCompute = Boolean(
asset?.services.filter((service) => service.type === 'compute')[0]

3
src/components/Asset/AssetContent/MetaMain/MetaAsset.tsx
View File

@ -5,13 +5,14 @@ import AddToken from '@shared/AddToken'
import ExplorerLink from '@shared/ExplorerLink'
import Publisher from '@shared/Publisher'
import React, { ReactElement } from 'react'
import { AssetExtended } from 'src/@types/AssetExtended'
import styles from './MetaAsset.module.css'
export default function MetaAsset({
asset,
isBlockscoutExplorer
}: {
asset: Asset
asset: AssetExtended
isBlockscoutExplorer: boolean
}): ReactElement {
const { isAssetNetwork } = useAsset()

5
src/components/Asset/AssetContent/MetaMain/MetaInfo.tsx
View File

@ -1,16 +1,17 @@
import { Asset } from '@oceanprotocol/lib'
import { useAsset } from '@context/Asset'
import AssetType from '@shared/AssetType'
import Time from '@shared/atoms/Time'
import Publisher from '@shared/Publisher'
import { getServiceByName } from '@utils/ddo'
import React, { ReactElement } from 'react'
import { AssetExtended } from 'src/@types/AssetExtended'
import styles from './MetaInfo.module.css'
export default function MetaInfo({
asset,
nftPublisher
}: {
asset: Asset
asset: AssetExtended
nftPublisher: string
}): ReactElement {
const isCompute = Boolean(getServiceByName(asset, 'compute'))

29
src/components/Asset/AssetContent/MetaMain/index.module.css
View File

@ -13,32 +13,3 @@
height: calc(var(--spacer) * 2);
border-bottom: 1px solid var(--border-color);
}
.nftImage {
position: relative;
margin: 0;
border-right: 1px solid var(--border-color);
width: calc(var(--spacer) * 2);
height: calc(var(--spacer) * 2);
}
.nftImage img,
.nftImage > svg:first-of-type {
width: 100%;
height: 100%;
}
.nftImage > svg:first-of-type {
transform: scale(0.7);
}
.nftImage .tooltip {
position: absolute;
padding: 0;
left: 0;
bottom: 0;
}
.nftImage .tooltip svg {
fill: var(--font-color-text);
}

52
src/components/Asset/AssetContent/MetaMain/index.tsx
View File

@ -1,14 +1,11 @@
import React, { ReactElement } from 'react'
import styles from './index.module.css'
import { AssetExtended } from 'src/@types/AssetExtended'
import { decodeTokenURI } from '@utils/nft'
import MetaAsset from './MetaAsset'
import MetaInfo from './MetaInfo'
import Tooltip from '@shared/atoms/Tooltip'
import NftTooltip from './NftTooltip'
import Logo from '@shared/atoms/Logo'
import { FormPublishData } from '../../../Publish/_types'
import { useFormikContext } from 'formik'
import Nft from '../Nft'
import { AssetExtended } from 'src/@types/AssetExtended'
const blockscoutNetworks = [1287, 2021000, 2021001, 44787, 246, 1285]
export default function MetaMain({
asset,
@ -17,51 +14,12 @@ export default function MetaMain({
asset: AssetExtended
nftPublisher: string
}): ReactElement {
const nftMetadata = decodeTokenURI(asset?.nft?.tokenURI)
const blockscoutNetworks = [1287, 2021000, 2021001, 44787, 246, 1285]
const isBlockscoutExplorer = blockscoutNetworks.includes(asset?.chainId)
// 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>()
// checking if the NFT has an image associated (tokenURI)
// if tokenURI is undefined, then we are in Preview
// for Preview we need to show accessDetails.dataImage
// as this is where the NFT's SVG (during publish) is stored
const nftImage = nftMetadata?.image_data
? nftMetadata.image_data
: formikState?.values?.metadata?.nft?.image_data
? formikState.values.metadata.nft.image_data
: null
return (
<aside className={styles.meta}>
<header className={styles.asset}>
<div className={styles.nftImage}>
{nftImage ? (
<img src={nftImage} alt={asset?.nft?.name} />
) : (
<Logo noWordmark />
)}
{(nftMetadata || asset?.nftAddress) && (
<Tooltip
className={styles.tooltip}
content={
<NftTooltip
nft={nftMetadata}
address={asset?.nftAddress}
chainId={asset?.chainId}
isBlockscoutExplorer={isBlockscoutExplorer}
/>
}
/>
)}
</div>
<Nft isBlockscoutExplorer={isBlockscoutExplorer} />
<MetaAsset asset={asset} isBlockscoutExplorer={isBlockscoutExplorer} />
</header>

0
src/components/Asset/AssetContent/MetaMain/NftTooltip.module.css → src/components/Asset/AssetContent/Nft/NftTooltip.module.css
View File

38
src/components/Asset/AssetContent/MetaMain/NftTooltip.tsx → src/components/Asset/AssetContent/Nft/NftTooltip.tsx
View File

@ -7,6 +7,11 @@ import styles from './NftTooltip.module.css'
import explorerLinkStyles from '@shared/ExplorerLink/index.module.css'
import { accountTruncate } from '@utils/web3'
// Supported OpenSea networks:
// https://support.opensea.io/hc/en-us/articles/4404027708051-Which-blockchains-does-OpenSea-support-
const openSeaNetworks = [1, 137]
const openSeaTestNetworks = [4]
export default function NftTooltip({
nft,
address,
@ -18,26 +23,23 @@ export default function NftTooltip({
chainId: number
isBlockscoutExplorer: boolean
}): ReactElement {
// Currently Ocean NFTs are not displayed correctly on OpenSea
// Code prepared to easily integrate this feature once this is fixed
//
// Supported OpeanSea networks:
// https://support.opensea.io/hc/en-us/articles/4404027708051-Which-blockchains-does-OpenSea-support-
const openseaNetworks = [1, 137]
const openseaTestNetworks = [4]
const openSeaSupported = openseaNetworks
.concat(openseaTestNetworks)
const openSeaSupported = openSeaNetworks
.concat(openSeaTestNetworks)
.includes(chainId)
const openSeaBaseUri = openSeaSupported
? openseaTestNetworks.includes(chainId)
? openSeaTestNetworks.includes(chainId)
? 'https://testnets.opensea.io'
: 'https://opensea.io'
: undefined
const openSeaUrl = `${openSeaBaseUri}/assets/${
chainId === 137 ? 'matic' : ''
}/${address}/1`
return (
<div className={styles.wrapper}>
{nft && <img src={nft.image_data} alt={nft?.name} />}
{nft && <img src={nft.image_data || nft.image} alt={nft?.name} />}
<div className={styles.info}>
{nft && <h5>{nft.name}</h5>}
{address && (
@ -53,25 +55,23 @@ export default function NftTooltip({
isBlockscoutExplorer ? `tokens/${address}` : `token/${address}`
}
>
View on explorer
View on Explorer
</ExplorerLink>
)}
{openSeaSupported && nft && address && (
{openSeaSupported && address && (
<a
href={`${openSeaBaseUri}/assets/${address}/1`}
href={openSeaUrl}
target="_blank"
rel="noreferrer"
className={explorerLinkStyles.link}
>
View on OpeanSea <External />
View on OpenSea <External />
</a>
)}
</div>
{!nft?.image_data && (
<p className={styles.fallback}>
This Data NFT was not created on Ocean Market
</p>
{!nft?.image_data && !nft?.image && (
<p className={styles.fallback}>This Data NFT has no image set.</p>
)}
</div>
</div>

28
src/components/Asset/AssetContent/Nft/index.module.css Normal file
View File

@ -0,0 +1,28 @@
.nftImage {
position: relative;
margin: 0;
border-right: 1px solid var(--border-color);
width: calc(var(--spacer) * 2);
height: calc(var(--spacer) * 2);
}
.nftImage img,
.nftImage > svg:first-of-type {
width: 100%;
height: 100%;
}
.nftImage > svg:first-of-type {
transform: scale(0.7);
}
.nftImage .tooltip {
position: absolute;
padding: 0;
left: 0;
bottom: 0;
}
.nftImage .tooltip svg {
fill: var(--font-color-text);
}

60
src/components/Asset/AssetContent/Nft/index.tsx Normal file
View File

@ -0,0 +1,60 @@
import { useAsset } from '@context/Asset'
import Tooltip from '@shared/atoms/Tooltip'
import { decodeTokenURI } from '@utils/nft'
import { useFormikContext } from 'formik'
import React from 'react'
import { FormPublishData } from 'src/components/Publish/_types'
import Logo from '@shared/atoms/Logo'
import NftTooltip from './NftTooltip'
import styles from './index.module.css'
export default function Nft({
isBlockscoutExplorer
}: {
isBlockscoutExplorer: boolean
}) {
const { asset } = useAsset()
const nftMetadata = decodeTokenURI(asset?.nft?.tokenURI)
// 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>()
// checking if the NFT has an image associated (tokenURI)
// if tokenURI is undefined, then we are in Preview
// for Preview we need to show accessDetails.dataImage
// as this is where the NFT's SVG (during publish) is stored
const nftImage = nftMetadata?.image_data
? nftMetadata.image_data
: nftMetadata?.image
? nftMetadata.image
: formikState?.values?.metadata?.nft?.image_data
? formikState.values.metadata.nft.image_data
: null
return (
<div className={styles.nftImage}>
{nftImage ? (
<img src={nftImage} alt={asset?.nft?.name} />
) : (
<Logo noWordmark />
)}
{(nftMetadata || asset?.nftAddress) && (
<Tooltip
className={styles.tooltip}
content={
<NftTooltip
nft={nftMetadata}
address={asset?.nftAddress}
chainId={asset?.chainId}
isBlockscoutExplorer={isBlockscoutExplorer}
/>
}
/>
)}
</div>
)
}

32
src/components/Asset/Edit/EditMetadata.tsx
View File

@ -24,6 +24,7 @@ import EditFeedback from './EditFeedback'
import { useAsset } from '@context/Asset'
import { setNftMetadata } from '@utils/nft'
import { sanitizeUrl } from '@utils/url'
import { getEncryptedFiles } from '@utils/provider'
export default function Edit({
asset
@ -64,6 +65,7 @@ export default function Edit({
resetForm: () => void
) {
try {
let updatedFiles = asset.services[0].files
const linksTransformed = values.links?.length &&
values.links[0].valid && [sanitizeUrl(values.links[0].url)]
const updatedMetadata: Metadata = {
@ -78,17 +80,43 @@ export default function Edit({
values.price !== asset.accessDetails.price &&
(await updateFixedPrice(values.price))
if (values.files[0]?.url) {
const file = {
nftAddress: asset.nftAddress,
datatokenAddress: asset.services[0].datatokenAddress,
files: [
{
type: 'url',
index: 0,
url: values.files[0].url,
method: 'GET'
}
]
}
const filesEncrypted = await getEncryptedFiles(
file,
asset.services[0].serviceEndpoint
)
updatedFiles = filesEncrypted
}
const updatedService: Service = {
...asset.services[0],
timeout: mapTimeoutStringToSeconds(values.timeout)
timeout: mapTimeoutStringToSeconds(values.timeout),
files: updatedFiles
}
// TODO: remove version update at a later time
const updatedAsset: Asset = {
...asset,
...(asset as Asset),
version: '4.1.0',
metadata: updatedMetadata,
services: [updatedService]
}
// delete custom helper properties injected in the market so we don't write them on chain
delete (updatedAsset as AssetExtended).accessDetails
delete (updatedAsset as AssetExtended).datatokens
delete (updatedAsset as AssetExtended).stats
const setMetadataTx = await setNftMetadata(
updatedAsset,
accountId,

3
src/components/Asset/Edit/FormEditMetadata.tsx
View File

@ -1,9 +1,8 @@
import React, { ChangeEvent, ReactElement, useState } from 'react'
import React, { ChangeEvent, ReactElement } from 'react'
import { Field, Form, FormikContextType, useFormikContext } from 'formik'
import Input, { InputProps } from '@shared/FormInput'
import FormActions from './FormActions'
import styles from './FormEdit.module.css'
import { FormPublishData } from '../../Publish/_types'
import { useAsset } from '@context/Asset'
import { MetadataEditForm } from './_types'

4
src/components/Asset/Edit/_constants.ts
View File

@ -1,4 +1,4 @@
import { Metadata, ServiceComputeOptions } from '@oceanprotocol/lib'
import { FileInfo, Metadata, ServiceComputeOptions } from '@oceanprotocol/lib'
import { secondsToString } from '@utils/ddo'
import * as Yup from 'yup'
import { MetadataEditForm } from './_types'
@ -10,6 +10,7 @@ export const validationSchema = Yup.object().shape({
description: Yup.string().required('Required').min(10),
price: Yup.number().required('Required'),
links: Yup.array<any[]>().nullable(),
files: Yup.array<FileInfo[]>().nullable(),
timeout: Yup.string().required('Required'),
author: Yup.string().nullable()
})
@ -24,6 +25,7 @@ export function getInitialValues(
description: metadata?.description,
price,
links: metadata?.links,
files: '',
timeout: secondsToString(timeout),
author: metadata?.author
}

1
src/components/Asset/Edit/_types.ts
View File

@ -6,5 +6,6 @@ export interface MetadataEditForm {
timeout: string
price?: string
links?: string | any[]
files: string | any[]
author?: string
}

12
src/components/Asset/index.tsx
View File

@ -1,27 +1,33 @@
import React, { useState, useEffect, ReactElement } from 'react'
import { useRouter } from 'next/router'
import Page from '@shared/Page'
import Alert from '@shared/atoms/Alert'
import Loader from '@shared/atoms/Loader'
import { useAsset } from '@context/Asset'
import AssetContent from './AssetContent'
import { v3MarketUri } from 'app.config'
export default function AssetDetails({ uri }: { uri: string }): ReactElement {
const { asset, title, error, isInPurgatory, loading } = useAsset()
const router = useRouter()
const { asset, title, error, isInPurgatory, loading, isV3Asset } = useAsset()
const [pageTitle, setPageTitle] = useState<string>()
useEffect(() => {
if (isV3Asset) {
router.push(`${v3MarketUri}${uri}`)
}
if (!asset || error) {
setPageTitle('Could not retrieve asset')
return
}
setPageTitle(isInPurgatory ? '' : title)
}, [asset, error, isInPurgatory, title])
}, [asset, error, isInPurgatory, isV3Asset, router, title, uri])
return asset && pageTitle !== undefined && !loading ? (
<Page title={pageTitle} uri={uri}>
<AssetContent asset={asset} />
</Page>
) : error ? (
) : error && isV3Asset === false ? (
<Page title={pageTitle} noPageHeader uri={uri}>
<Alert title={pageTitle} text={error} state="error" />
</Page>

10
src/components/Footer/MarketStats/Tooltip.tsx
View File

@ -4,6 +4,8 @@ import PriceUnit from '@shared/Price/PriceUnit'
import NetworkName from '@shared/NetworkName'
import styles from './Tooltip.module.css'
import { StatsValue } from './_types'
import content from '../../../../content/footer.json'
import Markdown from '@shared/Markdown'
export default function MarketStatsTooltip({
totalValueLockedInOcean,
@ -39,13 +41,7 @@ export default function MarketStatsTooltip({
</li>
))}
</ul>
<p className={styles.note}>
Counted on-chain from our NFT and pool factories. Does not filter out
assets in{' '}
<a href="https://github.com/oceanprotocol/list-purgatory">
list-purgatory
</a>
</p>
<Markdown className={styles.note} text={content.stats.note} />
</>
)
}

35
src/components/Footer/MarketStats/index.tsx
View File

@ -61,7 +61,9 @@ export default function MarketStats(): ReactElement {
//
const getMarketStats = useCallback(async () => {
if (!mainChainIds?.length) return
const newData: {
[chainId: number]: FooterStatsValuesGlobalStatistics
} = {}
for (const chainId of mainChainIds) {
const context: OperationContext = {
url: `${getSubgraphUri(
@ -73,15 +75,12 @@ export default function MarketStats(): ReactElement {
try {
const response = await fetchData(queryGlobalStatistics, null, context)
if (!response?.data?.globalStatistics) return
setData((prevState) => ({
...prevState,
[chainId]: response.data.globalStatistics[0]
}))
newData[chainId] = response.data.globalStatistics[0]
} catch (error) {
LoggerInstance.error('Error fetching global stats: ', error.message)
}
}
setData(newData)
}, [mainChainIds])
//
@ -96,10 +95,12 @@ export default function MarketStats(): ReactElement {
//
useEffect(() => {
if (!data || !mainChainIds?.length) return
const newTotal: StatsTotal = {
...initialTotal // always start calculating beginning from initial 0 values
}
const newTVLInOcean: StatsValue = {}
const newTotalLiquidity: StatsValue = {}
const newPoolCount: StatsValue = {}
for (const chainId of mainChainIds) {
const baseTokenValue = data[chainId]?.totalLiquidity[0]?.value
@ -109,25 +110,15 @@ export default function MarketStats(): ReactElement {
? new Decimal(baseTokenValue).mul(2)
: new Decimal(0)
setTotalValueLockedInOcean((prevState) => ({
...prevState,
[chainId]: `${totalValueLockedInOcean}`
}))
newTVLInOcean[chainId] = `${totalValueLockedInOcean}`
const totalOceanLiquidity = Number(baseTokenValue) || 0
setTotalOceanLiquidity((prevState) => ({
...prevState,
[chainId]: `${totalOceanLiquidity}`
}))
newTotalLiquidity[chainId] = `${totalOceanLiquidity}`
const poolCount = data[chainId]?.poolCount || 0
setPoolCount((prevState) => ({
...prevState,
[chainId]: `${poolCount}`
}))
newPoolCount[chainId] = `${poolCount}`
const nftCount = data[chainId]?.nftCount || 0
const datatokenCount = data[chainId]?.datatokenCount || 0
const orderCount = data[chainId]?.orderCount || 0
@ -142,7 +133,9 @@ export default function MarketStats(): ReactElement {
LoggerInstance.error('Error data manipulation: ', error.message)
}
}
setTotalValueLockedInOcean(newTVLInOcean)
setTotalOceanLiquidity(newTotalLiquidity)
setPoolCount(newPoolCount)
setTotal(newTotal)
}, [data, mainChainIds, prices, currency])

54
src/components/Header/Menu.module.css
View File

@ -7,13 +7,24 @@
flex-wrap: wrap;
}
.logo {
order: 1;
.logo,
.badge {
white-space: nowrap;
display: flex;
}
.logo {
order: 0;
align-items: center;
}
.badge {
cursor: pointer;
margin-top: -0.25rem;
position: relative;
padding: calc(var(--spacer) / 5) calc(var(--spacer) / 4);
}
.navigation {
order: 3;
margin-top: calc(var(--spacer) / 2);
@ -60,10 +71,10 @@
.title {
margin: 0;
margin-right: var(--spacer);
display: block;
color: var(--color-secondary);
font-size: var(--font-size-h4);
margin-right: calc(var(--spacer) / 6);
}
}
@ -115,6 +126,10 @@
padding-right: 0;
}
.link[aria-disabled] {
pointer-events: none;
}
.logo svg {
margin-right: calc(var(--spacer) / 3);
}
@ -122,3 +137,36 @@
.actions button {
text-transform: none;
}
.tooltip[aria-expanded='true'] svg {
transform: rotate(180deg);
}
.caret,
svg.caret {
width: var(--font-size-mini);
height: var(--font-size-mini);
fill: var(--brand-white);
opacity: 0.7;
transition: transform 0.2s ease-out;
vertical-align: middle;
margin-left: calc(var(--spacer) / 12);
}
@media screen and (min-width: 42rem) {
.caret,
svg.caret {
display: inline-block;
}
}
.versions {
padding: calc(var(--spacer) / 4);
}
.versions .link {
display: inline-block;
margin: 0 calc(var(--spacer) / 4);
padding: 0;
font-size: var(--font-size-small);
}

33
src/components/Header/Menu.tsx
View File

@ -9,7 +9,8 @@ import SearchBar from './SearchBar'
import styles from './Menu.module.css'
import { useRouter } from 'next/router'
import { useMarketMetadata } from '@context/MarketMetadata'
import Tooltip from '@shared/atoms/Tooltip'
import Caret from '@images/caret.svg'
const Wallet = loadable(() => import('./Wallet'))
declare type MenuItem = {
@ -33,19 +34,41 @@ function MenuLink({ item }: { item: MenuItem }) {
}
export default function Menu(): ReactElement {
const { siteContent } = useMarketMetadata()
const { appConfig, siteContent } = useMarketMetadata()
return (
<nav className={styles.menu}>
<Link href="/">
<a className={styles.logo}>
<Logo noWordmark />
<h1 className={styles.title}>
{siteContent?.siteTitle} <Badge label="v4" />
</h1>
<h1 className={styles.title}>{siteContent?.siteTitle}</h1>
</a>
</Link>
<Tooltip
className={styles.tooltip}
content={
<div className={styles.versions}>
<a className={styles.link} href={appConfig.v3MarketUri}>
v3
</a>
<a className={styles.link} href="" aria-current aria-disabled>
v4
</a>
</div>
}
trigger="click focus"
placement="bottom"
>
<Badge
className={styles.badge}
label={
<>
v4 <Caret aria-hidden="true" className={styles.caret} />
</>
}
/>
</Tooltip>
<ul className={styles.navigation}>
{siteContent?.menu.map((item: MenuItem) => (
<li key={item.name}>

2
src/components/Profile/History/PoolShares/_utils.ts
View File

@ -39,7 +39,7 @@ export async function getAssetsFromPoolShares(
assetList.push({
poolShare: data[i],
userLiquidity,
networkId: getAsset(ddoList, data[i].pool.datatoken.address).chainId,
networkId: getAsset(ddoList, data[i].pool.datatoken.address)?.chainId,
createTime: data[i].pool.createdTimestamp,
asset: getAsset(ddoList, data[i].pool.datatoken.address)
})

1
src/components/Publish/Actions/index.module.css
View File

@ -7,6 +7,7 @@
.actions button {
margin: 0 calc(var(--spacer) / 2);
min-height: 40px;
}
.infoIcon {

17
src/components/Publish/Actions/index.tsx
View File

@ -10,6 +10,7 @@ import { useRouter } from 'next/router'
import Tooltip from '@shared/atoms/Tooltip'
import AvailableNetworks from 'src/components/Publish/AvailableNetworks'
import Info from '@images/info.svg'
import Loader from '@shared/atoms/Loader'
export default function Actions({
scrollToRef,
@ -24,8 +25,7 @@ export default function Actions({
values,
errors,
isValid,
isSubmitting,
setFieldValue
isSubmitting
}: FormikContextType<FormPublishData> = useFormikContext()
const { connect, accountId } = useWeb3()
@ -60,6 +60,11 @@ export default function Actions({
(values.user.stepCurrent === 2 && errors.services !== undefined) ||
(values.user.stepCurrent === 3 && errors.pricing !== undefined)
const hasSubmitError =
values.feedback?.[1].status === 'error' ||
values.feedback?.[2].status === 'error' ||
values.feedback?.[3].status === 'error'
return (
<footer className={styles.actions}>
{did ? (
@ -108,7 +113,13 @@ export default function Actions({
style="primary"
disabled={isSubmitting || !isValid}
>
Submit
{isSubmitting ? (
<Loader white />
) : hasSubmitError ? (
'Retry'
) : (
'Submit'
)}
</Button>
)}
</>

4
src/components/Publish/Metadata/index.module.css
View File

@ -4,3 +4,7 @@
margin-left: 1.75rem;
top: -3.2rem;
}
.fieldWarning {
composes: fieldWarning from '../index.module.css';
}

11
src/components/Publish/Metadata/index.tsx
View File

@ -9,6 +9,8 @@ import IconDataset from '@images/dataset.svg'
import IconAlgorithm from '@images/algorithm.svg'
import styles from './index.module.css'
import { algorithmContainerPresets } from '../_constants'
import Alert from '@shared/atoms/Alert'
import { useMarketMetadata } from '@context/MarketMetadata'
const assetTypeOptionsTitles = getFieldContent(
'type',
@ -16,6 +18,8 @@ const assetTypeOptionsTitles = getFieldContent(
).options
export default function MetadataFields(): ReactElement {
const { siteContent } = useMarketMetadata()
// connect with Form state, use for conditional field rendering
const { values, setFieldValue } = useFormikContext<FormPublishData>()
@ -71,6 +75,13 @@ export default function MetadataFields(): ReactElement {
name="metadata.type"
options={assetTypeOptions}
/>
{values.services[0].access === 'compute' && (
<Alert
className={styles.fieldWarning}
state="info"
text={siteContent.warning.ctd}
/>
)}
<Field
{...getFieldContent('name', content.metadata.fields)}
component={Input}

26
src/components/Publish/Services/index.tsx
View File

@ -6,6 +6,9 @@ import IconCompute from '@images/compute.svg'
import content from '../../../../content/publish/form.json'
import { getFieldContent } from '../_utils'
import { FormPublishData } from '../_types'
import Alert from '@shared/atoms/Alert'
import { useMarketMetadata } from '@context/MarketMetadata'
import styles from '../index.module.css'
const accessTypeOptionsTitles = getFieldContent(
'access',
@ -13,6 +16,8 @@ const accessTypeOptionsTitles = getFieldContent(
).options
export default function ServicesFields(): ReactElement {
const { siteContent } = useMarketMetadata()
// connect with Form state, use for conditional field rendering
const { values, setFieldValue } = useFormikContext<FormPublishData>()
@ -67,12 +72,21 @@ export default function ServicesFields(): ReactElement {
name="services[0].algorithmPrivacy"
/>
) : (
<Field
{...getFieldContent('access', content.services.fields)}
component={Input}
name="services[0].access"
options={accessTypeOptions}
/>
<>
<Field
{...getFieldContent('access', content.services.fields)}
component={Input}
name="services[0].access"
options={accessTypeOptions}
/>
{values.services[0].access === 'compute' && (
<Alert
className={styles.fieldWarning}
state="info"
text={siteContent.warning.ctd}
/>
)}
</>
)}
<Field
{...getFieldContent('providerUrl', content.services.fields)}

4
src/components/Publish/Submission/index.tsx
View File

@ -1,12 +1,8 @@
import React, { ReactElement } from 'react'
import styles from './index.module.css'
import { FormPublishData } from '../_types'
import { useFormikContext } from 'formik'
import { Feedback } from './Feedback'
export default function Submission(): ReactElement {
const { values, handleSubmit } = useFormikContext<FormPublishData>()
return (
<div className={styles.submission}>
<Feedback />

6
src/components/Publish/_types.ts
View File

@ -3,7 +3,7 @@ import { NftMetadata } from '@utils/nft'
import { ReactElement } from 'react'
import { PriceOptions } from 'src/@types/Price'
interface FileMetadata {
interface FileInfo {
url: string
valid?: boolean
contentLength?: string
@ -11,8 +11,8 @@ interface FileMetadata {
}
export interface FormPublishService {
files: FileMetadata[]
links?: FileMetadata[]
files: FileInfo[]
links?: FileInfo[]
timeout: string
dataTokenOptions: { name: string; symbol: string }
access: 'Download' | 'Compute' | string

21
src/components/Publish/_utils.ts
View File

@ -144,13 +144,18 @@ export async function transformPublishFormToDdo(
}
// this is the default format hardcoded
const file = [
{
type: 'url',
url: files[0].url,
method: 'GET'
}
]
const file = {
nftAddress,
datatokenAddress,
files: [
{
type: 'url',
index: 0,
url: files[0].url,
method: 'GET'
}
]
}
const filesEncrypted =
!isPreview &&
files?.length &&
@ -173,7 +178,7 @@ export async function transformPublishFormToDdo(
'@context': ['https://w3id.org/did/v1'],
id: did,
nftAddress,
version: '4.0.0',
version: '4.1.0',
chainId,
metadata: newMetadata,
services: [newService],

4
src/components/Publish/_validation.ts
View File

@ -146,7 +146,7 @@ export const validationSchema: Yup.SchemaOf<any> = Yup.object().shape({
// .min(4, (param) => `Title must be at least ${param.min} characters`)
// .required('Required'),
// description: Yup.string().min(10).required('Required'),
// files: Yup.array<FileMetadata>().required('Required').nullable(),
// files: Yup.array<FileInfo>().required('Required').nullable(),
// timeout: Yup.string().required('Required'),
// dataTokenOptions: Yup.object()
// .shape({
@ -167,6 +167,6 @@ export const validationSchema: Yup.SchemaOf<any> = Yup.object().shape({
// // ---- optional fields ----
// algorithmPrivacy: Yup.boolean().nullable(),
// tags: Yup.string().nullable(),
// links: Yup.array<FileMetadata[]>().nullable()
// links: Yup.array<FileInfo[]>().nullable()
// })
// .defined()

5
src/components/Publish/index.module.css
View File

@ -16,3 +16,8 @@
padding-right: calc(var(--spacer) * 4);
}
}
.fieldWarning {
margin-top: -2rem;
margin-bottom: var(--spacer);
}

236
src/components/Publish/index.tsx
View File

@ -11,7 +11,7 @@ import Actions from './Actions'
import Debug from './Debug'
import Navigation from './Navigation'
import { Steps } from './Steps'
import { FormPublishData, PublishFeedback } from './_types'
import { FormPublishData } from './_types'
import { useUserPreferences } from '@context/UserPreferences'
import useNftFactory from '@hooks/contracts/useNftFactory'
import { ProviderInstance, LoggerInstance, DDO } from '@oceanprotocol/lib'
@ -35,34 +35,34 @@ export default function PublishPage({
const nftFactory = useNftFactory()
const newAbortController = useAbortController()
const [feedback, setFeedback] = useState<PublishFeedback>(
initialPublishFeedback
)
// This `feedback` state is auto-synced into Formik context under `values.feedback`
// for use in other components. Syncing defined in ./Steps.tsx child component.
const [feedback, setFeedback] = useState(initialPublishFeedback)
// Collecting output of each publish step, enabling retry of failed steps
const [erc721Address, setErc721Address] = useState<string>()
const [datatokenAddress, setDatatokenAddress] = useState<string>()
const [ddo, setDdo] = useState<DDO>()
const [ddoEncrypted, setDdoEncrypted] = useState<string>()
const [did, setDid] = useState<string>()
async function handleSubmit(values: FormPublishData) {
let _erc721Address: string,
_datatokenAddress: string,
_ddo: DDO,
_encryptedDdo: string
// --------------------------------------------------
// 1. Create NFT & datatokens & create pricing schema
// --------------------------------------------------
async function create(values: FormPublishData): Promise<{
erc721Address: string
datatokenAddress: string
}> {
setFeedback((prevState) => ({
...prevState,
'1': {
...prevState['1'],
status: 'active',
errorMessage: null
}
}))
// reset all feedback state
setFeedback(initialPublishFeedback)
// --------------------------------------------------
// 1. Create NFT & datatokens & create pricing schema
// --------------------------------------------------
try {
setFeedback((prevState) => ({
...prevState,
'1': {
...prevState['1'],
status: 'active',
txCount: values.pricing.type === 'dynamic' ? 2 : 1,
description: prevState['1'].description
}
}))
const config = getOceanConfig(chainId)
LoggerInstance.log('[publish] using config: ', config)
@ -76,8 +76,7 @@ export default function PublishPage({
)
const isSuccess = Boolean(erc721Address && datatokenAddress && txHash)
_erc721Address = erc721Address
_datatokenAddress = datatokenAddress
if (!isSuccess) throw new Error('No Token created. Please try again.')
LoggerInstance.log('[publish] createTokensAndPricing tx', txHash)
LoggerInstance.log('[publish] erc721Address', erc721Address)
@ -87,14 +86,16 @@ export default function PublishPage({
...prevState,
'1': {
...prevState['1'],
status: isSuccess ? 'success' : 'error',
status: 'success',
txHash
}
}))
return { erc721Address, datatokenAddress }
} catch (error) {
LoggerInstance.error('[publish] error', error.message)
if (error.message.length > 65) {
error.message = 'No Token created.'
error.message = 'No Token created. Please try again.'
}
setFeedback((prevState) => ({
@ -102,58 +103,65 @@ export default function PublishPage({
'1': {
...prevState['1'],
status: 'error',
errorMessage: error.message,
description:
values.pricing.type === 'dynamic'
? prevState['1'].description.replace(
'a single transaction',
'a single transaction, after an initial approve transaction'
)
: prevState['1'].description
errorMessage: error.message
}
}))
}
}
// --------------------------------------------------
// 2. Construct and encrypt DDO
// --------------------------------------------------
async function encrypt(
values: FormPublishData,
erc721Address: string,
datatokenAddress: string
): Promise<{ ddo: DDO; ddoEncrypted: string }> {
setFeedback((prevState) => ({
...prevState,
'2': {
...prevState['2'],
status: 'active',
errorMessage: null
}
}))
// --------------------------------------------------
// 2. Construct and encrypt DDO
// --------------------------------------------------
try {
setFeedback((prevState) => ({
...prevState,
'2': {
...prevState['2'],
status: 'active'
}
}))
if (!_datatokenAddress || !_erc721Address)
throw new Error('No NFT or Datatoken received.')
if (!datatokenAddress || !erc721Address)
throw new Error('No NFT or Datatoken received. Please try again.')
const ddo = await transformPublishFormToDdo(
values,
_datatokenAddress,
_erc721Address
datatokenAddress,
erc721Address
)
_ddo = ddo
if (!ddo) throw new Error('No DDO received. Please try again.')
setDdo(ddo)
LoggerInstance.log('[publish] Got new DDO', ddo)
const encryptedResponse = await ProviderInstance.encrypt(
const ddoEncrypted = await ProviderInstance.encrypt(
ddo,
values.services[0].providerUrl.url,
newAbortController()
)
const encryptedDdo = encryptedResponse
_encryptedDdo = encryptedDdo
LoggerInstance.log('[publish] Got encrypted DDO', encryptedDdo)
if (!ddoEncrypted)
throw new Error('No encrypted DDO received. Please try again.')
setDdoEncrypted(ddoEncrypted)
LoggerInstance.log('[publish] Got encrypted DDO', ddoEncrypted)
setFeedback((prevState) => ({
...prevState,
'2': {
...prevState['2'],
status: encryptedDdo ? 'success' : 'error'
status: 'success'
}
}))
return { ddo, ddoEncrypted }
} catch (error) {
LoggerInstance.error('[publish] error', error.message)
setFeedback((prevState) => ({
@ -165,43 +173,53 @@ export default function PublishPage({
}
}))
}
}
// --------------------------------------------------
// 3. Write DDO into NFT metadata
// --------------------------------------------------
async function publish(
values: FormPublishData,
ddo: DDO,
ddoEncrypted: string
): Promise<{ did: string }> {
setFeedback((prevState) => ({
...prevState,
'3': {
...prevState['3'],
status: 'active',
errorMessage: null
}
}))
// --------------------------------------------------
// 3. Write DDO into NFT metadata
// --------------------------------------------------
try {
setFeedback((prevState) => ({
...prevState,
'3': {
...prevState['3'],
status: 'active'
}
}))
if (!_ddo || !_encryptedDdo) throw new Error('No DDO received.')
if (!ddo || !ddoEncrypted)
throw new Error('No DDO received. Please try again.')
const res = await setNFTMetadataAndTokenURI(
_ddo,
ddo,
accountId,
web3,
values.metadata.nft,
newAbortController()
)
if (!res?.transactionHash)
throw new Error(
'Metadata could not be written into the NFT. Please try again.'
)
LoggerInstance.log('[publish] setMetadata result', res)
const txHash = res.transactionHash
setFeedback((prevState) => ({
...prevState,
'3': {
...prevState['3'],
status: res ? 'success' : 'error',
txHash
txHash: res?.transactionHash
}
}))
setDid(_ddo.id)
return { did: ddo.id }
} catch (error) {
LoggerInstance.error('[publish] error', error.message)
setFeedback((prevState) => ({
@ -215,6 +233,44 @@ export default function PublishPage({
}
}
// --------------------------------------------------
// Orchestrate publishing
// --------------------------------------------------
async function handleSubmit(values: FormPublishData) {
// Syncing variables with state, enabling retry of failed steps
let _erc721Address = erc721Address
let _datatokenAddress = datatokenAddress
let _ddo = ddo
let _ddoEncrypted = ddoEncrypted
let _did = did
if (!_erc721Address || !_datatokenAddress) {
const { erc721Address, datatokenAddress } = await create(values)
_erc721Address = erc721Address
_datatokenAddress = datatokenAddress
setErc721Address(erc721Address)
setDatatokenAddress(datatokenAddress)
}
if (!_ddo || !_ddoEncrypted) {
const { ddo, ddoEncrypted } = await encrypt(
values,
_erc721Address,
_datatokenAddress
)
_ddo = ddo
_ddoEncrypted = ddoEncrypted
setDdo(ddo)
setDdoEncrypted(ddoEncrypted)
}
if (!_did) {
const { did } = await publish(values, _ddo, _ddoEncrypted)
_did = did
setDid(did)
}
}
return isInPurgatory && purgatoryData ? null : (
<Formik
initialValues={initialValues}
@ -224,22 +280,20 @@ export default function PublishPage({
await handleSubmit(values)
}}
>
{({ values }) => {
return (
<>
<PageHeader
title={<Title networkId={values.user.chainId} />}
description={content.description}
/>
<Form className={styles.form} ref={scrollToRef}>
<Navigation />
<Steps feedback={feedback} />
<Actions scrollToRef={scrollToRef} did={did} />
</Form>
{debug && <Debug />}
</>
)
}}
{({ values }) => (
<>
<PageHeader
title={<Title networkId={values.user.chainId} />}
description={content.description}
/>
<Form className={styles.form} ref={scrollToRef}>
<Navigation />
<Steps feedback={feedback} />
<Actions scrollToRef={scrollToRef} did={did} />
</Form>
{debug && <Debug />}
</>
)}
</Formik>
)
}