Signal possibly outdated feed info based on the tip of the chain

This commit is contained in:
Willian Mitsuda 2021-07-13 19:23:39 -03:00
parent d2555f14cb
commit 2c650f06f7
2 changed files with 14 additions and 1 deletions

View File

@ -5,11 +5,17 @@ import { faGasPump } from "@fortawesome/free-solid-svg-icons";
import AggregatorV3Interface from "@chainlink/contracts/abi/v0.8/AggregatorV3Interface.json"; import AggregatorV3Interface from "@chainlink/contracts/abi/v0.8/AggregatorV3Interface.json";
import { RuntimeContext } from "./useRuntime"; import { RuntimeContext } from "./useRuntime";
import { formatValue } from "./components/formatter"; import { formatValue } from "./components/formatter";
import { useLatestBlock } from "./useLatestBlock";
const ETH_FEED_DECIMALS = 8; const ETH_FEED_DECIMALS = 8;
const PriceBox: React.FC = () => { const PriceBox: React.FC = () => {
const { provider } = useContext(RuntimeContext); const { provider } = useContext(RuntimeContext);
const latestBlock = useLatestBlock(provider);
const maybeOutdated: boolean =
latestBlock !== undefined &&
Date.now() / 1000 - latestBlock.timestamp > 3600;
const ethFeed = useMemo( const ethFeed = useMemo(
() => () =>
provider && provider &&
@ -72,7 +78,11 @@ const PriceBox: React.FC = () => {
return ( return (
<> <>
{latestPriceData && ( {latestPriceData && (
<div className="flex rounded-lg px-2 py-1 space-x-2 bg-gray-100 font-sans text-xs text-gray-800"> <div
className={`flex rounded-lg px-2 py-1 space-x-2 ${
maybeOutdated ? "bg-orange-200" : "bg-gray-100"
} font-sans text-xs text-gray-800`}
>
<span <span
title={`ETH/USD last updated at: ${latestPriceTimestamp?.toString()}`} title={`ETH/USD last updated at: ${latestPriceTimestamp?.toString()}`}
> >

View File

@ -1,3 +1,5 @@
const colors = require("tailwindcss/colors");
module.exports = { module.exports = {
purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"], purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
darkMode: false, // or 'media' or 'class' darkMode: false, // or 'media' or 'class'
@ -6,6 +8,7 @@ module.exports = {
colors: { colors: {
"link-blue": "#3498db", "link-blue": "#3498db",
"link-blue-hover": "#0468ab", "link-blue-hover": "#0468ab",
orange: colors.orange,
}, },
fontFamily: { fontFamily: {
sans: ["Roboto"], sans: ["Roboto"],