PRO-825 token price api integration [onHold]

src/components/Display/USDPriceDisplay.tsx

@@ -0,0 +1,78 @@
+import { useEffect, useState } from "react";
+import { useConfigStore } from "../../hooks/useConfigStore";
+import { chainProperties } from "../../utils/chains";
+import axios from "axios";
+import { ZERO_ADDRESS } from "../../utils/math/constants";
+
+function USDPriceDisplay({ token, display }) {
+  const [chainId, networkName] = useConfigStore((state) => [
+    state.chainId,
+    state.networkName,
+  ]);
+
+  const [priceFromAPI, setPriceFromAPI] = useState(undefined);
+
+  function fetchUSDPriceFromDefined() {
+    axios
+      .post(
+        "https://graph.defined.fi/graphql",
+        {
+          query: `{
+                getTokenPrices(
+                  inputs: [
+                    { address: "${token.address}", networkId: ${chainId}}
+                  ]
+                ) {
+                  address
+                  networkId
+                  priceUsd
+                }
+              }`,
+        },
+        {
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: "944ebfd6779a45fede53b997d2c32b1e2333e316",
+          },
+        }
+      )
+      .then((response) => {
+        console.log(response.data);
+        setPriceFromAPI(
+          response.data.data?.getTokenPrices[0]?.priceUsd ?? undefined
+        );
+      });
+  }
+
+  //try to fetch it from the subgraph, if the token doesnt exist in the subgraph, fetch it from defined.fi
+
+  useEffect(() => {
+    if (
+      token.address != ZERO_ADDRESS &&
+      token.USDPrice == "0" &&
+      chainProperties[networkName].sdkSupport.defined
+    ) {
+      console.log("timestamp", Date.now() / 1000);
+      fetchUSDPriceFromDefined();
+    }
+  }, [token.address, chainId]);
+
+  return (
+    <span>
+      ~$
+      {!isNaN(token.decimals) && !isNaN(token.USDPrice) && token.USDPrice != "0"
+        ? (
+            (!isNaN(parseFloat(display)) ? parseFloat(display) : 0) *
+            (token.USDPrice ?? 0)
+          ).toFixed(2)
+        : priceFromAPI
+        ? (
+            (!isNaN(parseFloat(display)) ? parseFloat(display) : 0) *
+            (priceFromAPI ?? 0)
+          ).toFixed(2)
+        : "-.--"}
+    </span>
+  );
+}
+
+export default USDPriceDisplay;

src/components/Trade/LimitSwap.tsx

@@ -49,6 +49,7 @@ import JSBI from "jsbi";
 import { fetchRangeTokenUSDPrice } from "../../utils/tokens";
 import BalanceDisplay from "../Display/BalanceDisplay";
 import { getRouterAddress } from "../../utils/config";
+import USDPriceDisplay from "../Display/USDPriceDisplay";
 
 export default function LimitSwap() {
   const [chainId, networkName, limitSubgraph, setLimitSubgraph, logoMap] =
@@ -846,18 +847,10 @@ export default function LimitSwap() {
     <div>
       <div className="border border-grey rounded-[4px] w-full py-3 px-5 mt-2.5 flex flex-col gap-y-2">
         <div className="flex items-end justify-between text-[11px] text-grey1">
-          <span>
-            {" "}
-            ~$
-            {!isNaN(parseInt(amountIn.toString())) &&
-            !isNaN(tokenIn.decimals) &&
-            !isNaN(tokenIn.USDPrice)
-              ? (
-                  (!isNaN(parseFloat(displayIn)) ? parseFloat(displayIn) : 0) *
-                  (tokenIn.USDPrice ?? 0)
-                ).toFixed(2)
-              : (0).toFixed(2)}
-          </span>
+          <USDPriceDisplay
+            token={tokenIn}
+            display={displayIn}
+          ></USDPriceDisplay>
           <BalanceDisplay token={tokenIn}></BalanceDisplay>
         </div>
         <div className="flex items-end justify-between mt-2 mb-3">
@@ -893,23 +886,23 @@ export default function LimitSwap() {
           </div>
         </div>
       </div>
-      <div 
-      onClick={() => {
-        switchDirection(
-          exactIn,
-          exactIn ? displayIn : displayOut,
-          exactIn ? setAmountIn : setAmountOut
-        );
-      }}
-      className="flex items-center justify-center w-full pt-10 pb-3">
+      <div
+        onClick={() => {
+          switchDirection(
+            exactIn,
+            exactIn ? displayIn : displayOut,
+            exactIn ? setAmountIn : setAmountOut
+          );
+        }}
+        className="flex items-center justify-center w-full pt-10 pb-3"
+      >
         <svg
           xmlns="http://www.w3.org/2000/svg"
           fill="none"
           viewBox="0 0 24 24"
           strokeWidth="1.5"
           stroke="currentColor"
           className="w-5 cursor-pointer"
-
         >
           <path
             strokeLinecap="round"
@@ -921,25 +914,11 @@ export default function LimitSwap() {
       <span className="text-[11px] text-grey1">TO</span>
       <div className="border border-grey rounded-[4px] w-full py-3 px-5 mt-2.5 flex flex-col gap-y-2">
         <div className="flex items-end justify-between text-[11px] text-grey1">
-          <span>
-            ~$
-            {!isNaN(tokenOut.decimals) && !isNaN(tokenOut.USDPrice) ? (
-              (
-                (!isNaN(parseFloat(displayOut)) ? parseFloat(displayOut) : 0) *
-                (tokenOut.USDPrice ?? 0)
-              ).toFixed(2)
-            ) : (
-              <>{(0).toFixed(2)}</>
-            )}
-          </span>
-          <span>
-            {pairSelected ? (
-              "Balance: " +
-              (!isNaN(tokenOut?.userBalance) ? tokenOut.userBalance : "0")
-            ) : (
-              <></>
-            )}
-          </span>
+          <USDPriceDisplay
+            token={tokenOut}
+            display={displayOut}
+          ></USDPriceDisplay>
+          <BalanceDisplay token={tokenOut}></BalanceDisplay>
         </div>
         <div className="flex items-end justify-between mt-2 mb-3 text-3xl">
           {