improve component reusability and wrap up price feeds

packages/hardhat/contracts/AggregatorV3Consumer.sol

@@ -8,39 +8,34 @@ import "@chainlink/contracts/src/v0.8/interfaces/AggregatorV3Interface.sol";
  * @dev the price feed address passed to constructor during deployment determines the asset pair
  * @notice https://docs.chain.link/data-feeds/price-feeds/addresses?network=ethereum&page=1
  */
-contract PriceFeedConsumer {
-    // Declare state variable of type AggregatorV3Interface
-    AggregatorV3Interface internal immutable i_priceFeed;
-
-    // Instatiate the state varible using any given price feed address
-    constructor(address priceFeedAddress) {
-        i_priceFeed = AggregatorV3Interface(priceFeedAddress);
-    }
+contract AggregatorV3Consumer {
+	// Declare state variable of type AggregatorV3Interface
+	AggregatorV3Interface internal immutable i_priceFeed;
 
-    // Get the latest price from the price feed contract
-    function getLatestPrice() public view returns (int) {
-        (
-            /* uint80 roundID */,
-            int answer,
-            /*uint startedAt*/,
-            /*uint timeStamp*/,
-            /*uint80 answeredInRound*/
-        ) = i_priceFeed.latestRoundData();
-        return answer;
-    }
+	// Instatiate the state varible using any given price feed address
+	constructor(address priceFeedAddress) {
+		i_priceFeed = AggregatorV3Interface(priceFeedAddress);
+	}
 
-    // The number of decimals in the response
-    function getDecimals() public view returns (uint8) {
-        return i_priceFeed.decimals();
-    }
+	// Get the latest price from the price feed contract
+	function getLatestPrice() public view returns (int) {
+		(, /* uint80 roundID */ int answer, , , ) = /*uint startedAt*/ /*uint timeStamp*/ /*uint80 answeredInRound*/
+		i_priceFeed.latestRoundData();
+		return answer;
+	}
 
-    // The description of the aggregator i.e. "ETH / USD"
-    function getDescription() public view returns (string memory) {
-        return i_priceFeed.description();
-    }
+	// The number of decimals in the response
+	function getDecimals() public view returns (uint8) {
+		return i_priceFeed.decimals();
+	}
 
-    // The version of the aggregator
-    function getVersion() public view returns (uint256) {
-        return i_priceFeed.version();
-    }
-}
+	// The description of the aggregator i.e. "ETH / USD"
+	function getDescription() public view returns (string memory) {
+		return i_priceFeed.description();
+	}
+
+	// The version of the aggregator
+	function getVersion() public view returns (uint256) {
+		return i_priceFeed.version();
+	}
+}

packages/hardhat/deploy/01_AggregatorV3Consumer.ts

@@ -8,7 +8,7 @@ import { network } from "hardhat";
  *
  * @param hre HardhatRuntimeEnvironment object.
  */
