Externalizing required frontend config to a dot env file (#56)

* Externalizing required config to a dot env file

* Adding a dummy default value for walletconnect projectId

.gitignore

@@ -3,6 +3,7 @@
 frontend/node_modules/**
 frontend/.next/**
 frontend/src/hooks/contracts.tsx
+frontend/.env.local
 frontend/src/model/__generated__
 frontend/tsconfig.tsbuildinfo
 frontend/yarn.lock

frontend/.env

@@ -0,0 +1,14 @@
+# Web3Wallet requirement. See https://cloud.walletconnect.com/sign-in
+NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=WC_PROJECT_ID
+
+# Valid values are INFURA and ALCHEMY.
+# If left empty, the app will use the default public provider (see wagmi).
+NEXT_PUBLIC_PROVIDER_NAME=
+NEXT_PUBLIC_PROVIDER_API_KEY=
+
+# The chain ID of the network you want to connect to according wagmi.
+NEXT_PUBLIC_CHAIN_ID=
+
+# DApp node endpoints for GraphQL and Inspect services.
+NEXT_PUBLIC_GRAPHQL_URL=http://localhost:8080/graphql
+NEXT_PUBLIC_INSPECT_URL=http://localhost:8080/inspect

frontend/src/app/bounty/[bountyId]/exploit/page.tsx

@@ -79,13 +79,18 @@ const SendExploitPage: FC<BountyParams> = ({ params: { bountyId } }) => {
             new Buffer([0x18, 0xcc, 0x70, 0xaf]),
             Buffer.from(JSON.stringify(json)),
         ]);
-        const response = await fetch("http://localhost:8080/inspect", {
+
+        const INSPECT_URL = process.env.NEXT_PUBLIC_INSPECT_URL;
+        if (INSPECT_URL === undefined || INSPECT_URL == "")
+            throw new Error("An inspect URL is required");
+        const response = await fetch(INSPECT_URL, {
             method: "POST",
             headers: {
                 "Content-Type": "application/octet-stream",
             },
             body: buffer,
         });
+
         const body = await response.json();
         if (body.status == "Accepted") {
             setTestStatus("Exploit test succeeded!");

frontend/src/providers/graphqlProvider.tsx

@@ -1,7 +1,11 @@
 import { ApolloClient, InMemoryCache, ApolloProvider } from "@apollo/client";
 
+const GRAPHQL_URL = process.env.NEXT_PUBLIC_GRAPHQL_URL;
+if (GRAPHQL_URL === undefined || GRAPHQL_URL == "")
+    throw new Error("A GraphQL endpoint is required");
+
 const client = new ApolloClient({
-    uri: "http://localhost:8080/graphql",
+    uri: GRAPHQL_URL,
     cache: new InMemoryCache(),
 });
 

frontend/src/providers/walletProvider.tsx

@@ -10,17 +10,61 @@ import {
     optimism,
 } from "wagmi/chains";
 import { publicProvider } from "wagmi/providers/public";
+import { alchemyProvider } from "wagmi/providers/alchemy";
+import { infuraProvider } from "wagmi/providers/infura";
 
 // select chain based on env var
 const supportedChains = [foundry, mainnet, sepolia, optimismSepolia, optimism];
 const selectedChainId = parseInt(process.env.NEXT_PUBLIC_CHAIN_ID || "31337");
 const chain = supportedChains.find((c) => c.id == selectedChainId) || foundry;
 
 // only 1 chain is enabled, based on env var
-const { chains } = configureChains([chain], [publicProvider()]);
+function getChainConfiguration(chain: any) {
+    if (
+        process.env.NEXT_PUBLIC_PROVIDER_NAME === undefined ||
+        process.env.NEXT_PUBLIC_PROVIDER_NAME == ""
+    ) {
+        return configureChains([chain], [publicProvider()]);
+    } else if (
+        process.env.NEXT_PUBLIC_PROVIDER_NAME == "ALCHEMY" &&
+        process.env.NEXT_PUBLIC_PROVIDER_API_KEY !== undefined
+    ) {
+        return configureChains(
+            [chain],
+            [
+                alchemyProvider({
+                    apiKey: process.env.NEXT_PUBLIC_PROVIDER_API_KEY,
+                }),
+                publicProvider(),
+            ],
+        );
+    } else if (
+        process.env.NEXT_PUBLIC_PROVIDER_NAME == "INFURA" &&
+        process.env.NEXT_PUBLIC_PROVIDER_API_KEY !== undefined
+    ) {
+        return configureChains(
+            [chain],
+            [
+                infuraProvider({
+                    apiKey: process.env.NEXT_PUBLIC_PROVIDER_API_KEY,
+                }),
+                publicProvider(),
+            ],
+        );
+    } else {
+        throw new Error("Check your provider configuration (Name and API Key)");
+    }
+}
+const { chains } = getChainConfiguration(chain);
 
 // webconnect projectId
-const projectId = "bd3725877ae8cde37b7c439efe33857d";
+if (
+    process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID === undefined ||
+    process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID == ""
+) {
+    throw new Error("A WalletConnect projectId is required");
+}
+const projectId = process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID;
 
 const wagmiConfig = defaultWagmiConfig({
     chains,