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..b3dabc442 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,21 @@ 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( diff --git a/apps/frontend/src/hooks/useDollarValue.ts b/apps/frontend/src/hooks/useDollarValue.ts index 5018a0012..cf5de956a 100644 --- a/apps/frontend/src/hooks/useDollarValue.ts +++ b/apps/frontend/src/hooks/useDollarValue.ts @@ -45,6 +45,8 @@ export function useDollarValue( return COMMON_SYMBOLS.ETH; } else if (['wbtc', 'tbtc'].includes(asset.toLocaleLowerCase())) { return COMMON_SYMBOLS.BTC; + } else if (asset.toLocaleLowerCase() === 'esov') { + return COMMON_SYMBOLS.SOV; } } return asset.toUpperCase();