fix: resolve all build errors

frontend/.eslintrc.json

@@ -18,23 +18,43 @@
     "import"
   ],
   "rules": {
+    "@next/next/no-html-link-for-pages": "off", // stop Next.js from complaining about pages not being in root
+    "object-shorthand": [
+      "error",
+      "always"
+    ], // don't do things like {service: service}, instead just {service}
     "import/first": "error",
     "import/newline-after-import": "error",
     "import/no-duplicates": "error",
     "simple-import-sort/imports": "error",
     "simple-import-sort/exports": "error",
     "unused-imports/no-unused-imports": "error",
-    "no-unused-vars": ["warn", { "argsIgnorePattern": "^_" }],
-    "no-console": ["error", { "allow": ["error"] }],
-    "prettier/prettier": ["error", {
-      "endOfLine": "auto",
-      "semi": true,
-      "singleQuote": true
-    }],
+    "no-unused-vars": [
+      "warn",
+      {
+        "argsIgnorePattern": "^_"
+      }
+    ],
+    "no-console": [
+      "error",
+      {
+        "allow": [
+          "error"
+        ]
+      }
+    ],
+    "prettier/prettier": [
+      "error",
+      {
+        "endOfLine": "auto",
+        "semi": true,
+        "singleQuote": true
+      }
+    ],
     "react/jsx-props-no-spreading": "off",
     "react/no-array-index-key": "off",
-    "react/react-in-jsx-scope": "off",    
-    "react-hooks/rules-of-hooks": "error", 
+    "react/react-in-jsx-scope": "off",
+    "react-hooks/rules-of-hooks": "error",
     "react-hooks/exhaustive-deps": "warn"
   }
 }

frontend/client/enums.ts

