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}
/>