Moving project ID to client side environment variable

demo/fullstack-app/.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=""
+
 

demo/fullstack-app/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).
 
@@ -58,6 +58,10 @@ Once installed, run the application in developer mode:
 pnpm dev
 ```
 
+## Other Add-Ons
+
+If you want to view a version that integrates awarding points for having a Gitcoin Passport score, as well as uses the allocation documents from the points library, check out the [with-gitcoin](https://github.com/ceramicstudio/points-example/tree/with-gitcoin) branch.
+
 ## License
 
 Dual licensed under MIT and Apache 2

demo/fullstack-app/src/env.js

@@ -1,15 +1,19 @@
-import { createEnv } from '@t3-oss/env-nextjs'
-import { z } from 'zod'
+import { createEnv } from "@t3-oss/env-nextjs";
+import { z } from "zod";
 
-/* eslint-disable */
 export const env = createEnv({
   /**
    * Specify your server-side environment variables schema here. This way you can ensure the app
    * isn't built with invalid env vars.
    */
   server: {
-    NODE_ENV: z.enum(['development', 'test', 'production']).default('development'),
-    NEXTAUTH_SECRET: process.env.NODE_ENV === 'production' ? z.string() : z.string().optional(),
+    NODE_ENV: z
+      .enum(["development", "test", "production"])
+      .default("development"),
+    NEXTAUTH_SECRET:
+      process.env.NODE_ENV === "production"
+        ? z.string()
+        : z.string().optional(),
     NEXTAUTH_URL: z.preprocess(
       // This makes Vercel deployments not fail if you don't set NEXTAUTH_URL
       // Since NextAuth.js automatically uses the VERCEL_URL if present.
@@ -30,6 +34,7 @@ export const env = createEnv({
    */
   client: {
     // NEXT_PUBLIC_CLIENTVAR: z.string(),
+    NEXT_PUBLIC_PROJECT_ID: z.string(),
   },
 
   /**
@@ -44,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
@@ -55,4 +61,4 @@ export const env = createEnv({
    * `SOME_VAR=''` will throw an error.
    */
   emptyStringAsUndefined: true,
-})
+});

demo/fullstack-app/src/pages/_app.tsx

@@ -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 })