First attempt at showing chainlink eth/usd and fast gas price feeds info

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,79 @@
+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";
+
+const ETH_FEED_DECIMALS = 8;
+
+const PriceBox: React.FC = () => {
+  const { provider } = useContext(RuntimeContext);
+  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]);
+
+  return (
+    <>
+      {latestPriceData && (
+        <div className="flex rounded-lg px-2 py-1 space-x-2 bg-gray-100 font-sans text-xs text-gray-800">
+          <span>
+            Eth: $
+            <span className="font-balance">
+              {ethers.utils.commify(
+                ethers.utils.formatUnits(
+                  latestPriceData.answer,
+                  ETH_FEED_DECIMALS
+                )
+              )}
+            </span>
+          </span>
+          {latestGasData && (
+            <>
+              <span>|</span>
+              <span className="text-gray-400">
+                <FontAwesomeIcon icon={faGasPump} size="1x" />
+                <span className="ml-1">
+                  {ethers.utils.formatUnits(latestGasData.answer, "gwei")} 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
+      <div className="flex items-baseline space-x-3">
-        className="flex"
+        <PriceBox />
-        onSubmit={handleSubmit}
+        <form
-        autoComplete="off"
+          className="flex"
-        spellCheck={false}
+          onSubmit={handleSubmit}
-      >
+          autoComplete="off"
-        <input
+          spellCheck={false}
-          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
+          <input
-        </button>
+            className="w-full border-t border-b border-l rounded-l focus:outline-none px-2 py-1 text-sm"
-      </form>
+            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>
   );
 };