From 9a093fadde49a555b160e75fedc5de15b3290cdc Mon Sep 17 00:00:00 2001 From: Stark Sama Date: Sat, 21 Feb 2026 17:22:50 +0000 Subject: [PATCH 1/4] feat: add API3 oracle feed support in UI - Add API3 to PriceFeedVendors enum with icon mapping - Add API3FeedTooltip component with feed details and API3 Market link - Route API3 feeds to dedicated tooltip in FeedEntry.tsx - Add official API3 logo SVG Closes #404 Co-Authored-By: Claude Opus 4.6 --- .../oracle/MarketOracle/API3FeedTooltip.tsx | 99 +++++++++++++++++++ .../oracle/MarketOracle/FeedEntry.tsx | 11 +++ src/imgs/oracles/api3.svg | 4 + src/utils/oracle.ts | 3 + 4 files changed, 117 insertions(+) create mode 100644 src/features/markets/components/oracle/MarketOracle/API3FeedTooltip.tsx create mode 100644 src/imgs/oracles/api3.svg diff --git a/src/features/markets/components/oracle/MarketOracle/API3FeedTooltip.tsx b/src/features/markets/components/oracle/MarketOracle/API3FeedTooltip.tsx new file mode 100644 index 00000000..e2a6305c --- /dev/null +++ b/src/features/markets/components/oracle/MarketOracle/API3FeedTooltip.tsx @@ -0,0 +1,99 @@ +import Image from 'next/image'; +import Link from 'next/link'; +import type { Address } from 'viem'; +import etherscanLogo from '@/imgs/etherscan.png'; +import { getExplorerURL } from '@/utils/external'; +import { OracleVendorIcons, PriceFeedVendors, type FeedData, type FeedFreshnessStatus } from '@/utils/oracle'; +import type { OracleFeed } from '@/utils/types'; +import { FeedFreshnessSection } from './FeedFreshnessSection'; + +type API3FeedTooltipProps = { + feed: OracleFeed; + feedData?: FeedData | null; + chainId: number; + feedFreshness?: FeedFreshnessStatus; +}; + +export function API3FeedTooltip({ feed, feedData, chainId, feedFreshness }: API3FeedTooltipProps) { + const baseAsset = feed.pair?.[0] ?? feedData?.pair[0] ?? 'Unknown'; + const quoteAsset = feed.pair?.[1] ?? feedData?.pair[1] ?? 'Unknown'; + + const vendorIcon = OracleVendorIcons[PriceFeedVendors.API3]; + + return ( +
+ {/* Header with icon and title */} +
+ {vendorIcon && ( +
+ API3 +
+ )} +
API3 Data Feed
+
+ + {/* Feed pair name */} +
+
+ {baseAsset} / {quoteAsset} +
+
+ + {/* Description */} + {feedData?.description && ( +
+
{feedData.description}
+
+ )} + + {/* API3 decimals note */} +
+
All API3 feeds use 18 decimals
+
+ + + + {/* External Links */} +
+
View on:
+
+ + Etherscan + Explorer + + + API3 + API3 Market + +
+
+
+ ); +} diff --git a/src/features/markets/components/oracle/MarketOracle/FeedEntry.tsx b/src/features/markets/components/oracle/MarketOracle/FeedEntry.tsx index f06549ca..27f0d6c1 100644 --- a/src/features/markets/components/oracle/MarketOracle/FeedEntry.tsx +++ b/src/features/markets/components/oracle/MarketOracle/FeedEntry.tsx @@ -26,6 +26,7 @@ import { CompoundFeedTooltip } from './CompoundFeedTooltip'; import { GeneralFeedTooltip } from './GeneralFeedTooltip'; import { PendleFeedTooltip } from './PendleFeedTooltip'; import { RedstoneFeedTooltip } from './RedstoneFeedTooltip'; +import { API3FeedTooltip } from './API3FeedTooltip'; import { UnknownFeedTooltip } from './UnknownFeedTooltip'; type FeedEntryProps = { @@ -132,6 +133,16 @@ export function FeedEntry({ /> ); + case PriceFeedVendors.API3: + return ( + + ); + case PriceFeedVendors.PythNetwork: case PriceFeedVendors.Oval: case PriceFeedVendors.Lido: diff --git a/src/imgs/oracles/api3.svg b/src/imgs/oracles/api3.svg new file mode 100644 index 00000000..bfdfe99f --- /dev/null +++ b/src/imgs/oracles/api3.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/utils/oracle.ts b/src/utils/oracle.ts index 7079a4be..c9e8a86f 100644 --- a/src/utils/oracle.ts +++ b/src/utils/oracle.ts @@ -52,6 +52,7 @@ export enum PriceFeedVendors { Compound = 'Compound', Lido = 'Lido', Pendle = 'Pendle', + API3 = 'API3', Unknown = 'Unknown', } @@ -63,6 +64,7 @@ export const OracleVendorIcons: Record = { [PriceFeedVendors.Compound]: require('../imgs/oracles/compound.webp') as string, [PriceFeedVendors.Lido]: require('../imgs/oracles/lido.png') as string, [PriceFeedVendors.Pendle]: require('../imgs/oracles/pendle.png') as string, + [PriceFeedVendors.API3]: require('../imgs/oracles/api3.svg') as string, [PriceFeedVendors.Unknown]: '', }; @@ -83,6 +85,7 @@ export function mapProviderToVendor(provider: OracleFeedProvider): PriceFeedVend lido: PriceFeedVendors.Lido, oval: PriceFeedVendors.Oval, pyth: PriceFeedVendors.PythNetwork, + api3: PriceFeedVendors.API3, }; return mapping[normalizedProvider] ?? PriceFeedVendors.Unknown; From a86d8e5e8414319f733166321e01fc0cbaf0ffe2 Mon Sep 17 00:00:00 2001 From: Stark Sama Date: Sun, 22 Feb 2026 03:57:39 +0000 Subject: [PATCH 2/4] fix: add vendorIcon guard on API3 Market link image Address CodeRabbit review: wrap the API3 Market link icon in a vendorIcon truthy guard, consistent with the header icon pattern. Co-Authored-By: Claude Opus 4.6 --- .../oracle/MarketOracle/API3FeedTooltip.tsx | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/src/features/markets/components/oracle/MarketOracle/API3FeedTooltip.tsx b/src/features/markets/components/oracle/MarketOracle/API3FeedTooltip.tsx index e2a6305c..a3b8919d 100644 --- a/src/features/markets/components/oracle/MarketOracle/API3FeedTooltip.tsx +++ b/src/features/markets/components/oracle/MarketOracle/API3FeedTooltip.tsx @@ -83,13 +83,15 @@ export function API3FeedTooltip({ feed, feedData, chainId, feedFreshness }: API3 rel="noopener noreferrer" className="bg-hovered flex items-center gap-1 rounded-sm px-3 py-2 text-xs font-medium text-primary no-underline transition-all duration-200 hover:bg-opacity-80" > - API3 + {vendorIcon && ( + API3 + )} API3 Market From 9761b38f6ff7424c98be8b1b89f2cdd37fbf91c0 Mon Sep 17 00:00:00 2001 From: Stark Sama Date: Sun, 22 Feb 2026 04:05:44 +0000 Subject: [PATCH 3/4] fix: remove static decimals note from API3 tooltip Co-Authored-By: Claude Opus 4.6 --- .../components/oracle/MarketOracle/API3FeedTooltip.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/features/markets/components/oracle/MarketOracle/API3FeedTooltip.tsx b/src/features/markets/components/oracle/MarketOracle/API3FeedTooltip.tsx index a3b8919d..142c7156 100644 --- a/src/features/markets/components/oracle/MarketOracle/API3FeedTooltip.tsx +++ b/src/features/markets/components/oracle/MarketOracle/API3FeedTooltip.tsx @@ -51,11 +51,6 @@ export function API3FeedTooltip({ feed, feedData, chainId, feedFreshness }: API3 )} - {/* API3 decimals note */} -
-
All API3 feeds use 18 decimals
-
- {/* External Links */} From b75bbe774ddacd815bff683ae302f36b54e3fe7e Mon Sep 17 00:00:00 2001 From: Stark Sama Date: Sun, 22 Feb 2026 07:29:23 +0000 Subject: [PATCH 4/4] fix: remove API3 Market link from tooltip The market.api3.org page doesn't show useful feed-specific info. Keep only the Explorer link. Co-Authored-By: Claude Opus 4.6 --- .../oracle/MarketOracle/API3FeedTooltip.tsx | 17 ----------------- 1 file changed, 17 deletions(-) diff --git a/src/features/markets/components/oracle/MarketOracle/API3FeedTooltip.tsx b/src/features/markets/components/oracle/MarketOracle/API3FeedTooltip.tsx index 142c7156..2c65d1b1 100644 --- a/src/features/markets/components/oracle/MarketOracle/API3FeedTooltip.tsx +++ b/src/features/markets/components/oracle/MarketOracle/API3FeedTooltip.tsx @@ -72,23 +72,6 @@ export function API3FeedTooltip({ feed, feedData, chainId, feedFreshness }: API3 /> Explorer - - {vendorIcon && ( - API3 - )} - API3 Market -