Merge branch 'feature/chainlink-info' into develop
This commit is contained in:
commit
fb7d1f48df
|
@ -8,6 +8,7 @@
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@chainlink/contracts": "^0.2.1",
|
||||||
"@craco/craco": "^6.2.0",
|
"@craco/craco": "^6.2.0",
|
||||||
"@fontsource/fira-code": "^4.5.0",
|
"@fontsource/fira-code": "^4.5.0",
|
||||||
"@fontsource/roboto": "^4.5.0",
|
"@fontsource/roboto": "^4.5.0",
|
||||||
|
@ -1203,6 +1204,11 @@
|
||||||
"version": "0.2.3",
|
"version": "0.2.3",
|
||||||
"license": "MIT"
|
"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": {
|
"node_modules/@cnakazawa/watch": {
|
||||||
"version": "1.0.4",
|
"version": "1.0.4",
|
||||||
"license": "Apache-2.0",
|
"license": "Apache-2.0",
|
||||||
|
@ -19913,6 +19919,11 @@
|
||||||
"@bcoe/v8-coverage": {
|
"@bcoe/v8-coverage": {
|
||||||
"version": "0.2.3"
|
"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": {
|
"@cnakazawa/watch": {
|
||||||
"version": "1.0.4",
|
"version": "1.0.4",
|
||||||
"requires": {
|
"requires": {
|
||||||
|
|
|
@ -4,6 +4,7 @@
|
||||||
"private": true,
|
"private": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@chainlink/contracts": "^0.2.1",
|
||||||
"@craco/craco": "^6.2.0",
|
"@craco/craco": "^6.2.0",
|
||||||
"@fontsource/fira-code": "^4.5.0",
|
"@fontsource/fira-code": "^4.5.0",
|
||||||
"@fontsource/roboto": "^4.5.0",
|
"@fontsource/roboto": "^4.5.0",
|
||||||
|
|
|
@ -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);
|
|
@ -1,6 +1,7 @@
|
||||||
import React, { useState, useRef } from "react";
|
import React, { useState, useRef } from "react";
|
||||||
import { Link, useHistory } from "react-router-dom";
|
import { Link, useHistory } from "react-router-dom";
|
||||||
import useKeyboardShortcut from "use-keyboard-shortcut";
|
import useKeyboardShortcut from "use-keyboard-shortcut";
|
||||||
|
import PriceBox from "./PriceBox";
|
||||||
|
|
||||||
const Title: React.FC = () => {
|
const Title: React.FC = () => {
|
||||||
const [search, setSearch] = useState<string>();
|
const [search, setSearch] = useState<string>();
|
||||||
|
@ -41,27 +42,30 @@ const Title: React.FC = () => {
|
||||||
<span>Otterscan</span>
|
<span>Otterscan</span>
|
||||||
</div>
|
</div>
|
||||||
</Link>
|
</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>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -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"],
|
||||||
|
|
Loading…
Reference in New Issue