Improve cost estimation (#441)

* update cost estimation error design

* direct command fallback for cost estimation

Author: andreip136

src/components/run-job/select-resources.module.css

@@ -62,11 +62,6 @@
 }
 
 .costCard {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  padding: 12px 24px;
-
   .costEstimation {
     align-items: center;
     display: flex;

src/components/run-job/select-resources.tsx

@@ -5,6 +5,7 @@ import useEnvResources from '@/components/hooks/use-env-resources';
 import Input from '@/components/input/input';
 import Select from '@/components/input/select';
 import Slider from '@/components/slider/slider';
+import config from '@/config';
 import { SelectedToken, useRunJobContext } from '@/context/run-job-context';
 import { useP2P } from '@/contexts/P2PContext';
 import { useOceanAccount } from '@/lib/use-ocean-account';
@@ -41,6 +42,8 @@ const SelectResources = ({ environment, freeCompute, token }: SelectResourcesPro
   const { closeAuthModal, isOpen: isAuthModalOpen, openAuthModal } = useAuthModal();
   const router = useRouter();
 
+  const { isReady: p2pReady } = useP2P();
+
   const { account } = useOceanAccount();
 
   const {
@@ -52,8 +55,6 @@ const SelectResources = ({ environment, freeCompute, token }: SelectResourcesPro
     setSelectedResources,
   } = useRunJobContext();
 
-  const { isReady: p2pReady } = useP2P();
-
   const [initComputeError, setInitComputeError] = useState<unknown | null>(null);
   const [isLoadingCost, setIsLoadingCost] = useState(false);
 
@@ -275,45 +276,83 @@ const SelectResources = ({ environment, freeCompute, token }: SelectResourcesPro
     formik.setFieldValue('maxJobDurationValue', Math.max(0, num));
   };
 
-  const renderCostEstimation = () => {
-    if (isLoadingCost) {
-      return (
-        <h3 className={styles.estimationMessage}>
-          <CircularProgress size={24} />
-          Estimating cost...
-        </h3>
-      );
-    }
-    if (!!initComputeError || !token) {
-      let errorText;
-      if (initComputeError instanceof Error) {
-        errorText = initComputeError.message;
+  const renderCostCard = () => {
+    const renderCostEstimation = () => {
+      if (isLoadingCost) {
+        return (
+          <h3 className={styles.estimationMessage}>
+            <CircularProgress size={24} />
+            Estimating cost...
+          </h3>
+        );
+      }
+      if (!p2pReady || (!estimatedTotalCost && estimatedTotalCost !== 0)) {
+        return (
+          <h3 className={styles.estimationMessage}>
+            <CircularProgress size={24} />
+            Connecting to node...
+          </h3>
+        );
       }
       return (
-        <h3 className={styles.estimationMessage}>
-          Cost estimation failed{' '}
-          {errorText ? (
-            <Tooltip className="textAccent1" title={errorText}>
-              <InfoOutlinedIcon className={styles.accessInfoIcon} />
-            </Tooltip>
-          ) : null}
-        </h3>
+        <div>
+          <span className={styles.token}>{token?.symbol}</span>
+          &nbsp;
+          <span className={styles.amount}>{token ? formatTokenAmount(estimatedTotalCost, token.address) : null}</span>
+        </div>
       );
+    };
+
+    return (
+      <Card
+        className={styles.costCard}
+        direction="column"
+        innerShadow="black"
+        paddingX="md"
+        paddingY="sm"
+        radius="md"
+        spacing="sm"
+        variant="glass"
+      >
+        <div className={styles.costEstimation}>
+          <h3>Estimated total cost</h3>
+          {renderCostEstimation()}
+        </div>
+        <div className="alignSelfEnd textSuccessDarker">
+          If your job finishes earlier than estimated, the unconsumed tokens remain in your escrow
+        </div>
+      </Card>
+    );
+  };
+
+  const renderConnectionErrorCard = () => {
+    if (!initComputeError) {
+      return null;
     }
-    if (!p2pReady || (!estimatedTotalCost && estimatedTotalCost !== 0)) {
-      return (
-        <h3 className={styles.estimationMessage}>
-          <CircularProgress size={24} />
-          Connecting to node...
-        </h3>
-      );
+    let errorText;
+    if (initComputeError instanceof Error) {
+      errorText = initComputeError.message;
     }
     return (
-      <div>
-        <span className={styles.token}>{token?.symbol}</span>
-        &nbsp;
-        <span className={styles.amount}>{formatTokenAmount(estimatedTotalCost, token.address)}</span>
-      </div>
+      <Card direction="column" paddingX="md" paddingY="sm" radius="md" spacing="sm" variant="error">
+        <h3>Could not reach this node</h3>
+        {errorText ? <p>{errorText}</p> : null}
+        <p>
+          This may be due to missing WSS, TLS, or P2P circuit relay configuration on the node.
+          <br />
+          If you are the node operator, please check your node&apos;s network setup.
+        </p>
+        <Button
+          className="alignSelfStart"
+          color="accent2"
+          href={config.links.docs}
+          size="sm"
+          target="_blank"
+          variant="filled"
+        >
+          Visit docs
+        </Button>
+      </Card>
     );
   };
 
@@ -439,21 +478,12 @@ const SelectResources = ({ environment, freeCompute, token }: SelectResourcesPro
             value={formik.values.maxJobDurationValue}
           />
         </div>
-        <TransitionGroup>
-          {formik.isValid && !freeCompute ? (
-            <Collapse>
-              <Card className={styles.costCard} innerShadow="black" radius="md" variant="glass">
-                <div className={styles.costEstimation}>
-                  <h3>Estimated total cost</h3>
-                  {renderCostEstimation()}
-                </div>
-                <div className="alignSelfEnd textSuccessDarker">
-                  If your job finishes earlier than estimated, the unconsumed tokens remain in your escrow
-                </div>
-              </Card>
-            </Collapse>
-          ) : null}
-        </TransitionGroup>
+        {freeCompute ? null : (
+          <TransitionGroup>
+            {initComputeError ? <Collapse>{renderConnectionErrorCard()}</Collapse> : null}
+            {!initComputeError && formik.isValid ? <Collapse>{renderCostCard()}</Collapse> : null}
+          </TransitionGroup>
+        )}
         <div className="actionsGroupLgBetween">
           <Button
             color="accent1"

src/context/run-job-context.tsx

@@ -1,7 +1,8 @@
 import { getApiRoute } from '@/config';
 import { CHAIN_ID } from '@/constants/chains';
 import { useP2P } from '@/contexts/P2PContext';
-import { getTokenSymbol } from '@/lib/token-symbol';
+import { directNodeCommand } from '@/lib/direct-node-command';
+import { getTokenDecimals, getTokenSymbol } from '@/lib/token-symbol';
 import { useOceanAccount } from '@/lib/use-ocean-account';
 import {
   ComputeEnvironment,
@@ -12,6 +13,7 @@ import {
 } from '@/types/environments';
 import { roundTokenAmount } from '@/utils/formatters';
 import axios from 'axios';
+import BigNumber from 'bignumber.js';
 import { useSearchParams } from 'next/navigation';
 import { createContext, ReactNode, useCallback, useContext, useEffect, useState } from 'react';
 
@@ -183,23 +185,72 @@ export const RunJobProvider = ({ children }: { children: ReactNode }) => {
       if (!provider || !p2pIsReady) {
         return;
       }
+      const validUntil = maxJobDurationSeconds < 1 ? 1 : Math.ceil(maxJobDurationSeconds);
+      let cost: string;
+      let minLockSeconds: number;
+
       try {
-        const { cost, minLockSeconds } = await initializeCompute(
+        const result = await initializeCompute(
           environment,
           tokenAddress,
-          maxJobDurationSeconds < 1 ? 1 : Math.ceil(maxJobDurationSeconds),
+          validUntil,
           multiaddrsOrPeerId,
           environment.consumerAddress,
           resources,
           CHAIN_ID
         );
-        setEstimatedTotalCost(roundTokenAmount(Number(cost), tokenAddress, 'up'));
-        setMinLockSeconds(minLockSeconds);
-        onSuccess?.(Number(cost), minLockSeconds);
-      } catch (error) {
-        onError?.(error);
-        console.error('Failed to fetch estimated cost:', error);
+        cost = result.cost;
+        minLockSeconds = result.minLockSeconds;
+      } catch (p2pError) {
+        console.warn('P2P cost estimation failed, falling back to direct node command:', p2pError);
+        const payload = {
+          datasets: [],
+          algorithm: { meta: { rawcode: 'rawcode' } },
+          environment: environment.id,
+          payment: {
+            chainId: CHAIN_ID,
+            token: tokenAddress,
+            resources,
+          },
+          maxJobDuration: validUntil,
+          consumerAddress: environment.consumerAddress,
+          signature: '',
+        };
+        try {
+          const multiaddrs = Array.isArray(multiaddrsOrPeerId) ? multiaddrsOrPeerId : undefined;
+          const peerId =
+            typeof multiaddrsOrPeerId === 'string'
+              ? multiaddrsOrPeerId
+              : (multiaddrs?.map((a) => a.match(/\/p2p\/(\S+)/)?.[1]).find(Boolean) ?? '');
+          const response = await directNodeCommand({
+            command: 'initializeCompute',
+            body: payload,
+            multiaddrs,
+            peerId,
+          });
+          const data: {
+            payment: { amount: string; minLockSeconds: number };
+            status?: { httpStatus: number; error?: string };
+          } = await response.json();
+          if (data?.status?.httpStatus != null && data.status.httpStatus >= 400) {
+            throw new Error(data.status.error ?? 'Initialize compute failed');
+          }
+          const tokenDecimals = await getTokenDecimals(tokenAddress);
+          const decimalsNumber = Number(tokenDecimals);
+          cost = new BigNumber(data.payment.amount)
+            .div(new BigNumber(10).pow(decimalsNumber))
+            .decimalPlaces(decimalsNumber)
+            .toString();
+          minLockSeconds = data.payment.minLockSeconds;
+        } catch (directError) {
+          onError?.(directError);
+          console.error('Failed to fetch estimated cost:', directError);
+          return;
+        }
       }
+      setEstimatedTotalCost(roundTokenAmount(Number(cost), tokenAddress, 'up'));
+      setMinLockSeconds(minLockSeconds);
+      onSuccess?.(Number(cost), minLockSeconds);
     },
     [initializeCompute, p2pIsReady, provider]
   );
@@ -324,7 +375,7 @@ export const RunJobProvider = ({ children }: { children: ReactNode }) => {
 
   /**
    * Initiate hydration when initializing the context
-   * If free compute was selected, we don't need to wait for the p2p node to be ready, but otherwise we need it to calculate cost
+   * If free compute was selected, we don't need to wait for the p2p node/ provider, but otherwise we need it to calculate cost
    */
   useEffect(() => {
     if (!hydrateFromUrlStarted) {
@@ -333,7 +384,7 @@ export const RunJobProvider = ({ children }: { children: ReactNode }) => {
         setHydrateFromUrlFinished(true);
       } else {
         const queryFree = searchParams.get('free') === 'true';
-        // For paid compute, also wait for p2p node and provider in order to fetch the cost
+        // For paid compute, wait for p2p node and provider in order to fetch the cost (direct command is the fallback)
         // For free compute, they are not needed
         if (queryFree || (p2pIsReady && provider)) {
           setHydrateFromUrlStarted(true);