usd price difference handled in swap

jediswaplabs · Mar 24, 2024 · ca86dd3 · ca86dd3
1 parent 0b6fad0
commit ca86dd3
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 8 deletions.
diff --git a/src/components/CurrencyInputPanel/FiatValue.tsx b/src/components/CurrencyInputPanel/FiatValue.tsx
@@ -10,20 +10,28 @@ import { ThemedText } from 'theme/components'
 import { NumberType, useFormatter } from 'utils/formatNumbers'
 import { warningSeverity } from 'utils/prices'
 
-const FiatLoadingBubble = styled(LoadingBubble)`
-  border-radius: 4px;
-  width: 4rem;
-  height: 1rem;
+const USDPriceContainer = styled.div`
+  display: flex;
 `
 
-export function FiatValue({ fiatValue, priceImpact }: { fiatValue: number; priceImpact?: Percent }) {
+const USDPriceDifferenceText = styled.div<{ difference: number }>`
+  color: ${({ difference }) => (difference > 0 ? 'green' : 'red')};
+  margin-left: 2px;
+`
+
+export function FiatValue({ fiatValue, usdPriceDifference }: { fiatValue: number; usdPriceDifference?: number }) {
   const { formatNumber } = useFormatter()
 
   return (
     <Row gap="sm">
       <ThemedText.LabelSmall color="neutral1">
         {fiatValue ? (
-          formatNumber({ input: fiatValue, type: NumberType.FiatTokenPrice })
+          <USDPriceContainer>
+            {formatNumber({ input: fiatValue, type: NumberType.FiatTokenPrice })}{' '}
+            {usdPriceDifference && (
+              <USDPriceDifferenceText difference={usdPriceDifference}>({usdPriceDifference}%)</USDPriceDifferenceText>
+            )}
+          </USDPriceContainer>
         ) : (
           <MouseoverTooltip text={<Trans>Not enough liquidity to show accurate USD value.</Trans>}>-</MouseoverTooltip>
         )}

diff --git a/src/components/CurrencyInputPanel/SwapCurrencyInputPanel.tsx b/src/components/CurrencyInputPanel/SwapCurrencyInputPanel.tsx
@@ -222,6 +222,7 @@ interface SwapCurrencyInputPanelProps {
   pair?: Pair | null
   hideInput?: boolean
   otherCurrency?: Currency | null
+  usdPriceDifference?: number | undefined
   fiatValue?: number
   priceImpact?: Percent
   id: string
@@ -249,6 +250,7 @@ const SwapCurrencyInputPanel = forwardRef<HTMLInputElement, SwapCurrencyInputPan
       onCurrencySelect,
       currency,
       otherCurrency,
+      usdPriceDifference,
       id,
       showCommonBases,
       showCurrencyAmount,
@@ -289,7 +291,7 @@ const SwapCurrencyInputPanel = forwardRef<HTMLInputElement, SwapCurrencyInputPan
 
     const chainAllowed = isSupportedChain(chainId)
 
-    const { formatted, balance } = useAccountBalance(currency as Currency)
+    const { formatted } = useAccountBalance(currency as Currency)
 
     // reset tooltip state when currency changes
     useEffect(() => setTooltipVisible(false), [currency])
@@ -398,7 +400,9 @@ const SwapCurrencyInputPanel = forwardRef<HTMLInputElement, SwapCurrencyInputPan
                   <span />
                 )}
                 <LoadingOpacityContainer $loading={loading}>
-                  {fiatValue === 0 ? 'N/A' : fiatValue && <FiatValue fiatValue={fiatValue} priceImpact={priceImpact} />}
+                  {fiatValue === 0
+                    ? 'N/A'
+                    : fiatValue && <FiatValue fiatValue={fiatValue} usdPriceDifference={usdPriceDifference} />}
                 </LoadingOpacityContainer>
               </RowBetween>
             </FiatRow>

diff --git a/src/pages/Swap/index.tsx b/src/pages/Swap/index.tsx
@@ -599,6 +599,14 @@ export function Swap({
     }
   }, [separatedFiatValueofLiquidity])
 
+  const usdPriceDifference = useMemo(() => {
+    if (!token0usdPrice || !token1usdPrice) return undefined
+    else
+      return parseFloat(
+        (((token1usdPrice - token0usdPrice) / ((token0usdPrice + token1usdPrice) / 2)) * 100).toFixed(2)
+      )
+  }, [token0usdPrice, token1usdPrice])
+
   const amountToApprove = useMemo(
     () => (trade ? trade.maximumAmountIn(allowedSlippage) : undefined),
     [trade, allowedSlippage]
@@ -961,6 +969,7 @@ export function Swap({
               currency={currencies[Field.OUTPUT] ?? null}
               onCurrencySelect={handleOutputSelect}
               otherCurrency={currencies[Field.INPUT]}
+              usdPriceDifference={usdPriceDifference}
               showCommonBases
               id={InterfaceSectionName.CURRENCY_OUTPUT_PANEL}
               loading={independentField === Field.INPUT && routeIsSyncing}