feat(PGIO-136): use agent label instead of address (#152)

* feat: display the AI agent label instead of its address if able
SwaprHQ · Jan 10, 2025 · 60efefd · 60efefd
1 parent 3d8b5c9
commit 60efefd
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 34 deletions.
diff --git a/app/(main)/markets/MarketActivity.tsx b/app/(main)/markets/MarketActivity.tsx
@@ -23,6 +23,8 @@ import { getAIAgents } from '@/queries/dune';
 import { Address } from 'viem';
 import { OUTCOME_TAG_COLORS_SCHEME } from '@/constants';
 
+import { AiAgent } from '@/types';
+
 const txTypeHumanWords: Record<TransactionType, string[]> = {
   [TransactionType.Add]: ['added', 'to'],
   [TransactionType.Remove]: ['removed', 'from'],
@@ -48,8 +50,9 @@ export const MarketActivity = ({ id }: { id: string }) => {
 
   const getIsAIAgent = useMemo(() => {
     return (address: string) => {
-      if (!aiAgentsList?.length) return false;
-      return aiAgentsList.some(
+      if (!aiAgentsList?.length) return undefined;
+
+      return aiAgentsList.find(
         aiAgent => String(aiAgent.address).toLowerCase() === address.toLowerCase()
       );
     };
@@ -93,15 +96,15 @@ export const MarketActivity = ({ id }: { id: string }) => {
         ) : (
           <div className="w-full divide-y divide-outline-base-em overflow-x-scroll border-t border-outline-base-em text-base font-semibold md:overflow-x-auto">
             {marketTransactions?.map(transaction => {
-              const isAIAgent = getIsAIAgent(transaction.user.id);
+              const aiAgent = getIsAIAgent(transaction.user.id);
               const isLiquidityEvent = transaction.fpmmType === FpmmType.Liquidity;
 
               if (isLiquidityEvent)
                 return (
                   <LiquidityEventRow
                     key={transaction.id}
                     transaction={transaction}
-                    isAIAgent={isAIAgent}
+                    aiAgent={aiAgent}
                   />
                 );
 
@@ -117,11 +120,7 @@ export const MarketActivity = ({ id }: { id: string }) => {
                 };
 
                 return (
-                  <TradeRow
-                    key={transaction.id}
-                    activity={activity}
-                    isAIAgent={isAIAgent}
-                  />
+                  <TradeRow key={transaction.id} activity={activity} aiAgent={aiAgent} />
                 );
               }
 
@@ -177,10 +176,10 @@ const CollateralAmountWithLogo = ({
 
 interface TradeRowProps {
   activity: MergedTradeTransaction;
-  isAIAgent: boolean;
+  aiAgent?: AiAgent;
 }
 
-const TradeRow = ({ activity, isAIAgent }: TradeRowProps) => {
+const TradeRow = ({ activity, aiAgent }: TradeRowProps) => {
   const creatorAddress = activity?.creator?.id ?? 'unknown';
   const outcomes = activity.fpmm.outcomes;
   const outcomeIndex = activity.outcomeIndex;
@@ -200,10 +199,7 @@ const TradeRow = ({ activity, isAIAgent }: TradeRowProps) => {
   return (
     <RowWrapper>
       <div className="flex items-center space-x-1.5">
-        <UserAvatarWithAddress
-          address={creatorAddress as Address}
-          isAIAgent={isAIAgent}
-        />
+        <UserAvatarWithAddress address={creatorAddress as Address} aiAgent={aiAgent} />
         {activity.transactionType && (
           <p className="text-text-low-em">
             {txTypeHumanWords[activity.transactionType][0]}
@@ -238,12 +234,12 @@ const TradeRow = ({ activity, isAIAgent }: TradeRowProps) => {
 
 interface LiquidityEventRowProps {
   transaction: FpmmTransaction;
-  isAIAgent: boolean;
+  aiAgent?: AiAgent;
 }
 
 const FPMMContractAddress = '0x9083a2b699c0a4ad06f63580bde2635d26a3eef0';
 
-const LiquidityEventRow = ({ transaction, isAIAgent }: LiquidityEventRowProps) => {
+const LiquidityEventRow = ({ transaction, aiAgent }: LiquidityEventRowProps) => {
   const creatorAddress =
     transaction.user.id === FPMMContractAddress
       ? transaction.fpmm.creator
@@ -252,10 +248,7 @@ const LiquidityEventRow = ({ transaction, isAIAgent }: LiquidityEventRowProps) =
   return (
     <RowWrapper>
       <div className="flex items-center space-x-1.5">
-        <UserAvatarWithAddress
-          address={creatorAddress as Address}
-          isAIAgent={isAIAgent}
-        />
+        <UserAvatarWithAddress address={creatorAddress as Address} aiAgent={aiAgent} />
         <p className="lowercase text-text-low-em">
           {txTypeHumanWords[transaction.transactionType][0]}
         </p>

diff --git a/app/(main)/profile/page.tsx b/app/(main)/profile/page.tsx
@@ -37,6 +37,8 @@ import { useEnsName } from 'wagmi';
 import { mainnetConfigForENS } from '@/providers/chain-config';
 import { mainnet } from 'viem/chains';
 
+import { AiAgent } from '@/types';
+
 export default function ProfilePage() {
   const searchParams = useSearchParams();
 
@@ -107,9 +109,15 @@ export default function ProfilePage() {
     staleTime: Infinity,
   });
 
-  const isAIAgent =
-    aiAgentsList?.some(aiAgent => String(aiAgent.address).toLowerCase() === address) ??
-    false;
+  const getIsAIAgent = useMemo(() => {
+    return (address: string) => {
+      if (!aiAgentsList?.length) return undefined;
+
+      return aiAgentsList.find(
+        aiAgent => String(aiAgent.address).toLowerCase() === address.toLowerCase()
+      );
+    };
+  }, [aiAgentsList]);
 
   const spentAmountInUSD = useMemo(
     () =>
@@ -257,6 +265,7 @@ export default function ProfilePage() {
       : '-';
 
   const isLoadingStats = userPositions === undefined || isLoadingTokenPrices;
+  const aiAgent = getIsAIAgent(address);
 
   return (
     <main className="mx-auto mt-12 max-w-5xl space-y-12 px-6 md:flex md:flex-col md:items-center">
@@ -267,7 +276,7 @@ export default function ProfilePage() {
             <AddressLink
               href={getExplorerAddressUrl(address)}
               address={address}
-              isAIAgent={isAIAgent}
+              aiAgent={aiAgent}
               className="text-xl font-semibold md:text-2xl"
               iconSize={24}
               target="_blank"

diff --git a/app/components/AddressLink.tsx b/app/components/AddressLink.tsx
@@ -10,17 +10,19 @@ import { Address } from 'viem';
 import { mainnet } from 'viem/chains';
 import { useEnsName } from 'wagmi';
 
+import { AiAgent } from '@/types';
+
 interface AddressLinkProps extends ComponentProps<typeof Link> {
   address: Address;
-  isAIAgent: boolean;
+  aiAgent?: AiAgent;
   className?: string;
   href: string;
   iconSize?: number;
 }
 
 export const AddressLink = ({
   address,
-  isAIAgent,
+  aiAgent,
   className,
   href,
   iconSize = 16,
@@ -32,20 +34,28 @@ export const AddressLink = ({
     config: mainnetConfigForENS,
   });
 
+  const isAiAgent = !!aiAgent;
+
+  const getLinkText = () => {
+    if (isAiAgent) return aiAgent.label;
+
+    return ensName || shortenAddress(address);
+  };
+
   return (
     <div className="flex items-center space-x-2 text-sm md:text-base">
       <Link
         href={href}
         className={twMerge(
           'hover:underline',
-          isAIAgent ? 'text-text-primary-main' : 'text-text-high-em',
+          isAiAgent ? 'text-text-primary-main' : 'text-text-high-em',
           className
         )}
         {...props}
       >
-        {ensName || shortenAddress(address)}
+        {getLinkText()}
       </Link>
-      {isAIAgent && <Image src="/ai.svg" alt="ai" width={iconSize} height={iconSize} />}
+      {isAiAgent && <Image src="/ai.svg" alt="ai" width={iconSize} height={iconSize} />}
     </div>
   );
 };
diff --git a/app/components/UserAvatarWithAddress.tsx b/app/components/UserAvatarWithAddress.tsx
@@ -5,15 +5,17 @@ import { Avatar } from '@/app/components';
 import { Address } from 'viem';
 import { twMerge } from 'tailwind-merge';
 
+import { AiAgent } from '@/types';
+
 interface UserAvatarWithAddressProps {
   address: Address;
-  isAIAgent: boolean;
+  aiAgent?: AiAgent;
   className?: string;
 }
 
 export const UserAvatarWithAddress = ({
   address,
-  isAIAgent,
+  aiAgent,
   className,
 }: UserAvatarWithAddressProps) => {
   return (
@@ -26,7 +28,7 @@ export const UserAvatarWithAddress = ({
       <Avatar address={address} />
       <AddressLink
         address={address}
-        isAIAgent={isAIAgent}
+        aiAgent={aiAgent}
         href={`/profile?address=${address}`}
       />
     </div>

diff --git a/queries/dune/queries.ts b/queries/dune/queries.ts
@@ -1,6 +1,7 @@
 import { LatestResultArgs, ParameterType, RunQueryArgs } from '@duneanalytics/client-sdk';
 import { duneClient } from '@/utils';
 import { Categories } from '@/constants';
+import { AiAgent } from '@/types';
 
 const DUNE_OPEN_MARKETS_INFO_QUERY_ID = 3781367;
 
@@ -16,7 +17,7 @@ export const getAIAgents = async () => {
 
   const duneResult = await duneClient.getLatestResult(options);
 
-  return duneResult.result?.rows;
+  return duneResult.result?.rows as AiAgent[];
 };
 
 export const getOpenMarkets = async () => {

diff --git a/types/index.ts b/types/index.ts
@@ -0,0 +1 @@
+export type AiAgent = { address: string; label: string };
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export type AiAgent = { address: string; label: string };