diff --git a/src/PriceBox.tsx b/src/PriceBox.tsx index 1598276..af5e461 100644 --- a/src/PriceBox.tsx +++ b/src/PriceBox.tsx @@ -5,11 +5,17 @@ import { faGasPump } from "@fortawesome/free-solid-svg-icons"; import AggregatorV3Interface from "@chainlink/contracts/abi/v0.8/AggregatorV3Interface.json"; import { RuntimeContext } from "./useRuntime"; import { formatValue } from "./components/formatter"; +import { useLatestBlock } from "./useLatestBlock"; const ETH_FEED_DECIMALS = 8; const PriceBox: React.FC = () => { const { provider } = useContext(RuntimeContext); + const latestBlock = useLatestBlock(provider); + + const maybeOutdated: boolean = + latestBlock !== undefined && + Date.now() / 1000 - latestBlock.timestamp > 3600; const ethFeed = useMemo( () => provider && @@ -72,7 +78,11 @@ const PriceBox: React.FC = () => { return ( <> {latestPriceData && ( -
+
diff --git a/tailwind.config.js b/tailwind.config.js index 6db5164..3f72cce 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,3 +1,5 @@ +const colors = require("tailwindcss/colors"); + module.exports = { purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"], darkMode: false, // or 'media' or 'class' @@ -6,6 +8,7 @@ module.exports = { colors: { "link-blue": "#3498db", "link-blue-hover": "#0468ab", + orange: colors.orange, }, fontFamily: { sans: ["Roboto"],