SOV-5216: Show estimated usd value (#1117)

* Show estimated USD value of a bridge transfer

* Create blue-fireants-lie.md

* Trigger staging build

* Trigger branch deploy

* Add fix for ESOV

---------

Co-authored-by: tiltom <tiltom.defi@protonmail.com>

Author: tiltom

.changeset/blue-fireants-lie.md

@@ -0,0 +1,5 @@
+---
+"frontend": patch
+---
+
+SOV-5216: Show estimated USD value of bridge transfers

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,
@@ -80,6 +84,12 @@ export const AmountScreen: React.FC = () => {
     receiver,
   });
 
+  const { usdValue } = useDollarValue(
+    token!,
+    amount !== '' ? toWei(amount).toString() : '0',
+    RSK_CHAIN_ID,
+  );
+
   const isBridgeLocked = useERC20BridgeLocked();
 
   return (
@@ -111,15 +121,21 @@ export const AmountScreen: React.FC = () => {
         )}
       </div>
 
-      <AmountInput
-        value={amount}
-        onChangeText={setAmount}
-        label={t(translations.common.amount)}
-        unit={token}
-        min={0}
-        className="w-full max-w-full"
-        placeholder="0"
-      />
+      <div>
+        <AmountInput
+          value={amount}
+          onChangeText={setAmount}
+          label={t(translations.common.amount)}
+          unit={token}
+          min={0}
+          className="w-full max-w-full"
+          placeholder="0"
+        />
+
+        <div className="flex justify-end text-tiny text-gray-30 mt-1">
+          <AmountRenderer value={usdValue} suffix={USD} />
+        </div>
+      </div>
 
       <Paragraph className="mb-1 mt-6 text-sm font-medium">
         {t(translations.erc20Bridge.receive.addressLabel)}

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';
@@ -74,6 +78,12 @@ export const AmountScreen: React.FC = () => {
     receiver,
   });
 
+  const { usdValue } = useDollarValue(
+    token!,
+    amount !== '' ? toWei(amount).toString() : '0',
+    RSK_CHAIN_ID,
+  );
+
   return (
     <div>
       {chainId && (
@@ -103,15 +113,21 @@ export const AmountScreen: React.FC = () => {
         )}
       </div>
 
-      <AmountInput
-        value={amount}
-        onChangeText={setAmount}
-        label={t(translations.common.amount)}
-        unit={token}
-        min={0}
-        className="w-full mb-6 max-w-full"
-        placeholder="0"
-      />
+      <div className="mb-6">
+        <AmountInput
+          value={amount}
+          onChangeText={setAmount}
+          label={t(translations.common.amount)}
+          unit={token}
+          min={0}
+          className="w-full mb-0 max-w-full"
+          placeholder="0"
+        />
+
+        <div className="flex justify-end text-tiny text-gray-30 mt-1">
+          <AmountRenderer value={usdValue} suffix={USD} />
+        </div>
+      </div>
 
       <Paragraph className="mb-1 text-sm font-medium">
         <Trans

apps/frontend/src/contexts/TokenPricesContext.tsx

@@ -2,6 +2,8 @@ import { keepPreviousData, useQuery } from '@tanstack/react-query';
 
 import React, { createContext, useContext, ReactNode } from 'react';
 
+import { ChainIds } from '@sovryn/ethers-provider';
+
 import { DATA_REFRESH_INTERVAL } from '../constants/general';
 import { useCurrentChain } from '../hooks/useChainStore';
 import { loadIndexer } from '../lib/indexer';
@@ -25,6 +27,13 @@ export type TokenData = {
   usdPrice: string;
 };
 
+const UNSUPPORTED_CHAIN_IDS = [
+  ChainIds.MAINNET,
+  ChainIds.SEPOLIA,
+  ChainIds.BSC_MAINNET,
+  ChainIds.BSC_TESTNET,
+];
+
 const TokenPricesContext = createContext<TokenPricesContextType | undefined>(
   undefined,
 );
@@ -40,7 +49,12 @@ export const TokenPricesProvider: React.FC<TokenPricesProviderProps> = ({
     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(

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();