make api masking optional

.env.example

@@ -7,6 +7,8 @@ NEXT_PUBLIC_MULTIVERSX_CHAIN = devnet
 
 # This is the masked/proxied public API endpoint
 # only current instance of the Dapp can use it if only API_ALLOWED_DAPP_HOST is set
+# Removing this line will disable the masking and make all requests go directly 
+# to the public MultiversX API endpoints.
 NEXT_PUBLIC_MULTIVERSX_API = /api/multiversx
 
 # This is basically the main domain of your dapp

README.md

@@ -240,6 +240,8 @@ NEXT_PUBLIC_DAPP_HOST = http://localhost:3000
 
 # Your main MultiversX API can be a custom one. There won't be a possibility
 # to reveal this endpoint, it will be masked by NEXT_PUBLIC_MULTIVERSX_API
+# Removing this line will disable the masking and make all requests go directly 
+# to the public MultiversX API endpoints.
 MULTIVERSX_CUSTOM_API = https://devnet-api.elrond.com
 
 # Only this host will be allowed to consume the API (optional)

config/network.ts

@@ -66,3 +66,7 @@ export const networkConfig: Record<string, NetworkType> = {
     apiTimeout: '4000',
   },
 };
+
+export const getActiveNetworkConfiguration = () => {
+  return networkConfig[chainType];
+};

hooks/auth/useMobileAppLogin.tsx

@@ -3,7 +3,7 @@ import { Account, Address } from '@elrondnetwork/erdjs';
 import { ApiNetworkProvider } from '@elrondnetwork/erdjs-network-providers';
 import { WalletConnectProvider } from '@elrondnetwork/erdjs-wallet-connect-provider';
 import { useState, useRef } from 'react';
