fix: usd exchange rate in claim modal

src/typing/index.ts

@@ -979,13 +979,15 @@ export interface GetResponseUserBalance {
 }
 
 export interface IClaimMultipleModalProps {
+  chainId: number;
   escrowIds: number[];
   balances: GetResponseUserBalance;
   deferredPromise: Deferred<any>;
   callbacks?: IClaimTransactionCallbacks;
 }
 
 export interface IClaimModalProps {
+  chainId: number;
   escrowId: number;
   deferredPromise: Deferred<any>;
   callbacks?: IClaimTransactionCallbacks;

src/ui/internal/components/BalancesTable.tsx

@@ -7,7 +7,6 @@ import styled from "styled-components";
 import type * as CSS from "csstype";
 import { BigCheckIcon } from "../assets/BigCheckIcon";
 import { Table } from "../components";
-import { STABLE_COINS } from "helpers/getExchangeRates";
 import { useExchangeRates } from "ui/internal/hooks/useExchangeRates";
 
 interface IBalanceWithTokenUSD extends IBalanceDetailed {
@@ -30,6 +29,7 @@ const ClaimSuccessful = (amount) => {
 };
 
 export const BalancesTable = ({
+  chainId,
   balances,
   onModalClose,
   setIsLoading,
@@ -48,7 +48,7 @@ export const BalancesTable = ({
           </thead>
           <tbody>
             {balances.map((balance: IBalanceWithTokenUSD) =>
-              TableRow(balance, onModalClose, setIsLoading),
+              TableRow(chainId, balance, onModalClose, setIsLoading),
             )}
           </tbody>
         </Table>
@@ -58,28 +58,28 @@ export const BalancesTable = ({
 };
 
 const TableRow = (
+  chainId: number,
   balance: IBalanceWithTokenUSD,
   onModalClose,
   setIsLoading,
 ) => {
-  const isStableCoin = STABLE_COINS.includes(balance?.token?.symbol);
-
   const [formattedAmountInUSD, setFormattedAmountInUSD] =
     React.useState<string>(balance.displayableAmount);
 
   const { data: exchangeValues, error: errorExchange } = useExchangeRates(
-    balance?.token?.symbol,
+    chainId,
+    [balance?.token?.address],
   );
 
   React.useEffect(() => {
-    if (balance && isStableCoin) {
+    if (balance) {
       setIsLoading(false);
     }
   }, []);
 
   React.useEffect(() => {
     if (exchangeValues) {
-      const exchangeValue = exchangeValues[balance.token.symbol];
+      const exchangeValue = exchangeValues[balance.token.address];
       setIsLoading(false);
 
       if (exchangeValue) {

src/ui/internal/hooks/useExchangeRates.ts

@@ -1,16 +1,15 @@
-import { IResult, STABLE_COINS } from "helpers/getExchangeRates";
+import { IResult } from "helpers/getExchangeRates";
 import useSWR from "swr";
 import { getExchangeRates } from "../../../helpers";
 
-export const useExchangeRates = (symbol: string, refreshInterval = 0) => {
-  // check if symbol is a stable coin, if yes, we don't need to get rate in USD
-  if (STABLE_COINS.includes(symbol)) {
-    return { data: null, isLoading: false, error: null };
-  }
-
+export const useExchangeRates = (
+  chainId: number,
+  tokensAddresses: string[],
+  refreshInterval = 0,
+) => {
   const { data, isLoading, error } = useSWR<IResult>(
-    [symbol],
-    getExchangeRates,
+    [chainId, tokensAddresses],
+    ([chainId, tokensAddresses]) => getExchangeRates(chainId, tokensAddresses),
     {
       refreshInterval,
       revalidateIfStale: true,

src/ui/internal/modals/Claim.tsx

@@ -110,6 +110,7 @@ export function ClaimModal(props: IClaimModalProps) {
 
     return (
       <BalancesTable
+        chainId={props.chainId}
         balances={[escrowBalance]}
         onModalClose={onModalClose}
         setIsLoading={setLoadingTable}

src/ui/internal/modals/ClaimMultiple.tsx

@@ -4,7 +4,7 @@ import {
   IClaimTransactionCallbacks,
   IClaimTransactionPayload,
 } from "../../../typing";
-import { Button, ScopedModal, Table } from "../components";
+import { Button, ScopedModal } from "../components";
 import { BalancesTable } from "../components/BalancesTable";
 import { useModalStates } from "../hooks/useModalStates";
 import { toast } from "../notification/toast";
@@ -82,6 +82,7 @@ export function ClaimMultipleModal(props: IClaimMultipleModalProps) {
 
     return (
       <BalancesTable
+        chainId={props.chainId}
         balances={props.balances.readyForClaim}
         onModalClose={onModalClose}
         setIsLoading={() => {}}

src/ui/render/claim.ts

@@ -2,6 +2,7 @@ import Deferred from "helpers/deferred";
 import { IClaimModalProps, IClaimTransactionCallbacks } from "typing";
 import { renderModal } from "ui/internal/config/render";
 import { ClaimModal } from "ui/internal/modals";
+import { getNetwork } from "../../wallet";
 
 /**
  * Displays how much the connected user has in the selected escrow and allows them to claim the escrow.
@@ -17,7 +18,10 @@ export const claim = async (
 ) => {
   const deferredPromise = new Deferred<string>();
 
+  let chainId = Number((await getNetwork())?.chainId);
+
   const claimModalProps: IClaimModalProps = {
+    chainId,
     escrowId,
     callbacks,
     deferredPromise,

src/ui/render/claimMultiple.ts

@@ -6,6 +6,7 @@ import {
 } from "typing";
 import { renderModal } from "ui/internal/config/render";
 import { ClaimMultipleModal } from "ui/internal/modals";
+import { getNetwork } from "../../wallet";
 
 /**
  * Displays a modal that summarizes user's balance in all the provided escrows. The balances have to
@@ -23,7 +24,10 @@ export const claimMultiple = async (
 ) => {
   const deferredPromise = new Deferred<string>();
 
+  let chainId = Number((await getNetwork())?.chainId);
+
   const claimMultipleModalProps: IClaimMultipleModalProps = {
+    chainId,
     escrowIds,
     balances,
     callbacks,