Merge pull request #82 from valory-xyz/tanya/operate-fix

(operate) fix: replace run agent button with pearl and quickstart

apps/operate/components/Agents.tsx

@@ -1,10 +1,13 @@
-import { BulbFilled, PlayCircleOutlined, RobotOutlined } from '@ant-design/icons';
-import { Button, Card, Col, Row, Typography } from 'antd';
+import { BulbFilled, RobotOutlined } from '@ant-design/icons';
+import { Button, Card, Col, Flex, Row, Typography } from 'antd';
 import Image from 'next/image';
 import styled from 'styled-components';
+import { StakingContract } from 'types';
 
 import { BREAK_POINT, COLOR } from 'libs/ui-theme/src';
 
+import { RunAgentButton } from './RunAgentButton';
+
 const { Title, Paragraph } = Typography;
 
 const StyledMain = styled.main`
@@ -46,6 +49,7 @@ type Agent = {
   name: string;
   description: string;
   comingSoon: boolean;
+  availableOn: StakingContract['availableOn'][];
   urls: Record<string, string>;
   imageFilename: string;
 };
@@ -56,8 +60,8 @@ const agents: Agent[] = [
     name: 'Prediction Agent',
     description: 'Participates in prediction markets according to your strategy.',
     comingSoon: false,
+    availableOn: ['pearl', 'quickstart'],
     urls: {
-      run: 'https://github.com/valory-xyz/trader-quickstart?tab=readme-ov-file#trader-quickstart',
       learnMore: 'https://olas.network/services/prediction-agents',
       gpt: 'https://chat.openai.com/g/g-6y88mEBzS-olas-trader-agent-guide',
     },
@@ -66,8 +70,8 @@ const agents: Agent[] = [
 ];
 
 const AgentCard = ({ agent }: { agent: Agent }) => {
-  const { id, name, description, imageFilename, urls, comingSoon } = agent;
-  const { run, learnMore, gpt } = urls;
+  const { id, name, description, imageFilename, urls, comingSoon, availableOn } = agent;
+  const { learnMore, gpt } = urls;
 
   return (
     <Col xs={24} sm={18} md={12} key={id} style={{ margin: '0 auto' }}>
@@ -92,20 +96,13 @@ const AgentCard = ({ agent }: { agent: Agent }) => {
             </Button>
           ) : (
             <>
-              {run && (
-                <Button
-                  type="primary"
-                  size="large"
-                  block
-                  icon={<PlayCircleOutlined />}
-                  href={run}
-                  target="_blank"
-                  className="mb-8"
-                >
-                  Run Agent
-                </Button>
+              {availableOn && (
+                <Flex gap={8} justify="space-between" className="mb-8">
+                  {availableOn.map((type) => (
+                    <RunAgentButton availableOn={type} type="default" key={type} className='full-width'/>
+                  ))}
+                </Flex>
               )}
-              <br />
               {learnMore && (
                 <Button
                   type="default"

apps/operate/components/Contracts/index.tsx

@@ -1,7 +1,6 @@
 import { DownOutlined, RightOutlined } from '@ant-design/icons';
-import { Button, Card, Flex, Table, Tag, Typography } from 'antd';
+import { Card, Table, Tag, Typography } from 'antd';
 import { ColumnsType } from 'antd/es/table';
-import Image from 'next/image';
 import styled from 'styled-components';
 import { StakingContract } from 'types';
 
@@ -10,6 +9,7 @@ import { BREAK_POINT } from 'libs/ui-theme/src';
 import { CHAIN_NAMES, GOVERN_URL, NA, UNICODE_SYMBOLS } from 'libs/util-constants/src';
 
 import { useStakingContractsList } from './hooks';
+import { RunAgentButton } from 'components/RunAgentButton';
 
 const StyledMain = styled.main`
   display: flex;
@@ -20,30 +20,6 @@ const StyledMain = styled.main`
 
 const { Title, Paragraph, Text } = Typography;
 
-const getAvailableOnData = (availableOn: StakingContract['availableOn']) => {
-  let icon;
-  let text;
-  let href;
-
-  switch (availableOn) {
-    case 'pearl':
-      icon = <Image src={`/images/pearl.svg`} alt="Pearl app" width={18} height={18} />;
-      text = 'Pearl';
-      href = 'https://olas.network/operate#download';
-      break;
-    case 'quickstart':
-      icon = <Image src={`/images/github.svg`} alt="Github" width={18} height={18} />;
-      text = 'Quickstart';
-      href = 'https://github.com/valory-xyz/trader-quickstart';
-      break;
-    default:
-      text = 'Not available yet';
-      break;
-  }
-
-  return { icon, text, href };
-};
-
 const columns: ColumnsType<StakingContract> = [
   {
     title: 'Contract',
@@ -91,25 +67,7 @@ const columns: ColumnsType<StakingContract> = [
     ),
     dataIndex: 'availableOn',
     key: 'availableOn',
-    render: (availableOn) => {
-      const { icon, text, href } = getAvailableOnData(availableOn);
-
-      if (href) {
-        return (
-          <Button type="text" href={href} target="_blank">
-            <Flex gap={8} align="center">
-              {icon} {text} {UNICODE_SYMBOLS.EXTERNAL_LINK}
-            </Flex>
-          </Button>
-        );
-      }
-
-      return (
-        <Button type="text" disabled>
-          {text}
-        </Button>
-      );
-    },
+    render: (availableOn) => <RunAgentButton availableOn={availableOn}/>,
   },
 ];
 

apps/operate/components/RunAgentButton.tsx

@@ -0,0 +1,42 @@
+import { Button, Flex } from 'antd';
+import { BaseButtonProps } from 'antd/es/button/button';
+import Image from 'next/image';
+import { StakingContract } from 'types';
+
+import { UNICODE_SYMBOLS } from 'libs/util-constants/src';
+
+type RunAgentButtonProps = {
+  availableOn: StakingContract['availableOn'];
+  type?: BaseButtonProps['type'];
+  className?: string;
+};
+
+const props = {
+  pearl: {
+    icon: <Image src={`/images/pearl.svg`} alt="Pearl app" width={18} height={18} />,
+    text: 'Pearl',
+    href: 'https://olas.network/operate#download',
+  },
+  quickstart: {
+    icon: <Image src={`/images/github.svg`} alt="Github" width={18} height={18} />,
+    text: 'Quickstart',
+    href: 'https://github.com/valory-xyz/trader-quickstart?tab=readme-ov-file#trader-quickstart',
+  },
+};
+export const RunAgentButton = ({ availableOn, type = 'text', className }: RunAgentButtonProps) => {
+  if (availableOn === null)
+    return (
+      <Button type={type} className={className} disabled>
+        Not available yet
+      </Button>
+    );
+  const agentProps = props[availableOn];
+
+  return (
+    <Button type={type} className={className} href={agentProps.href} target="_blank">
+      <Flex gap={8} align="center" justify="center">
+        {agentProps.icon} {agentProps.text} {UNICODE_SYMBOLS.EXTERNAL_LINK}
+      </Flex>
+    </Button>
+  );
+};