fix: build (#7)

* fix: build * dope * format * fix build --------- Co-authored-by: Ky Lee <[email protected]>
coinbase · Aug 7, 2024 · 5e354f9 · 5e354f9
1 parent a981453
commit 5e354f9
Show file tree

Hide file tree

Showing 9 changed files with 49 additions and 16 deletions.
diff --git a/.env.local.default b/.env.local.default
@@ -0,0 +1,11 @@
+# ~~~
+NEXT_PUBLIC_GOOGLE_ANALYTICS_ID=GA_TEST_1234567890
+
+# See https://www.coinbase.com/developer-platform/products/base-node
+NEXT_PUBLIC_CDP_API_KEY="CDP_API_KEY_1234567890"
+
+# ~~~
+NEXT_PUBLIC_ENVIRONMENT=localhost
+
+# See https://cloud.walletconnect.com/
+NEXT_PUBLIC_WC_PROJECT_ID="TEST_1234567890"
diff --git a/.env.local.example b/.env.local.example
@@ -1,5 +1,11 @@
+# ~~~
+NEXT_PUBLIC_GOOGLE_ANALYTICS_ID=
+
 # See https://www.coinbase.com/developer-platform/products/base-node
 NEXT_PUBLIC_CDP_API_KEY="GET_FROM_COINBASE_DEVELOPER_PLATFORM"
-ENVIRONMENT=localhost
+
+# ~~~
+NEXT_PUBLIC_ENVIRONMENT=localhost
+
 # See https://cloud.walletconnect.com/
-WALLET_CONNECTOR_PROJECT_ID="GET_FROM_WALLET_CONNECT"
+NEXT_PUBLIC_WC_PROJECT_ID="GET_FROM_WALLET_CONNECT"
diff --git a/.env.test b/.env.test
@@ -0,0 +1,11 @@
+# ~~~
+NEXT_PUBLIC_GOOGLE_ANALYTICS_ID=GA_TEST_1234567890
+
+# See https://www.coinbase.com/developer-platform/products/base-node
+NEXT_PUBLIC_CDP_API_KEY="CDP_API_KEY_1234567890"
+
+# ~~~
+NEXT_PUBLIC_ENVIRONMENT=localhost
+
+# See https://cloud.walletconnect.com/
+NEXT_PUBLIC_WC_PROJECT_ID="TEST_1234567890"
diff --git a/bun.lockb b/bun.lockb
diff --git a/next.config.js b/next.config.js
diff --git a/package.json b/package.json
@@ -17,7 +17,7 @@
     "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
-    "@coinbase/onchainkit": "^0.27.0",
+    "@coinbase/onchainkit": "^0.28.3",
     "next": "^14.2.5",
     "permissionless": "^0.1.26",
     "react": "^18",

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,10 +1,17 @@
 import type { Metadata } from 'next';
-import OnchainProviders from '../components/OnchainProviders';
 import { NEXT_PUBLIC_URL } from '../config';
 
 import './global.css';
 import '@coinbase/onchainkit/styles.css';
 import '@rainbow-me/rainbowkit/styles.css';
+import dynamic from 'next/dynamic';
+
+const OnchainProviders = dynamic(
+  () => import('src/components/OnchainProviders'),
+  {
+    ssr: false,
+  },
+);
 
 export const viewport = {
   width: 'device-width',

diff --git a/src/config.ts b/src/config.ts
@@ -5,5 +5,4 @@ export const NEXT_PUBLIC_URL =
     : 'https://onchain-app-template.vercel.app';
 // Add your API KEY from the Coinbase Developer Portal
 export const NEXT_PUBLIC_CDP_API_KEY = process.env.NEXT_PUBLIC_CDP_API_KEY;
-export const WALLET_CONNECTOR_PROJECT_ID =
-  process.env.WALLET_CONNECTOR_PROJECT_ID;
+export const NEXT_PUBLIC_WC_PROJECT_ID = process.env.NEXT_PUBLIC_WC_PROJECT_ID;
diff --git a/src/wagmi.ts b/src/wagmi.ts
@@ -7,7 +7,14 @@ import {
 } from '@rainbow-me/rainbowkit/wallets';
 import { http, createConfig } from 'wagmi';
 import { baseSepolia } from 'wagmi/chains';
-import { WALLET_CONNECTOR_PROJECT_ID } from './config';
+import { NEXT_PUBLIC_WC_PROJECT_ID } from './config';
+
+const projectId = NEXT_PUBLIC_WC_PROJECT_ID ?? '';
+if (!projectId) {
+  const providerErrMessage =
+    'To connect to all Wallets you need to provide a NEXT_PUBLIC_WC_PROJECT_ID env variable';
+  throw new Error(providerErrMessage);
+}
 
 const connectors = connectorsForWallets(
   [
@@ -22,7 +29,7 @@ const connectors = connectorsForWallets(
   ],
   {
     appName: 'onchainkit',
-    projectId: WALLET_CONNECTOR_PROJECT_ID || '',
+    projectId,
   },
 );