From 4d3dc0686d1f5e97761271a7b747d4cdfccc7f0d Mon Sep 17 00:00:00 2001 From: re traca Date: Fri, 2 Feb 2024 12:46:17 -0300 Subject: [PATCH 1/5] new component for trade usd display + balance display missing --- src/components/Display/USDPriceDisplay.tsx | 18 +++ src/components/Trade/LimitSwap.tsx | 61 +++---- src/components/Trade/MarketSwap.tsx | 178 ++++++++++----------- 3 files changed, 120 insertions(+), 137 deletions(-) create mode 100644 src/components/Display/USDPriceDisplay.tsx diff --git a/src/components/Display/USDPriceDisplay.tsx b/src/components/Display/USDPriceDisplay.tsx new file mode 100644 index 000000000..bf351438f --- /dev/null +++ b/src/components/Display/USDPriceDisplay.tsx @@ -0,0 +1,18 @@ +import { ZERO_ADDRESS } from "../../utils/math/constants"; +import { numFormat } from "../../utils/math/valueMath"; + +function USDPriceDisplay({ token, display }) { + return ( + + ~$ + {!isNaN(token.decimals) && !isNaN(token.USDPrice) + ? ( + (!isNaN(parseFloat(display)) ? parseFloat(display) : 0) * + (token.USDPrice ?? 0) + ).toFixed(2) + : (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)}
}
Date: Fri, 2 Feb 2024 13:05:59 -0300 Subject: [PATCH 2/5] display when token usd price not fetched or 0 --- src/components/Display/USDPriceDisplay.tsx | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/components/Display/USDPriceDisplay.tsx b/src/components/Display/USDPriceDisplay.tsx index bf351438f..1e1591c1e 100644 --- a/src/components/Display/USDPriceDisplay.tsx +++ b/src/components/Display/USDPriceDisplay.tsx @@ -1,16 +1,13 @@ -import { ZERO_ADDRESS } from "../../utils/math/constants"; -import { numFormat } from "../../utils/math/valueMath"; - function USDPriceDisplay({ token, display }) { return ( ~$ - {!isNaN(token.decimals) && !isNaN(token.USDPrice) + {!isNaN(token.decimals) && !isNaN(token.USDPrice) && token.USDPrice != "0" ? ( (!isNaN(parseFloat(display)) ? parseFloat(display) : 0) * (token.USDPrice ?? 0) ).toFixed(2) - : (0).toFixed(2)} + : "-.--"} ); } From ed971ca874a4542ce482de5ad4245e77c5873486 Mon Sep 17 00:00:00 2001 From: re traca Date: Mon, 5 Feb 2024 13:44:15 -0300 Subject: [PATCH 3/5] defined integrated --- src/components/Display/USDPriceDisplay.tsx | 59 ++++++++++++++++++++++ src/utils/chains.ts | 9 ++-- 2 files changed, 65 insertions(+), 3 deletions(-) diff --git a/src/components/Display/USDPriceDisplay.tsx b/src/components/Display/USDPriceDisplay.tsx index 1e1591c1e..63254debb 100644 --- a/src/components/Display/USDPriceDisplay.tsx +++ b/src/components/Display/USDPriceDisplay.tsx @@ -1,4 +1,58 @@ +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) => { + setPriceFromAPI( + response.data.data?.getTokenPrices[0]?.priceUsd ?? undefined + ); + }); + } + + useEffect(() => { + if ( + token.address != ZERO_ADDRESS && + token.USDPrice == "0" && + chainProperties[networkName].sdkSupport.defined + ) { + fetchUSDPriceFromDefined(); + } + }); + return ( ~$ @@ -7,6 +61,11 @@ function USDPriceDisplay({ token, display }) { (!isNaN(parseFloat(display)) ? parseFloat(display) : 0) * (token.USDPrice ?? 0) ).toFixed(2) + : priceFromAPI + ? ( + (!isNaN(parseFloat(display)) ? parseFloat(display) : 0) * + (priceFromAPI ?? 0) + ).toFixed(2) : "-.--"} ); diff --git a/src/utils/chains.ts b/src/utils/chains.ts index 3a5c939d2..e50ef0cc6 100644 --- a/src/utils/chains.ts +++ b/src/utils/chains.ts @@ -87,7 +87,8 @@ export const chainProperties = { chainName: "Arbitrum Sepolia Test Network", sdkSupport: { alchemy: false, - swing: false + swing: false, + defined: false, }, explorerUrl: "https://sepolia.arbiscan.io", nativeCurrency: { @@ -112,7 +113,8 @@ export const chainProperties = { "arbitrum-one": { sdkSupport: { alchemy: true, - swing: true + swing: true, + defined: true, }, chainName: "Arbitrum One", explorerUrl: "https://arbiscan.io", @@ -151,7 +153,8 @@ export const chainProperties = { chainName: "Scroll", sdkSupport: { alchemy: false, - swing: false + swing: false, + defined: false, }, explorerUrl: "https://scrollscan.com", nativeCurrency: { From 7d0e35e0c6a9ae2565d17cc8c2d52ed898475b37 Mon Sep 17 00:00:00 2001 From: re traca Date: Mon, 5 Feb 2024 13:57:31 -0300 Subject: [PATCH 4/5] correct use effect controllers + comments --- src/components/Display/USDPriceDisplay.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/Display/USDPriceDisplay.tsx b/src/components/Display/USDPriceDisplay.tsx index 63254debb..914d6a54b 100644 --- a/src/components/Display/USDPriceDisplay.tsx +++ b/src/components/Display/USDPriceDisplay.tsx @@ -43,6 +43,8 @@ function USDPriceDisplay({ token, display }) { }); } + //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 && @@ -51,7 +53,7 @@ function USDPriceDisplay({ token, display }) { ) { fetchUSDPriceFromDefined(); } - }); + }, [token, chainId]); return ( From a08ff87e6f7fedd39a4ccd5a4449ca02aa056731 Mon Sep 17 00:00:00 2001 From: re traca Date: Tue, 6 Feb 2024 14:28:28 -0300 Subject: [PATCH 5/5] correct use effect trigger --- src/components/Display/USDPriceDisplay.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/Display/USDPriceDisplay.tsx b/src/components/Display/USDPriceDisplay.tsx index 914d6a54b..e4022acaa 100644 --- a/src/components/Display/USDPriceDisplay.tsx +++ b/src/components/Display/USDPriceDisplay.tsx @@ -37,6 +37,7 @@ function USDPriceDisplay({ token, display }) { } ) .then((response) => { + console.log(response.data); setPriceFromAPI( response.data.data?.getTokenPrices[0]?.priceUsd ?? undefined ); @@ -51,9 +52,10 @@ function USDPriceDisplay({ token, display }) { token.USDPrice == "0" && chainProperties[networkName].sdkSupport.defined ) { + console.log("timestamp", Date.now() / 1000); fetchUSDPriceFromDefined(); } - }, [token, chainId]); + }, [token.address, chainId]); return (