Display earned rewards

components/AgentDetailsCard/index.tsx

@@ -39,7 +39,9 @@ export const AgentDetailsCard = ({ agent }: AgentDetailsCardProps) => {
             {generateName(agent.id)}
           </Title>
           <Text type="secondary">Specialization</Text>
-          <Tag icon={<ChartSpline size={20} color={COLOR.PRIMARY} />}>Trader</Tag>
+          <Tag icon={<ChartSpline size={20} color={COLOR.PRIMARY} />} className="max-w-max">
+            Trader
+          </Tag>
         </Flex>
         <Text type="secondary" className="ml-auto">
           {lastActivityTimestamp && `Last active ${getTimeAgo(lastActivityTimestamp * 1000)}`}

components/AgentStatistics.tsx

@@ -8,11 +8,13 @@ import {
   TraderAgent,
   UserPosition,
 } from 'graphql/types';
+import { useMemo } from 'react';
 import styled from 'styled-components';
 import { fromHex } from 'viem';
 
 import { Card } from 'components/shared/styles';
 import { INVALID_ANSWER_HEX, NA } from 'constants/index';
+import { getAgentTotalEarnings } from 'utils/agents';
 import { getTimeAgo } from 'utils/time';
 
 const { Title, Text } = Typography;
@@ -39,7 +41,7 @@ const Statistic = ({
   isLoading,
 }: {
   title: string;
-  value: string;
+  value: string | number;
   isLoading?: boolean;
 }) => (
   <Col span={12}>
@@ -143,6 +145,11 @@ export const AgentStatistics = ({ agent }: AgentStatisticsProps) => {
     },
   });
 
+  const totalEarnings = useMemo(
+    () => getAgentTotalEarnings(agent.totalPayout, agent.totalTraded),
+    [agent.totalPayout, agent.totalTraded],
+  );
+
   return (
     <Card type="ongoing">
       <Title level={4} className="m-0">
@@ -157,7 +164,7 @@ export const AgentStatistics = ({ agent }: AgentStatisticsProps) => {
         />
       </Row>
       <Row>
-        {/* <Statistic title="Total earnings" value="TBD" /> */}
+        <Statistic title="Total earnings" value={totalEarnings} />
         <Statistic title="Created" value={getTimeAgo(Number(agent.firstParticipation) * 1000)} />
       </Row>
     </Card>

components/Theme/GlobalStyle.tsx

@@ -137,4 +137,7 @@ export const GlobalStyle = createGlobalStyle`
   .full-width {
     width: 100% !important;
   }
+  .max-w-max {
+    max-width: max-content !important;
+  }
 `;

components/TraderAgents.tsx

@@ -6,7 +6,7 @@ import { useMemo, useState } from 'react';
 import Jazzicon, { jsNumberForAddress } from 'react-jazzicon';
 
 import { Card } from 'components/shared/styles';
-import { generateName } from 'utils/agents';
+import { generateName, getAgentTotalEarnings } from 'utils/agents';
 
 const { Title, Text, Paragraph } = Typography;
 
@@ -90,21 +90,19 @@ export const TraderAgents = () => {
           //       <Text type="secondary">10%</Text>
           //     ),
           // },
-          // {
-          //   title: 'Total earnings',
-          //   dataIndex: 'earnings',
-          //   key: 'earnings',
-          //   className: 'text-end',
-          //   width: 130,
-          //   render: () =>
-          //     isLoading ? (
-          //       <Skeleton.Input size="small" active />
-          //     ) : (
-          //       <Text type="secondary" strong>
-          //         $1,385.00
-          //       </Text>
-          //     ),
-          // },
+          {
+            title: 'Total earnings',
+            key: 'earnings',
+            className: 'text-end',
+            width: 130,
+            render: (_, record) => {
+              return (
+                <Text type="secondary" strong>
+                  {getAgentTotalEarnings(record.totalPayout, record.totalTraded)}
+                </Text>
+              );
+            },
+          },
         ]}
         loading={isGlobalLoading || isAgentsLoading}
         dataSource={data}

constants/index.ts

@@ -43,7 +43,7 @@ export const XDAI_BLOCKS_SUBGRAPH_URL = `https://gateway-arbitrum.network.thegra
 export const CONDITIONAL_TOKENS_SUBGRAPH_URL = `https://gateway-arbitrum.network.thegraph.com/api/${SUBGRAPH_API_KEY}/subgraphs/id/7s9rGBffUTL8kDZuxvvpuc46v44iuDarbrADBFw5uVp2`;
 
 export const OLAS_AGENTS_SUBGRAPH_URL =
-  'https://api.studio.thegraph.com/query/67875/olas-agents/v0.0.25';
+  'https://api.studio.thegraph.com/query/67875/test2/version/latest';
 export const OLAS_MECH_SUBGRAPH_URL = 'https://api.studio.thegraph.com/query/57238/mech/v0.0.1';
 
 export const ARTICLE_SOURCE_BY_CREATOR: Record<string, string> = {

graphql/queries.ts

@@ -304,6 +304,8 @@ const getTraderAgentsQuery = gql`
     ) {
       id
       totalBets
+      totalTraded
+      totalPayout
     }
   }
 `;
@@ -334,6 +336,8 @@ const getTraderAgentQuery = gql`
       id
       firstParticipation
       totalBets
+      totalTraded
+      totalPayout
     }
   }
 `;

utils/agents.ts

@@ -1,3 +1,5 @@
+import { formatUnits } from 'viem';
+
 const phoneticSyllables = [
   'ba',
   'bi',
@@ -240,3 +242,14 @@ export const generateName = (address: string): string => {
 
   return `${firstName}-${lastNamePrefix}${lastNameNumber.toString().padStart(2, '0')}`;
 };
+
+export const getAgentTotalEarnings = (totalPayout: string, totalTraded: string) => {
+  const totalEarnings =
+    parseFloat(formatUnits(BigInt(totalPayout), 18)) -
+    parseFloat(formatUnits(BigInt(totalTraded), 18));
+
+  return Math.max(totalEarnings, 0).toLocaleString('en-US', {
+    style: 'currency',
+    currency: 'USD',
+  });
+};