diff --git a/src/components/Display/USDPriceDisplay.tsx b/src/components/Display/USDPriceDisplay.tsx new file mode 100644 index 000000000..e4022acaa --- /dev/null +++ b/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 ( + + ~$ + {!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) + : "-.--"} + + ); +} + +export default USDPriceDisplay; diff --git a/src/components/Trade/LimitSwap.tsx b/src/components/Trade/LimitSwap.tsx index cd12cfee3..619e11a41 100644 --- a/src/components/Trade/LimitSwap.tsx +++ b/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() {
- - {" "} - ~$ - {!isNaN(parseInt(amountIn.toString())) && - !isNaN(tokenIn.decimals) && - !isNaN(tokenIn.USDPrice) - ? ( - (!isNaN(parseFloat(displayIn)) ? parseFloat(displayIn) : 0) * - (tokenIn.USDPrice ?? 0) - ).toFixed(2) - : (0).toFixed(2)} - +
@@ -893,15 +886,16 @@ export default function LimitSwap() {
-
{ - switchDirection( - exactIn, - exactIn ? displayIn : displayOut, - exactIn ? setAmountIn : setAmountOut - ); - }} - className="flex items-center justify-center w-full pt-10 pb-3"> +
{ + switchDirection( + exactIn, + exactIn ? displayIn : displayOut, + exactIn ? setAmountIn : setAmountOut + ); + }} + className="flex items-center justify-center w-full pt-10 pb-3" + > TO
- - ~$ - {!isNaN(tokenOut.decimals) && !isNaN(tokenOut.USDPrice) ? ( - ( - (!isNaN(parseFloat(displayOut)) ? parseFloat(displayOut) : 0) * - (tokenOut.USDPrice ?? 0) - ).toFixed(2) - ) : ( - <>{(0).toFixed(2)} - )} - - - {pairSelected ? ( - "Balance: " + - (!isNaN(tokenOut?.userBalance) ? tokenOut.userBalance : "0") - ) : ( - <> - )} - + +
{ diff --git a/src/components/Trade/MarketSwap.tsx b/src/components/Trade/MarketSwap.tsx index afcd72e83..d35bddc91 100644 --- a/src/components/Trade/MarketSwap.tsx +++ b/src/components/Trade/MarketSwap.tsx @@ -6,7 +6,11 @@ import { useTradeStore } from "../../hooks/useTradeStore"; import useInputBox from "../../hooks/useInputBox"; import { BN_ZERO, ZERO_ADDRESS } from "../../utils/math/constants"; import SelectToken from "../SelectToken"; -import { inputHandler, numFormat, parseUnits } from "../../utils/math/valueMath"; +import { + inputHandler, + numFormat, + parseUnits, +} from "../../utils/math/valueMath"; import { getSwapPools } from "../../utils/pools"; import { QuoteParams, SwapParams } from "../../utils/types"; import { TickMath, maxPriceBn, minPriceBn } from "../../utils/math/tickMath"; @@ -26,6 +30,7 @@ import { useRouter } from "next/router"; import { useRangeLimitStore } from "../../hooks/useRangeLimitStore"; import { getRouterAddress } from "../../utils/config"; import BalanceDisplay from "../Display/BalanceDisplay"; +import USDPriceDisplay from "../Display/USDPriceDisplay"; export default function MarketSwap() { const [chainId, networkName, limitSubgraph, setLimitSubgraph, logoMap] = @@ -34,7 +39,7 @@ export default function MarketSwap() { state.networkName, state.limitSubgraph, state.setLimitSubgraph, - state.logoMap + state.logoMap, ]); //CONFIG STORE @@ -125,11 +130,11 @@ export default function MarketSwap() { const router = useRouter(); useEffect(() => { - if(limitTabSelected) return - setDisplayIn('') - setAmountIn(BN_ZERO) - setDisplayOut('') - setAmountOut(BN_ZERO) + if (limitTabSelected) return; + setDisplayIn(""); + setAmountIn(BN_ZERO); + setDisplayOut(""); + setAmountOut(BN_ZERO); }, [limitTabSelected]); /////////////////////////////Fetch Pools @@ -149,15 +154,14 @@ export default function MarketSwap() { setTokenInTradeUSDPrice, setTokenOutTradeUSDPrice, setTradePoolPrice, - setTradePoolLiquidity, + setTradePoolLiquidity ); } - }, - quoteRefetchDelay); - + }, quoteRefetchDelay); + // Clear the interval when the component unmounts return () => clearInterval(interval); - }, [exactIn ? amountIn : amountOut, tradePoolData?.id]); + }, [exactIn ? amountIn : amountOut, tradePoolData?.id]); //can go to utils async function updatePools(amount: BigNumber, isAmountIn: boolean) { @@ -301,45 +305,54 @@ export default function MarketSwap() { useEffect(() => { if (poolQuotes && poolQuotes[0]) { - if (poolQuotes[0].amountIn?.gt(BN_ZERO) && poolQuotes[0].amountOut?.gt(BN_ZERO)) { + if ( + poolQuotes[0].amountIn?.gt(BN_ZERO) && + poolQuotes[0].amountOut?.gt(BN_ZERO) + ) { if (exactIn) { setAmountOut(poolQuotes[0].amountOut); setDisplayOut( - numFormat(parseFloat( - ethers.utils.formatUnits( - poolQuotes[0].amountOut.toString(), - tokenOut.decimals - ) - ), 5) + numFormat( + parseFloat( + ethers.utils.formatUnits( + poolQuotes[0].amountOut.toString(), + tokenOut.decimals + ) + ), + 5 + ) ); } else { setAmountIn(poolQuotes[0].amountIn); setDisplayIn( - numFormat(parseFloat( - ethers.utils.formatUnits( - poolQuotes[0].amountIn.toString(), - tokenIn.decimals - ) - ), 5) + numFormat( + parseFloat( + ethers.utils.formatUnits( + poolQuotes[0].amountIn.toString(), + tokenIn.decimals + ) + ), + 5 + ) ); } updateSwapParams(poolQuotes); } else { if (exactIn) { setAmountOut(BN_ZERO); - setDisplayOut(''); + setDisplayOut(""); } else { setAmountIn(BN_ZERO); - setDisplayIn(''); + setDisplayIn(""); } - } + } } else if (poolQuotes != undefined) { if (exactIn) { setAmountOut(BN_ZERO); - setDisplayOut(''); + setDisplayOut(""); } else { setAmountIn(BN_ZERO); - setDisplayIn(''); + setDisplayIn(""); } } }, [poolQuotes, quoteParams, tradeSlippage]); @@ -370,15 +383,10 @@ export default function MarketSwap() { tokenOut ) ); - let priceDiff = Math.abs( - basePrice - currentPrice - ) * 100 / currentPrice - if (priceDiff < 0 || priceDiff > 100) priceDiff = 100 - setPriceImpact( - (priceDiff).toFixed( - 2 - ) - ); + let priceDiff = + (Math.abs(basePrice - currentPrice) * 100) / currentPrice; + if (priceDiff < 0 || priceDiff > 100) priceDiff = 100; + setPriceImpact(priceDiff.toFixed(2)); } const priceDiff = basePrice * (parseFloat(tradeSlippage) / 100); const limitPrice = @@ -463,7 +471,7 @@ export default function MarketSwap() { signer, isConnected, setSwapGasFee, - setSwapGasLimit, + setSwapGasLimit ); } else { setSwapGasLimit(BN_ZERO); @@ -513,12 +521,15 @@ export default function MarketSwap() { }`} > {pairSelected - ? numFormat(parseFloat( - ethers.utils.formatUnits( - amountOut ?? BN_ZERO, - tokenOut.decimals - ) - ), 5) + ? numFormat( + parseFloat( + ethers.utils.formatUnits( + amountOut ?? BN_ZERO, + tokenOut.decimals + ) + ), + 5 + ) : "Select Token"}
@@ -546,8 +557,9 @@ export default function MarketSwap() { ethers.utils.formatUnits(amountOut, tokenOut.decimals) ) * (100 - parseFloat(tradeSlippage))) / - 100 - , 5)} + 100, + 5 + )}
@@ -570,18 +582,10 @@ export default function MarketSwap() {
- - {" "} - $ - {!isNaN(parseInt(amountIn.toString())) && - !isNaN(tokenIn.decimals) && - !isNaN(tokenIn.USDPrice) - ? ( - (!isNaN(parseFloat(displayIn)) ? parseFloat(displayIn) : 0) * - (tokenIn.USDPrice ?? 0) - ).toFixed(2) - : (0).toFixed(2)} - +
@@ -617,15 +621,16 @@ export default function MarketSwap() {
-
{ - switchDirection( - exactIn, - exactIn ? displayIn : displayOut, - exactIn ? setAmountIn : setAmountOut - ); - }} - className="flex items-center justify-center w-full pt-10 pb-3"> +
{ + switchDirection( + exactIn, + exactIn ? displayIn : displayOut, + exactIn ? setAmountIn : setAmountOut + ); + }} + className="flex items-center justify-center w-full pt-10 pb-3" + > TO
- - $ - {!isNaN(tokenOut.decimals) && - !isNaN(tokenOut.USDPrice) ? ( - ( - (!isNaN(parseFloat(displayOut)) ? parseFloat(displayOut) : 0) * - (tokenOut.USDPrice ?? 0) - ).toFixed(2) - ) : ( - <>{(0).toFixed(2)} - )} - - - {tokenOut?.address != ZERO_ADDRESS ? ( - "Balance: " + - (!isNaN(tokenOut?.userBalance) && tokenOut.userBalance > 0 ? numFormat(tokenOut.userBalance, 5) : "0.00") - ) : ( - <> - )} - + +
- { -
- {inputBoxOut("0", tokenOut, "tokenOut", handleInputBox)} -
- } + {
{inputBoxOut("0", tokenOut, "tokenOut", handleInputBox)}
}