make api masking optional

.env.example

@@ -5,8 +5,27 @@
 # MultiversX chain (can be devnet, testnet, mainnet)
 NEXT_PUBLIC_MULTIVERSX_CHAIN = devnet
 
-# This is the masked/proxied MULTIVERSX_CUSTOM_API endpoint
-# only current instance of the Dapp can use it if only API_ALLOWED_DAPP_HOST is set
+#
+# Either the public API endpoint of your MultiversX api
+# or the masked proxy that will be used instead.
+#
+# You have three options:
+#
+# 1. By commenting this out the dapp will use the default
+#    MultiversX api endpoint (e.g. https://devnet-api.elrond.com)
+#
+#    Note: MULTIVERSX_PRIVATE_API must be removed/commented out.
+#
+# 2. Set this to an absolute address to use a custom MultiversX api endpoint
+#    (e.g. http://dev.mydomain.com)
+#
+#    Note: MULTIVERSX_PRIVATE_API must be removed/commented out.
+#
+# 3. Enter a relative path to proxy/mask your MultiversX api endpoint (e.g. /api/multiversx)
+#    Only current instance of the Dapp can use it if only API_ALLOWED_DAPP_HOST is set.
+#
+#    Note: MULTIVERSX_PRIVATE_API must include the actual MultiversX API endpoint.
+#
 NEXT_PUBLIC_MULTIVERSX_API = /api/multiversx
 
 # This is basically the main domain of your dapp
@@ -16,9 +35,11 @@ NEXT_PUBLIC_DAPP_HOST = http://localhost:3000
 # Private variables (used on backend)
 # =============================================
 
-# 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
-MULTIVERSX_CUSTOM_API = https://devnet-api.elrond.com
+# The MultiversX api endpoint, that is being masked/proxied.
+# This can be either a custom api endpoint or the default MultiversX api endpoint.
+# You will have to delete this or comment this out, if you don't wanna
+# mask / proxy your MultiversX api endpoint.
+MULTIVERSX_PRIVATE_API = https://devnet-api.elrond.com
 
 # Only this host will be allowed to consume the API (optional)
 # It will work only inside the Dapp, no one will be able to use the endpoint, even in browser

README.md

@@ -262,8 +262,27 @@ Here are all variables:
 # MultiversX chain (can be devnet, testnet, mainnet)
 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
+#
+# Either the public API endpoint of your elrond api
+# or the masked proxy that will be used instead.
+#
+# You have three options:
+#
+# 1. By commenting this out the dapp will use the default
+#    MultiversX api endpoint (e.g. https://devnet-api.elrond.com)
+#
+#    Note: MULTIVERSX_PRIVATE_API needs to be removed/commented out.
+#
+# 2. Set this to an absolute address to use a custom MultiversX api endpoint
+#    (e.g. http://dev.mydomain.com)
+#
+#    Note: MULTIVERSX_PRIVATE_API needs to be removed/commented out.
+#
+# 3. Enter a relative path to proxy/mask your MultiversX api endpoint (e.g. /api/multiversx)
+#    Only current instance of the Dapp can use it if only API_ALLOWED_DAPP_HOST is set.
+#
+#    Note: MULTIVERSX_PRIVATE_API must include the actual MultiversX API endpoint.
+#
 NEXT_PUBLIC_MULTIVERSX_API = /api/multiversx
 
 # This is basically the main domain of your dapp
@@ -273,9 +292,11 @@ NEXT_PUBLIC_DAPP_HOST = http://localhost:3000
 # Private variables (used on the backend)
 # =============================================
 
-# 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
-MULTIVERSX_CUSTOM_API = https://devnet-api.elrond.com
+# The MultiversX api endpoint, that is being masked/proxied.
+# This can be either a custom api endpoint or the default MultiversX api endpoint.
+# You will have to delete this or comment this out, if you don't wanna
+# mask / proxy your MultiversX api endpoint.
+MULTIVERSX_PRIVATE_API = https://devnet-api.elrond.com
 
 # Only this host will be allowed to consume the API (optional)
 # It will work only inside the Dapp, no one will be able to use the endpoint, even in browser

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,10 +14,13 @@ const nextConfig = {
   },
   reactStrictMode: false,
   async rewrites() {
+    if (!process.env.MULTIVERSX_PRIVATE_API) {
+      return [];
+    }
     return [
       {
         source: `${process.env.NEXT_PUBLIC_MULTIVERSX_API}/:path*`,
-        destination: `${process.env.MULTIVERSX_CUSTOM_API}/:path*`,
+        destination: `${process.env.MULTIVERSX_PRIVATE_API}/:path*`,
       },
     ];
   },

utils/apiCall.ts

@@ -1,9 +1,11 @@
 // Usefull for the api calls on the backend side, but not only. It is also used as fetcher in hooks
 
-export const apiCall = {
-  baseEndpoint: `${process.env.NEXT_PUBLIC_MULTIVERSX_API}`,
+import { getActiveNetworkConfiguration } from '../config/network';
 
+export const apiCall = {
   async get(endpoint: string, options?: Record<string, unknown>) {
+    const baseEndpoint =
+      options?.baseEndpoint || getActiveNetworkConfiguration().apiAddress;
     if (typeof fetch !== 'undefined') {
       const defaultOptions = {
         method: 'GET',
@@ -14,7 +16,7 @@ export const apiCall = {
       };
 
       const response = await fetch(
-        (options?.baseEndpoint || this.baseEndpoint) + endpoint,
+        baseEndpoint + endpoint,
         Object.assign(defaultOptions, options || {})
       );
 
@@ -44,8 +46,10 @@ export const apiCall = {
         body: JSON.stringify(payload || {}),
       };
 
+      const baseEndpoint =
+        options?.baseEndpoint || getActiveNetworkConfiguration().apiAddress;
       const response = await fetch(
-        (options?.baseEndpoint || this.baseEndpoint) + endpoint,
+        baseEndpoint + endpoint,
         Object.assign(defaultOptions, options || {})
       );
 
@@ -74,8 +78,10 @@ export const apiCall = {
         body: JSON.stringify(payload || {}),
       };
 
+      const baseEndpoint =
+        options?.baseEndpoint || getActiveNetworkConfiguration().apiAddress;
       const response = await fetch(
-        (options?.baseEndpoint || this.baseEndpoint) + endpoint,
+        baseEndpoint + endpoint,
         Object.assign(defaultOptions, options || {})
       );
 
@@ -99,8 +105,10 @@ export const apiCall = {
         },
       };
 
+      const baseEndpoint =
+        options?.baseEndpoint || getActiveNetworkConfiguration().apiAddress;
       const response = await fetch(
-        (options?.baseEndpoint || this.baseEndpoint) + endpoint,
+        baseEndpoint + endpoint,
         Object.assign(defaultOptions, options || {})
       );