feat: display ROI in babydegen UI

apps/babydegen-ui/src/components/Chat/useChats.ts

@@ -1,10 +1,11 @@
 import { useMutation } from '@tanstack/react-query';
 
 import { LOCAL } from '../../constants/urls';
-import { IS_MOCK_ENABLED } from '../../mocks/config';
 import { mockChat } from '../../mocks/mockChat';
 import { ChatResponse } from '../../types';
 
+const IS_MOCK_ENABLED = process.env.IS_MOCK_ENABLED === 'true';
+
 export const useChats = () =>
   useMutation<ChatResponse, Error, string>({
     mutationFn: async (prompt: string) => {

apps/babydegen-ui/src/components/Portfolio/Portfolio.tsx

@@ -1,11 +1,11 @@
-import { Button, ButtonProps, Card, Flex, Skeleton, Typography } from 'antd';
+import { Button, ButtonProps, Card, Row, Col, Flex, Skeleton, Typography } from 'antd';
 import { useMemo, useState } from 'react';
 
 import { usePortfolio } from '../../hooks/usePortfolio';
 import { CardTitle } from '../../ui/CardTitle';
 import { BreakdownModal } from './BreakdownModal';
 
-const { Title } = Typography;
+const { Title, Text } = Typography;
 
 const PortfolioBalance = () => {
   const { data, isLoading } = usePortfolio();
@@ -24,15 +24,36 @@ const PortfolioBalance = () => {
   }
 
   return (
-    <Flex gap={2} style={{ alignItems: 'flex-end' }}>
-      <span style={{ paddingBottom: 4, fontWeight: 'bold' }}>$</span>
-      <Title level={2} style={{ margin: 0 }}>
+    <Flex gap={2} align="flex-end">
+      <Text type="secondary" style={{ paddingBottom: 4, fontSize: '16px' }}>
+        $
+      </Text>
+      <Title level={2} className="m-0">
         {portfolioBalance}
       </Title>
     </Flex>
   );
 };
 
+const Roi = () => {
+  const { data, isLoading } = usePortfolio();
+
+  if (isLoading) {
+    return <Skeleton.Input style={{ minHeight: 38 }} />;
+  }
+
+  return (
+    <Flex gap={2} align="flex-end">
+      <Title level={2} className="m-0">
+        {data?.roi ?? 0}
+      </Title>
+      <Text type="secondary" style={{ paddingBottom: 4, fontSize: '16px' }}>
+        %
+      </Text>
+    </Flex>
+  );
+};
+
 const SeeBreakdownButton = (props: ButtonProps) => (
   <Button {...props} size="small" style={{ marginRight: 'auto' }}>
     See breakdown
@@ -49,14 +70,25 @@ export const Portfolio = () => {
   return (
     <>
       <Card className="card-border card-gradient">
-        <Flex vertical gap={8}>
-          <CardTitle text="Portfolio" />
-          <PortfolioBalance />
-          <SeeBreakdownButton
-            disabled={typeof data?.portfolio_value !== 'number'}
-            onClick={handleOpenBreakdownModal}
-          />
-        </Flex>
+        <Row>
+          <Col md={12} xs={24}>
+            <Flex vertical gap={8}>
+              <CardTitle text="Portfolio" />
+              <PortfolioBalance />
+              <SeeBreakdownButton
+                disabled={typeof data?.portfolio_value !== 'number'}
+                onClick={handleOpenBreakdownModal}
+              />
+            </Flex>
+          </Col>
+
+          <Col md={12} xs={24}>
+            <Flex vertical gap={8}>
+              <CardTitle text="Avg ROI" />
+              <Roi />
+            </Flex>
+          </Col>
+        </Row>
       </Card>
 
       <BreakdownModal open={breakdownModalVisible} onCancel={handleCloseBreakdownModal} />

apps/babydegen-ui/src/hooks/useFeatures.ts

@@ -2,10 +2,11 @@ import { useQuery } from '@tanstack/react-query';
 
 import { FIVE_MINUTES, FIVE_SECONDS } from '../constants/intervals';
 import { LOCAL } from '../constants/urls';
-import { IS_MOCK_ENABLED } from '../mocks/config';
 import { mockFeatures } from '../mocks/mockFeatures';
 import { Features } from '../types';
 
+const IS_MOCK_ENABLED = process.env.IS_MOCK_ENABLED === 'true';
+
 export const useFeatures = () => {
   const query = useQuery<Features>({
     queryKey: ['features'],

apps/babydegen-ui/src/hooks/usePortfolio.ts

@@ -1,10 +1,11 @@
 import { useQuery } from '@tanstack/react-query';
 
 import { LOCAL } from '../constants/urls';
-import { IS_MOCK_ENABLED } from '../mocks/config';
 import { mockPortfolio } from '../mocks/mockPortfolio';
 import { PortfolioResponse } from '../types';
 
+const IS_MOCK_ENABLED = process.env.IS_MOCK_ENABLED === 'true';
+
 export const usePortfolio = () => {
   const query = useQuery<PortfolioResponse>({
     queryKey: ['portfolio'],

apps/babydegen-ui/src/mocks/mockPortfolio.ts

@@ -6,6 +6,7 @@ export const mockAgentAsset = agentType === 'modius' ? 'MODE' : 'OP';
 export const mockPortfolio: PortfolioResponse = {
   address: '0x000000000000000000000000000000000000dEaD',
   portfolio_value: 849585.8579967507,
+  roi: -24.6,
   allocations: [
     {
       chain: agentChainName,

apps/babydegen-ui/src/types.ts

@@ -30,6 +30,7 @@ export type SelectedProtocol = 'balancerPool' | 'sturdy' | 'velodrome' | 'uniswa
 export type PortfolioResponse = {
   address?: Address;
   portfolio_value: number;
+  roi: number;
   allocations: Allocation[];
   portfolio_breakdown: PortfolioAsset[];
   trading_type: TradingType;

apps/babydegen-ui/vite.config.ts

@@ -28,6 +28,7 @@ export default defineConfig(() => ({
     'process.env': {
       REACT_APP_API_PORT: process.env.REACT_APP_API_PORT,
       REACT_APP_AGENT_NAME: process.env.REACT_APP_AGENT_NAME,
+      IS_MOCK_ENABLED: process.env.IS_MOCK_ENABLED,
     },
   },
 }));

libs/ui-navbar/src/lib/Navbar.tsx

@@ -18,11 +18,6 @@ const style: CSSProperties = {
   background: 'transparent',
 };
 
-//  TODO: use from COLORS
-const InfoTooltip = () => (
-  <InfoCircleOutlined style={{ color: '#ADB5BD', cursor: 'pointer', marginLeft: 4 }} />
-);
-
 // TODO: move to util-functions-and-types folder
 const AgentTypes = {
   modius: 'modius',
@@ -122,13 +117,19 @@ export const Navbar = ({ isLoading, agentType, userAddress }: NavbarProps) => {
               {userAddress ? generateAgentName(userAddress) : ''}
             </Title>
           )}
-          <Flex>
+          <Flex gap={4}>
             <Text type="secondary" className="text-sm">
               {userDetails.desc}
             </Text>
             {userDetails.tooltip && (
               <Tooltip title={userDetails.tooltip} placement="bottomRight">
-                <InfoTooltip />
+                <InfoCircleOutlined
+                  style={{
+                    //  TODO: use from COLORS
+                    color: '#ADB5BD',
+                    cursor: 'pointer',
+                  }}
+                />
               </Tooltip>
             )}
           </Flex>

libs/ui-theme/README.md

@@ -1,6 +1,6 @@
 # ui-theme
 
-This library was generated with [Nx](https://nx.dev).
+This library defines the shared theme configuration for the design system, including colors, spacing, and other style-related tokens.
 
 ## Running unit tests
 

libs/util-constants-and-types/README.md

@@ -1,6 +1,6 @@
 # util-constants-and-types
 
-This library was generated with [Nx](https://nx.dev).
+This library provides shared constants (such as URLs, labels, or symbol definitions) and TypeScript types.
 
 ## Running unit tests
 

libs/util-functions/README.md

@@ -1,6 +1,6 @@
 # util-functions
 
-This library was generated with [Nx](https://nx.dev).
+This library contains shared utility functions such as formatting, validation, data manipulation, and more.
 
 ## Building