frontend multi-chain multi-agent support

electron/main.js

@@ -13,6 +13,7 @@ const os = require('os');
 const next = require('next/dist/server/next');
 const http = require('http');
 const AdmZip = require('adm-zip');
+const { validateEnv } = require('./utils/env-validation');
 
 const { setupDarwin, setupUbuntu, setupWindows, Env } = require('./install');
 
@@ -25,6 +26,11 @@ const { logger } = require('./logger');
 const { isDev } = require('./constants');
 const { PearlTray } = require('./components/PearlTray');
 
+// Validates environment variables required for Pearl
+// kills the app/process if required environment variables are unavailable
+// mostly RPC URLs and NODE_ENV
+validateEnv();
+
 // Attempt to acquire the single instance lock
 const singleInstanceLock = app.requestSingleInstanceLock();
 if (!singleInstanceLock) {

electron/utils/env-validation.js

@@ -0,0 +1,49 @@
+/**
+ * Validates environment variables
+ */
+
+require('dotenv').config();
+const { z, ZodError } = require('zod');
+const { app } = require('electron');
+
+const nodeEnvRegex = new RegExp(/^(development|production)$/);
+
+// Update z.object keys if env variable names change
+const envSchema = z.object({
+  NODE_ENV: z
+    .string()
+    .regex(
+      nodeEnvRegex,
+      'Invalid NODE_ENV, must be `development` or `production`',
+    ),
+  BASE_DEV_RPC: z.string().url('Invalid BASE_DEV_RPC must be a valid URL'),
+  ETHEREUM_DEV_RPC: z
+    .string()
+    .url('Invalid ETHEREUM_DEV_RPC_URL must be a valid URL'),
+  GNOSIS_DEV_RPC: z.string().url('Invalid GNOSIS_DEV_RPC must be a valid URL'),
+  OPTIMISM_DEV_RPC: z
+    .string()
+    .url('Invalid OPTIMISM_DEV_RPC must be a valid URL'),
+});
+
+const validateEnv = () => {
+  const { env } = process;
+  try {
+    envSchema.parse(env);
+  } catch (error) {
+    console.error(`Invalid environment variables in .env file`);
+    console.log(JSON.stringify(error, null, 2));
+
+    if (error instanceof ZodError) {
+      for (const issue of error.errors) {
+        console.error(issue.message);
+      }
+    } else {
+      console.error('An unexpected error occurred:', error);
+    }
+
+    app.quit();
+  }
+};
+
+module.exports = { validateEnv };

frontend/abis/agentMech.ts

@@ -1,4 +1,6 @@
-export const AGENT_MECH_ABI = [
+import { Abi } from '@/types/Abi';
+
+export const AGENT_MECH_ABI: Abi = [
   {
     inputs: [
       { internalType: 'address', name: '_token', type: 'address' },

frontend/abis/erc20.ts

@@ -1,3 +1,5 @@
-export const ERC20_BALANCEOF_FRAGMENT = [
+import { Abi } from '@/types/Abi';
+
+export const ERC20_BALANCEOF_STRING_FRAGMENT: Abi = [
   'function balanceOf(address owner) view returns (uint256)',
 ];

frontend/abis/gnosisSafe.ts

@@ -1,4 +1,6 @@
-export const GNOSIS_SAFE_ABI = [
+import { Abi } from '@/types/Abi';
+
+export const GNOSIS_SAFE_ABI: Abi = [
   { inputs: [], stateMutability: 'nonpayable', type: 'constructor' },
   {
     anonymous: false,

frontend/abis/mechActivityChecker.ts

@@ -1,4 +1,6 @@
-export const MECH_ACTIVITY_CHECKER_ABI = [
+import { Abi } from '@/types/Abi';
+
+export const MECH_ACTIVITY_CHECKER_ABI: Abi = [
   {
     inputs: [
       { internalType: 'address', name: '_agentMech', type: 'address' },

frontend/abis/serviceRegistryL2.ts

@@ -1,4 +1,6 @@
-export const SERVICE_REGISTRY_L2_ABI = [
+import { Abi } from '@/types/Abi';
+
+export const SERVICE_REGISTRY_L2_ABI: Abi = [
   {
     inputs: [
       { internalType: 'string', name: '_name', type: 'string' },

frontend/abis/serviceStakingTokenMechUsage.ts → frontend/abis/stakingTokenProxy.ts

@@ -1,4 +1,6 @@
-export const SERVICE_STAKING_TOKEN_MECH_USAGE_ABI = [
+import { JsonFragment } from '@ethersproject/abi';
+
+export const STAKING_TOKEN_PROXY_ABI: JsonFragment[] = [
   {
     inputs: [],
     name: 'AlreadyInitialized',

frontend/client/enums.ts

@@ -1,4 +1,4 @@
-export enum Action {
+export enum MiddlewareAction {
   STATUS = 0,
   BUILD = 1,
   DEPLOY = 2,
@@ -15,12 +15,12 @@ export enum MiddlewareChain {
   MODE = 6,
 }
 
-export enum Ledger {
+export enum MiddlewareLedger {
   ETHEREUM = 0,
   SOLANA = 1,
 }
 
-export enum DeploymentStatus {
+export enum MiddlewareDeploymentStatus {
   CREATED = 0,
   BUILT = 1,
   DEPLOYING = 2,
@@ -30,7 +30,7 @@ export enum DeploymentStatus {
   DELETED = 6,
 }
 
-export enum AccountIsSetup {
+export enum MiddlewareAccountIsSetup {
   True,
   False,
   Loading,

frontend/client/types.ts

@@ -1,13 +1,17 @@
 import { StakingProgramId } from '@/enums/StakingProgram';
 import { Address } from '@/types/Address';
 
-import { DeploymentStatus, Ledger, MiddlewareChain } from './enums';
+import {
+  MiddlewareChain,
+  MiddlewareDeploymentStatus,
+  MiddlewareLedger,
+} from './enums';
 
 export type ServiceHash = string;
 
 export type LedgerConfig = {
   rpc: string;
-  type: Ledger;
+  type: MiddlewareLedger;
   chain: MiddlewareChain;
 };
 
@@ -36,7 +40,7 @@ export type ChainData = {
   };
 };
 
-export type Service = {
+export type MiddlewareServiceResponse = {
   name: string;
   hash: string;
   keys: ServiceKeys[];
@@ -84,7 +88,7 @@ export type DeployedNodes = {
 };
 
 export type Deployment = {
-  status: DeploymentStatus;
+  status: MiddlewareDeploymentStatus;
   nodes: DeployedNodes;
 };
 
@@ -128,7 +132,7 @@ export type AppInfo = {
 export type WalletResponse = {
   address: Address;
   safe_chains: MiddlewareChain[];
-  ledger_type: Ledger;
+  ledger_type: MiddlewareLedger;
   safes: {
     [middlewareChainId in (typeof MiddlewareChain)[keyof typeof MiddlewareChain]]: Address;
   };

frontend/components/MainPage/MainHeader/FirstRunModal.tsx

@@ -4,7 +4,6 @@ import { FC } from 'react';
 
 import { MODAL_WIDTH } from '@/constants/width';
 import { useServiceTemplates } from '@/hooks/useServiceTemplates';
-import { getMinimumStakedAmountRequired } from '@/utils/service';
 
 type FirstRunModalProps = { open: boolean; onClose: () => void };
 

frontend/components/MainPage/header/AgentButton.tsx

@@ -2,7 +2,7 @@ import { InfoCircleOutlined } from '@ant-design/icons';
 import { Button, ButtonProps, Flex, Popover, Tooltip, Typography } from 'antd';
 import { useCallback, useMemo } from 'react';
 
-import { DeploymentStatus, MiddlewareChain } from '@/client';
+import { MiddlewareChain, MiddlewareDeploymentStatus } from '@/client';
 import { COLOR } from '@/constants/colors';
 import { DEFAULT_STAKING_PROGRAM_ID } from '@/context/StakingProgramProvider';
 import { StakingProgramId } from '@/enums/StakingProgram';
@@ -18,7 +18,6 @@ import { useWallet } from '@/hooks/useWallet';
 import { ServicesService } from '@/service/Services';
 import { WalletService } from '@/service/Wallet';
 import { delayInSeconds } from '@/utils/delay';
-import { getMinimumStakedAmountRequired } from '@/utils/service';
 
 import {
   CannotStartAgentDueToUnexpectedError,
@@ -85,7 +84,7 @@ const AgentRunningButton = () => {
     setIsServicePollingPaused(true);
 
     // Optimistically update service status
-    setServiceStatus(DeploymentStatus.STOPPING);
+    setServiceStatus(MiddlewareDeploymentStatus.STOPPING);
     try {
       await ServicesService.stopDeployment(service.hash);
     } catch (error) {
@@ -178,7 +177,7 @@ const AgentNotRunningButton = () => {
     setIsStakingContractInfoPollingPaused(true);
 
     // Mock "DEPLOYING" status (service polling will update this once resumed)
-    setServiceStatus(DeploymentStatus.DEPLOYING);
+    setServiceStatus(MiddlewareDeploymentStatus.DEPLOYING);
 
     // Get the active staking program id; default id if there's no agent yet
     const stakingProgramId: StakingProgramId =
@@ -206,7 +205,6 @@ const AgentNotRunningButton = () => {
         serviceTemplate,
         deploy: true,
         useMechMarketplace: false,
-        // stakingProgramId === StakingProgramId.BetaMechMarketplace,
       });
     } catch (error) {
       console.error(error);
@@ -227,7 +225,7 @@ const AgentNotRunningButton = () => {
     }
 
     // Can assume successful deployment
-    setServiceStatus(DeploymentStatus.DEPLOYED);
+    setServiceStatus(MiddlewareDeploymentStatus.DEPLOYED);
 
     // TODO: remove this workaround, middleware should respond when agent is staked & confirmed running after `createService` call
     await delayInSeconds(5);
@@ -265,15 +263,15 @@ const AgentNotRunningButton = () => {
     // if the agent is NOT running and the balance is too low,
     // user should not be able to start the agent
     const isServiceInactive =
-      serviceStatus === DeploymentStatus.BUILT ||
-      serviceStatus === DeploymentStatus.STOPPED;
+      serviceStatus === MiddlewareDeploymentStatus.BUILT ||
+      serviceStatus === MiddlewareDeploymentStatus.STOPPED;
     if (isServiceInactive && isLowBalance) {
       return false;
     }
 
-    if (serviceStatus === DeploymentStatus.DEPLOYED) return false;
-    if (serviceStatus === DeploymentStatus.DEPLOYING) return false;
-    if (serviceStatus === DeploymentStatus.STOPPING) return false;
+    if (serviceStatus === MiddlewareDeploymentStatus.DEPLOYED) return false;
+    if (serviceStatus === MiddlewareDeploymentStatus.DEPLOYING) return false;
+    if (serviceStatus === MiddlewareDeploymentStatus.STOPPING) return false;
 
     if (!requiredOlas) return false;
 
@@ -324,15 +322,15 @@ export const AgentButton = () => {
       return <Button type="primary" size="large" disabled loading />;
     }
 
-    if (serviceStatus === DeploymentStatus.STOPPING) {
+    if (serviceStatus === MiddlewareDeploymentStatus.STOPPING) {
       return <AgentStoppingButton />;
     }
 
-    if (serviceStatus === DeploymentStatus.DEPLOYING) {
+    if (serviceStatus === MiddlewareDeploymentStatus.DEPLOYING) {
       return <AgentStartingButton />;
     }
 
-    if (serviceStatus === DeploymentStatus.DEPLOYED) {
+    if (serviceStatus === MiddlewareDeploymentStatus.DEPLOYED) {
       return <AgentRunningButton />;
     }
 
@@ -341,10 +339,10 @@ export const AgentButton = () => {
 
     if (
       !service ||
-      serviceStatus === DeploymentStatus.STOPPED ||
-      serviceStatus === DeploymentStatus.CREATED ||
-      serviceStatus === DeploymentStatus.BUILT ||
-      serviceStatus === DeploymentStatus.DELETED
+      serviceStatus === MiddlewareDeploymentStatus.STOPPED ||
+      serviceStatus === MiddlewareDeploymentStatus.CREATED ||
+      serviceStatus === MiddlewareDeploymentStatus.BUILT ||
+      serviceStatus === MiddlewareDeploymentStatus.DELETED
     ) {
       return <AgentNotRunningButton />;
     }

frontend/components/MainPage/header/AgentHead.tsx

@@ -1,7 +1,7 @@
 import { Badge } from 'antd';
 import Image from 'next/image';
 
-import { DeploymentStatus } from '@/client';
+import { MiddlewareDeploymentStatus } from '@/client';
 import { useReward } from '@/hooks/useReward';
 import { useServices } from '@/hooks/useServices';
 
@@ -36,13 +36,13 @@ export const AgentHead = () => {
   const { isEligibleForRewards } = useReward();
 
   if (
-    serviceStatus === DeploymentStatus.DEPLOYING ||
-    serviceStatus === DeploymentStatus.STOPPING
+    serviceStatus === MiddlewareDeploymentStatus.DEPLOYING ||
+    serviceStatus === MiddlewareDeploymentStatus.STOPPING
   ) {
     return <TransitionalAgentHead />;
   }
 
-  if (serviceStatus === DeploymentStatus.DEPLOYED) {
+  if (serviceStatus === MiddlewareDeploymentStatus.DEPLOYED) {
     // If the agent is eligible for rewards, agent is idle
     return isEligibleForRewards ? <IdleAgentHead /> : <DeployedAgentHead />;
   }

frontend/components/MainPage/header/constants.ts

@@ -1,11 +1,11 @@
 import { formatUnits } from 'ethers/lib/utils';
 
-import { CHAINS } from '@/constants/chains';
+import { CHAIN_CONFIG } from '@/config/chains';
 import { SERVICE_TEMPLATES } from '@/constants/serviceTemplates';
 
 export const requiredGas = Number(
   formatUnits(
-    `${SERVICE_TEMPLATES[0].configurations[CHAINS.OPTIMISM.chainId].monthly_gas_estimate}`,
+    `${SERVICE_TEMPLATES[0].configurations[CHAIN_CONFIG.OPTIMISM.chainId].monthly_gas_estimate}`,
     18,
   ),
 );

frontend/components/MainPage/header/index.tsx

@@ -1,7 +1,7 @@
 import { Flex } from 'antd';
 import { useCallback, useEffect, useState } from 'react';
 
-import { DeploymentStatus } from '@/client';
+import { MiddlewareDeploymentStatus } from '@/client';
 import { useBalance } from '@/hooks/useBalance';
 import { useElectronApi } from '@/hooks/useElectronApi';
 import { useServices } from '@/hooks/useServices';
@@ -18,11 +18,11 @@ const useSetupTrayIcon = () => {
   useEffect(() => {
     if (isLowBalance) {
       setTrayIcon?.('low-gas');
-    } else if (serviceStatus === DeploymentStatus.DEPLOYED) {
+    } else if (serviceStatus === MiddlewareDeploymentStatus.DEPLOYED) {
       setTrayIcon?.('running');
-    } else if (serviceStatus === DeploymentStatus.STOPPED) {
+    } else if (serviceStatus === MiddlewareDeploymentStatus.STOPPED) {
       setTrayIcon?.('paused');
-    } else if (serviceStatus === DeploymentStatus.BUILT) {
+    } else if (serviceStatus === MiddlewareDeploymentStatus.BUILT) {
       setTrayIcon?.('logged-out');
     }
   }, [isLowBalance, serviceStatus, setTrayIcon]);

frontend/components/MainPage/index.tsx

@@ -2,7 +2,7 @@ import { QuestionCircleOutlined, SettingOutlined } from '@ant-design/icons';
 import { Button, Card, Flex } from 'antd';
 import { useEffect } from 'react';
 
-import { Pages } from '@/enums/PageState';
+import { Pages } from '@/enums/Pages';
 // import { StakingProgramId } from '@/enums/StakingProgram';
 import { useBalance } from '@/hooks/useBalance';
 // import { useMasterSafe } from '@/hooks/useMasterSafe';

frontend/components/MainPage/modals/FirstRunModal.tsx

@@ -4,7 +4,6 @@ import { FC } from 'react';
 
 import { MODAL_WIDTH } from '@/constants/width';
 import { useServiceTemplates } from '@/hooks/useServiceTemplates';
-import { getMinimumStakedAmountRequired } from '@/utils/service';
 
 const { Title, Paragraph } = Typography;