Skip to content

feat: add API3 oracle feed support #408

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
antoncoding merged 4 commits into from
Feb 22, 2026
Merged

feat: add API3 oracle feed support #408

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9a093fa
feat: add API3 oracle feed support in UI
starksama Feb 21, 2026
a86d8e5
fix: add vendorIcon guard on API3 Market link image
starksama Feb 22, 2026
9761b38
fix: remove static decimals note from API3 tooltip
starksama Feb 22, 2026
b75bbe7
fix: remove API3 Market link from tooltip
starksama Feb 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
79 changes: 79 additions & 0 deletions src/features/markets/components/oracle/MarketOracle/API3FeedTooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
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 (
<div className="flex w-fit max-w-[22rem] flex-col gap-3">
{/* Header with icon and title */}
<div className="flex items-center gap-2">
{vendorIcon && (
<div className="flex-shrink-0">
<Image
src={vendorIcon}
alt="API3"
width={16}
height={16}
/>
</div>
)}
Comment thread
coderabbitai[bot] marked this conversation as resolved.
<div className="font-zen font-bold">API3 Data Feed</div>
</div>

{/* Feed pair name */}
<div className="flex items-center gap-2">
<div className="font-zen text-base font-semibold text-gray-800 dark:text-gray-200">
{baseAsset} / {quoteAsset}
</div>
</div>

{/* Description */}
{feedData?.description && (
<div className="border-t border-gray-200/30 pt-3 dark:border-gray-600/20">
<div className="font-zen text-xs text-gray-600 dark:text-gray-400">{feedData.description}</div>
</div>
)}

<FeedFreshnessSection feedFreshness={feedFreshness} />

{/* External Links */}
<div className="border-t border-gray-200/30 pt-3 dark:border-gray-600/20">
<div className="mb-2 font-zen text-sm font-medium text-gray-700 dark:text-gray-300">View on:</div>
<div className="flex items-center gap-2">
<Link
href={getExplorerURL(feed.address as Address, chainId)}
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Feb 22, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash

# Find SupportedNetworks definition
echo "=== SupportedNetworks type definition ==="
rg -n "type SupportedNetworks|enum SupportedNetworks" --type=ts -A 3

# Check getExplorerURL signature
echo "=== getExplorerURL function signature ==="
rg -n "getExplorerURL" --type=ts -B 2 -A 5 | head -50

# Check Address import and all uses in the file
echo "=== Address import and usage in API3FeedTooltip.tsx ==="
rg -n "Address" src/features/markets/components/oracle/MarketOracle/API3FeedTooltip.tsx

# Inspect the exact line 61 and context
echo "=== Context around line 61 ==="
sed -n '55,65p' src/features/markets/components/oracle/MarketOracle/API3FeedTooltip.tsx

# Check imports at the top of the file
echo "=== Imports in API3FeedTooltip.tsx ==="
head -20 src/features/markets/components/oracle/MarketOracle/API3FeedTooltip.tsx

Repository: antoncoding/monarch

Length of output: 13627

Drop the redundant as Address cast and fix the chainId type mismatch.

getExplorerURL expects (address: string, chain: SupportedNetworks), but chainId is number. The as Address cast on feed.address is unnecessary — it's already a string, matching the parameter type. Remove the cast and drop the unused Address import from viem. For the type mismatch, pass chainId as SupportedNetworks to getExplorerURL or update the component props to accept SupportedNetworks.

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@src/features/markets/components/oracle/MarketOracle/API3FeedTooltip.tsx` at
line 61, Remove the unnecessary type cast and fix the chainId type mismatch: in
the JSX where href is set with getExplorerURL(feed.address as Address, chainId)
drop the "as Address" cast (feed.address is already a string) and pass chainId
cast to the expected type (e.g. chainId as SupportedNetworks) or change the
component props to accept SupportedNetworks; also remove the now-unused Address
import from viem. Ensure you update the component prop type or the single call
site so getExplorerURL(address: string, chain: SupportedNetworks) receives
correct types.

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🏁 Script executed:

# Find and inspect SupportedNetworks type definition
rg "type SupportedNetworks|enum SupportedNetworks" --type=ts --type=tsx -A 10

Repository: antoncoding/monarch

Length of output: 90

🏁 Script executed:

# Find getExplorerURL function signature
rg "export.*getExplorerURL|function getExplorerURL" --type=ts --type=tsx -B 2 -A 5

Repository: antoncoding/monarch

Length of output: 90

🏁 Script executed:

# Check other calls to getExplorerURL to understand the pattern
rg "getExplorerURL" --type=ts --type=tsx -B 1 -A 1

Repository: antoncoding/monarch

Length of output: 90

🏁 Script executed:

# Find SupportedNetworks definition
rg "SupportedNetworks" -A 10 | head -50

Repository: antoncoding/monarch

Length of output: 3071

🏁 Script executed:

# Find getExplorerURL function
rg "getExplorerURL" -B 2 -A 8 | head -80

Repository: antoncoding/monarch

Length of output: 7972

🏁 Script executed:

# Find the networks file and get SupportedNetworks definition
fd "networks" -type f | grep -E "\.(ts|js)$"

Repository: antoncoding/monarch

Length of output: 233

🏁 Script executed:

# Check the networks file directly
cat src/utils/networks.ts | head -100

Repository: antoncoding/monarch

Length of output: 3237

Remove the redundant as Address cast; tighten chainId typing.

feed.address is already typed as string, so the as Address cast is unnecessary and violates the type narrowing guideline. Additionally, chainId is passed as a loose number to a SupportedNetworks parameter—while TypeScript permits this (numeric enums accept their underlying number values), it's safer to type chainId as SupportedNetworks at the component level to guarantee a valid network.

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@src/features/markets/components/oracle/MarketOracle/API3FeedTooltip.tsx` at
line 61, Remove the redundant cast on feed.address and tighten chainId typing:
delete the "as Address" cast where getExplorerURL(feed.address as Address,
chainId) is called and ensure the component prop (or variable) that supplies
chainId is typed as SupportedNetworks instead of plain number; update any
prop/interface for this component to use SupportedNetworks and adjust any
callers if needed so getExplorerURL(address, chainId) is called with
feed.address (string/Address) and a SupportedNetworks value.

target="_blank"
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"
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Feb 21, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🏁 Script executed:

# First, check the Tailwind version in the project
find . -name "package.json" -o -name "package-lock.json" | head -5

Repository: antoncoding/monarch

Length of output: 77

🏁 Script executed:

# Find and examine the API3FeedTooltip.tsx file
fd -t f "API3FeedTooltip.tsx"

Repository: antoncoding/monarch

Length of output: 134

🏁 Script executed:

# Find FeedEntry.tsx mentioned in the comment
fd -t f "FeedEntry.tsx"

Repository: antoncoding/monarch

Length of output: 128

🏁 Script executed:

# Search for all instances of bg-opacity in the codebase
rg "bg-opacity" -t tsx -t ts -t jsx -t js

Repository: antoncoding/monarch

Length of output: 90

🏁 Script executed:

# Check Tailwind version in package.json
cat package.json | grep -A 2 -B 2 "tailwind"

Repository: antoncoding/monarch

Length of output: 601

🏁 Script executed:

# Read API3FeedTooltip.tsx to see lines around 69 and 84
cat -n src/features/markets/components/oracle/MarketOracle/API3FeedTooltip.tsx | sed -n '65,90p'

Repository: antoncoding/monarch

Length of output: 1242

🏁 Script executed:

# Read FeedEntry.tsx to see line 191
cat -n src/features/markets/components/oracle/MarketOracle/FeedEntry.tsx | sed -n '185,195p'

Repository: antoncoding/monarch

Length of output: 621

🏁 Script executed:

# Search for bg-opacity usage
rg "bg-opacity"

Repository: antoncoding/monarch

Length of output: 3237

🏁 Script executed:

# Find Tailwind config
fd -t f "tailwind.config"

Repository: antoncoding/monarch

Length of output: 81

🏁 Script executed:

# Check Tailwind config for bg-hovered definition
cat tailwind.config.js

Repository: antoncoding/monarch

Length of output: 245

🏁 Script executed:

# Search for bg-hovered definition in CSS files
rg "bg-hovered" --type-list | head -20

Repository: antoncoding/monarch

Length of output: 452

🏁 Script executed:

# Search for CSS/style files that might define bg-hovered
fd -e css -e scss -e postcss

Repository: antoncoding/monarch

Length of output: 77

🏁 Script executed:

# Search for bg-hovered in all files to find its definition
rg "\.bg-hovered" -g "*.css" -g "*.scss" -g "*.postcss"

Repository: antoncoding/monarch

Length of output: 91

🏁 Script executed:

# Look for where bg-hovered might be defined as a class
rg "@apply.*bg-hovered|bg-hovered.*{|\.bg-hovered"

Repository: antoncoding/monarch

Length of output: 222

🏁 Script executed:

# Read global.css to see how bg-hovered is defined
cat app/global.css

Repository: antoncoding/monarch

Length of output: 12360

Remove hover:bg-opacity-80 — it has no effect in Tailwind v4.

The bg-opacity-* utilities were removed in Tailwind v4 (project uses v4.1.0). Since bg-hovered is a custom class using a CSS variable, the slash-syntax replacement (hover:bg-hovered/80) won't work. Fix this by either defining an opacity variant in CSS or refactoring to use rgba in the CSS variable definition.

Also applies to: 84-84

— also found in FeedEntry.tsx:191 and other tooltip components.

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@src/features/markets/components/oracle/MarketOracle/API3FeedTooltip.tsx` at
line 69, Remove the obsolete Tailwind v4 utility `hover:bg-opacity-80` from the
className in the MarketOracle component (API3FeedTooltip) and related tooltip
components (e.g., FeedEntry) and instead implement opacity via the custom
`bg-hovered` CSS: either (A) create a hover variant in your CSS that sets
background-color using the CSS variable plus an alpha (e.g., `:hover {
background-color: rgba(var(--bg-hovered-rgb), 0.8); }`) or (B) change the CSS
variable to hold an rgba value so `hover:bg-hovered` behaves as intended; update
the className strings (the one containing "bg-hovered ... hover:bg-opacity-80")
to remove `hover:bg-opacity-80` and ensure the new CSS hover rule targets the
same selector.

>
<Image
src={etherscanLogo}
alt="Etherscan"
width={12}
height={12}
className="rounded-sm"
/>
Explorer
</Link>
</div>
</div>
</div>
);
}
11 changes: 11 additions & 0 deletions src/features/markets/components/oracle/MarketOracle/FeedEntry.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down Expand Up @@ -132,6 +133,16 @@ export function FeedEntry({
/>
);

case PriceFeedVendors.API3:
return (
<API3FeedTooltip
feed={feed}
feedData={data}
chainId={chainId}
feedFreshness={freshness}
/>
);

case PriceFeedVendors.PythNetwork:
case PriceFeedVendors.Oval:
case PriceFeedVendors.Lido:
Expand Down
4 changes: 4 additions & 0 deletions src/imgs/oracles/api3.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions src/utils/oracle.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ export enum PriceFeedVendors {
Compound = 'Compound',
Lido = 'Lido',
Pendle = 'Pendle',
API3 = 'API3',
Unknown = 'Unknown',
}

Expand All @@ -63,6 +64,7 @@ export const OracleVendorIcons: Record<PriceFeedVendors, string> = {
[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]: '',
};

Expand All @@ -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;
Expand Down