From 636f3621d06910a2c851985a2856f575a98a4f42 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Thu, 9 Jun 2022 20:37:53 +0200 Subject: [PATCH] allow multiple runs of handleSubmit * collect what we need in local state for reuse after method has run * run each step conditionally --- src/components/Publish/Actions/index.tsx | 3 +- src/components/Publish/Submission/index.tsx | 4 - src/components/Publish/index.tsx | 229 ++++++++++---------- 3 files changed, 120 insertions(+), 116 deletions(-) diff --git a/src/components/Publish/Actions/index.tsx b/src/components/Publish/Actions/index.tsx index 339a264f9..7104ea206 100644 --- a/src/components/Publish/Actions/index.tsx +++ b/src/components/Publish/Actions/index.tsx @@ -24,8 +24,7 @@ export default function Actions({ values, errors, isValid, - isSubmitting, - setFieldValue + isSubmitting }: FormikContextType = useFormikContext() const { connect, accountId } = useWeb3() diff --git a/src/components/Publish/Submission/index.tsx b/src/components/Publish/Submission/index.tsx index 65ffb4246..d7b5f0291 100644 --- a/src/components/Publish/Submission/index.tsx +++ b/src/components/Publish/Submission/index.tsx @@ -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() - return (
diff --git a/src/components/Publish/index.tsx b/src/components/Publish/index.tsx index 53cdcdb3e..121a2ba0e 100644 --- a/src/components/Publish/index.tsx +++ b/src/components/Publish/index.tsx @@ -38,132 +38,139 @@ export default function PublishPage({ const [feedback, setFeedback] = useState( initialPublishFeedback ) + const [erc721Address, setErc721Address] = useState() + const [datatokenAddress, setDatatokenAddress] = useState() + const [ddo, setDdo] = useState() + const [ddoEncrypted, setDdoEncrypted] = useState() const [did, setDid] = useState() async function handleSubmit(values: FormPublishData) { - let _erc721Address: string, - _datatokenAddress: string, - _ddo: DDO, - _encryptedDdo: string - // reset all feedback state setFeedback(initialPublishFeedback) // -------------------------------------------------- // 1. Create NFT & datatokens & create pricing schema + // Wrapped in conditional allowing method to run + // multiple times. // -------------------------------------------------- - try { - setFeedback((prevState) => ({ - ...prevState, - '1': { - ...prevState['1'], - status: 'active', - txCount: values.pricing.type === 'dynamic' ? 2 : 1, - description: prevState['1'].description + if (!erc721Address && !datatokenAddress) { + 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) + + const { erc721Address, datatokenAddress, txHash } = + await createTokensAndPricing( + values, + accountId, + config, + nftFactory, + web3 + ) + + const isSuccess = Boolean(erc721Address && datatokenAddress && txHash) + setErc721Address(erc721Address) + setDatatokenAddress(datatokenAddress) + + LoggerInstance.log('[publish] createTokensAndPricing tx', txHash) + LoggerInstance.log('[publish] erc721Address', erc721Address) + LoggerInstance.log('[publish] datatokenAddress', datatokenAddress) + + setFeedback((prevState) => ({ + ...prevState, + '1': { + ...prevState['1'], + status: isSuccess ? 'success' : 'error', + txHash + } + })) + } catch (error) { + LoggerInstance.error('[publish] error', error.message) + if (error.message.length > 65) { + error.message = 'No Token created.' } - })) - const config = getOceanConfig(chainId) - LoggerInstance.log('[publish] using config: ', config) - - const { erc721Address, datatokenAddress, txHash } = - await createTokensAndPricing( - values, - accountId, - config, - nftFactory, - web3 - ) - - const isSuccess = Boolean(erc721Address && datatokenAddress && txHash) - _erc721Address = erc721Address - _datatokenAddress = datatokenAddress - - LoggerInstance.log('[publish] createTokensAndPricing tx', txHash) - LoggerInstance.log('[publish] erc721Address', erc721Address) - LoggerInstance.log('[publish] datatokenAddress', datatokenAddress) - - setFeedback((prevState) => ({ - ...prevState, - '1': { - ...prevState['1'], - status: isSuccess ? 'success' : 'error', - txHash - } - })) - } catch (error) { - LoggerInstance.error('[publish] error', error.message) - if (error.message.length > 65) { - error.message = 'No Token created.' + setFeedback((prevState) => ({ + ...prevState, + '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 + } + })) } - - setFeedback((prevState) => ({ - ...prevState, - '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 - } - })) } // -------------------------------------------------- // 2. Construct and encrypt DDO + // Wrapped in conditional allowing method to run + // multiple times. // -------------------------------------------------- - try { - setFeedback((prevState) => ({ - ...prevState, - '2': { - ...prevState['2'], - status: 'active' - } - })) + if (!ddoEncrypted) { + 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.') - const ddo = await transformPublishFormToDdo( - values, - _datatokenAddress, - _erc721Address - ) + const ddo = await transformPublishFormToDdo( + values, + datatokenAddress, + erc721Address + ) - _ddo = ddo - LoggerInstance.log('[publish] Got new DDO', ddo) + setDdo(ddo) + LoggerInstance.log('[publish] Got new DDO', ddo) - const encryptedResponse = await ProviderInstance.encrypt( - ddo, - values.services[0].providerUrl.url, - newAbortController() - ) - const encryptedDdo = encryptedResponse - _encryptedDdo = encryptedDdo - LoggerInstance.log('[publish] Got encrypted DDO', encryptedDdo) + const encryptedResponse = await ProviderInstance.encrypt( + ddo, + values.services[0].providerUrl.url, + newAbortController() + ) + const ddoEncrypted = encryptedResponse + setDdoEncrypted(ddoEncrypted) + LoggerInstance.log('[publish] Got encrypted DDO', ddoEncrypted) - setFeedback((prevState) => ({ - ...prevState, - '2': { - ...prevState['2'], - status: encryptedDdo ? 'success' : 'error' - } - })) - } catch (error) { - LoggerInstance.error('[publish] error', error.message) - setFeedback((prevState) => ({ - ...prevState, - '2': { - ...prevState['2'], - status: 'error', - errorMessage: error.message - } - })) + setFeedback((prevState) => ({ + ...prevState, + '2': { + ...prevState['2'], + status: ddoEncrypted ? 'success' : 'error' + } + })) + } catch (error) { + LoggerInstance.error('[publish] error', error.message) + setFeedback((prevState) => ({ + ...prevState, + '2': { + ...prevState['2'], + status: 'error', + errorMessage: error.message + } + })) + } } // -------------------------------------------------- @@ -178,30 +185,32 @@ export default function PublishPage({ } })) - if (!_ddo || !_encryptedDdo) throw new Error('No DDO received.') + if (!ddo || !ddoEncrypted) throw new Error('No DDO received.') 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 hit Submit again to retry.' + ) 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) + setDid(ddo.id) } catch (error) { LoggerInstance.error('[publish] error', error.message) setFeedback((prevState) => ({