chore: fixing decimal effect dep

Author: xnyl

src/features/gateway/GatewayFlow.tsx

@@ -5,7 +5,7 @@ import { paths } from "../../pages/routes";
 import { usePageTitle } from "../../providers/TitleProviders";
 import { TransactionTypeTabs } from "../transactions/components/TransactionTypeTabs";
 import { GatewayInitialStep } from "./steps/GatewayInitialStep";
-import { GatewayFeesStep } from "./steps/GatwayFeesStep";
+import { GatewayFeesStep } from "./steps/GatewayFeesStep";
 
 export enum GatewayConfigurationStep {
   INITIAL = "initial",

src/features/gateway/gatewayHooks.ts

@@ -133,6 +133,7 @@ export const useGatewayFees = (
   }, [gateway]);
 
   useEffect(() => {
+    console.log(`gateway amounts effect`, gateway, amount);
     setAmountsPending(true);
     if (!gateway || !decimals) {
       return;
@@ -142,13 +143,13 @@ export const useGatewayFees = (
       .estimateOutput(new BigNumber(amount).shiftedBy(decimals))
       .shiftedBy(-decimals);
     setOutputAmount(estimatedOutputBn.toFixed());
-    console.log(`gateway estimated output: ${estimatedOutputBn}`);
+    console.log(`gateway amount estimated output: ${estimatedOutputBn}`);
 
     const minimumAmountBn = gateway.fees.minimumAmount.shiftedBy(-decimals);
     setMinimumAmount(minimumAmountBn.toFixed());
-    console.log(`gateway minimum amount: ${estimatedOutputBn}`);
+    console.log(`gateway amount minimum: ${estimatedOutputBn}`);
     setAmountsPending(false);
-  }, [gateway, amount]);
+  }, [gateway, decimals, amount]);
 
   return {
     decimals,

src/features/gateway/steps/GatwayFeesStep.tsx src/features/gateway/steps/GatewayFeesStep.tsx

@@ -36,6 +36,7 @@ import {
   getRenAssetName,
 } from "../../../utils/tokensConfig";
 import { $exchangeRates, $marketData } from "../../marketData/marketDataSlice";
+import { findAssetExchangeRate } from "../../marketData/marketDataUtils";
 import { useChains } from "../../network/networkHooks";
 import { $network } from "../../network/networkSlice";
 import { useWallet } from "../../wallet/walletHooks";
@@ -80,8 +81,13 @@ export const GatewayFeesStep: FunctionComponent<GatewayStepProps> = ({
     minimumAmount,
     amountsPending,
   } = fees;
+
   const rates = useSelector($exchangeRates);
-  const outputAmountUsd = Number(outputAmount) * 69.42; // TODO
+  const outputAmountUsdRate = findAssetExchangeRate(rates, asset);
+  const outputAmountUsd =
+    outputAmountUsdRate !== null
+      ? Number(outputAmount) * outputAmountUsdRate
+      : null;
 
   const Header = (
     <PaperHeader>
@@ -150,13 +156,15 @@ export const GatewayFeesStep: FunctionComponent<GatewayStepProps> = ({
               />
             }
             valueEquivalent={
-              <NumberFormatText
-                prefix=" = $"
-                value={outputAmountUsd}
-                spacedSuffix="USD"
-                decimalScale={2}
-                fixedDecimalScale
-              />
+              outputAmountUsd !== null ? (
+                <NumberFormatText
+                  prefix=" = $"
+                  value={outputAmountUsd}
+                  spacedSuffix="USD"
+                  decimalScale={2}
+                  fixedDecimalScale
+                />
+              ) : null
             }
             Icon={<Icon fontSize="inherit" />}
           />
@@ -166,7 +174,7 @@ export const GatewayFeesStep: FunctionComponent<GatewayStepProps> = ({
       <PaperContent topPadding bottomPadding>
         <span>Feessss</span>
       </PaperContent>
-      <Debug it={{ fees, transactions }} />
+      <Debug it={{ fees }} />
     </>
   );
 };

src/features/marketData/marketDataHooks.ts

@@ -15,8 +15,8 @@ import {
   CoingeckoReferenceData,
   coingeckoSymbols,
   fetchMarketDataGasPrices,
-  mapBandchainToExchangeData,
-  mapCoingeckoToExchangeData,
+  mapBandchainToExchangeRate,
+  mapCoingeckoToExchangeRate,
 } from "./marketDataUtils";
 
 const dataRefreshInterval = 30; // seconds
@@ -39,7 +39,7 @@ export const useExchangeRates = () => {
     fetchBandchainExchangeRates()
       .then((data: Array<BandchainReferenceData>) => {
         report(SystemType.Bandchain, SystemStatus.Operational);
-        const rates = mapBandchainToExchangeData(data);
+        const rates = mapBandchainToExchangeRate(data);
         dispatch(setExchangeRates(rates));
       })
       .catch((error: any) => {

src/features/marketData/marketDataUtils.ts

@@ -45,7 +45,7 @@ export type CoingeckoReferenceData = {
   current_price: number;
 };
 
-export const mapBandchainToExchangeData = (
+export const mapBandchainToExchangeRate = (
   referenceData: Array<BandchainReferenceData>
 ) => {
   return referenceData.map((entry: any) => {
@@ -58,7 +58,7 @@ export const mapBandchainToExchangeData = (
   });
 };
 
-export const mapCoingeckoToExchangeData = (
+export const mapCoingeckoToExchangeRate = (
   entries: Array<CoingeckoReferenceData>
 ) => {
   return entries.map((entry: any) => ({
@@ -77,16 +77,16 @@ export type GasPrice = {
   standard: number;
 };
 
-export const findExchangeRate = (
+export const findAssetExchangeRate = (
   exchangeRates: Array<ExchangeRate>,
   base: Asset,
   quote = USD_SYMBOL
 ) => {
-  const symbol = assetsConfig[base].rateSymbol || base;
+  const rateSymbol = assetsConfig[base].rateSymbol || base;
   const rateEntry = exchangeRates.find(
-    (entry) => entry.pair === getPair(symbol, quote)
+    (entry) => entry.pair === getPair(rateSymbol, quote)
   );
-  return rateEntry?.rate;
+  return rateEntry?.rate || null;
 };
 
 export type AnyBlockGasPrices = {

src/features/mint-old/steps/MintFeesStep.tsx

@@ -54,7 +54,7 @@ import {
 import { useFetchFees } from "../../fees/feesHooks";
 import { getTransactionFees } from "../../fees/feesUtils";
 import { $exchangeRates } from "../../marketData/marketDataSlice";
-import { findExchangeRate } from "../../marketData/marketDataUtils";
+import { findAssetExchangeRate } from "../../marketData/marketDataUtils";
 import { $renNetwork } from "../../network/networkSlice";
 import { TransactionFees } from "../../transactions/components/TransactionFees";
 import { setCurrentTxId } from "../../transactions/transactionsSlice";
@@ -88,7 +88,7 @@ export const MintFeesStep: FunctionComponent<TxConfigurationStepProps> = ({
   const { chain } = useSelector($wallet);
   const network = useSelector($renNetwork);
   const exchangeRates = useSelector($exchangeRates);
-  const currencyUsdRate = findExchangeRate(exchangeRates, currency);
+  const currencyUsdRate = findAssetExchangeRate(exchangeRates, currency);
   const handleAmountChange = useCallback((event) => {
     const newValue = event.target.value.replace(",", ".");
     if (!isNaN(newValue)) {

src/features/release-old/releaseSlice.ts

@@ -2,7 +2,7 @@ import { createSelector, createSlice, PayloadAction } from "@reduxjs/toolkit";
 import { RootState } from "../../store/rootReducer";
 import { BridgeCurrency } from "../../utils/assetConfigs";
 import { $exchangeRates } from "../marketData/marketDataSlice";
-import { findExchangeRate } from "../marketData/marketDataUtils";
+import { findAssetExchangeRate } from "../marketData/marketDataUtils";
 
 type ReleaseState = {
   currency: BridgeCurrency;
@@ -63,7 +63,7 @@ export const $releaseAmount = createSelector(
 export const $releaseCurrencyUsdRate = createSelector(
   $releaseCurrency,
   $exchangeRates,
-  (currencySymbol, rates) => findExchangeRate(rates, currencySymbol, "USD")
+  (currencySymbol, rates) => findAssetExchangeRate(rates, currencySymbol, "USD")
 );
 export const $releaseUsdAmount = createSelector(
   $releaseAmount,

src/features/release-old/steps/ReleaseFeesStep.tsx

@@ -41,7 +41,10 @@ import {
 import { useFetchFees } from "../../fees/feesHooks";
 import { getTransactionFees } from "../../fees/feesUtils";
 import { $exchangeRates } from "../../marketData/marketDataSlice";
-import { findExchangeRate, USD_SYMBOL } from "../../marketData/marketDataUtils";
+import {
+  findAssetExchangeRate,
+  USD_SYMBOL,
+} from "../../marketData/marketDataUtils";
 import { $renNetwork } from "../../network/networkSlice";
 import { TransactionFees } from "../../transactions/components/TransactionFees";
 import {
@@ -103,7 +106,7 @@ export const ReleaseFeesStep: FunctionComponent<TxConfigurationStepProps> = ({
   });
 
   const chainConfig = getChainConfig(chain);
-  const destinationCurrencyUsdRate = findExchangeRate(
+  const destinationCurrencyUsdRate = findAssetExchangeRate(
     rates,
     destinationCurrency,
     USD_SYMBOL

src/features/release-old/steps/ReleaseProcessStep.tsx

@@ -42,7 +42,7 @@ import { usePageTitle, usePaperTitle } from "../../../providers/TitleProviders";
 import { getBurnChainMap } from "../../../services/rentx";
 import { getChainConfigByRentxName } from "../../../utils/assetConfigs";
 import { $exchangeRates } from "../../marketData/marketDataSlice";
-import { findExchangeRate } from "../../marketData/marketDataUtils";
+import { findAssetExchangeRate } from "../../marketData/marketDataUtils";
 import {
   BrowserNotificationButton,
   BrowserNotificationsDrawer,
@@ -116,11 +116,8 @@ export const ReleaseProcessStep: FunctionComponent<RouteComponentProps> = ({
   }, [history]);
   const sourceChain = parsedTx?.sourceChain;
 
-  const {
-    menuOpened,
-    handleMenuOpen,
-    handleMenuClose,
-  } = useTransactionMenuControl();
+  const { menuOpened, handleMenuOpen, handleMenuClose } =
+    useTransactionMenuControl();
 
   const {
     modalOpened,
@@ -155,13 +152,10 @@ export const ReleaseProcessStep: FunctionComponent<RouteComponentProps> = ({
     return await getBurnChainMap(providers);
   }, [enabledChains]);
 
-  const {
-    burnCurrencyConfig,
-    burnChainConfig,
-    releaseCurrencyConfig,
-  } = getBurnAndReleaseParams(tx);
+  const { burnCurrencyConfig, burnChainConfig, releaseCurrencyConfig } =
+    getBurnAndReleaseParams(tx);
   const amount = Number(tx.targetAmount);
-  const releaseCurrencyUsdRate = findExchangeRate(
+  const releaseCurrencyUsdRate = findAssetExchangeRate(
     rates,
     releaseCurrencyConfig.symbol
   );
@@ -270,10 +264,9 @@ type ReleaseTransactionStatusProps = {
   burnChainMap: any;
 };
 
-const ReleaseTransactionStatus: FunctionComponent<ReleaseTransactionStatusProps> = ({
-  tx,
-  burnChainMap,
-}) => {
+const ReleaseTransactionStatus: FunctionComponent<
+  ReleaseTransactionStatusProps
+> = ({ tx, burnChainMap }) => {
   const { t } = useTranslation();
   const history = useHistory();
   const location = useLocation();

src/features/transactions/components/TransactionFees.tsx

@@ -23,7 +23,7 @@ import { useFetchFees } from "../../fees/feesHooks";
 import { getTransactionFees } from "../../fees/feesUtils";
 import { $exchangeRates, $gasPrices } from "../../marketData/marketDataSlice";
 import {
-  findExchangeRate,
+  findAssetExchangeRate,
   findGasPrice,
   USD_SYMBOL,
 } from "../../marketData/marketDataUtils";
@@ -55,15 +55,19 @@ export const TransactionFees: FunctionComponent<TransactionFeesProps> = ({
   const nativeCurrencyConfig = getCurrencyConfig(getNativeCurrency(currency));
   const exchangeRates = useSelector($exchangeRates);
   const gasPrices = useSelector($gasPrices);
-  const currencyUsdRate = findExchangeRate(exchangeRates, currency, USD_SYMBOL);
+  const currencyUsdRate = findAssetExchangeRate(
+    exchangeRates,
+    currency,
+    USD_SYMBOL
+  );
   const gasPrice = findGasPrice(gasPrices, chain);
   const targetChainConfig = getChainConfig(chain);
   const decimals = getReleaseAssetDecimals(
     nativeCurrencyConfig.sourceChain,
     nativeCurrencyConfig.symbol
   );
 
-  const targetChainCurrencyUsdRate = findExchangeRate(
+  const targetChainCurrencyUsdRate = findAssetExchangeRate(
     exchangeRates,
     targetChainConfig.nativeCurrency,
     USD_SYMBOL

src/features/wallet/walletHooks.ts

@@ -19,6 +19,9 @@ type WalletData = ReturnType<typeof useMultiwallet> & {
 };
 
 const resolveWalletByProvider = (provider: any) => {
+  if (!provider) {
+    return Wallet.Metamask; // TODO: is it valid ?
+  }
   if (provider?.isMetaMask) {
     return Wallet.Metamask;
   }
@@ -34,7 +37,7 @@ const resolveWalletByProvider = (provider: any) => {
   if (provider?.isMewConnect || provider?.isMEWConnect) {
     return Wallet.MewConnect;
   }
-  console.warn("Unresolved wallet");
+  console.warn("Unresolved wallet", provider);
   return Wallet.Metamask; // throw error?
 };