feat: add CDP Node (#471)

coinbase · Apr 30, 2024 · c821e67 · c821e67
1 parent 1cf557c
commit c821e67
Show file tree

Hide file tree

Showing 8 changed files with 43 additions and 8 deletions.
diff --git a/.changeset/beige-doors-check.md b/.changeset/beige-doors-check.md
@@ -0,0 +1,5 @@
+---
+'@coinbase/build-onchain-apps': minor
+---
+
+**feat**: added CDP (Coinbase Developer Portal) Node as RPC URL. You can learn more about this at https://www.coinbase.com/developer-platform/products/base-node
diff --git a/src/create/getUserInput.ts b/src/create/getUserInput.ts
@@ -4,6 +4,7 @@ import { experiences } from './experiences';
 export type EnvVar = {
   walletConnectProjectID: string;
   blockExplorerApiKey: string;
+  rpcUrl: string;
 };
 
 function kebabcase(str: string) {
@@ -62,6 +63,7 @@ export async function getUserInput() {
     envVars = await prompts.group(
       {
         walletConnectProjectID: () => {
+          if (project.pickSmartWallet) return;
           return prompts.text({
             message: 'WalletConnect Project ID [optional]',
             placeholder: 'Visit https://cloud.walletconnect.com',
@@ -71,6 +73,18 @@ export async function getUserInput() {
             },
           });
         },
+        rpcUrl: () => {
+          return prompts.text({
+            message: 'Base RPC URL [required]',
+            placeholder:
+              'Visit https://www.coinbase.com/developer-platform/products/base-node',
+            validate: (value) => {
+              if (value.length === 0) return;
+              if (value.length < 79)
+                return 'RPC must be at least 79 characters';
+            },
+          });
+        },
         blockExplorerApiKey: () => {
           return prompts.text({
             message: 'Basescan Block Explorer API Key [optional]',

diff --git a/src/create/setupEnvFiles.ts b/src/create/setupEnvFiles.ts
@@ -8,8 +8,8 @@ export function setupEnvFiles(projectDir: string, envVar: EnvVar) {
   const envLocalPath = path.join(projectDir, './web/.env.local');
   const content = `NEXT_PUBLIC_GOOGLE_ANALYTICS_ID=
 NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=${envVar.walletConnectProjectID ?? '"GET_ID_FROM_WALLET_CONNET" # See https://cloud.walletconnect.com'}
-NEXT_PUBLIC_RPC_URL="GET_FROM_COINBASE_CLOUD"
-NEXT_PUBLIC_PAYMASTER_URL="GET_FROM_COINBASE_CLOUD"
+NEXT_PUBLIC_RPC_URL=${envVar.rpcUrl ?? '"GET_FROM_COINBASE_DEVELOPER_PLATFORM" # See https://portal.cdp.coinbase.com/products/base'}
+NEXT_PUBLIC_PAYMASTER_URL=${envVar.rpcUrl ?? '"GET_FROM_COINBASE_DEVELOPER_PLATFORM" # See https://portal.cdp.coinbase.com/products/base'}
 NEXT_PUBLIC_PRIVY_ID="GET_FROM_PRIVY"
 ENVIRONMENT=localhost
 `;

diff --git a/template/web/.env.test b/template/web/.env.test
@@ -1,3 +1,4 @@
 NEXT_PUBLIC_GOOGLE_ANALYTICS_ID=GA_TEST_1234567890
 NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=TEST_1234567890
+NEXT_PUBLIC_RPC_URL=https://sepolia.base.org
 ENVIRONMENT=localhost
diff --git a/template/web/README.md b/template/web/README.md
@@ -2,10 +2,14 @@
 
 ## Getting Started
 
-#### Step 1: Obtain Wallet Connect Project ID from [walletconnect.com](https://cloud.walletconnect.com/sign-in) and assign to the `.env.local` file
+#### Step 1: Setup Environment Variables
+
+- Obtain the Wallet Connect Project ID from [walletconnect.com](https://cloud.walletconnect.com/sign-in) and assign to the `.env.local` file
+- Obtain a Base RPC URL from [Coinbase Developer Platform](https://portal.cdp.coinbase.com/products/base) and assign to the `.env.local` file
 
 ```bash
 NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=ADD_WALLET_CONNECT_PROJECT_ID_HERE
+NEXT_PUBLIC_RPC_URL=ADD_RPC_URL_HERE
 ```
 
 #### Step 2: Install and Run your onchain app

diff --git a/template/web/src/OnchainProviders.tsx b/template/web/src/OnchainProviders.tsx
@@ -11,7 +11,14 @@ type Props = { children: ReactNode };
 
 const queryClient = new QueryClient();
 
-const wagmiConfig = createWagmiConfig();
+const rpcUrl = process.env.NEXT_PUBLIC_RPC_URL ?? '';
+if (!rpcUrl) {
+  const rpcErrMessage =
+    'To connect to the blockchain you need to provide a NEXT_PUBLIC_RPC_URL env variable';
+  throw new Error(rpcErrMessage);
+}
+
+const wagmiConfig = createWagmiConfig(rpcUrl);
 
 /**
  * TODO Docs ~~~

diff --git a/template/web/src/store/createWagmiConfig.ts b/template/web/src/store/createWagmiConfig.ts
@@ -2,11 +2,15 @@ import { createConfig, http } from 'wagmi';
 import { base, baseSepolia } from 'wagmi/chains';
 import { coinbaseWallet } from 'wagmi/connectors';
 
-export function createWagmiConfig(projectId?: string) {
+export function createWagmiConfig(rpcUrl: string, projectId?: string) {
   // Keep this till we fully deprecated RK inside the template
   if (projectId) {
     console.log('projectId:', projectId);
   }
+
+  const baseUrl = rpcUrl.replace(/\/v1\/(.+?)\//, '/v1/base/');
+  const baseSepoliaUrl = rpcUrl.replace(/\/v1\/(.+?)\//, '/v1/base-sepolia/');
+
   return createConfig({
     chains: [baseSepolia],
     connectors: [
@@ -17,8 +21,8 @@ export function createWagmiConfig(projectId?: string) {
     ],
     ssr: true,
     transports: {
-      [baseSepolia.id]: http(),
-      [base.id]: http(),
+      [baseSepolia.id]: http(baseSepoliaUrl),
+      [base.id]: http(baseUrl),
     },
   });
 }
diff --git a/template/web/src/store/test/createWagmiConfig.test.ts b/template/web/src/store/test/createWagmiConfig.test.ts
@@ -22,7 +22,7 @@ describe('createWagmiConfig', () => {
     Environment.production,
   ])('returns valid Wagmi config when env=%s', (environment) => {
     process.env[EnvironmentKeys.environment] = environment;
-    const config = createWagmiConfig();
+    const config = createWagmiConfig('https://api.developer.coinbase.com/rpc/v1/base/example');
     expect(config.chains[0].id).toEqual(baseSepolia.id);
   });
 });