Merge branch 'feature/chainlink-info' into develop

package-lock.json

@@ -8,6 +8,7 @@
       "version": "0.1.0",
       "license": "MIT",
       "dependencies": {
+        "@chainlink/contracts": "^0.2.1",
         "@craco/craco": "^6.2.0",
         "@fontsource/fira-code": "^4.5.0",
         "@fontsource/roboto": "^4.5.0",
@@ -1203,6 +1204,11 @@
       "version": "0.2.3",
       "license": "MIT"
     },
+    "node_modules/@chainlink/contracts": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/@chainlink/contracts/-/contracts-0.2.1.tgz",
+      "integrity": "sha512-mAQgPQKiqW3tLMlp31NgcnXpwG3lttgKU0izAqKiirJ9LH7rQ+O0oHIVR5Qp2yuqgmfbLsgfdLo4GcVC8IFz3Q=="
+    },
     "node_modules/@cnakazawa/watch": {
       "version": "1.0.4",
       "license": "Apache-2.0",
@@ -19913,6 +19919,11 @@
     "@bcoe/v8-coverage": {
       "version": "0.2.3"
     },
+    "@chainlink/contracts": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/@chainlink/contracts/-/contracts-0.2.1.tgz",
+      "integrity": "sha512-mAQgPQKiqW3tLMlp31NgcnXpwG3lttgKU0izAqKiirJ9LH7rQ+O0oHIVR5Qp2yuqgmfbLsgfdLo4GcVC8IFz3Q=="
+    },
     "@cnakazawa/watch": {
       "version": "1.0.4",
       "requires": {

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "license": "MIT",
   "dependencies": {
+    "@chainlink/contracts": "^0.2.1",
     "@craco/craco": "^6.2.0",
     "@fontsource/fira-code": "^4.5.0",
     "@fontsource/roboto": "^4.5.0",

src/PriceBox.tsx

@@ -0,0 +1,109 @@
+import React, { useState, useEffect, useMemo, useContext } from "react";
+import { ethers } from "ethers";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+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 &&
+      new ethers.Contract("eth-usd.data.eth", AggregatorV3Interface, provider),
+    [provider]
+  );
+  const gasFeed = useMemo(
+    () =>
+      provider &&
+      new ethers.Contract(
+        "fast-gas-gwei.data.eth",
+        AggregatorV3Interface,
+        provider
+      ),
+    [provider]
+  );
+
+  const [latestPriceData, setLatestPriceData] = useState<any>();
+  const [latestGasData, setLatestGasData] = useState<any>();
+  useEffect(() => {
+    if (!ethFeed || !gasFeed) {
+      return;
+    }
+
+    const readData = async () => {
+      const [priceData, gasData] = await Promise.all([
+        ethFeed.latestRoundData(),
+        await gasFeed.latestRoundData(),
+      ]);
+      setLatestPriceData(priceData);
+      setLatestGasData(gasData);
+    };
+    readData();
+  }, [ethFeed, gasFeed]);
+
+  const [latestPrice, latestPriceTimestamp] = useMemo(() => {
+    if (!latestPriceData) {
+      return [undefined, undefined];
+    }
+
+    const price = latestPriceData.answer.div(10 ** (ETH_FEED_DECIMALS - 2));
+    const formattedPrice = ethers.utils.commify(
+      ethers.utils.formatUnits(price, 2)
+    );
+
+    const timestamp = new Date(latestPriceData.updatedAt * 1000);
+    return [formattedPrice, timestamp];
+  }, [latestPriceData]);
+
+  const [latestGasPrice, latestGasPriceTimestamp] = useMemo(() => {
+    if (!latestGasData) {
+      return [undefined, undefined];
+    }
+
+    const formattedGas = formatValue(latestGasData.answer, 9);
+    const timestamp = new Date(latestGasData.updatedAt * 1000);
+    return [formattedGas, timestamp];
+  }, [latestGasData]);
+
+  return (
+    <>
+      {latestPriceData && (
+        <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
+            title={`ETH/USD last updated at: ${latestPriceTimestamp?.toString()}`}
+          >
+            Eth: $<span className="font-balance">{latestPrice}</span>
+          </span>
+          {latestGasData && (
+            <>
+              <span>|</span>
+              <span
+                className="text-gray-400"
+                title={`Fast gas price last updated at: ${latestGasPriceTimestamp?.toString()}`}
+              >
+                <FontAwesomeIcon icon={faGasPump} size="1x" />
+                <span className="ml-1">{latestGasPrice} Gwei</span>
+              </span>
+            </>
+          )}
+        </div>
+      )}
+    </>
+  );
+};
+
+export default React.memo(PriceBox);

src/Title.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useRef } from "react";
 import { Link, useHistory } from "react-router-dom";
 import useKeyboardShortcut from "use-keyboard-shortcut";
+import PriceBox from "./PriceBox";
 
 const Title: React.FC = () => {
   const [search, setSearch] = useState<string>();
@@ -41,27 +42,30 @@ const Title: React.FC = () => {
           <span>Otterscan</span>
         </div>
       </Link>
-      <form
-        className="flex"
-        onSubmit={handleSubmit}
-        autoComplete="off"
-        spellCheck={false}
-      >
-        <input
-          className="w-full border-t border-b border-l rounded-l focus:outline-none px-2 py-1 text-sm"
-          type="text"
-          size={60}
-          placeholder='Type "/" to search by address / txn hash / block number / ENS name'
-          onChange={handleChange}
-          ref={searchRef}
-        />
-        <button
-          className="rounded-r border-t border-b border-r bg-gray-100 hover:bg-gray-200 focus:outline-none px-2 py-1 text-sm text-gray-500"
-          type="submit"
+      <div className="flex items-baseline space-x-3">
+        <PriceBox />
+        <form
+          className="flex"
+          onSubmit={handleSubmit}
+          autoComplete="off"
+          spellCheck={false}
         >
-          Search
-        </button>
-      </form>
+          <input
+            className="w-full border-t border-b border-l rounded-l focus:outline-none px-2 py-1 text-sm"
+            type="text"
+            size={60}
+            placeholder='Type "/" to search by address / txn hash / block number / ENS name'
+            onChange={handleChange}
+            ref={searchRef}
+          />
+          <button
+            className="rounded-r border-t border-b border-r bg-gray-100 hover:bg-gray-200 focus:outline-none px-2 py-1 text-sm text-gray-500"
+            type="submit"
+          >
+            Search
+          </button>
+        </form>
+      </div>
     </div>
   );
 };

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"],