diff --git a/src/@utils/nft.ts b/src/@utils/nft.ts index 37f57ca81..88dff2f98 100644 --- a/src/@utils/nft.ts +++ b/src/@utils/nft.ts @@ -61,9 +61,11 @@ export function generateNftCreateData(nftMetadata: NftMetadata): any { name: nftMetadata.name, symbol: nftMetadata.symbol, templateIndex: 1, + // Gas estimation fails if we add our huge tokenURI + tokenURI: '' // TODO: figure out if Buffer.from method is working in browser in final build // as BTOA is deprecated. - tokenURI: window?.btoa(JSON.stringify(nftMetadata)) + // tokenURI: window?.btoa(JSON.stringify(nftMetadata)) // tokenURI: Buffer.from(JSON.stringify(nftMetadata)).toString('base64') // should end up as data:application/json;base64 } diff --git a/src/components/Publish/Submission/index.tsx b/src/components/Publish/Submission/index.tsx index 78c9ee068..9207c67ca 100644 --- a/src/components/Publish/Submission/index.tsx +++ b/src/components/Publish/Submission/index.tsx @@ -10,9 +10,7 @@ export default function Submission(): ReactElement { return (

Submission

- Place to teach about what happens next, output all the steps in background - in some list, after submission continously update this list with the - status of the submission. +
) diff --git a/src/components/Publish/_utils.ts b/src/components/Publish/_utils.ts index fe6afc98d..77de5dcc1 100644 --- a/src/components/Publish/_utils.ts +++ b/src/components/Publish/_utils.ts @@ -15,6 +15,7 @@ import { ZERO_ADDRESS } from '@oceanprotocol/lib' import { mapTimeoutStringToSeconds } from '@utils/ddo' +import { generateNftCreateData } from '@utils/nft' import { getEncryptedFiles } from '@utils/provider' import slugify from 'slugify' import Web3 from 'web3' @@ -130,7 +131,6 @@ export async function transformPublishFormToDdo( } }) } - console.log('new meta', newMetadata) // this is the default format hardcoded const file = [ @@ -193,14 +193,11 @@ export async function createTokensAndPricing( nftFactory: NftFactory, web3: Web3 ) { - // image not included here for gas fees reasons. It is also an issue to reaserch how we add the image in the nft - const nftCreateData: NftCreateData = { - name: values.metadata.nft.name, - symbol: values.metadata.nft.symbol, - // tokenURI: values.metadata.nft.image_data, - tokenURI: '', - templateIndex: 1 - } + const nftCreateData: NftCreateData = generateNftCreateData( + values.metadata.nft + ) + + LoggerInstance.log('[publish] NFT metadata', nftCreateData) // TODO: cap is hardcoded for now to 1000, this needs to be discussed at some point // fee is default 0 for now @@ -250,7 +247,7 @@ export async function createTokensAndPricing( '200', false ) - console.log('aprove', txApp) + LoggerInstance.log('[publish] approve', txApp) const result = await nftFactory.createNftErcWithPool( accountId, nftCreateData, diff --git a/src/components/Publish/index.tsx b/src/components/Publish/index.tsx index 43e49ba11..360feb44d 100644 --- a/src/components/Publish/index.tsx +++ b/src/components/Publish/index.tsx @@ -14,7 +14,13 @@ import { Steps } from './Steps' import { FormPublishData, PublishFeedback } from './_types' import { useUserPreferences } from '@context/UserPreferences' import useNftFactory from '@hooks/contracts/useNftFactory' -import { Nft, getHash, ProviderInstance } from '@oceanprotocol/lib' +import { + Nft, + getHash, + ProviderInstance, + LoggerInstance, + DDO +} from '@oceanprotocol/lib' import { useSiteMetadata } from '@hooks/useSiteMetadata' import axios, { Method } from 'axios' import { useCancelToken } from '@hooks/useCancelToken' @@ -42,22 +48,28 @@ export default function PublishPage({ ) async function handleSubmit(values: FormPublishData) { - let _erc721Address, _datatokenAddress, _ddo, _encryptedDdo + let _erc721Address: string, + _datatokenAddress: string, + _ddo: DDO, + _encryptedDdo: string + + // reset all feedback state + setFeedback(initialPublishFeedback) // -------------------------------------------------- // 1. Create NFT & datatokens & create pricing schema // -------------------------------------------------- try { - setFeedback({ - ...feedback, + setFeedback((prevState) => ({ + ...prevState, 1: { - ...feedback[1], + ...prevState[1], status: 'active' } - }) + })) const config = getOceanConfig(chainId) - console.log('config', config) + LoggerInstance.log('[publish] using config: ', config) const { erc721Address, datatokenAddress } = await createTokensAndPricing( values, @@ -68,40 +80,46 @@ export default function PublishPage({ web3 ) - const isSuccess = erc721Address && datatokenAddress + const isSuccess = Boolean(erc721Address && datatokenAddress) _erc721Address = erc721Address _datatokenAddress = datatokenAddress - setFeedback({ - ...feedback, + LoggerInstance.log('[publish] erc721Address', erc721Address) + LoggerInstance.log('[publish] datatokenAddress', datatokenAddress) + + setFeedback((prevState) => ({ + ...prevState, 1: { - ...feedback[1], + ...prevState[1], status: isSuccess ? 'success' : 'error' } - }) + })) } catch (error) { - console.error('error', error.message) - setFeedback({ - ...feedback, + LoggerInstance.error('[publish] error', error.message) + setFeedback((prevState) => ({ + ...prevState, 1: { - ...feedback[1], + ...prevState[1], status: 'error', message: error.message } - }) + })) } // -------------------------------------------------- - // 2. Construct and encypt DDO + // 2. Construct and encrypt DDO // -------------------------------------------------- try { - setFeedback({ - ...feedback, + setFeedback((prevState) => ({ + ...prevState, 2: { - ...feedback[2], - status: 'active' + ...prevState[2], + status: _datatokenAddress && _erc721Address ? 'active' : 'error' } - }) + })) + + if (!_datatokenAddress || !_erc721Address) + throw new Error('No NFT or Datatoken received.') const ddo = await transformPublishFormToDdo( values, @@ -110,6 +128,7 @@ export default function PublishPage({ ) _ddo = ddo + LoggerInstance.log('[publish] Got new DDO', JSON.stringify(ddo)) const encryptedResponse = await ProviderInstance.encrypt( ddo, @@ -124,41 +143,41 @@ export default function PublishPage({ } ) const encryptedDdo = encryptedResponse.data - _encryptedDdo = encryptedDdo + LoggerInstance.log('[publish] Got encrypted DDO', encryptedDdo) - console.log('ddo', JSON.stringify(ddo)) - - setFeedback({ - ...feedback, + setFeedback((prevState) => ({ + ...prevState, 2: { - ...feedback[2], + ...prevState[2], status: encryptedDdo ? 'success' : 'error' } - }) + })) } catch (error) { - console.error('error', error.message) - setFeedback({ - ...feedback, + LoggerInstance.error('[publish] error', error.message) + setFeedback((prevState) => ({ + ...prevState, 2: { - ...feedback[2], + ...prevState[2], status: 'error', message: error.message } - }) + })) } // -------------------------------------------------- - // 3. Publish DDO + // 3. Write DDO into NFT metadata // -------------------------------------------------- try { - setFeedback({ - ...feedback, + setFeedback((prevState) => ({ + ...prevState, 3: { - ...feedback[3], - status: 'active' + ...prevState[3], + status: _ddo && _encryptedDdo ? 'active' : 'error' } - }) + })) + + if (!_ddo || !_encryptedDdo) throw new Error('No DDO received.') // TODO: this whole setMetadata needs to go in a function ,too many hardcoded/calculated params // TODO: hash generation : this needs to be moved in a function (probably on ocean.js) after we figure out what is going on in provider, leave it here for now @@ -179,25 +198,25 @@ export default function PublishPage({ '0x' + metadataHash ) - console.log('result', res) + LoggerInstance.log('[publish] setMetadata result', res) - setFeedback({ - ...feedback, + setFeedback((prevState) => ({ + ...prevState, 3: { - ...feedback[3], + ...prevState[3], status: res ? 'success' : 'error' } - }) + })) } catch (error) { - console.error('error', error.message) - setFeedback({ - ...feedback, + LoggerInstance.error('[publish] error', error.message) + setFeedback((prevState) => ({ + ...prevState, 3: { - ...feedback[3], + ...prevState[3], status: 'error', message: error.message } - }) + })) } // --------------------------------------------------