Moving project ID to client side environment variable

Author: mzkrasner

.env.example

@@ -19,4 +19,7 @@ CERAMIC_PRIVATE_KEY=""
 # Special Aggregation Model ID (you can leave this as-is)
 AGGREGATION_ID="kjzl6hvfrbw6cbe5nn2fktpmpbq42ouepa91pjv899k01yluz6r1zuq5phlliaq"
 
+# Client-side project ID variable from walletconnect
+NEXT_PUBLIC_PROJECT_ID=""
+
 

README.md

@@ -38,7 +38,7 @@ A default value for this environment variable has been provided for you within t
 
 **PROJECT_ID**
 
-We will be using [WalletConnect's](https://walletconnect.com/) Web3Modal for Web3 authentication. In your [_app.tsx](./src/pages/_app.tsx) file, you will need to enter an active value for the `PROJECT_ID` constant defined on line 10. 
+We will be using [WalletConnect's](https://walletconnect.com/) Web3Modal for Web3 authentication. In your new .env file, assign your project id to the key labeled `NEXT_PUBLIC_PROJECT_ID`. 
 
 You can set up a developer account for free by visiting [cloud.walletconnect.com](https://cloud.walletconnect.com/sign-in). Once authenticated, create a new app and copy over the "Project ID" value (found in the dashboard view for that corresponding app).
 

pnpm-lock.yaml

@@ -34,6 +34,7 @@ export const env = createEnv({
    */
   client: {
     // NEXT_PUBLIC_CLIENTVAR: z.string(),
+    NEXT_PUBLIC_PROJECT_ID: z.string(),
   },
 
   /**
@@ -48,6 +49,7 @@ export const env = createEnv({
     DISCORD_CLIENT_SECRET: process.env.DISCORD_CLIENT_SECRET,
     CERAMIC_PRIVATE_KEY: process.env.CERAMIC_PRIVATE_KEY,
     AGGREGATION_ID: process.env.AGGREGATION_ID,
+    NEXT_PUBLIC_PROJECT_ID: process.env.NEXT_PUBLIC_PROJECT_ID,
   },
   /**
    * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially

src/env.js

@@ -4,9 +4,10 @@ import { SessionProvider } from "next-auth/react";
 import { WagmiConfig } from "wagmi";
 import { mainnet } from "wagmi/chains";
 import { createWeb3Modal, defaultWagmiConfig } from "@web3modal/wagmi/react";
+import {env} from "@/env";
 import "@/styles/globals.css";
 
-const PROJECT_ID = "";
+const PROJECT_ID = env.NEXT_PUBLIC_PROJECT_ID ?? "";
 
 const chains = [mainnet];
 const wagmiConfig = defaultWagmiConfig({ chains, projectId: PROJECT_ID });