diff --git a/.changeset/gentle-schools-fetch.md b/.changeset/gentle-schools-fetch.md new file mode 100644 index 000000000..bba0c107d --- /dev/null +++ b/.changeset/gentle-schools-fetch.md @@ -0,0 +1,5 @@ +--- +"frontend": patch +--- + +chore: fix asset icon styles diff --git a/.changeset/slimy-tigers-hope.md b/.changeset/slimy-tigers-hope.md new file mode 100644 index 000000000..bb55d4a4c --- /dev/null +++ b/.changeset/slimy-tigers-hope.md @@ -0,0 +1,5 @@ +--- +"frontend": patch +--- + +SOV-4524: Show USD values on Convert page diff --git a/apps/frontend/src/app/5_pages/ConvertPage/ConvertPage.tsx b/apps/frontend/src/app/5_pages/ConvertPage/ConvertPage.tsx index fc1f10a23..f9d034f5d 100644 --- a/apps/frontend/src/app/5_pages/ConvertPage/ConvertPage.tsx +++ b/apps/frontend/src/app/5_pages/ConvertPage/ConvertPage.tsx @@ -37,11 +37,12 @@ import { AmountRenderer } from '../../2_molecules/AmountRenderer/AmountRenderer' import { AssetRenderer } from '../../2_molecules/AssetRenderer/AssetRenderer'; import { MaxButton } from '../../2_molecules/MaxButton/MaxButton'; import { TradingChart } from '../../2_molecules/TradingChart/TradingChart'; -import { TOKEN_RENDER_PRECISION } from '../../../constants/currencies'; +import { TOKEN_RENDER_PRECISION, USD } from '../../../constants/currencies'; import { getTokenDisplayName } from '../../../constants/tokens'; import { useAccount } from '../../../hooks/useAccount'; import { useAssetBalance } from '../../../hooks/useAssetBalance'; import { useCurrentChain } from '../../../hooks/useChainStore'; +import { useDollarValue } from '../../../hooks/useDollarValue'; import { useWeiAmountInput } from '../../../hooks/useWeiAmountInput'; import { translations } from '../../../locales/i18n'; import { @@ -50,7 +51,7 @@ import { listAssetsOfChain, } from '../../../utils/asset'; import { removeTrailingZerosFromString } from '../../../utils/helpers'; -import { decimalic, fromWei } from '../../../utils/math'; +import { decimalic, fromWei, toWei } from '../../../utils/math'; import { CATEGORY_TOKENS, DEFAULT_SWAP_DESTINATIONS, @@ -329,6 +330,36 @@ const ConvertPage: FC = () => { .toString(); }, [quote, route, slippageTolerance]); + const { usdValue: minimumReceivedUsdValue } = useDollarValue( + destinationToken, + minimumReceived !== '' + ? toWei(minimumReceived).toString() + : Decimal.ZERO.toString(), + ); + + const renderMinimumReceived = useMemo( + () => ( + <> + + + + {' ('} + + {')'} + + + ), + [destinationToken, minimumReceived, minimumReceivedUsdValue], + ); + const priceToken = useMemo(() => { if (!destinationToken) { return sourceToken; @@ -479,6 +510,11 @@ const ConvertPage: FC = () => { [quote], ); + const { usdValue: priceUsdValue } = useDollarValue( + priceToken, + price !== '' ? toWei(price).toString() : Decimal.ZERO.toString(), + ); + const renderPriceAmount = useMemo(() => { if (price) { return ( @@ -489,11 +525,21 @@ const ConvertPage: FC = () => { precision={TOKEN_RENDER_PRECISION} trigger={TooltipTrigger.hover} /> + + + {' ('} + + {')'} + ); } return t(commonTranslations.na); - }, [price, priceToken]); + }, [price, priceToken, priceUsdValue]); const renderPair = useMemo( () => `${sourceToken}/${destinationToken}/${currentChainId}`, @@ -609,6 +655,16 @@ const ConvertPage: FC = () => { } }, [account, setAmount]); + const { usdValue: sourceUsdValue } = useDollarValue( + sourceToken, + weiAmount.toString(), + ); + + const { usdValue: destinationUsdValue } = useDollarValue( + destinationToken, + quote !== '' ? toWei(renderDestinationAmount).toString() : '0', + ); + return ( <> @@ -625,10 +681,10 @@ const ConvertPage: FC = () => { {t(pageTranslations.subtitle)} -
+
-
+
@@ -644,18 +700,25 @@ const ConvertPage: FC = () => { />
-
- +
+
+ + +
+ +
+
+ { {t(pageTranslations.form.convertTo)} -
- +
+
+ + +
+ +
+
+ { - } + value={renderMinimumReceived} />