-const deployPriceFeedConsumer: DeployFunction = async function (hre: HardhatRuntimeEnvironment) {
+const deployAggregatorV3Consumer: DeployFunction = async function (hre: HardhatRuntimeEnvironment) {
   const { deployer } = await hre.getNamedAccounts();
   const { deploy, log } = hre.deployments;
   const { ethers } = hre;
@@ -28,7 +28,7 @@ const deployPriceFeedConsumer: DeployFunction = async function (hre: HardhatRunt
   }
 
   const args = [priceFeedAddress];
-  await deploy("PriceFeedConsumer", {
+  await deploy("AggregatorV3Consumer", {
     from: deployer,
     args: args,
     log: true,
@@ -38,6 +38,6 @@ const deployPriceFeedConsumer: DeployFunction = async function (hre: HardhatRunt
   // * HOW TO VERIFY : https://docs.scaffoldeth.io/deploying/deploy-smart-contracts#4-verify-your-smart-contract
 };
 
-export default deployPriceFeedConsumer;
+export default deployAggregatorV3Consumer;
 
-deployPriceFeedConsumer.tags = ["aggregator", "all"];
+deployAggregatorV3Consumer.tags = ["aggregator", "all"];

packages/nextjs/components/common/ExternalLink.tsx

@@ -0,0 +1,18 @@
+import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/outline";
+
+interface ExternalLinkProps {
+  href: string;
+}
+
+export const ExternalLink: React.FC<ExternalLinkProps> = ({ href }) => {
+  return (
+    <a
+      href={href}
+      className="capitalize text-primary hover:underline btn btn-sm bg-accent px-1 rounded-lg hover:bg-accent-focus hover:text-white"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <ArrowTopRightOnSquareIcon className="h-4 w-5 inline" />
+    </a>
+  );
+};

packages/nextjs/components/common/InformationSection.tsx

@@ -0,0 +1,40 @@
+import { ReactNode } from "react";
+
+interface InformationSectionProps {
+  summary: ReactNode;
+  details: ReactNode[];
+  gettingStarted: ReactNode[];
+}
+
+export const InformationSection: React.FC<InformationSectionProps> = ({ summary, details, gettingStarted }) => {
+  return (
+    <section>
+      <div className="mb-10">
+        <h3 className="text-3xl font-bold">Summary</h3>
+        <p className="text-xl">{summary}</p>
+      </div>
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-14">
+        <div>
+          <h3 className="text-3xl font-bold">Getting Started</h3>
+          <ol className="text-xl list-decimal list-inside">
+            {gettingStarted.map((step, index) => (
+              <li key={index} className="mb-1">
+                {step}
+              </li>
+            ))}
+          </ol>
+        </div>
+        <div>
+          <h3 className="text-3xl font-bold">Details</h3>
+          <ul className="text-xl list-disc list-inside">
+            {details.map((detail, index) => (
+              <li key={index} className="mb-1 text-xl">
+                {detail}
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </section>
+  );
+};

packages/nextjs/components/common/InlineCode.tsx

@@ -0,0 +1,7 @@
+type Props = {
+  text: string;
+};
+
+export const InlineCode: React.FC<Props> = ({ text }) => {
+  return <code className="bg-base-100 text-neutral-100 border border-base-300 py-0.5 px-1.5 rounded-md">{text}</code>;
+};

packages/nextjs/components/common/index.tsx

@@ -0,0 +1,3 @@
+export * from "./ExternalLink";
+export * from "./InlineCode";
+export * from "./InformationSection";

packages/nextjs/components/price-feeds/AggregatorV3Consumer.tsx

@@ -1,4 +1,5 @@
 import { formatUnits } from "viem";
+import { InformationCircleIcon } from "@heroicons/react/24/outline";
 import { useScaffoldContractRead } from "~~/hooks/scaffold-eth/useScaffoldContractRead";
 
 export const AggregatorV3Consumer = () => {
@@ -23,14 +24,21 @@ export const AggregatorV3Consumer = () => {
     { title: "getDecimals()", value: decimals?.toString(), type: "uint8" },
     {
       title: "formatUnits(price, decimals)",
-      value: latestPrice && decimals ? formatUnits(latestPrice, decimals) : "N/A",
+      value: latestPrice && decimals ? "$" + parseFloat(formatUnits(latestPrice, decimals)).toFixed(2) : "N/A",
       type: "string",
     },
   ];
 
   return (
     <div className="bg-base-100 rounded-xl p-10 shadow-lg">
-      <h3 className="text-2xl md:text-3xl text-center mb-10 font-bold">AggregatorV3Consumer</h3>
+      <div className="flex justify-center items-center mb-10 gap-2">
+        <h3 className="text-2xl md:text-3xl text-center font-bold">AggregatorV3Consumer</h3>
+        <div className="tooltip tooltip-accent" data-tip={`check out the "debug contracts" tab!`}>
+          <button>
+            <InformationCircleIcon className="h-7 w-7" />
+          </button>
+        </div>
+      </div>
 
       {!latestPrice || !decimals || !description ? (
         <p>Loading...</p>
@@ -48,16 +56,13 @@ export const AggregatorV3Consumer = () => {
 export function StatDisplay({
   title = "N/A",
   value = "N/A",
-  type = "N/A",
 }: {
   title: string | undefined;
   value: string | undefined;
-  type: string | undefined;
 }) {
   return (
     <div className="stats bg-base-200 shadow-lg">
       <div className="stat">
-        <div className="stat-title">{type}</div>
         <div className="stat-value">{value}</div>
         <div className="stat-title">{title}</div>
       </div>

packages/nextjs/components/price-feeds/FeedRegistry.tsx

@@ -2,33 +2,36 @@ import { useState } from "react";
 import { StatDisplay } from "./AggregatorV3Consumer";
 import { formatUnits } from "viem";
 import { useContractRead } from "wagmi";
-import Denominations from "~~/utils/contract-helpers/Denominations";
-import FeedRegistry from "~~/utils/contract-helpers/FeedRegistry";
+import { InformationCircleIcon } from "@heroicons/react/24/outline";
+import FeedRegistry from "~~/utils/external-contracts/FeedRegistry";
 
 /**
- * @dev figure out how to interact with mainnet
- * even tho we are on sepolia
+ * @dev  FeedRegistry contract is only available on mainnet
  */
-
-const { baseOptions, quoteOptions } = Denominations;
-
 export const FeedRegistryDisplay = () => {
-  const [base, setBase] = useState(baseOptions.BTC);
-  const [quote, setQuote] = useState(quoteOptions.USD);
+  const [base, setBase] = useState(BASE_OPTIONS.BTC);
 
   const { data: description } = useContractRead({
     address: FeedRegistry.address,
     abi: FeedRegistry.abi,
     functionName: "description",
-    args: [base, quote],
+    args: [base, QUOTE],
     chainId: 1, // force request on mainnet
   });
 
   const { data: roundData } = useContractRead({
     address: FeedRegistry.address,
     abi: FeedRegistry.abi,
     functionName: "latestRoundData",
-    args: [base, quote],
+    args: [base, QUOTE],
+    chainId: 1, // force request on mainnet
+  });
+
+  const { data: decimals } = useContractRead({
+    address: FeedRegistry.address,
+    abi: FeedRegistry.abi,
+    functionName: "decimals",
+    args: [base, QUOTE],
     chainId: 1, // force request on mainnet
   });
 
@@ -41,52 +44,67 @@ export const FeedRegistryDisplay = () => {
     console.error("Unexpected data format");
   }
 
+  const items = [
+    { title: "description()", value: description?.toString(), type: "string" },
+    { title: "latestRoundData().answer", value: price?.toString(), type: "int" },
+    { title: "decimals()", value: decimals?.toString(), type: "uint8" },
+    {
+      title: "formatUnits(price, decimals)",
+      value: price && decimals ? "$" + parseFloat(formatUnits(price, Number(decimals))).toFixed(2) : "N/A",
+      type: "string",
+    },
+  ];
+
   return (
     <div className="bg-base-100 rounded-xl p-10 shadow-lg">
-      <h3 className="text-2xl md:text-3xl text-center mb-6 font-bold">FeedRegistry</h3>
+      <div className="flex justify-center items-center mb-10 gap-2">
+        <h3 className="text-2xl md:text-3xl text-center font-bold">FeedRegistry</h3>
+        <div className="tooltip tooltip-accent" data-tip={`only available on ethereum mainnet`}>
+          <button>
+            <InformationCircleIcon className="h-7 w-7" />
+          </button>
+        </div>
+      </div>
 
-      {!price || !description ? (
+      {!price || !description || !decimals ? (
         <p>loading...</p>
       ) : (
-        <div className="mb-5 flex gap-4 flex-wrap">
-          <StatDisplay title="description()" value={"ETH"} type="string" />
-          <StatDisplay title="latestRoundData().answer" value={price?.toString()} type="int256" />
+        <div className="mb-8 flex flex-wrap gap-4">
+          {items.map(item => (
+            <StatDisplay key={item.title} {...item} />
+          ))}
         </div>
       )}
 
-      <div className="mb-5">
-        <div>
-          <label className="text-xl ml-4">Base Asset</label>
+      <div className="flex items-center justify-end">
+        <div className="mr-4">
+          <label className="text-xl">Base Asset</label>
         </div>
-        <select
-          className="select select-bordered w-full text-center bg-base-200"
-          value={base}
-          onChange={e => setBase(e.target.value)}
-        >
-          {Object.entries(baseOptions).map(([key, value]) => (
-            <option key={key} value={value}>
-              {key}
-            </option>
-          ))}
-        </select>
-      </div>
-
-      <div>
         <div>
-          <label className="text-xl ml-4">Quote Asset</label>
+          <select
+            className="select select-bordered w-full text-center bg-base-200 text-2xl"
+            value={base}
+            onChange={e => setBase(e.target.value)}
+          >
+            {Object.entries(BASE_OPTIONS).map(([key, value]) => (
+              <option key={key} value={value} className="font-bold">
+                {key}
+              </option>
+            ))}
+          </select>
         </div>
-        <select
-          value={quote}
-          className="select select-bordered w-full text-center bg-base-200"
-          onChange={e => setQuote(e.target.value)}
-        >
-          {Object.entries(quoteOptions).map(([key, value]) => (
-            <option key={key} value={value}>
-              {key}
-            </option>
-          ))}
-        </select>
       </div>
     </div>
   );
 };
+
+const BASE_OPTIONS = {
+  BTC: "0xbBbBBBBbbBBBbbbBbbBbbbbBBbBbbbbBbBbbBBbB",
+  ETH: "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE",
+  LINK: "0x514910771AF9Ca656af840dff83E8264EcF986CA",
+  AAVE: "0x7Fc66500c84A76Ad7e9c93437bFc5Ac33E2DDaE9",
+  YFI: "0x0bc529c00c6401aef6d220be8c6ea1667f6ad93e",
+};
+
+// address for USD
+const QUOTE = "0x0000000000000000000000000000000000000348";

packages/nextjs/pages/index.tsx

@@ -23,7 +23,7 @@ const Home: NextPage = () => {
           {PRODUCTS.map(product => (
             <div key={product.name} className="bg-base-100 h-96 rounded-xl p-14">
               <h3 className="text-3xl text-center mb-8">{product.name}</h3>
-              <p className="text-xl">{product.description}</p>
+              <p className="text-x l">{product.description}</p>
             </div>
           ))}
         </div>