Connect Photo Upload Form to Submission.createSubmission Contract Call

[JamesVictor-O]

#Description
Enable users to submit their cleanup photos to the Submission contract by calling the createSubmission function with the IPFS dataURI. Use the @decleanup/contracts package for type-safe interactions and handle transaction confirmation.

Tasks:

• Initialize the Submission contract using DCUContracts(Networks.ARBITRUM_SEPOLIA).Submission.connect(signer).

• A hook will be created, implement the hook after the images have been sucessfully uploaded to ipfs(pinate) and a url is returned.

• Handle transaction confirmation and display the transaction hash.

• Catch and display contract-specific errors (e.g., SUBMISSION__InvalidSubmissionData).

• Update the frontend state to reflect the new submission.

Acceptance Criteria:

• Users can submit photos to the Submission contract after IPFS upload.

• The createSubmission function is called with the correct dataURI.

• Transaction confirmation is awaited, and the hash is displayed.

• Errors (e.g., invalid dataURI, insufficient gas) are caught and shown to the user.

• Type-safe interactions are used via @decleanup/contracts.

Notes

this is the link to the type chain implementation docs docs

something else...

[brisstone]

I'd love to take this on because I’ve worked on similar flows before, uploading images to IPFS (via Pinata) and then tying that into smart contract interactions. I’m comfortable using TypeChain and ethers.js for type-safe contract calls, so I can confidently hook into Submission.createSubmission after the upload.

My plan is to connect to the Submission contract using DCUContracts(Networks.ARBITRUM_SEPOLIA).Submission.connect(signer), pass in the returned dataURI, and handle transaction confirmation properly, showing the hash and catching any contract-specific errors like SUBMISSION__InvalidSubmissionData.

It’s a clean, well-scoped issue and I’m confident I can get it done smoothly.

[emarc99]

@JamesVictor-O Is this issue still available? Would love to give it a go.

[pushkarm029]

Hey, I can complete this quickly. Thanks

[Henrichy]

🔧 Planned Implementation:

Initialize the Submission contract via DCUContracts(Networks.ARBITRUM_SEPOLIA).Submission.connect(signer) for type-safe interactions.

Create a custom hook that triggers after successful IPFS (Pinata) upload, passing the returned dataURI into the contract call.

Call createSubmission with the IPFS dataURI and handle transaction lifecycle:

Await confirmation

Display transaction hash in the UI

Implement robust error handling: surface contract errors like SUBMISSION__InvalidSubmissionData and gas-related issues with user-friendly feedback.

Update the frontend state to reflect successful submissions in real-time.

Follow the typechain docs and use @decleanup/contracts to ensure type safety throughout.

✅ Acceptance Check:

Users can upload cleanup photos → stored in IPFS → submitted to contract.

Transaction hash shown after confirmation.

Errors surfaced gracefully.

State updated to include the new submission.

Please assign this issue to me 🙏