make NEXT_PUBLIC_NETWORK_RPC_URL optional

.vscode/tasks.json

@@ -251,7 +251,7 @@
             "presentation": {
                 "reveal": "always",
                 "panel": "shared",
-                "close": true,
+                "close": false,
                 "revealProblems": "onProblem",
                 "focus": true,
             },

README.md

@@ -46,7 +46,7 @@ The app instance could be customized by passing following variables to NodeJS en
 | NEXT_PUBLIC_NETWORK_SHORT_NAME | `string` *(optional)* | Used for SEO attributes (page title and description) | `OoG` |
 | NEXT_PUBLIC_NETWORK_TYPE | `string` *(optional)* | Network type (used for matching pre-defined assets, e.g network logo and icon, which are stored in the project). See all possible values here | `xdai_mainnet` |
 | NEXT_PUBLIC_NETWORK_ID | `number` | Chain id, see [https://chainlist.org/](https://chainlist.org/) for the reference | `99` |
-| NEXT_PUBLIC_NETWORK_RPC_URL | `string` | Chain server RPC url, see [https://chainlist.org/](https://chainlist.org/) for the reference | `https://core.poa.network` |
+| NEXT_PUBLIC_NETWORK_RPC_URL | `string` *(optional)* | Chain server RPC url, see [https://chainlist.org/](https://chainlist.org/) for the reference. If not provided, some functionality of the explorer, related to smart contracts interaction and third-party apps integration, will be unavailable | `https://core.poa.network` |
 | NEXT_PUBLIC_NETWORK_CURRENCY_NAME | `string` | Network currency name | `Ether` |
 | NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL | `string` | Network currency symbol | `ETH` |
 | NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS | `string` | Network currency decimals | `18` |

lib/hooks/useNavItems.tsx

@@ -33,7 +33,7 @@ interface ReturnType {
 }
 
 export default function useNavItems(): ReturnType {
-  const isMarketplaceFilled = appConfig.marketplaceAppList.length > 0;
+  const isMarketplaceFilled = appConfig.marketplaceAppList.length > 0 && appConfig.network.rpcUrl;
 
   const router = useRouter();
   const pathname = router.pathname;

ui/address/AddressContract.tsx

@@ -20,40 +20,47 @@ interface Props {
   addressHash?: string;
 }
 
-export const currentChain: Chain = {
-  id: Number(appConfig.network.id),
-  name: appConfig.network.name || '',
-  network: appConfig.network.name || '',
-  nativeCurrency: {
-    decimals: appConfig.network.currency.decimals,
-    name: appConfig.network.currency.name || '',
-    symbol: appConfig.network.currency.symbol || '',
-  },
-  rpcUrls: {
-    'default': {
-      http: [ appConfig.network.rpcUrl || '' ],
-    },
-  },
-  blockExplorers: {
-    'default': {
-      name: 'Blockscout',
-      url: appConfig.baseUrl,
-    },
-  },
-};
+const { wagmiClient, ethereumClient } = (() => {
+  try {
+    const currentChain: Chain = {
+      id: Number(appConfig.network.id),
+      name: appConfig.network.name || '',
+      network: appConfig.network.name || '',
+      nativeCurrency: {
+        decimals: appConfig.network.currency.decimals,
+        name: appConfig.network.currency.name || '',
+        symbol: appConfig.network.currency.symbol || '',
+      },
+      rpcUrls: {
+        'default': {
+          http: [ appConfig.network.rpcUrl || '' ],
+        },
+      },
+      blockExplorers: {
+        'default': {
+          name: 'Blockscout',
+          url: appConfig.baseUrl,
+        },
+      },
+    };
 
-const chains = [ currentChain ];
+    const chains = [ currentChain ];
 
-const { provider } = configureChains(chains, [
-  walletConnectProvider({ projectId: appConfig.walletConnect.projectId || '' }),
-]);
-const wagmiClient = createClient({
-  autoConnect: true,
-  connectors: modalConnectors({ appName: 'web3Modal', chains }),
-  provider,
-});
+    const { provider } = configureChains(chains, [
+      walletConnectProvider({ projectId: appConfig.walletConnect.projectId || '' }),
+    ]);
+    const wagmiClient = createClient({
+      autoConnect: true,
+      connectors: modalConnectors({ appName: 'web3Modal', chains }),
+      provider,
+    });
+    const ethereumClient = new EthereumClient(wagmiClient, chains);
 
-const ethereumClient = new EthereumClient(wagmiClient, chains);
+    return { wagmiClient, ethereumClient };
+  } catch (error) {
+    return { wagmiClient: undefined, ethereumClient: undefined };
+  }
+})();
 
 const TAB_LIST_PROPS = {
   columnGap: 3,
@@ -61,6 +68,12 @@ const TAB_LIST_PROPS = {
 
 const AddressContract = ({ addressHash, tabs }: Props) => {
   const modalZIndex = useToken<string>('zIndices', 'modal');
+  const web3ModalTheme = useColorModeValue('light', 'dark');
+
+  const noProviderTabs = React.useMemo(() => tabs.filter(({ id }) => id === 'contact_code'), [ tabs ]);
+  if (!wagmiClient || !ethereumClient) {
+    return <RoutedTabs tabs={ noProviderTabs } variant="outline" colorScheme="gray" size="sm" tabListProps={ TAB_LIST_PROPS }/>;
+  }
 
   return (
     <WagmiConfig client={ wagmiClient }>
@@ -71,7 +84,7 @@ const AddressContract = ({ addressHash, tabs }: Props) => {
         projectId={ appConfig.walletConnect.projectId }
         ethereumClient={ ethereumClient }
         themeZIndex={ Number(modalZIndex) }
-        themeMode={ useColorModeValue('light', 'dark') }
+        themeMode={ web3ModalTheme }
         themeBackground="themeColor"
       />
     </WagmiConfig>