Building API3’s OEV Comparison Tool: Interactive Data Visualization Done Right
Visualizing blockchain data in a way that’s accessible and engaging is no easy task. API3’s Oracle Extractable Value (OEV) comparison tool needed to do just that—allow users to compare up to four protocols simultaneously on metrics like Total Liquidated Value, Potential OEV Lost, and Blockspace Auction Bribes. This tool had to be powerful for seasoned users, but intuitive enough for newcomers. Here’s how we brought it to life using Vue.js, GSAP, and Chart.js.
The Challenge
This wasn’t just a simple chart. We needed an interactive experience that gave users the flexibility to select metrics, visualize them side-by-side, and explore data smoothly across devices. The goal: a tool that felt as engaging as it was informative, without overwhelming users.
Core Architecture
At the heart of the OEV tool are three main components:
Pinia Store: A robust state management solution to handle protocol data and user interactions.
Custom Bar Chart: Built with html and css
Charts.js Line Chart: Built with Chart.js, giving users a clear, dynamic view of protocol metrics.
Protocol Selector: An interactive component that allows users to group and filter protocols by blockchain networks.
Building the OEV Interface Chart
The core of this tool is the OEVInterfaceChart, which dynamically compares metrics across selected protocols. Here’s how we approached it:
Dynamic Bar Generation
The chart needed bars with heights that adjust dynamically based on the highest value across selected metrics. This makes it easy for users to instantly grasp relative protocol performance.
const maxHeight = computed(() => {
const values = [
{
isShown: visibleBars.value.includes("totalSentToBuilderUSD"),
value: getMaxValue("totalSentToBuilderUSD"),
},
{
isShown: visibleBars.value.includes("totalProfitUSD"),
value: getMaxValue("totalProfitUSD"),
},
// ... other metrics
];
return Math.max(
...values.filter((value) => value.isShown).map((value) => value.value)
);
});Customizable Metric Display
To keep the tool adaptable, we included a flexible legend system that lets users toggle different metrics on and off. This gives users the freedom to visualize the data that matters most to them.
const bars = [
{
label: "Blockspace Auction Bribes",
value: "totalSentToBuilderUSD",
color: colors[2],
},
{
label: "Liquidator Profits",
value: "totalProfitUSD",
color: colors[3],
},
// ... other metrics
];Responsive Bar Heights
Each bar’s height is calculated dynamically, while ensuring that no bar dips below a minimum visibility threshold.
function barHeight(value) {
let minHeight = 5; // Minimum height for visibility
const maxHeightPixels = 350; // Maximum height in pixels
const scaledHeight = (value / maxHeight.value) * maxHeightPixels;
return Math.max(scaledHeight, minHeight);
}Optimizing for Mobile with Smooth Scrolling
On mobile, we needed to ensure users could easily scroll through multiple metrics. GSAP handled this effortlessly with smooth horizontal scrolling.
useGsap((gsap) => {
handleButton = (direction) => {
const carousel = barsList.value;
scrollPosition.value = carousel.clientWidth;
const currentScroll = carousel.scrollLeft;
const newScroll = direction > 0
? currentScroll + scrollPosition.value
: currentScroll - scrollPosition.value;
gsap.to(carousel, {
scrollTo: { x: newScroll }
});
};
});Styling for Clarity
To keep the chart clean and readable, we designed a styling system that ensured hierarchy and visual distinction across multiple bars and protocols.
.bar {
display: grid;
grid-template-columns: repeat(var(--grid-count), 1fr);
gap: var(--space-xs);
height: 100%;
align-items: end;
span {
position: relative;
background: linear-gradient(180deg, var(--color), transparent);
border: 1px solid;
border-image: linear-gradient(
180deg,
color-mix(in hsl, var(--color), white 35%),
color-mix(in hsl, var(--color), black 70%)
) 1;
}
}Managing State with Pinia
The OEV tool’s Pinia store was crucial for handling protocol data and user selections, allowing users to add or hide protocols and keeping everything in sync.
export const useOEVStore = defineStore("oev", function () {
const userSelectedProtocols = ref({
"dApp-1": "morphoAaveV2-1",
"dApp-2": "venusBsc-56",
"dApp-3": "morphoComp-1",
"dApp-4": "compoundV3Base-8453",
});
function toggleHide(protocol) {
if (!protocol.hide && protocols.value.filter((p) => !p.hide).length === 1) {
return;
}
protocol.hide = !protocol.hide;
checkHideCount(protocol);
}
});Dynamic Visualization with Chart.js
The chart needed to handle both logarithmic and linear scales while keeping transitions smooth between data updates. We extended Chart.js with custom plugins to handle zoom and responsive layouts.
const options = computed(() => {
return {
scales: {
y: {
type: isLogarithmic.value ? "logarithmic" : "linear",
alignToPixels: true,
ticks: {
callback: function (value) {
return formatNumber(value);
},
}
}
},
responsive: true,
maintainAspectRatio: true,
aspectRatio: ui.isMobile ? 0.9 : 1.75,
};
});Performance Optimizations
To make sure the tool remained fast and responsive, we implemented several optimizations:
Computed Properties: We used computed properties for heavy calculations to keep the app running smoothly.
Lazy Loading: Protocol data is loaded only when needed, so initial load times stay low.
Efficient DOM Updates: Vue’s virtual DOM helped ensure only essential updates were rendered.
Smart State Management: By structuring our state thoughtfully, we minimized unnecessary re-renders.
Key Takeaways
Building API3’s OEV tool wasn’t just about data visualization—it was about creating an engaging, responsive experience that lets users make sense of complex protocol data quickly and intuitively. Here’s what we learned:
State Management is Essential: Pinia helped keep everything from protocol selections to bar heights in sync.
Animation Matters: GSAP timelines allowed us to create smooth, coordinated animations that didn’t disrupt performance.
Designing for Mobile First: Thinking mobile-first made sure we delivered a responsive experience without sacrificing functionality on larger screens.
Performance-First Mindset: With a focus on lazy loading, smart state management, and efficient updates, we kept the tool fast and enjoyable to use.
Wrapping Up
API3’s OEV comparison tool shows what’s possible when Vue.js, GSAP, and Chart.js come together. This project helped make complex data more approachable, all while keeping the experience fast and visually engaging across devices. For anyone exploring blockchain protocol data, this tool turns complex insights into something anyone can interact with and understand.
