From eb6edba71496f6ebc9078fbf9aa1136e7df93907 Mon Sep 17 00:00:00 2001
From: antoncoding <antonassocareer@gmail.com>
Date: Tue, 13 Jan 2026 23:15:48 +0800
Subject: [PATCH 1/5] feat: market page detail + campaigns

---
 .../components/campaign-modal.tsx             |  46 ++--
 .../components/charts/chart-utils.tsx         |  11 +-
 .../components/charts/rate-chart.tsx          |   6 +-
 .../components/charts/volume-chart.tsx        |   6 +-
 .../components/market-header.tsx              | 209 ++++++++++--------
 src/hooks/useMarketCampaigns.ts               |   2 +
 src/stores/useMarketDetailChartState.ts       |  16 +-
 src/utils/merklApi.ts                         |  18 +-
 src/utils/merklTypes.ts                       |   1 +
 9 files changed, 201 insertions(+), 114 deletions(-)

diff --git a/src/features/market-detail/components/campaign-modal.tsx b/src/features/market-detail/components/campaign-modal.tsx
index 7d568a38..b5736214 100644
--- a/src/features/market-detail/components/campaign-modal.tsx
+++ b/src/features/market-detail/components/campaign-modal.tsx
@@ -15,6 +15,13 @@ const CAMPAIGN_TYPE_CONFIG: Record<MerklCampaignType, { badge: string; actionTyp
   MORPHOBORROW: { badge: 'Borrow Rewards', actionType: 'borrowers', actionVerb: 'borrow' },
 };
 
