feat: preview expected CU

src/api/contracts/gateway-registration/GatewayRegistration.abi.ts

@@ -78,4 +78,28 @@ export const GATEWAY_REGISTRATION_CONTRACT_ABI = [
     outputs: [],
     stateMutability: 'nonpayable',
   },
+  {
+    type: 'function',
+    name: 'computationUnitsAmount',
+    inputs: [
+      {
+        name: 'amount',
+        type: 'uint256',
+        internalType: 'uint256',
+      },
+      {
+        name: 'durationBlocks',
+        type: 'uint256',
+        internalType: 'uint256',
+      },
+    ],
+    outputs: [
+      {
+        name: '',
+        type: 'uint256',
+        internalType: 'uint256',
+      },
+    ],
+    stateMutability: 'view',
+  },
 ] as const;

src/api/contracts/gateway-registration/useComputationUnits.ts

@@ -0,0 +1,28 @@
+import { useReadContract } from 'wagmi';
+
+import { useContracts } from '@network/useContracts';
+
+import { GATEWAY_REGISTRATION_CONTRACT_ABI } from './GatewayRegistration.abi';
+
+export function useComputationUnits({
+  amount,
+  lockDuration,
+}: {
+  amount: string;
+  lockDuration: number;
+}) {
+  const contracts = useContracts();
+
+  const { data, isLoading, isPending } = useReadContract({
+    address: contracts.GATEWAY_REGISTRATION,
+    abi: GATEWAY_REGISTRATION_CONTRACT_ABI,
+    functionName: 'computationUnitsAmount',
+    args: [BigInt(amount), BigInt(lockDuration)],
+  });
+
+  return {
+    data: data?.toString(),
+    isLoading,
+    isPending,
+  };
+}

src/pages/GatewaysPage/GatewayStake.tsx

@@ -7,6 +7,7 @@ import * as yup from '@schema';
 import { useFormik } from 'formik';
 import { useDebounce } from 'use-debounce';
 
+import { useComputationUnits } from '@api/contracts/gateway-registration/useComputationUnits';
 import { useStakeGateway } from '@api/contracts/gateway-registration/useStakeGateway';
 import { useMyGatewayStakes } from '@api/subsquid-network-squid/gateways-graphql';
 import { BlockchainContractError } from '@components/BlockchainContractError';
@@ -104,13 +105,17 @@ export function GatewayStake({ disabled }: { disabled?: boolean }) {
   }, [source]);
 
   const [lockDuration] = useDebounce(formik.values.durationBlocks, 500);
+  const [amount] = useDebounce(formik.values.amount, 500);
   const unlockAt = useMemo(() => {
     if (!data) return Date.now();
-
     return (
       (Number(lockDuration) + 1) * data.blockTimeL1 + new Date(data.lastBlockTimestampL1).getTime()
     );
   }, [data, lockDuration]);
+  const { data: computationUnits, isPending: isComputationUnitsLoading } = useComputationUnits({
+    amount: toSqd(amount),
+    lockDuration: Number(lockDuration),
+  });
 
   return (
     <>
@@ -189,11 +194,17 @@ export function GatewayStake({ disabled }: { disabled?: boolean }) {
             <FormRow>
               <FormikSwitch id="autoExtension" label="Auto extension" formik={formik} />
             </FormRow>
-            <Stack direction="row" justifyContent="space-between" alignContent="center">
-              <Box>Unlock at</Box>
-              <Stack direction="row">
-                ~{dateFormat(unlockAt, 'dateTime')}
-                <HelpTooltip help="Automatically relocked if auto extension is enabled" />
+            <Stack spacing={2}>
+              <Stack direction="row" justifyContent="space-between" alignContent="center">
+                <Box>Unlock at</Box>
+                <Stack direction="row">
+                  ~{dateFormat(unlockAt, 'dateTime')}
+                  <HelpTooltip help="Automatically relocked if auto extension is enabled" />
+                </Stack>
+              </Stack>
+              <Stack direction="row" justifyContent="space-between" alignContent="center">
+                <Box>Expected CU</Box>
+                {isComputationUnitsLoading ? '-' : computationUnits}
               </Stack>
             </Stack>