@@ -6,13 +6,13 @@ export enum MiddlewareAction {
 }
 
 export enum MiddlewareChain {
-  ETHEREUM = "ethereum",
-  GOERLI = "goerli",
-  GNOSIS = "gnosis",
-  SOLANA = "solana",
-  OPTIMISM = "optimism",
-  BASE = "base",
-  MODE = "mode",
+  ETHEREUM = 'ethereum',
+  GOERLI = 'goerli',
+  GNOSIS = 'gnosis',
+  SOLANA = 'solana',
+  OPTIMISM = 'optimism',
+  BASE = 'base',
+  MODE = 'mode',
 }
 
 export enum MiddlewareLedger {

frontend/client/types.ts

@@ -10,6 +10,7 @@ import {
 } from './enums';
 
 export type ServiceHash = string;
+export type ServiceConfigId = string;
 
 export type ServiceKeys = {
   address: Address;
@@ -55,7 +56,7 @@ export type MiddlewareServiceResponse = {
   service_path?: string;
   version: string;
   chain_configs: {
-    [chain in MiddlewareChain]: {
+    [middlewareChain in MiddlewareChain]: {
       ledger_config: LedgerConfig;
       chain_data: ChainData;
     };

frontend/components/AddressLink.tsx

@@ -1,6 +1,6 @@
 import { MiddlewareChain } from '@/client';
 import { UNICODE_SYMBOLS } from '@/constants/symbols';
-import { EXPLORER_URL } from '@/constants/urls';
+import { EXPLORER_URL_BY_MIDDLEWARE_CHAIN } from '@/constants/urls';
 import { Address } from '@/types/Address';
 import { truncateAddress } from '@/utils/truncate';
 
@@ -15,7 +15,7 @@ export const AddressLink = ({
   return (
     <a
       target="_blank"
-      href={`${EXPLORER_URL[MiddlewareChain.OPTIMISM]}/address/${address}`}
+      href={`${EXPLORER_URL_BY_MIDDLEWARE_CHAIN[MiddlewareChain.OPTIMISM]}/address/${address}`}
     >
       {truncateAddress(address)}
 

frontend/components/MainPage/MainHeader/FirstRunModal.tsx

@@ -3,18 +3,16 @@ import Image from 'next/image';
 import { FC } from 'react';
 
 import { MODAL_WIDTH } from '@/constants/width';
-import { useServiceTemplates } from '@/hooks/useServiceTemplates';
+import { TokenSymbol } from '@/enums/Token';
+import { useStakingProgram } from '@/hooks/useStakingProgram';
 
 type FirstRunModalProps = { open: boolean; onClose: () => void };
 
 export const FirstRunModal: FC<FirstRunModalProps> = ({ open, onClose }) => {
-  const { getServiceTemplates } = useServiceTemplates();
+  const { activeStakingProgramMeta } = useStakingProgram();
 
-  if (!open) return null;
-
-  const minimumStakedAmountRequired = getMinimumStakedAmountRequired(
-    getServiceTemplates()[0],
-  );
+  const minimumStakedAmountRequired =
+    activeStakingProgramMeta?.stakingRequirements?.[TokenSymbol.OLAS];
 
   return (
     <Modal

frontend/components/MainPage/header/AgentButton/AgentButton.tsx

@@ -27,7 +27,7 @@ export const AgentButton = () => {
     service,
     deploymentStatus: serviceStatus,
     isLoaded,
-  } = useService({ serviceConfigId });
+  } = useService(serviceConfigId);
 
   assertRequired(
     // TODO: review whether this causes agent button to not render

frontend/components/MainPage/header/AgentButton/AgentNotRunningButton.tsx

@@ -24,48 +24,55 @@ import { useMasterWalletContext } from '@/hooks/useWallet';
 import { ServicesService } from '@/service/Services';
 import { WalletService } from '@/service/Wallet';
 import { delayInSeconds } from '@/utils/delay';
+import { asEvmChainId } from '@/utils/middlewareHelpers';
 
 /** Button used to start / deploy the agent */
 export const AgentNotRunningButton = () => {
-  const { masterWallets: wallets } = useMasterWalletContext();
+  const { storeState } = useStore();
+  const { showNotification } = useElectronApi();
+
+  const { masterWallets } = useMasterWalletContext();
   const {
     selectedService,
     setPaused: setIsServicePollingPaused,
-    isFetched: isLoaded,
     refetch: updateServicesState,
   } = useServices();
-  const { service, deploymentStatus, setDeploymentStatus } = useService({
-    serviceConfigId:
-      isLoaded && selectedService ? selectedService?.service_config_id : '',
-  });
-  const { showNotification } = useElectronApi();
+
+  const { service, deploymentStatus, setDeploymentStatus } = useService(
+    selectedService?.service_config_id,
+  );
+
   const {
     setIsPaused: setIsBalancePollingPaused,
     totalStakedOlasBalance,
     totalEthBalance,
     updateBalances,
   } = useBalanceContext();
-  const { serviceSafeBalances, isLowBalance } = useServiceBalances(
+
+  const { serviceSafeBalances } = useServiceBalances(
     selectedService?.service_config_id,
   );
-  const { storeState } = useStore();
+
   const {
     isAllStakingContractDetailsRecordLoaded,
     setIsPaused: setIsStakingContractInfoPollingPaused,
     refetchActiveStakingContractDetails,
   } = useStakingContractContext();
+
   const { activeStakingProgramId } = useStakingProgram();
+
   const { isEligibleForStaking, isAgentEvicted, isServiceStaked } =
     useActiveStakingContractInfo();
+
   const { hasEnoughServiceSlots } = useActiveStakingContractInfo();
 
   const requiredStakedOlas =
     service &&
     activeStakingProgramId &&
-    STAKING_PROGRAMS[service.home_chain_id][activeStakingProgramId]
+    STAKING_PROGRAMS[asEvmChainId(service.home_chain)][activeStakingProgramId]
       ?.stakingRequirements[TokenSymbol.OLAS];
 
-  const safeOlasBalance = serviceSafeBalances.find(
+  const safeOlasBalance = serviceSafeBalances?.find(
     (walletBalanceResult) => walletBalanceResult.symbol === TokenSymbol.OLAS,
   )?.balance;
 
@@ -95,7 +102,7 @@ export const AgentNotRunningButton = () => {
   ]);
 
   const createSafeIfNeeded = useCallback(async () => {
-    if (!service?.chain_configs[service.home_chain_id]?.chain_data?.multisig) {
+    if (!service?.chain_configs[service.home_chain]?.chain_data?.multisig) {
       await WalletService.createSafe(MiddlewareChain.OPTIMISM);
     }
   }, [service]);
@@ -108,7 +115,7 @@ export const AgentNotRunningButton = () => {
       serviceTemplate: SERVICE_TEMPLATES[0], // TODO: support multi-agent, during optimus week
       deploy: true,
       useMechMarketplace:
-        STAKING_PROGRAMS[+SERVICE_TEMPLATES[0].home_chain_id][ // TODO: support multi-agent, during optimus week
+        STAKING_PROGRAMS[asEvmChainId(SERVICE_TEMPLATES[0].home_chain)][ // TODO: support multi-agent, during optimus week
           activeStakingProgramId
         ].mechType === MechType.Marketplace,
     });
@@ -129,7 +136,7 @@ export const AgentNotRunningButton = () => {
   ]);
 
   const handleStart = useCallback(async () => {
-    if (!wallets?.[0]) return;
+    if (!masterWallets?.[0]) return;
 
     pauseAllPolling();
     setDeploymentStatus(MiddlewareDeploymentStatus.DEPLOYING);
@@ -149,7 +156,7 @@ export const AgentNotRunningButton = () => {
       resumeAllPolling();
     }
   }, [
-    wallets,
+    masterWallets,
     pauseAllPolling,
     resumeAllPolling,
     setDeploymentStatus,
@@ -165,7 +172,8 @@ export const AgentNotRunningButton = () => {
     const isServiceInactive =
       deploymentStatus === MiddlewareDeploymentStatus.BUILT ||
       deploymentStatus === MiddlewareDeploymentStatus.STOPPED;
-    if (isServiceInactive && isLowBalance) return false;
+
+    if (isServiceInactive) return false; // TOOD: check if master safe is low balance relative to service's active staking program id
 
     if (
       [
@@ -192,7 +200,6 @@ export const AgentNotRunningButton = () => {
   }, [
     isAllStakingContractDetailsRecordLoaded,
     deploymentStatus,
-    isLowBalance,
     requiredStakedOlas,
     hasEnoughServiceSlots,
     isServiceStaked,

frontend/components/MainPage/header/AgentButton/AgentRunningButton.tsx

@@ -38,7 +38,7 @@ export const AgentRunningButton = () => {
     isLoaded && selectedService?.service_config_id
       ? selectedService.service_config_id
       : '';
-  const { service, setDeploymentStatus } = useService({ serviceConfigId });
+  const { service, setDeploymentStatus } = useService(serviceConfigId);
 
   const handlePause = useCallback(async () => {
     if (!service) return;

frontend/components/MainPage/header/LastTransaction.tsx

@@ -5,11 +5,10 @@ import { useInterval } from 'usehooks-ts';
 
 import { MiddlewareChain } from '@/client';
 import { ONE_MINUTE_INTERVAL } from '@/constants/intervals';
-import { EXPLORER_URL } from '@/constants/urls';
+import { EXPLORER_URL_BY_MIDDLEWARE_CHAIN } from '@/constants/urls';
 import { usePageState } from '@/hooks/usePageState';
 import { useService } from '@/hooks/useService';
 import { useStakingProgram } from '@/hooks/useStakingProgram';
-import { useMasterWalletContext } from '@/hooks/useWallet';
 import { getLatestTransaction } from '@/service/Ethers';
 import { TransactionInfo } from '@/types/TransactionInfo';
 import { Optional } from '@/types/Util';
@@ -35,25 +34,26 @@ type LastTransactionProps = { serviceConfigId: Optional<string> };
 export const LastTransaction = ({ serviceConfigId }: LastTransactionProps) => {
   const { isPageLoadedAndOneMinutePassed } = usePageState();
   const { activeStakingProgramMeta } = useStakingProgram();
-  const { service } = useService({ serviceConfigId });
-  const { masterSafes } = useMasterWalletContext();
-  const multisigAddress = masterSafe;
+  const { serviceSafes } = useService(serviceConfigId);
+
+  const serviceSafe = serviceSafes?.[0];
+
   const chainId = activeStakingProgramMeta?.chainId;
 
   const [isFetching, setIsFetching] = useState(true);
   const [transaction, setTransaction] = useState<TransactionInfo | null>(null);
 
   const fetchTransaction = useCallback(async () => {
-    if (!multisigAddress) return;
+    if (!serviceSafe?.address) return;
     if (!chainId) return;
 
-    getLatestTransaction(multisigAddress, chainId)
+    getLatestTransaction(serviceSafe.address, chainId)
       .then((tx) => setTransaction(tx))
       .catch((error) =>
         console.error('Failed to get latest transaction', error),
       )
       .finally(() => setIsFetching(false));
-  }, [multisigAddress, chainId]);
+  }, [serviceSafe, chainId]);
 
   // Poll for the latest transaction
   useInterval(() => fetchTransaction(), ONE_MINUTE_INTERVAL);
@@ -86,7 +86,7 @@ export const LastTransaction = ({ serviceConfigId }: LastTransactionProps) => {
         className="text-xs pointer hover-underline"
         onClick={() =>
           window.open(
-            `${EXPLORER_URL[MiddlewareChain.OPTIMISM]}/tx/${transaction.hash}`,
+            `${EXPLORER_URL_BY_MIDDLEWARE_CHAIN[MiddlewareChain.OPTIMISM]}/tx/${transaction.hash}`,
           )
         }
       >

frontend/components/MainPage/header/index.tsx

@@ -15,9 +15,7 @@ import { AgentHead } from './AgentHead';
 const useSetupTrayIcon = () => {
   const { isLowBalance } = useBalanceContext();
   const { selectedService } = useServices();
-  const { deploymentStatus } = useService({
-    serviceConfigId: selectedService?.service_config_id,
-  });
+  const { deploymentStatus } = useService(selectedService?.service_config_id);
   const { setTrayIcon } = useElectronApi();
 
   useEffect(() => {
@@ -40,10 +38,9 @@ export const MainHeader = () => {
   const handleModalClose = useCallback(() => setIsFirstRunModalOpen(false), []);
 
   const { selectedService } = useServices();
-  const configId = selectedService?.service_config_id;
-  const { isLoaded: isServiceLoaded } = useService({
-    serviceConfigId: configId,
-  });
+  const { isLoaded: isServiceLoaded } = useService(
+    selectedService?.service_config_id,
+  );
   const { isActiveStakingProgramLoaded } = useStakingProgram();
 
   useSetupTrayIcon();

frontend/components/MainPage/modals/FirstRunModal.tsx

@@ -14,7 +14,7 @@ type FirstRunModalProps = { open: boolean; onClose: () => void };
 
 export const FirstRunModal: FC<FirstRunModalProps> = ({ open, onClose }) => {
   const { selectedAgentConfig } = useServices();
-  const { homeChainId } = selectedAgentConfig;
+  const { evmHomeChainId: homeChainId } = selectedAgentConfig;
   const { activeStakingProgramId } = useStakingProgram();
 
   if (!open) return null;

frontend/components/MainPage/sections/AddFundsSection.tsx

@@ -76,11 +76,11 @@ export const AddFundsSection = () => {
 
 export const OpenAddFundsSection = forwardRef<HTMLDivElement>((_, ref) => {
   const { selectedAgentConfig } = useServices();
-  const { homeChainId } = selectedAgentConfig;
+  const { evmHomeChainId: homeChainId } = selectedAgentConfig;
   const { masterSafes } = useMasterWalletContext();
   const masterSafeAddress = useMemo(
     () =>
-      masterSafes?.find((wallet) => wallet.chainId === homeChainId)?.address,
+      masterSafes?.find((wallet) => wallet.evmChainId === homeChainId)?.address,
     [homeChainId, masterSafes],
   );
 
@@ -114,7 +114,7 @@ OpenAddFundsSection.displayName = 'OpenAddFundsSection';
 
 const AddFundsWarningAlertSection = () => {
   const { selectedAgentConfig } = useServices();
-  const { homeChainId } = selectedAgentConfig;
+  const { evmHomeChainId: homeChainId } = selectedAgentConfig;
   return (
     <CardSection>
       <CustomAlert
@@ -174,7 +174,7 @@ const AddFundsAddressSection = ({
 
 const AddFundsGetTokensSection = () => {
   const { selectedAgentConfig } = useServices();
-  const { homeChainId } = selectedAgentConfig;
+  const { evmHomeChainId: homeChainId } = selectedAgentConfig;
 
   return (
     <CardSection justify="center" bordertop="true" padding="16px 24px">