diff --git a/.changeset/blue-fireants-lie.md b/.changeset/blue-fireants-lie.md
new file mode 100644
index 000000000..054dca0c6
--- /dev/null
+++ b/.changeset/blue-fireants-lie.md
@@ -0,0 +1,5 @@
+---
+"frontend": patch
+---
+
+SOV-5216: Show estimated USD value of bridge transfers
diff --git a/apps/frontend/src/app/3_organisms/ERC20BridgeDialog/components/ReceiveFlow/components/AmountScreen.tsx b/apps/frontend/src/app/3_organisms/ERC20BridgeDialog/components/ReceiveFlow/components/AmountScreen.tsx
index 3501c81d8..2a592e0a3 100644
--- a/apps/frontend/src/app/3_organisms/ERC20BridgeDialog/components/ReceiveFlow/components/AmountScreen.tsx
+++ b/apps/frontend/src/app/3_organisms/ERC20BridgeDialog/components/ReceiveFlow/components/AmountScreen.tsx
@@ -19,11 +19,15 @@ import {
import { RSK_CHAIN_ID } from '../../../../../../config/chains';
+import { AmountRenderer } from '../../../../../2_molecules/AmountRenderer/AmountRenderer';
import { MaxButton } from '../../../../../2_molecules/MaxButton/MaxButton';
+import { USD } from '../../../../../../constants/currencies';
import { useAccount } from '../../../../../../hooks';
import { useChainStore } from '../../../../../../hooks/useChainStore';
+import { useDollarValue } from '../../../../../../hooks/useDollarValue';
import { useTokenDetailsByAsset } from '../../../../../../hooks/useTokenDetailsByAsset';
import { translations } from '../../../../../../locales/i18n';
+import { toWei } from '../../../../../../utils/math';
import {
ReceiveFlowContext,
ReceiveFlowStep,
@@ -79,6 +83,12 @@ export const AmountScreen: React.FC = () => {
receiver,
});
+ const { usdValue } = useDollarValue(
+ token!,
+ amount !== '' ? toWei(amount).toString() : '0',
+ RSK_CHAIN_ID,
+ );
+
return (
{chainId && (
@@ -108,15 +118,21 @@ export const AmountScreen: React.FC = () => {
)}
-
+
{t(translations.erc20Bridge.receive.addressLabel)}
diff --git a/apps/frontend/src/app/3_organisms/ERC20BridgeDialog/components/SendFlow/components/AmountScreen.tsx b/apps/frontend/src/app/3_organisms/ERC20BridgeDialog/components/SendFlow/components/AmountScreen.tsx
index 4a88baf86..6d9d1c6a1 100644
--- a/apps/frontend/src/app/3_organisms/ERC20BridgeDialog/components/SendFlow/components/AmountScreen.tsx
+++ b/apps/frontend/src/app/3_organisms/ERC20BridgeDialog/components/SendFlow/components/AmountScreen.tsx
@@ -20,10 +20,14 @@ import {
import { RSK_CHAIN_ID } from '../../../../../../config/chains';
+import { AmountRenderer } from '../../../../../2_molecules/AmountRenderer/AmountRenderer';
import { MaxButton } from '../../../../../2_molecules/MaxButton/MaxButton';
+import { USD } from '../../../../../../constants/currencies';
import { useAccount } from '../../../../../../hooks';
+import { useDollarValue } from '../../../../../../hooks/useDollarValue';
import { useTokenDetailsByAsset } from '../../../../../../hooks/useTokenDetailsByAsset';
import { translations } from '../../../../../../locales/i18n';
+import { toWei } from '../../../../../../utils/math';
import { SendFlowContext, SendFlowStep } from '../../../contexts/sendflow';
import { useBridgeService } from '../../../hooks/useBridgeService';
import { useBridgeValidation } from '../../../hooks/useBridgeValidation';
@@ -72,6 +76,12 @@ export const AmountScreen: React.FC = () => {
receiver,
});
+ const { usdValue } = useDollarValue(
+ token!,
+ amount !== '' ? toWei(amount).toString() : '0',
+ RSK_CHAIN_ID,
+ );
+
return (
{chainId && (
@@ -101,15 +111,20 @@ export const AmountScreen: React.FC = () => {
)}
-
+
(
undefined,
);
@@ -40,7 +49,12 @@ export const TokenPricesProvider: React.FC = ({
placeholderData: keepPreviousData,
refetchInterval: DATA_REFRESH_INTERVAL,
queryFn: async () => {
- const data = await loadIndexer(currentChainId).tokens.list();
+ // Fallback to RSK_MAINNET if current chain is unsupported
+ const chain = UNSUPPORTED_CHAIN_IDS.includes(currentChainId as ChainIds)
+ ? ChainIds.RSK_MAINNET
+ : currentChainId;
+
+ const data = await loadIndexer(chain).tokens.list();
if (data) {
const prices = data.reduce(