import React, { useState, ReactElement } from 'react' import { DDO } from '@oceanprotocol/lib' import Loader from '../../atoms/Loader' import Web3Feedback from '../../molecules/Wallet/Feedback' import Dropzone from '../../atoms/Dropzone' import Price from '../../atoms/Price' import { computeOptions, useCompute, readFileContent, useOcean } from '@oceanprotocol/react' import styles from './Compute.module.css' import Button from '../../atoms/Button' import Input from '../../atoms/Input' import Alert from '../../atoms/Alert' export default function Compute({ ddo, isBalanceSufficient }: { ddo: DDO isBalanceSufficient: boolean }): ReactElement { const { ocean } = useOcean() const { compute, isLoading, computeStepText, computeError } = useCompute() const computeService = ddo.findServiceByType('compute').attributes.main const [isJobStarting, setIsJobStarting] = useState(false) const [, setError] = useState('') const [computeType, setComputeType] = useState('') const [computeContainer, setComputeContainer] = useState({ entrypoint: '', image: '', tag: '' }) const [algorithmRawCode, setAlgorithmRawCode] = useState('') const [isPublished, setIsPublished] = useState(false) const [file, setFile] = useState(null) const isComputeButtonDisabled = isJobStarting || file === null || computeType === '' || !ocean || !isBalanceSufficient const onDrop = async (files: any) => { setFile(files[0]) const fileText = await readFileContent(files[0]) setAlgorithmRawCode(fileText) } const handleSelectChange = (event: any) => { const comType = event.target.value setComputeType(comType) const selectedComputeOption = computeOptions.find((x) => x.name === comType) if (selectedComputeOption !== undefined) setComputeContainer(selectedComputeOption.value) } const startJob = async () => { try { if (!ocean) return setIsJobStarting(true) setIsPublished(false) setError('') await compute( ddo.id, computeService, ddo.dataToken, algorithmRawCode, computeContainer ) setIsPublished(true) setFile(null) } catch (error) { setError('Failed to start job!') console.log(error) } setIsJobStarting(false) } return (