rough draft for feedregistry

MattPereira · Oct 12, 2023 · 1d24929 · 1d24929
1 parent 26aea23
commit 1d24929
Show file tree

Hide file tree

Showing 6 changed files with 1,070 additions and 8 deletions.
diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx
@@ -95,10 +95,10 @@ export const Header = () => {
           <div className="flex relative w-10 h-10">
             <Image alt="SE2 logo" className="cursor-pointer" fill src="/logo.svg" />
           </div>
-          {/* <div className="flex flex-col">
+          <div className="flex flex-col">
             <span className="font-bold leading-tight">Scaffold-ETH</span>
             <span className="text-xs">Ethereum dev stack</span>
-          </div> */}
+          </div>
         </Link>
         <ul className="hidden lg:flex lg:flex-nowrap menu menu-horizontal px-1 gap-2">{navLinks}</ul>
       </div>

diff --git a/packages/nextjs/components/price-feeds/AggregatorV3Consumer.tsx b/packages/nextjs/components/price-feeds/AggregatorV3Consumer.tsx
@@ -29,7 +29,7 @@ export const AggregatorV3Consumer = () => {
   ];
 
   return (
-    <div className="bg-base-100 rounded-xl p-8 shadow-lg">
+    <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>
 
       {!latestPrice || !decimals || !description ? (
@@ -45,7 +45,7 @@ export const AggregatorV3Consumer = () => {
   );
 };
 
-function StatDisplay({
+export function StatDisplay({
   title = "N/A",
   value = "N/A",
   type = "N/A",

diff --git a/packages/nextjs/components/price-feeds/FeedRegistry.tsx b/packages/nextjs/components/price-feeds/FeedRegistry.tsx
@@ -0,0 +1,92 @@
+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";
+
+/**
+ * @dev figure out how to interact with mainnet
+ * even tho we are on sepolia
+ */
+
+const { baseOptions, quoteOptions } = Denominations;
+
+export const FeedRegistryDisplay = () => {
+  const [base, setBase] = useState(baseOptions.BTC);
+  const [quote, setQuote] = useState(quoteOptions.USD);
+
+  const { data: description } = useContractRead({
+    address: FeedRegistry.address,
+    abi: FeedRegistry.abi,
+    functionName: "description",
+    args: [base, quote],
+    chainId: 1, // force request on mainnet
+  });
+
+  const { data: roundData } = useContractRead({
+    address: FeedRegistry.address,
+    abi: FeedRegistry.abi,
+    functionName: "latestRoundData",
+    args: [base, quote],
+    chainId: 1, // force request on mainnet
+  });
+
+  let price;
+  // handle typescript rage
+  if (Array.isArray(roundData) && typeof roundData[1] === "bigint") {
+    price = roundData[1];
+    console.log("$" + formatUnits(price, 8));
+  } else {
+    console.error("Unexpected data format");
+  }
+
+  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>
+
+      {!price || !description ? (
+        <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>
+      )}
+
+      <div className="mb-5">
+        <div>
+          <label className="text-xl ml-4">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>
+        </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>
+  );
+};
diff --git a/packages/nextjs/pages/price-feeds.tsx b/packages/nextjs/pages/price-feeds.tsx
@@ -2,6 +2,7 @@ import type { NextPage } from "next";
 import { ExternalLink } from "~~/components/ExternalLink";
 import { MetaHeader } from "~~/components/MetaHeader";
 import { AggregatorV3Consumer } from "~~/components/price-feeds/AggregatorV3Consumer";
+import { FeedRegistryDisplay } from "~~/components/price-feeds/FeedRegistry";
 import { getTargetNetwork } from "~~/utils/scaffold-eth";
 
 /**
@@ -25,11 +26,9 @@ const PriceFeeds: NextPage = () => {
       <div className="container mx-auto py-14 px-5">
         <h1 className="text-center text-5xl font-bold mb-14">📈 Price Feeds</h1>
 
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-14 mb-14">
+        <div className="grid grid-cols-1 xl:grid-cols-2 gap-14 mb-14">
           <AggregatorV3Consumer />
-          <div className="bg-base-100 rounded-xl p-8 shadow-lg">
-            <h3 className="text-2xl md:text-3xl text-center mb-6 font-bold">FeedRegistry</h3>
-          </div>
+          <FeedRegistryDisplay />
         </div>
         <InformationSection />
       </div>

diff --git a/packages/nextjs/utils/contract-helpers/Denominations.ts b/packages/nextjs/utils/contract-helpers/Denominations.ts
@@ -0,0 +1,34 @@
+const toEthereumAddress = (iso4217Code: number): string => {
+  return `0x${iso4217Code.toString(16).padStart(40, "0")}`;
+};
+
+// Ethereum address for fiat currency derived from ISO 4217 numeric code!!
+const Denominations = {
+  baseOptions: {
+    LINK: "0x514910771AF9Ca656af840dff83E8264EcF986CA",
+    ETH: "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE",
+    BTC: "0xbBbBBBBbbBBBbbbBbbBbbbbBBbBbbbbBbBbbBBbB",
+  },
+  quoteOptions: {
+    USD: toEthereumAddress(840),
+    GBP: toEthereumAddress(826),
+    EUR: toEthereumAddress(978),
+    JPY: toEthereumAddress(392),
+    KRW: toEthereumAddress(410),
+    CNY: toEthereumAddress(156),
+    AUD: toEthereumAddress(36),
+    CAD: toEthereumAddress(124),
+    CHF: toEthereumAddress(756),
+    ARS: toEthereumAddress(32),
+    PHP: toEthereumAddress(608),
+    NZD: toEthereumAddress(554),
+    SGD: toEthereumAddress(702),
+    NGN: toEthereumAddress(566),
+    ZAR: toEthereumAddress(710),
+    RUB: toEthereumAddress(643),
+    INR: toEthereumAddress(356),
+    BRL: toEthereumAddress(986),
+  },
+};
+
+export default Denominations;