Revert "Price Impact UI (#259)" (#261)

This reverts commit 168c134.

Co-authored-by: ben2x4 <86395884+ben2x4@users.noreply.github.com>

Author: rawasabi

features/liquidity/components/ManagePoolDialog/TokenToTokenRates.tsx

@@ -17,18 +17,14 @@ export const TokenToTokenRates = ({
     tokenBSymbol,
   })
 
-  const {
-    isShowing,
-    conversionRate,
-    conversionRateInDollar,
-    tokenBSwapValueUSD,
-  } = useTxRates({
-    tokenASymbol,
-    tokenBSymbol,
-    tokenAAmount,
-    tokenToTokenPrice: oneTokenToTokenPrice * tokenAAmount,
-    isLoading,
-  })
+  const { isShowing, conversionRate, conversionRateInDollar, dollarValue } =
+    useTxRates({
+      tokenASymbol,
+      tokenBSymbol,
+      tokenAAmount,
+      tokenToTokenPrice: oneTokenToTokenPrice * tokenAAmount,
+      isLoading,
+    })
 
   return (
     <StyledDivForGrid active={isShowing}>
@@ -41,7 +37,7 @@ export const TokenToTokenRates = ({
       </Text>
       <Text variant="caption" color="disabled">
         $
-        {dollarValueFormatterWithDecimals(tokenBSwapValueUSD * 2, {
+        {dollarValueFormatterWithDecimals(dollarValue * 2, {
           includeCommaSeparation: true,
         })}
       </Text>

features/swap/components/TransactionTips.tsx

@@ -1,5 +1,4 @@
 import {
-  ArrowUpIcon,
   Button,
   Column,
   dollarValueFormatterWithDecimals,
@@ -9,7 +8,6 @@ import {
   Inline,
   styled,
   Text,
-  Tooltip,
 } from 'junoblocks'
 import React, { useState } from 'react'
 import { useRecoilValue } from 'recoil'
@@ -38,19 +36,14 @@ export const TransactionTips = ({
     tokenAmount: tokenA?.amount || 1,
   })
 
-  const {
-    isShowing,
-    conversionRate,
-    conversionRateInDollar,
-    tokenASwapValueUSD,
-    tokenBSwapValueUSD,
-  } = useTxRates({
-    tokenASymbol: tokenA?.tokenSymbol,
-    tokenBSymbol: tokenB?.tokenSymbol,
-    tokenAAmount: tokenA?.amount || 1,
-    tokenToTokenPrice,
-    isLoading: isPriceLoading,
-  })
+  const { isShowing, conversionRate, conversionRateInDollar, dollarValue } =
+    useTxRates({
+      tokenASymbol: tokenA?.tokenSymbol,
+      tokenBSymbol: tokenB?.tokenSymbol,
+      tokenAAmount: tokenA?.amount || 1,
+      tokenToTokenPrice,
+      isLoading: isPriceLoading,
+    })
 
   const switchTokensButton = (
     <Button
@@ -79,23 +72,9 @@ export const TransactionTips = ({
     </>
   )
 
-  const priceImpact =
-    (tokenBSwapValueUSD - tokenASwapValueUSD) / tokenASwapValueUSD
-  const formattedPriceImpact = Math.abs(Math.round(priceImpact * 10000) / 100)
-  const errorThreshold = priceImpact < -0.05
-
-  const tokenAFormattedSwapValue = dollarValueFormatterWithDecimals(
-    tokenASwapValueUSD,
-    {
-      includeCommaSeparation: true,
-    }
-  )
-  const tokenBFormattedSwapValue = dollarValueFormatterWithDecimals(
-    tokenBSwapValueUSD,
-    {
-      includeCommaSeparation: true,
-    }
-  )
+  const formattedDollarValue = dollarValueFormatterWithDecimals(dollarValue, {
+    includeCommaSeparation: true,
+  })
 
   if (size === 'small') {
     return (
@@ -114,7 +93,7 @@ export const TransactionTips = ({
               {transactionRates}
             </Text>
             <Text variant="caption" color="disabled" wrap={false}>
-              Swap estimate: ${tokenBFormattedSwapValue}
+              Swap estimate: ${formattedDollarValue}
             </Text>
           </Column>
         )}
@@ -133,44 +112,8 @@ export const TransactionTips = ({
           </Text>
         )}
       </StyledDivForRateWrapper>
-      <Inline justifyContent={'flex-end'} gap={8} css={{ cursor: 'pointer' }}>
-        {tokenB?.tokenSymbol && (
-          <Tooltip label="Price impact due to the amount of liquity available in the pool.">
-            <Inline
-              css={{
-                backgroundColor: errorThreshold
-                  ? '$backgroundColors$error'
-                  : '$backgroundColors$secondary',
-                padding: '$2 $4 $2 $2',
-                borderRadius: 4,
-              }}
-            >
-              <ArrowUpIcon
-                color={errorThreshold ? 'error' : 'secondary'}
-                css={{
-                  transform: priceImpact < 0 ? 'rotate(180deg)' : undefined,
-                }}
-                size="medium"
-              />
-              <Text
-                variant="legend"
-                wrap={false}
-                css={{
-                  color: errorThreshold
-                    ? '$textColors$error'
-                    : '$textColors$secondary',
-                }}
-              >
-                {formattedPriceImpact}%
-              </Text>
-            </Inline>
-          </Tooltip>
-        )}
-        <Column gap={4}>
-          <Text variant="legend">${tokenAFormattedSwapValue}</Text>
-          <Text variant="legend">${tokenBFormattedSwapValue}</Text>
-        </Column>
-      </Inline>
+
+      <Text variant="legend">${formattedDollarValue}</Text>
     </StyledDivForWrapper>
   )
 }

features/swap/hooks/useTxRates.ts

@@ -16,21 +16,36 @@ function calculateTokenToTokenConversionRate({
   return tokenToTokenPrice / tokenAAmount
 }
 
+function calculateTokenToTokenConversionDollarRate({
+  conversionRate,
+  tokenADollarPrice,
+  oneTokenToTokenPrice,
+  tokenAAmount,
+}) {
+  if (tokenAAmount === 0) {
+    return tokenADollarPrice
+  }
+
+  return (tokenADollarPrice * conversionRate) / oneTokenToTokenPrice
+}
+
 export const useTxRates = ({
   tokenASymbol,
   tokenBSymbol,
   tokenAAmount,
   tokenToTokenPrice,
   isLoading,
 }) => {
-  const [tokenADollarValue, fetchingTokenDollarPrice] =
+  const [tokenADollarPrice, fetchingTokenDollarPrice] =
     useTokenDollarValue(tokenASymbol)
 
   const [oneTokenToTokenPrice] = usePriceForOneToken({
     tokenASymbol: tokenASymbol,
     tokenBSymbol: tokenBSymbol,
   })
 
+  const dollarValue = (tokenADollarPrice || 0) * (tokenAAmount || 0)
+
   const shouldShowRates =
     (tokenASymbol &&
       tokenBSymbol &&
@@ -51,22 +66,23 @@ export const useTxRates = ({
         )
   )
 
-  const [tokenBDollarValue] = useTokenDollarValue(tokenBSymbol)
   const conversionRateInDollar = usePersistance(
     isLoading || fetchingTokenDollarPrice || !shouldShowRates
       ? undefined
-      : protectAgainstNaN(conversionRate * tokenBDollarValue)
+      : protectAgainstNaN(
+          calculateTokenToTokenConversionDollarRate({
+            tokenAAmount,
+            conversionRate,
+            tokenADollarPrice,
+            oneTokenToTokenPrice,
+          })
+        )
   )
 
-  const tokenASwapValueUSD = (tokenADollarValue || 0) * (tokenAAmount || 0)
-  const tokenBSwapValueUSD =
-    (tokenBDollarValue || 0) * (tokenAAmount * conversionRate || 0)
-
   return {
     isShowing: Boolean(shouldShowRates),
     conversionRate,
     conversionRateInDollar,
-    tokenASwapValueUSD,
-    tokenBSwapValueUSD,
+    dollarValue,
   }
 }