feat: agent memeooorr frontend

api.md

@@ -313,6 +313,7 @@ Creates a Gnosis safe for given chain.
 ```js
 {
   "chain": Chain,
+  "fund_amount": 10000000000000000
 }
 ```
 

electron/main.js

@@ -14,7 +14,6 @@ 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');
 
@@ -26,6 +25,7 @@ const { setupStoreIpc } = require('./store');
 const { logger } = require('./logger');
 const { isDev } = require('./constants');
 const { PearlTray } = require('./components/PearlTray');
+const { Scraper } = require('agent-twitter-client');
 
 // Validates environment variables required for Pearl
 // kills the app/process if required environment variables are unavailable
@@ -256,6 +256,24 @@ const createMainWindow = async () => {
 
   ipcMain.handle('app-version', () => app.getVersion());
 
+  // Handle twitter login
+  ipcMain.handle('validate-twitter-login', async (_event, credentials) => {
+    const scraper = new Scraper();
+
+    const { username, password, email } = credentials;
+    if (!username || !password || !email) {
+      return { success: false, error: 'Missing credentials' };
+    }
+
+    try {
+      await scraper.login(username, password, email);
+      return { success: true };
+    } catch (error) {
+      console.error('Twitter login error:', error);
+      return { success: false, error: error.message };
+    }
+  });
+
   mainWindow.webContents.on('did-fail-load', () => {
     mainWindow.webContents.reloadIgnoringCache();
   });
@@ -277,7 +295,7 @@ const createMainWindow = async () => {
 
   try {
     logger.electron('Setting up store IPC');
-    await setupStoreIpc(ipcMain, mainWindow);
+    setupStoreIpc(ipcMain, mainWindow);
   } catch (e) {
     logger.electron('Store IPC failed:', JSON.stringify(e));
   }

electron/preload.js

@@ -25,4 +25,6 @@ contextBridge.exposeInMainWorld('electronAPI', {
   saveLogs: (data) => ipcRenderer.invoke('save-logs', data),
   openPath: (filePath) => ipcRenderer.send('open-path', filePath),
   getAppVersion: () => ipcRenderer.invoke('app-version'),
+  validateTwitterLogin: (credentials) =>
+    ipcRenderer.invoke('validate-twitter-login', credentials),
 });

electron/store.js

@@ -8,6 +8,9 @@ const schema = {
 
   environmentName: { type: 'string', default: '' },
   currentStakingProgram: { type: 'string', default: '' },
+
+  // agent settings
+  lastSelectedAgentType: { type: 'string', default: 'trader' },
 };
 
 /**
@@ -16,7 +19,7 @@ const schema = {
  * @param {Electron.BrowserWindow} mainWindow - The main Electron browser window.
  * @returns {Promise<void>} - A promise that resolves once the store is set up.
  */
-const setupStoreIpc = async (ipcMain, mainWindow) => {
+const setupStoreIpc = (ipcMain, mainWindow) => {
   const store = new Store({ schema });
 
   store.onDidAnyChange((data) => {

frontend/abis/memeActivityChecker.ts

@@ -0,0 +1,44 @@
+export const MEME_ACTIVITY_CHECKER_ABI = [
+  {
+    inputs: [
+      { internalType: 'address', name: '_memeFactory', type: 'address' },
+      { internalType: 'uint256', name: '_livenessRatio', type: 'uint256' },
+    ],
+    stateMutability: 'nonpayable',
+    type: 'constructor',
+  },
+  { inputs: [], name: 'ZeroAddress', type: 'error' },
+  { inputs: [], name: 'ZeroValue', type: 'error' },
+  {
+    inputs: [{ internalType: 'address', name: 'multisig', type: 'address' }],
+    name: 'getMultisigNonces',
+    outputs: [{ internalType: 'uint256[]', name: 'nonces', type: 'uint256[]' }],
+    stateMutability: 'view',
+    type: 'function',
+  },
+  {
+    inputs: [
+      { internalType: 'uint256[]', name: 'curNonces', type: 'uint256[]' },
+      { internalType: 'uint256[]', name: 'lastNonces', type: 'uint256[]' },
+      { internalType: 'uint256', name: 'ts', type: 'uint256' },
+    ],
+    name: 'isRatioPass',
+    outputs: [{ internalType: 'bool', name: 'ratioPass', type: 'bool' }],
+    stateMutability: 'view',
+    type: 'function',
+  },
+  {
+    inputs: [],
+    name: 'livenessRatio',
+    outputs: [{ internalType: 'uint256', name: '', type: 'uint256' }],
+    stateMutability: 'view',
+    type: 'function',
+  },
+  {
+    inputs: [],
+    name: 'memeFactory',
+    outputs: [{ internalType: 'address', name: '', type: 'address' }],
+    stateMutability: 'view',
+    type: 'function',
+  },
+];

frontend/client/types.ts

@@ -90,7 +90,7 @@ export type ConfigurationTemplate = {
   agent_id: number;
   threshold: number;
   use_staking: boolean;
-  use_mech_marketplace: boolean;
+  use_mech_marketplace?: boolean;
   cost_of_bond: number;
   monthly_gas_estimate: number;
   fund_requirements: FundRequirementsTemplate;

frontend/components/AddressLink.tsx

@@ -4,18 +4,27 @@ import { EXPLORER_URL_BY_MIDDLEWARE_CHAIN } from '@/constants/urls';
 import { Address } from '@/types/Address';
 import { truncateAddress } from '@/utils/truncate';
 
-type AddressLinkProps = { address?: Address; hideLinkArrow?: boolean };
+type AddressLinkProps = {
+  address?: Address;
+  hideLinkArrow?: boolean;
+
+  // TODO: mark as required once balance breakdown is updated.
+  // and remove the default value
+  middlewareChain?: MiddlewareChain;
+};
 
 export const AddressLink = ({
   address,
   hideLinkArrow = false,
+  middlewareChain = MiddlewareChain.GNOSIS,
 }: AddressLinkProps) => {
   if (!address) return null;
+  if (!middlewareChain) return null;
 
   return (
     <a
       target="_blank"
-      href={`${EXPLORER_URL_BY_MIDDLEWARE_CHAIN[MiddlewareChain.GNOSIS]}/address/${address}`}
+      href={`${EXPLORER_URL_BY_MIDDLEWARE_CHAIN[middlewareChain]}/address/${address}`}
     >
       {truncateAddress(address)}
 

frontend/components/AgentSelection.tsx

@@ -0,0 +1,146 @@
+import { Button, Card, Flex, Typography } from 'antd';
+import { entries } from 'lodash';
+import Image from 'next/image';
+import { memo, useCallback } from 'react';
+
+import { AGENT_CONFIG } from '@/config/agents';
+import { COLOR } from '@/constants/colors';
+import { AgentType } from '@/enums/Agent';
+import { Pages } from '@/enums/Pages';
+import { SetupScreen } from '@/enums/SetupScreen';
+import { usePageState } from '@/hooks/usePageState';
+import { useServices } from '@/hooks/useServices';
+import { useSetup } from '@/hooks/useSetup';
+import { useMasterWalletContext } from '@/hooks/useWallet';
+import { AgentConfig } from '@/types/Agent';
+import { delayInSeconds } from '@/utils/delay';
+
+import { SetupCreateHeader } from './SetupPage/Create/SetupCreateHeader';
+import { CardFlex } from './styled/CardFlex';
+
+const { Title, Text } = Typography;
+
+type EachAgentProps = {
+  showSelected: boolean;
+  agentType: AgentType;
+  agentConfig: AgentConfig;
+};
+
+const EachAgent = memo(
+  ({ showSelected, agentType, agentConfig }: EachAgentProps) => {
+    const { goto: gotoSetup } = useSetup();
+    const { goto: gotoPage } = usePageState();
+    const { selectedAgentType, updateAgentType } = useServices();
+    const { masterSafes, isLoading } = useMasterWalletContext();
+
+    const isCurrentAgent = showSelected
+      ? selectedAgentType === agentType
+      : false;
+
+    const handleSelectAgent = useCallback(async () => {
+      updateAgentType(agentType);
+
+      // DO NOTE REMOVE THIS DELAY
+      // NOTE: the delay is added so that agentType is updated in electron store
+      // and re-rendered with the updated agentType
+      await delayInSeconds(0.5);
+
+      const isSafeCreated = masterSafes?.find(
+        (masterSafe) =>
+          masterSafe.evmChainId === AGENT_CONFIG[agentType].evmHomeChainId,
+      );
+
+      // If safe is created for the agent type, then go to main page
+      if (isSafeCreated) {
+        gotoPage(Pages.Main);
+        return;
+      }
+
+      // If safe is NOT created, then go to setup page based on the agent type
+      if (agentType === AgentType.Memeooorr) {
+        // if the selected type is Memeooorr - should set up the agent first
+        gotoPage(Pages.Setup);
+        gotoSetup(SetupScreen.SetupYourAgent);
+      } else if (agentType === AgentType.PredictTrader) {
+        gotoPage(Pages.Setup);
+        gotoSetup(SetupScreen.SetupEoaFunding);
+      }
+    }, [agentType, gotoPage, gotoSetup, masterSafes, updateAgentType]);
+
+    return (
+      <Card
+        key={agentType}
+        style={{ padding: 0, marginBottom: 6 }}
+        styles={{
+          body: {
+            padding: '12px 16px',
+            gap: 6,
+            borderRadius: 'inherit',
+            background: isCurrentAgent ? COLOR.GRAY_1 : 'transparent',
+            opacity: isCurrentAgent ? 0.75 : 1,
+          },
+        }}
+      >
+        <Flex vertical>
+          <Flex align="center" justify="space-between" className="mb-8">
+            <Image
+              src={`/agent-${agentType}-icon.png`}
+              width={36}
+              height={36}
+              alt={agentConfig.displayName}
+            />
+            {isCurrentAgent ? (
+              <Text>Selected Agent</Text>
+            ) : (
+              <Button
+                type="primary"
+                onClick={handleSelectAgent}
+                disabled={isLoading}
+              >
+                Select
+              </Button>
+            )}
+          </Flex>
+        </Flex>
+
+        <Title level={5} className="m-0">
+          {agentConfig.displayName}
+        </Title>
+
+        <Text type="secondary">{agentConfig.description}</Text>
+      </Card>
+    );
+  },
+);
+
+EachAgent.displayName = 'EachAgent';
+
+type AgentSelectionProps = {
+  showSelected?: boolean;
+  canGoBack?: boolean;
+  onPrev?: () => void;
+};
+
+/**
+ * Component to select the agent type.
+ */
+export const AgentSelection = ({
+  showSelected = true,
+  onPrev,
+}: AgentSelectionProps) => (
+  <CardFlex gap={10} styles={{ body: { padding: '12px 24px' } }}>
+    <SetupCreateHeader prev={onPrev} />
+    <Title level={3}>Select your agent</Title>
+
+    {entries(AGENT_CONFIG).map(([agentType, agentConfig]) => {
+      return (
+        <EachAgent
+          key={agentType}
+          showSelected={showSelected}
+          agentType={agentType as AgentType}
+          agentConfig={agentConfig}
+        />
+      );
+    })}
+  </CardFlex>
+);

frontend/components/FeatureNotEnabled.tsx

@@ -0,0 +1,11 @@
+import { Alert } from 'antd';
+
+export const FeatureNotEnabled = () => (
+  <Alert
+    message="Oops!"
+    description="This feature is not enabled for your current agent type."
+    type="error"
+    showIcon
+    style={{ border: 'none' }}
+  />
+);