+// Blacklisted campaign IDs - these will be filtered out
+const BLACKLISTED_CAMPAIGN_IDS: string[] = [
+  // Seems to be reporting bad APY, not singleton for all market for sure
+  // https://app.merkl.xyz/opportunities/base/MORPHOSUPPLY_SINGLETOKEN/0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913
+  '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913WHITELIST_PER_PROTOCOL',
+];
+
 type CampaignModalProps = {
   isOpen: boolean;
   onClose: () => void;
@@ -22,30 +29,39 @@ type CampaignModalProps = {
 };
 
 function getUrlIdentifier(campaign: SimplifiedCampaign): string {
+  // Always prefer opportunityIdentifier from the Opportunity object
+  if (campaign.opportunityIdentifier) {
+    return campaign.opportunityIdentifier;
+  }
+  // Fallback for legacy data
   switch (campaign.type) {
     case 'MORPHOSUPPLY_SINGLETOKEN':
       return campaign.targetToken?.address ?? campaign.campaignId;
-    case 'MULTILENDBORROW':
-      return campaign.opportunityIdentifier ?? campaign.campaignId;
     default:
       return campaign.marketId.slice(0, 42);
   }
 }
 
+function formatCampaignDate(timestamp: number): string {
+  return new Date(timestamp * 1000).toLocaleDateString(undefined, {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  });
+}
+
 function CampaignRow({ campaign }: { campaign: SimplifiedCampaign }) {
   const urlIdentifier = getUrlIdentifier(campaign);
   const merklUrl = getMerklCampaignURL(campaign.chainId, campaign.type, urlIdentifier);
 
-  const { badge, actionType, actionVerb } = CAMPAIGN_TYPE_CONFIG[campaign.type] ?? CAMPAIGN_TYPE_CONFIG.MORPHOSUPPLY;
+  const { badge } = CAMPAIGN_TYPE_CONFIG[campaign.type] ?? CAMPAIGN_TYPE_CONFIG.MORPHOSUPPLY;
 
   return (
     <div className="bg-hovered rounded-sm border border-gray-200/20 p-4 dark:border-gray-600/15">
+      {/* Header: Badge + Reward Token + APR */}
       <div className="mb-3 flex items-center justify-between">
         <div className="flex items-center gap-3">
-          {/* Campaign Type Badge */}
           <span className="rounded-sm bg-green-100 px-2 py-1 text-xs text-green-700 dark:bg-green-800 dark:text-green-300">{badge}</span>
-
-          {/* Reward Token */}
           <div className="flex items-center gap-2">
             <Image
               src={campaign.rewardToken.icon}
@@ -57,16 +73,17 @@ function CampaignRow({ campaign }: { campaign: SimplifiedCampaign }) {
             <span className="text-normal">{campaign.rewardToken.symbol}</span>
           </div>
         </div>
-
-        {/* APR */}
         <span className="text text-green-600 dark:text-green-400">+{campaign.apr.toFixed(2)}% APR</span>
       </div>
 
-      <div className="mb-3 text-sm text-gray-600 dark:text-gray-400">
-        Extra incentives for all {actionType} who {actionVerb} to this market, earning {campaign.rewardToken.symbol} rewards.
-      </div>
+      {/* Campaign Name */}
+      {campaign.name && <h4 className="mb-2 text-sm font-medium">{campaign.name}</h4>}
 
-      <div className="flex justify-end">
+      {/* Date Range + Link */}
+      <div className="flex items-center justify-between">
+        <span className="text-xs text-gray-500 dark:text-gray-500">
+          {formatCampaignDate(campaign.startTimestamp)} — {formatCampaignDate(campaign.endTimestamp)}
+        </span>
         <Link
           href={merklUrl}
           target="_blank"
@@ -89,6 +106,9 @@ function CampaignRow({ campaign }: { campaign: SimplifiedCampaign }) {
 export function CampaignModal({ isOpen, onClose, campaigns }: CampaignModalProps) {
   if (!isOpen) return null;
 
+  // Filter out blacklisted campaigns
+  const filteredCampaigns = campaigns.filter((c) => !BLACKLISTED_CAMPAIGN_IDS.includes(c.campaignId));
+
   return (
     <Modal
       isOpen={isOpen}
@@ -106,7 +126,7 @@ export function CampaignModal({ isOpen, onClose, campaigns }: CampaignModalProps
         onClose={onClose}
       />
       <ModalBody className="space-y-4">
-        {campaigns.map((campaign) => (
+        {filteredCampaigns.map((campaign) => (
           <CampaignRow
             key={`${campaign.campaignId}-${campaign.marketId}`}
             campaign={campaign}
diff --git a/src/features/market-detail/components/charts/chart-utils.tsx b/src/features/market-detail/components/charts/chart-utils.tsx
index 2d548904..62cfb507 100644
--- a/src/features/market-detail/components/charts/chart-utils.tsx
+++ b/src/features/market-detail/components/charts/chart-utils.tsx
@@ -5,6 +5,8 @@ export const TIMEFRAME_LABELS: Record<string, string> = {
   '1d': '1D',
   '7d': '7D',
   '30d': '30D',
+  '3m': '3M',
+  '6m': '6M',
 };
 
 type GradientConfig = {
@@ -63,7 +65,14 @@ export function ChartTooltipContent({ active, payload, label, formatValue }: Cha
   if (!active || !payload) return null;
   return (
     <div className="rounded-lg border border-border bg-background p-3 shadow-lg">
-      <p className="mb-2 text-xs text-secondary">{new Date((label ?? 0) * 1000).toLocaleDateString()}</p>
+      <p className="mb-2 text-xs text-secondary">
+        {new Date((label ?? 0) * 1000).toLocaleString(undefined, {
+          month: 'short',
+          day: 'numeric',
+          hour: '2-digit',
+          minute: '2-digit',
+        })}
+      </p>
       <div className="space-y-1">
         {payload.map((entry: any) => (
           <div
diff --git a/src/features/market-detail/components/charts/rate-chart.tsx b/src/features/market-detail/components/charts/rate-chart.tsx
index f7d80b0b..965e9c17 100644
--- a/src/features/market-detail/components/charts/rate-chart.tsx
+++ b/src/features/market-detail/components/charts/rate-chart.tsx
@@ -44,7 +44,7 @@ function RateChart({ marketId, chainId, market }: RateChartProps) {
     apyAtTarget: true,
   });
 
-  const handleTimeframeChange = (timeframe: '1d' | '7d' | '30d') => {
+  const handleTimeframeChange = (timeframe: '1d' | '7d' | '30d' | '3m' | '6m') => {
     setTimeframe(timeframe);
   };
 
@@ -124,7 +124,7 @@ function RateChart({ marketId, chainId, market }: RateChartProps) {
         <div className="flex items-center gap-2">
           <Select
             value={selectedTimeframe}
-            onValueChange={(value) => handleTimeframeChange(value as '1d' | '7d' | '30d')}
+            onValueChange={(value) => handleTimeframeChange(value as '1d' | '7d' | '30d' | '3m' | '6m')}
           >
             <SelectTrigger className="h-8 w-auto min-w-[60px] px-3 text-sm">
               <SelectValue>{TIMEFRAME_LABELS[selectedTimeframe]}</SelectValue>
@@ -133,6 +133,8 @@ function RateChart({ marketId, chainId, market }: RateChartProps) {
               <SelectItem value="1d">1D</SelectItem>
               <SelectItem value="7d">7D</SelectItem>
               <SelectItem value="30d">30D</SelectItem>
+              <SelectItem value="3m">3M</SelectItem>
+              <SelectItem value="6m">6M</SelectItem>
             </SelectContent>
           </Select>
         </div>
diff --git a/src/features/market-detail/components/charts/volume-chart.tsx b/src/features/market-detail/components/charts/volume-chart.tsx
index 3169b4a1..8502b3a5 100644
--- a/src/features/market-detail/components/charts/volume-chart.tsx
+++ b/src/features/market-detail/components/charts/volume-chart.tsx
@@ -44,7 +44,7 @@ function VolumeChart({ marketId, chainId, market }: VolumeChartProps) {
     liquidity: true,
   });
 
-  const handleTimeframeChange = (timeframe: '1d' | '7d' | '30d') => {
+  const handleTimeframeChange = (timeframe: '1d' | '7d' | '30d' | '3m' | '6m') => {
     setTimeframe(timeframe);
   };
 
@@ -180,7 +180,7 @@ function VolumeChart({ marketId, chainId, market }: VolumeChartProps) {
           </Select>
           <Select
             value={selectedTimeframe}
-            onValueChange={(value) => handleTimeframeChange(value as '1d' | '7d' | '30d')}
+            onValueChange={(value) => handleTimeframeChange(value as '1d' | '7d' | '30d' | '3m' | '6m')}
           >
             <SelectTrigger className="h-8 w-auto min-w-[60px] px-3 text-sm">
               <SelectValue>{TIMEFRAME_LABELS[selectedTimeframe]}</SelectValue>
@@ -189,6 +189,8 @@ function VolumeChart({ marketId, chainId, market }: VolumeChartProps) {
               <SelectItem value="1d">1D</SelectItem>
               <SelectItem value="7d">7D</SelectItem>
               <SelectItem value="30d">30D</SelectItem>
+              <SelectItem value="3m">3M</SelectItem>
+              <SelectItem value="6m">6M</SelectItem>
             </SelectContent>
           </Select>
         </div>
diff --git a/src/features/market-detail/components/market-header.tsx b/src/features/market-detail/components/market-header.tsx
index 847763ea..43c685e9 100644
--- a/src/features/market-detail/components/market-header.tsx
+++ b/src/features/market-detail/components/market-header.tsx
@@ -1,7 +1,9 @@
 'use client';
 
+import { useState } from 'react';
 import Image from 'next/image';
 import { formatUnits } from 'viem';
+import { motion, AnimatePresence } from 'framer-motion';
 import { ChevronDownIcon } from '@radix-ui/react-icons';
 import { GrStatusGood } from 'react-icons/gr';
 import { IoWarningOutline, IoEllipsisVertical } from 'react-icons/io5';
@@ -129,6 +131,7 @@ export function MarketHeader({
   onSupplyClick,
   onBorrowClick,
 }: MarketHeaderProps) {
+  const [isExpanded, setIsExpanded] = useState(false);
   const { short: rateLabel } = useRateLabel();
   const { isAprDisplay } = useAppSettings();
   const networkImg = getNetworkImg(network);
@@ -221,13 +224,15 @@ export function MarketHeader({
                 width={40}
                 height={40}
               />
-              <TokenIcon
-                address={market.collateralAsset.address}
-                chainId={market.morphoBlue.chain.id}
-                symbol={market.collateralAsset.symbol}
-                width={40}
-                height={40}
-              />
+              <div className="rounded-full bg-surface">
+                <TokenIcon
+                  address={market.collateralAsset.address}
+                  chainId={market.morphoBlue.chain.id}
+                  symbol={market.collateralAsset.symbol}
+                  width={40}
+                  height={40}
+                />
+              </div>
             </div>
 
             <div>
@@ -283,7 +288,7 @@ export function MarketHeader({
                   content={
                     <TooltipContent
                       title="Oracle Price"
-                      detail={`1 ${market.collateralAsset.symbol} = ${oraclePrice} ${market.loanAsset.symbol}`}
+                      detail={`1 ${market.collateralAsset.symbol} = ${Number(oraclePrice).toPrecision(6)} ${market.loanAsset.symbol}`}
                     />
                   }
                 >
@@ -307,7 +312,7 @@ export function MarketHeader({
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
                   <Button
-                    size="sm"
+                    size="xs"
                     variant="surface"
                     className="px-0"
                   >
@@ -368,90 +373,116 @@ export function MarketHeader({
         </div>
 
         {/* Advanced Details - Expandable */}
-        <details className="group mt-4 border-t border-border pt-4">
-          <summary className="flex cursor-pointer list-none items-center gap-3 text-sm text-secondary hover:text-primary">
-            <ChevronDownIcon className="h-4 w-4 transition-transform group-open:rotate-180" />
-            <span>Advanced Details</span>
+        <div className="mt-4 border-t border-border pt-4">
+          <div
+            className="flex cursor-pointer items-center justify-between text-sm text-secondary hover:text-primary"
+            onClick={() => setIsExpanded(!isExpanded)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                setIsExpanded(!isExpanded);
+              }
+            }}
+            role="button"
+            tabIndex={0}
+            aria-expanded={isExpanded}
+          >
             {renderSummaryBadges()}
-          </summary>
-
-          <div className="mt-4 space-y-4">
-            {/* Global Warnings (debt + general) at top */}
-            <WarningBlock
-              warnings={globalWarnings}
-              riskLevel={globalRiskLevel}
-            />
-
-            {/* Two-column grid */}
-            <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
-              {/* LEFT: Market Configuration */}
-              <div className="space-y-3">
-                <div className="flex items-center gap-2">
-                  <h4 className="text-xs uppercase tracking-wider text-secondary">Market Configuration</h4>
-                  <RiskIcon level={assetRiskLevel} />
-                </div>
-
-                <div className="flex flex-wrap items-center gap-x-4 gap-y-2">
-                  <div className="flex items-center gap-1.5">
-                    <span className="text-xs text-secondary">Loan:</span>
-                    <AddressIdentity
-                      address={market.loanAsset.address}
-                      chainId={market.morphoBlue.chain.id}
-                      label={market.loanAsset.symbol}
-                      isToken
-                      tokenSymbol={market.loanAsset.symbol}
-                    />
-                  </div>
-                  <div className="flex items-center gap-1.5">
-                    <span className="text-xs text-secondary">Collateral:</span>
-                    <AddressIdentity
-                      address={market.collateralAsset.address}
-                      chainId={market.morphoBlue.chain.id}
-                      label={market.collateralAsset.symbol}
-                      isToken
-                      tokenSymbol={market.collateralAsset.symbol}
-                    />
-                  </div>
-                  <div className="flex items-center gap-1.5">
-                    <span className="text-xs text-secondary">IRM:</span>
-                    <AddressIdentity
-                      address={market.irmAddress}
-                      chainId={market.morphoBlue.chain.id}
-                      label={getIRMTitle(market.irmAddress)}
-                    />
-                  </div>
-                </div>
+            <div className="flex items-center gap-2">
+              <span>Advanced Details</span>
+              <ChevronDownIcon className={`h-4 w-4 transition-transform duration-200 ${isExpanded ? 'rotate-180' : ''}`} />
+            </div>
+          </div>
 
-                {/* Asset warnings */}
-                <WarningBlock
-                  warnings={assetWarnings}
-                  riskLevel={assetRiskLevel}
-                />
-              </div>
+          <AnimatePresence>
+            {isExpanded && (
+              <motion.div
+                initial={{ height: 0, opacity: 0 }}
+                animate={{ height: 'auto', opacity: 1 }}
+                exit={{ height: 0, opacity: 0 }}
+                transition={{ duration: 0.2, ease: 'easeInOut' }}
+                className="overflow-hidden"
+              >
+                <div className="pt-4 space-y-4">
+                  {/* Global Warnings (debt + general) at top */}
+                  <WarningBlock
+                    warnings={globalWarnings}
+                    riskLevel={globalRiskLevel}
+                  />
 
-              {/* RIGHT: Oracle */}
-              <div className="space-y-3">
-                <div className="flex items-center gap-2">
-                  <h4 className="text-xs uppercase tracking-wider text-secondary">Oracle</h4>
-                  <RiskIcon level={oracleRiskLevel} />
+                  {/* Two-column grid */}
+                  <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
+                    {/* LEFT: Market Configuration */}
+                    <div className="space-y-3">
+                      <div className="flex items-center gap-2">
+                        <h4 className="text-xs uppercase tracking-wider text-secondary">Market Configuration</h4>
+                        <RiskIcon level={assetRiskLevel} />
+                      </div>
+
+                      <div className="flex flex-wrap items-center gap-x-4 gap-y-2">
+                        <div className="flex items-center gap-1.5">
+                          <span className="text-xs text-secondary">Loan:</span>
+                          <AddressIdentity
+                            address={market.loanAsset.address}
+                            chainId={market.morphoBlue.chain.id}
+                            label={market.loanAsset.symbol}
+                            isToken
+                            tokenSymbol={market.loanAsset.symbol}
+                          />
+                        </div>
+                        <div className="flex items-center gap-1.5">
+                          <span className="text-xs text-secondary">Collateral:</span>
+                          <AddressIdentity
+                            address={market.collateralAsset.address}
+                            chainId={market.morphoBlue.chain.id}
+                            label={market.collateralAsset.symbol}
+                            isToken
+                            tokenSymbol={market.collateralAsset.symbol}
+                          />
+                        </div>
+                        <div className="flex items-center gap-1.5">
+                          <span className="text-xs text-secondary">IRM:</span>
+                          <AddressIdentity
+                            address={market.irmAddress}
+                            chainId={market.morphoBlue.chain.id}
+                            label={getIRMTitle(market.irmAddress)}
+                          />
+                        </div>
+                      </div>
+
+                      {/* Asset warnings */}
+                      <WarningBlock
+                        warnings={assetWarnings}
+                        riskLevel={assetRiskLevel}
+                      />
+                    </div>
+
+                    {/* RIGHT: Oracle */}
+                    <div className="space-y-3">
+                      <div className="flex items-center gap-2">
+                        <h4 className="text-xs uppercase tracking-wider text-secondary">Oracle</h4>
+                        <RiskIcon level={oracleRiskLevel} />
+                      </div>
+
+                      <OracleTypeInfo
+                        oracleData={market.oracle?.data}
+                        oracleAddress={market.oracleAddress}
+                        chainId={market.morphoBlue.chain.id}
+                        useBadge
+                      />
+
+                      {/* Oracle warnings */}
+                      <WarningBlock
+                        warnings={oracleWarnings}
+                        riskLevel={oracleRiskLevel}
+                      />
+                    </div>
+                  </div>
                 </div>
-
-                <OracleTypeInfo
-                  oracleData={market.oracle?.data}
-                  oracleAddress={market.oracleAddress}
-                  chainId={market.morphoBlue.chain.id}
-                  useBadge
-                />
-
-                {/* Oracle warnings */}
-                <WarningBlock
-                  warnings={oracleWarnings}
-                  riskLevel={oracleRiskLevel}
-                />
-              </div>
-            </div>
-          </div>
-        </details>
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </div>
       </div>
     </div>
   );
diff --git a/src/hooks/useMarketCampaigns.ts b/src/hooks/useMarketCampaigns.ts
index 9e00722b..11d5eaff 100644
--- a/src/hooks/useMarketCampaigns.ts
+++ b/src/hooks/useMarketCampaigns.ts
@@ -42,6 +42,8 @@ export function useMarketCampaigns(options: MarketCampaignsOptions): UseMarketCa
           )
         : [];
 
+    console.log('singleTokenCampaigns', singleTokenCampaigns);
+
     // Combine both types of campaigns
     const allMarketCampaigns = [...directMarketCampaigns, ...singleTokenCampaigns];
     const activeCampaigns = allMarketCampaigns.filter((campaign) => campaign.isActive);
diff --git a/src/stores/useMarketDetailChartState.ts b/src/stores/useMarketDetailChartState.ts
index f7fec2c9..84c62d14 100644
--- a/src/stores/useMarketDetailChartState.ts
+++ b/src/stores/useMarketDetailChartState.ts
@@ -3,9 +3,10 @@ import type { TimeseriesOptions } from '@/utils/types';
 
 const DAY_IN_SECONDS = 24 * 60 * 60;
 const WEEK_IN_SECONDS = 7 * DAY_IN_SECONDS;
+const MONTH_IN_SECONDS = 30 * DAY_IN_SECONDS;
 
 // Helper to calculate time range based on timeframe string
-const calculateTimeRange = (timeframe: '1d' | '7d' | '30d'): TimeseriesOptions => {
+const calculateTimeRange = (timeframe: '1d' | '7d' | '30d' | '3m' | '6m'): TimeseriesOptions => {
   const endTimestamp = Math.floor(Date.now() / 1000);
   let startTimestamp;
   let interval: TimeseriesOptions['interval'] = 'HOUR';
@@ -15,7 +16,14 @@ const calculateTimeRange = (timeframe: '1d' | '7d' | '30d'): TimeseriesOptions =
       break;
     case '30d':
       startTimestamp = endTimestamp - 30 * DAY_IN_SECONDS;
-      // Use DAY interval for longer ranges if desired, adjust as needed
+      interval = 'DAY';
+      break;
+    case '3m':
+      startTimestamp = endTimestamp - 3 * MONTH_IN_SECONDS;
+      interval = 'DAY';
+      break;
+    case '6m':
+      startTimestamp = endTimestamp - 6 * MONTH_IN_SECONDS;
       interval = 'DAY';
       break;
     default:
@@ -26,13 +34,13 @@ const calculateTimeRange = (timeframe: '1d' | '7d' | '30d'): TimeseriesOptions =
 };
 
 type ChartState = {
-  selectedTimeframe: '1d' | '7d' | '30d';
+  selectedTimeframe: '1d' | '7d' | '30d' | '3m' | '6m';
   selectedTimeRange: TimeseriesOptions;
   volumeView: 'USD' | 'Asset';
 };
 
 type ChartActions = {
-  setTimeframe: (timeframe: '1d' | '7d' | '30d') => void;
+  setTimeframe: (timeframe: '1d' | '7d' | '30d' | '3m' | '6m') => void;
   setVolumeView: (view: 'USD' | 'Asset') => void;
 };
 
diff --git a/src/utils/merklApi.ts b/src/utils/merklApi.ts
index aa45dcce..3c3df17a 100644
--- a/src/utils/merklApi.ts
+++ b/src/utils/merklApi.ts
@@ -77,7 +77,19 @@ function isCampaignActive(campaign: MerklCampaign): boolean {
 // Helper to extract common campaign fields
 function getBaseCampaignFields(
   campaign: MerklCampaign,
-): Pick<SimplifiedCampaign, 'chainId' | 'campaignId' | 'type' | 'apr' | 'rewardToken' | 'startTimestamp' | 'endTimestamp' | 'isActive'> {
+): Pick<
+  SimplifiedCampaign,
+  | 'chainId'
+  | 'campaignId'
+  | 'type'
+  | 'apr'
+  | 'rewardToken'
+  | 'startTimestamp'
+  | 'endTimestamp'
+  | 'isActive'
+  | 'name'
+  | 'opportunityIdentifier'
+> {
   return {
     chainId: campaign.computeChainId,
     campaignId: campaign.campaignId,
@@ -91,6 +103,8 @@ function getBaseCampaignFields(
     startTimestamp: campaign.startTimestamp,
     endTimestamp: campaign.endTimestamp,
     isActive: isCampaignActive(campaign),
+    name: campaign.Opportunity?.name,
+    opportunityIdentifier: campaign.Opportunity?.identifier,
   };
 }
 
@@ -128,13 +142,11 @@ export function simplifyMerklCampaign(campaign: MerklCampaign): SimplifiedCampai
 export function expandMultiLendBorrowCampaign(campaign: MerklCampaign): SimplifiedCampaign[] {
   const baseFields = getBaseCampaignFields(campaign);
   const markets = campaign.params.markets ?? [];
-  const opportunityIdentifier = campaign.Opportunity?.identifier;
 
   return markets.map((m) => ({
     ...baseFields,
     marketId: m.campaignParameters.market,
     collateralToken: { symbol: m.campaignParameters.symbolCollateralToken },
     loanToken: { symbol: m.campaignParameters.symbolLoanToken },
-    opportunityIdentifier,
   }));
 }
diff --git a/src/utils/merklTypes.ts b/src/utils/merklTypes.ts
index 28d5d92d..e32f6bd9 100644
--- a/src/utils/merklTypes.ts
+++ b/src/utils/merklTypes.ts
@@ -154,5 +154,6 @@ export type SimplifiedCampaign = {
   startTimestamp: number;
   endTimestamp: number;
   isActive: boolean;
+  name?: string;
   opportunityIdentifier?: string;
 };

From a20aff2ce5442350976c36ad62c9c92f02a5c12b Mon Sep 17 00:00:00 2001
From: antoncoding <antonassocareer@gmail.com>
Date: Tue, 13 Jan 2026 23:20:57 +0800
Subject: [PATCH 2/5] chore: cleanup

---
 .../market-detail/components/campaign-modal.tsx   | 10 +++++-----
 .../market-detail/components/market-header.tsx    | 15 ++++-----------
 src/hooks/useMarketCampaigns.ts                   |  2 --
 3 files changed, 9 insertions(+), 18 deletions(-)

diff --git a/src/features/market-detail/components/campaign-modal.tsx b/src/features/market-detail/components/campaign-modal.tsx
index b5736214..4d16d4c3 100644
--- a/src/features/market-detail/components/campaign-modal.tsx
+++ b/src/features/market-detail/components/campaign-modal.tsx
@@ -8,11 +8,11 @@ import { Modal, ModalBody, ModalHeader } from '@/components/common/Modal';
 import { getMerklCampaignURL } from '@/utils/external';
 import type { SimplifiedCampaign, MerklCampaignType } from '@/utils/merklTypes';
 
-const CAMPAIGN_TYPE_CONFIG: Record<MerklCampaignType, { badge: string; actionType: string; actionVerb: string }> = {
-  MORPHOSUPPLY: { badge: 'Lender Rewards', actionType: 'lenders', actionVerb: 'lend' },
-  MORPHOSUPPLY_SINGLETOKEN: { badge: 'Lender Rewards', actionType: 'lenders', actionVerb: 'lend' },
-  MULTILENDBORROW: { badge: 'Lend/Borrow Rewards', actionType: 'users', actionVerb: 'participate in' },
-  MORPHOBORROW: { badge: 'Borrow Rewards', actionType: 'borrowers', actionVerb: 'borrow' },
+const CAMPAIGN_TYPE_CONFIG: Record<MerklCampaignType, { badge: string; actionType: string }> = {
+  MORPHOSUPPLY: { badge: 'Lender Rewards', actionType: 'lenders' },
+  MORPHOSUPPLY_SINGLETOKEN: { badge: 'Lender Rewards', actionType: 'lenders' },
+  MULTILENDBORROW: { badge: 'Lend/Borrow Rewards', actionType: 'users' },
+  MORPHOBORROW: { badge: 'Borrow Rewards', actionType: 'borrowers' },
 };
 
 // Blacklisted campaign IDs - these will be filtered out
diff --git a/src/features/market-detail/components/market-header.tsx b/src/features/market-detail/components/market-header.tsx
index 43c685e9..bf2e6239 100644
--- a/src/features/market-detail/components/market-header.tsx
+++ b/src/features/market-detail/components/market-header.tsx
@@ -374,17 +374,10 @@ export function MarketHeader({
 
         {/* Advanced Details - Expandable */}
         <div className="mt-4 border-t border-border pt-4">
-          <div
-            className="flex cursor-pointer items-center justify-between text-sm text-secondary hover:text-primary"
+          <button
+            type="button"
+            className="flex w-full cursor-pointer items-center justify-between text-sm text-secondary hover:text-primary"
             onClick={() => setIsExpanded(!isExpanded)}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter' || e.key === ' ') {
-                e.preventDefault();
-                setIsExpanded(!isExpanded);
-              }
-            }}
-            role="button"
-            tabIndex={0}
             aria-expanded={isExpanded}
           >
             {renderSummaryBadges()}
@@ -392,7 +385,7 @@ export function MarketHeader({
               <span>Advanced Details</span>
               <ChevronDownIcon className={`h-4 w-4 transition-transform duration-200 ${isExpanded ? 'rotate-180' : ''}`} />
             </div>
-          </div>
+          </button>
 
           <AnimatePresence>
             {isExpanded && (
diff --git a/src/hooks/useMarketCampaigns.ts b/src/hooks/useMarketCampaigns.ts
index 11d5eaff..9e00722b 100644
--- a/src/hooks/useMarketCampaigns.ts
+++ b/src/hooks/useMarketCampaigns.ts
@@ -42,8 +42,6 @@ export function useMarketCampaigns(options: MarketCampaignsOptions): UseMarketCa
           )
         : [];
 
-    console.log('singleTokenCampaigns', singleTokenCampaigns);
-
     // Combine both types of campaigns
     const allMarketCampaigns = [...directMarketCampaigns, ...singleTokenCampaigns];
     const activeCampaigns = allMarketCampaigns.filter((campaign) => campaign.isActive);

From a7ab5af13ed891a6fedd4e19a79cb2807a2bad08 Mon Sep 17 00:00:00 2001
From: antoncoding <antonassocareer@gmail.com>
Date: Tue, 13 Jan 2026 23:25:36 +0800
Subject: [PATCH 3/5] chore: line orders

---
 .../components/charts/rate-chart.tsx          | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/features/market-detail/components/charts/rate-chart.tsx b/src/features/market-detail/components/charts/rate-chart.tsx
index 965e9c17..6d7b748b 100644
--- a/src/features/market-detail/components/charts/rate-chart.tsx
+++ b/src/features/market-detail/components/charts/rate-chart.tsx
@@ -196,6 +196,16 @@ function RateChart({ marketId, chainId, market }: RateChartProps) {
                 {...chartLegendStyle}
                 {...legendHandlers}
               />
+              <Area
+                type="monotone"
+                dataKey="apyAtTarget"
+                name="Rate at Util Target"
+                stroke={CHART_COLORS.apyAtTarget.stroke}
+                strokeWidth={2}
+                fill="url(#rateChart-targetGradient)"
+                fillOpacity={1}
+                hide={!visibleLines.apyAtTarget}
+              />
               <Area
                 type="monotone"
                 dataKey="supplyApy"
@@ -216,16 +226,6 @@ function RateChart({ marketId, chainId, market }: RateChartProps) {
                 fillOpacity={1}
                 hide={!visibleLines.borrowApy}
               />
-              <Area
-                type="monotone"
-                dataKey="apyAtTarget"
-                name="Rate at Util Target"
-                stroke={CHART_COLORS.apyAtTarget.stroke}
-                strokeWidth={2}
-                fill="url(#rateChart-targetGradient)"
-                fillOpacity={1}
-                hide={!visibleLines.apyAtTarget}
-              />
             </AreaChart>
           </ResponsiveContainer>
         )}

From d4707810949168ae200aaeeecc2f0c4877e7a936 Mon Sep 17 00:00:00 2001
From: antoncoding <antonassocareer@gmail.com>
Date: Tue, 13 Jan 2026 23:26:55 +0800
Subject: [PATCH 4/5] chore: simplify

---
 .../market-detail/components/campaign-modal.tsx        | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/features/market-detail/components/campaign-modal.tsx b/src/features/market-detail/components/campaign-modal.tsx
index 4d16d4c3..a28399ed 100644
--- a/src/features/market-detail/components/campaign-modal.tsx
+++ b/src/features/market-detail/components/campaign-modal.tsx
@@ -8,11 +8,11 @@ import { Modal, ModalBody, ModalHeader } from '@/components/common/Modal';
 import { getMerklCampaignURL } from '@/utils/external';
 import type { SimplifiedCampaign, MerklCampaignType } from '@/utils/merklTypes';
 
-const CAMPAIGN_TYPE_CONFIG: Record<MerklCampaignType, { badge: string; actionType: string }> = {
-  MORPHOSUPPLY: { badge: 'Lender Rewards', actionType: 'lenders' },
-  MORPHOSUPPLY_SINGLETOKEN: { badge: 'Lender Rewards', actionType: 'lenders' },
-  MULTILENDBORROW: { badge: 'Lend/Borrow Rewards', actionType: 'users' },
-  MORPHOBORROW: { badge: 'Borrow Rewards', actionType: 'borrowers' },
+const CAMPAIGN_TYPE_CONFIG: Record<MerklCampaignType, { badge: string }> = {
+  MORPHOSUPPLY: { badge: 'Lender Rewards' },
+  MORPHOSUPPLY_SINGLETOKEN: { badge: 'Lender Rewards' },
+  MULTILENDBORROW: { badge: 'Lend/Borrow Rewards' },
+  MORPHOBORROW: { badge: 'Borrow Rewards' },
 };
 
 // Blacklisted campaign IDs - these will be filtered out

From 8c9058ae4ffa2f9cdfd94514eb4d942530993fc9 Mon Sep 17 00:00:00 2001
From: antoncoding <antonassocareer@gmail.com>
Date: Tue, 13 Jan 2026 23:35:45 +0800
Subject: [PATCH 5/5] chore: effective blacklist

---
 .../market-detail/components/campaign-modal.tsx  | 12 +-----------
 src/hooks/useMarketCampaigns.ts                  | 16 ++++++++++++++--
 2 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/features/market-detail/components/campaign-modal.tsx b/src/features/market-detail/components/campaign-modal.tsx
index a28399ed..64241c1b 100644
--- a/src/features/market-detail/components/campaign-modal.tsx
+++ b/src/features/market-detail/components/campaign-modal.tsx
@@ -15,13 +15,6 @@ const CAMPAIGN_TYPE_CONFIG: Record<MerklCampaignType, { badge: string }> = {
   MORPHOBORROW: { badge: 'Borrow Rewards' },
 };
 
-// Blacklisted campaign IDs - these will be filtered out
-const BLACKLISTED_CAMPAIGN_IDS: string[] = [
-  // Seems to be reporting bad APY, not singleton for all market for sure
-  // https://app.merkl.xyz/opportunities/base/MORPHOSUPPLY_SINGLETOKEN/0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913
-  '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913WHITELIST_PER_PROTOCOL',
-];
-
 type CampaignModalProps = {
   isOpen: boolean;
   onClose: () => void;
@@ -106,9 +99,6 @@ function CampaignRow({ campaign }: { campaign: SimplifiedCampaign }) {
 export function CampaignModal({ isOpen, onClose, campaigns }: CampaignModalProps) {
   if (!isOpen) return null;
 
-  // Filter out blacklisted campaigns
-  const filteredCampaigns = campaigns.filter((c) => !BLACKLISTED_CAMPAIGN_IDS.includes(c.campaignId));
-
   return (
     <Modal
       isOpen={isOpen}
@@ -126,7 +116,7 @@ export function CampaignModal({ isOpen, onClose, campaigns }: CampaignModalProps
         onClose={onClose}
       />
       <ModalBody className="space-y-4">
-        {filteredCampaigns.map((campaign) => (
+        {campaigns.map((campaign) => (
           <CampaignRow
             key={`${campaign.campaignId}-${campaign.marketId}`}
             campaign={campaign}
diff --git a/src/hooks/useMarketCampaigns.ts b/src/hooks/useMarketCampaigns.ts
index 9e00722b..114ad40a 100644
--- a/src/hooks/useMarketCampaigns.ts
+++ b/src/hooks/useMarketCampaigns.ts
@@ -2,6 +2,13 @@ import { useMemo } from 'react';
 import type { SimplifiedCampaign } from '@/utils/merklTypes';
 import { useMerklCampaignsQuery } from './queries/useMerklCampaignsQuery';
 
+// Blacklisted campaign IDs - these will be filtered out
+const BLACKLISTED_CAMPAIGN_IDS: string[] = [
+  // Seems to be reporting bad APY, not singleton for all market for sure
+  // https://app.merkl.xyz/opportunities/base/MORPHOSUPPLY_SINGLETOKEN/0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913
+  '0x4b5aa0f66eb6a63e3b761de8fbbcc8154d568086c1234ba58516f3263a79200a',
+];
+
 type UseMarketCampaignsReturn = {
   campaigns: SimplifiedCampaign[];
   activeCampaigns: SimplifiedCampaign[];
@@ -42,8 +49,13 @@ export function useMarketCampaigns(options: MarketCampaignsOptions): UseMarketCa
           )
         : [];
 
-    // Combine both types of campaigns
-    const allMarketCampaigns = [...directMarketCampaigns, ...singleTokenCampaigns];
+    // Combine both types of campaigns and filter out blacklisted ones
+    const allMarketCampaigns = [...directMarketCampaigns, ...singleTokenCampaigns].filter(
+      (campaign) => !BLACKLISTED_CAMPAIGN_IDS.includes(campaign.campaignId.toLowerCase()),
+    );
+
+    console.log(`[useMarketCampaigns] Active Campaigns for market ${normalizedMarketId.slice(0, 6)}`, allMarketCampaigns);
+
     const activeCampaigns = allMarketCampaigns.filter((campaign) => campaign.isActive);
 
     return {