Merge branch 'feature/chainlink-info' into develop

This commit is contained in:
Willian Mitsuda 2021-07-13 19:23:55 -03:00
commit fb7d1f48df
5 changed files with 148 additions and 20 deletions

11
package-lock.json generated
View File

@ -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": {

View File

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

109
src/PriceBox.tsx Normal file
View File

@ -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);

View File

@ -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>
); );
}; };

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