-import { networkConfig, chainType } from '../../config/network';
+import { getActiveNetworkConfiguration } from '../../config/network';
 import { LoginMethodsEnum } from '../../types/enums';
 import {
   setAccountState,
@@ -40,7 +40,7 @@ export const useMobileAppLogin = (params?: Login) => {
 
   const login = async () => {
     const bridgeAddress = getBridgeAddressFromNetwork(
-      networkConfig[chainType].walletConnectBridgeAddresses
+      getActiveNetworkConfiguration().walletConnectBridgeAddresses
     );
 
     if (!bridgeAddress || !apiNetworkProvider) {

hooks/auth/useNetworkSync.tsx

@@ -16,9 +16,8 @@ import { ExtensionProvider } from '@elrondnetwork/erdjs-extension-provider';
 import { ApiNetworkProvider } from '@elrondnetwork/erdjs-network-providers';
 import { HWProvider } from '@elrondnetwork/erdjs-hw-provider';
 import {
-  networkConfig,
-  chainType,
   DAPP_INIT_ROUTE,
+  getActiveNetworkConfiguration,
 } from '../../config/network';
 import { getBridgeAddressFromNetwork } from '../../utils/bridgeAddress';
 import { getParamFromUrl } from '../../utils/getParamFromUrl';
@@ -100,10 +99,11 @@ export const useNetworkSync = () => {
     const askForApiNetworkProvider = async () => {
       let apiNetworkProvider = apiNetworkProviderRef?.current;
       if (!apiNetworkProvider) {
-        const publicApiEndpoint = process.env.NEXT_PUBLIC_MULTIVERSX_API;
+        const activeConfiguration = getActiveNetworkConfiguration();
+        const publicApiEndpoint = activeConfiguration.apiAddress;
         if (publicApiEndpoint) {
           apiNetworkProvider = new ApiNetworkProvider(publicApiEndpoint, {
-            timeout: Number(networkConfig[chainType].apiTimeout),
+            timeout: Number(activeConfiguration.apiTimeout),
           });
           apiNetworkProviderRef.current = apiNetworkProvider;
           network.setNetworkState('apiNetworkProvider', apiNetworkProvider);
@@ -133,6 +133,7 @@ export const useNetworkSync = () => {
       }
 
       if (!dappProvider) {
+        const networkConfiguration = getActiveNetworkConfiguration();
         switch (loginMethod) {
           // Browser extension auth (Maiar defi wallet)
           case LoginMethodsEnum.extension:
@@ -166,7 +167,7 @@ export const useNetworkSync = () => {
             };
 
             const bridgeAddress = getBridgeAddressFromNetwork(
-              networkConfig[chainType].walletConnectBridgeAddresses
+              networkConfiguration.walletConnectBridgeAddresses
             );
             dappProvider = new WalletConnectProvider(
               bridgeAddress,
@@ -195,7 +196,7 @@ export const useNetworkSync = () => {
             }
             if (address) {
               dappProvider = new WalletProvider(
-                `${networkConfig[chainType].walletAddress}${DAPP_INIT_ROUTE}`
+                `${networkConfiguration.walletAddress}${DAPP_INIT_ROUTE}`
               );
               dappProviderRef.current = dappProvider;
               network.setNetworkState('dappProvider', dappProvider);

hooks/auth/useWebWalletLogin.tsx

@@ -2,9 +2,8 @@ import { WalletProvider } from '@elrondnetwork/erdjs-web-wallet-provider';
 import { LoginMethodsEnum } from '../../types/enums';
 import { getNewLoginExpiresTimestamp } from '../../utils/expiresAt';
 import {
-  chainType,
   DAPP_INIT_ROUTE,
-  networkConfig,
+  getActiveNetworkConfiguration,
 } from '../../config/network';
 import { setLoginInfoState, setLoggingInState } from '../../store/auth';
 import { useLogout } from './useLogout';
@@ -20,7 +19,7 @@ export const useWebWalletLogin = (params?: Login) => {
     setLoggingInState('pending', true);
 
     const providerInstance = new WalletProvider(
-      `${networkConfig[chainType].walletAddress}${DAPP_INIT_ROUTE}`
+      `${getActiveNetworkConfiguration().walletAddress}${DAPP_INIT_ROUTE}`
     );
 
     const callbackUrl: string =

hooks/core/useScTransaction.tsx

@@ -11,7 +11,7 @@ import { ApiNetworkProvider } from '@elrondnetwork/erdjs-network-providers';
 import { useSnapshot } from 'valtio';
 import { accountState, loginInfoState } from '../../store/auth';
 import { getNetworkState } from '../../store/network';
-import { chainType, networkConfig } from '../../config/network';
+import { getActiveNetworkConfiguration } from '../../config/network';
 import { DappProvider } from '../../types/network';
 import { useState } from 'react';
 import {
@@ -81,7 +81,7 @@ export function useScTransaction(
         data,
         gasLimit,
         ...(value ? { value: TokenPayment.egldFromAmount(value) } : {}),
-        chainID: networkConfig[chainType].shortId,
+        chainID: getActiveNetworkConfiguration().shortId,
         receiver: new Address(smartContractAddress),
         sender: new Address(accountSnap.address),
       });

hooks/core/useTransaction.tsx

@@ -10,7 +10,7 @@ import { ApiNetworkProvider } from '@elrondnetwork/erdjs-network-providers';
 import { useSnapshot } from 'valtio';
 import { accountState, loginInfoState } from '../../store/auth';
 import { getNetworkState } from '../../store/network';
-import { chainType, networkConfig } from '../../config/network';
+import { getActiveNetworkConfiguration } from '../../config/network';
 import { DappProvider } from '../../types/network';
 import { useState } from 'react';
 import { useWebWalletTxSend } from './common-helpers/useWebWalletTxSend';
@@ -73,7 +73,7 @@ export function useTransaction(
         nonce: currentNonce,
         receiver: new Address(address),
         gasLimit,
-        chainID: networkConfig[chainType].shortId,
+        chainID: getActiveNetworkConfiguration().shortId,
         data,
         ...(value ? { value: TokenPayment.egldFromAmount(value) } : {}),
         sender: new Address(accountSnap.address),

next.config.js

@@ -14,6 +14,9 @@ const nextConfig = {
   },
   reactStrictMode: false,
   async rewrites() {
+    if (!process.env.NEXT_PUBLIC_MULTIVERSX_API) {
+      return [];
+    }
     return [
       {
         source: `${process.env.NEXT_PUBLIC_MULTIVERSX_API}/:path*`,

utils/apiCall.ts

@@ -1,7 +1,9 @@
 // Usefull for the api calls on the backend side, but not only. It is also used as fetcher in hooks
 
+import { getActiveNetworkConfiguration } from '../config/network';
+
 export const apiCall = {
-  baseEndpoint: `${process.env.NEXT_PUBLIC_MULTIVERSX_API}`,
+  baseEndpoint: getActiveNetworkConfiguration().apiAddress,
 
   async get(endpoint: string, options?: Record<string, unknown>) {
     if (typeof fetch !== 'undefined') {