feat: use api route for CDP RPC URL (coinbase#486)

Author: 0xAlec

.changeset/five-goats-know.md

@@ -0,0 +1,5 @@
+---
+'@coinbase/build-onchain-apps': minor
+---
+
+**feat** use api route for CDP RPC URL

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=${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_PRIVATE_RPC_URL=${envVar.rpcUrl ?? '"GET_FROM_COINBASE_DEVELOPER_PLATFORM" # See https://www.coinbase.com/developer-platform/products/base-node?utm_source=boat'}
+NEXT_PRIVATE_PAYMASTER_URL=${envVar.rpcUrl ?? '"GET_FROM_COINBASE_DEVELOPER_PLATFORM" # See https://www.coinbase.com/developer-platform/products/base-node?utm_source=boat'}
 NEXT_PUBLIC_PRIVY_ID="GET_FROM_PRIVY"
 ENVIRONMENT=localhost
 `;

template/web/.env.local.example

@@ -1,6 +1,6 @@
 NEXT_PUBLIC_GOOGLE_ANALYTICS_ID=
 NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID="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_PRIVATE_RPC_URL="GET_FROM_COINBASE_DEVELOPER_PLATFORM" # See https://www.coinbase.com/developer-platform/products/base-node?utm_source=boat
+NEXT_PRIVATE_PAYMASTER_URL="GET_FROM_COINBASE_DEVELOPER_PLATFORM" # See https://www.coinbase.com/developer-platform/products/base-node?utm_source=boat
 NEXT_PUBLIC_PRIVY_ID="GET_FROM_PRIVY"
 ENVIRONMENT=localhost

template/web/.env.test

@@ -1,4 +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
+NEXT_PRIVATE_RPC_URL=https://sepolia.base.org
 ENVIRONMENT=localhost

template/web/README.md

@@ -9,7 +9,7 @@
 
 ```bash
 NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=ADD_WALLET_CONNECT_PROJECT_ID_HERE
-NEXT_PUBLIC_RPC_URL=ADD_RPC_URL_HERE
+NEXT_PRIVATE_RPC_URL=ADD_RPC_URL_HERE
 ```
 
 #### Step 2: Install and Run your onchain app

template/web/app/api/rpc/route.ts

@@ -0,0 +1,30 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+const rpcUrl = process.env.NEXT_PRIVATE_RPC_URL;
+
+export async function POST(req: NextRequest) {
+  if (rpcUrl === undefined) {
+    return NextResponse.json(
+      {},
+      {
+        status: 401,
+        statusText:
+          'You need a RPC URL! Get yours at https://www.coinbase.com/developer-platform/products/base-node?utm_source=boat',
+      },
+    );
+  }
+
+  // forward to Coinbase Developer Platform RPC
+  return fetch(rpcUrl, req)
+    .then(async (response) => {
+      // Return the response data to the client
+      return NextResponse.json(await response.json(), {
+        status: response.status,
+        statusText: response.statusText,
+      });
+    })
+    .catch((error) => {
+      console.error('Error:', error);
+      return NextResponse.json({}, { status: 500, statusText: 'Internal Server Error' });
+    });
+}

template/web/app/paymaster-bundler/_components/Guide.tsx

@@ -96,7 +96,10 @@ export default function Guide() {
                   Base Node homepage
                 </A>
               </Li>
-              <Li>Sign up for a Coinbase Cloud account, if you don&apos;t have one already</Li>
+              <Li>
+                Sign up for a Coinbase Developer Platform account, if you don&apos;t have one
+                already
+              </Li>
               <Li>
                 Create a <p className="inline font-bold">Base</p> project under{' '}
                 <p className="inline font-bold"> Start a New Project</p>
@@ -119,8 +122,10 @@ export default function Guide() {
               </Ul>
               <Li>
                 Copy your RPC URL, and set it as{' '}
-                <p className="inline font-bold text-boat-color-orange">NEXT_PUBLIC_RPC_URL</p> and{' '}
-                <p className="inline font-bold text-boat-color-orange">NEXT_PUBLIC_PAYMASTER_URL</p>{' '}
+                <p className="inline font-bold text-boat-color-orange">NEXT_PRIVATE_RPC_URL</p> and{' '}
+                <p className="inline font-bold text-boat-color-orange">
+                  NEXT_PRIVATE_PAYMASTER_URL
+                </p>{' '}
                 in the .env file.
               </Li>
             </Ul>

template/web/app/paymaster-bundler/constants.ts

@@ -1,5 +1,5 @@
-export const rpcUrl = process.env.NEXT_PUBLIC_RPC_URL;
-export const paymasterUrl = process.env.NEXT_PUBLIC_PAYMASTER_URL;
+export const rpcUrl = '/api/rpc';
+export const paymasterUrl = '/api/rpc';
 export const privyID = process.env.NEXT_PUBLIC_PRIVY_ID;
 export const entryPoint = '0x5FF137D4b0FDCD49DcA30c7CF57E578a026d2789';
 export const contractAddress = '0x66519FCAee1Ed65bc9e0aCc25cCD900668D3eD49';

template/web/src/OnchainProviders.tsx

@@ -11,12 +11,7 @@ type Props = { children: ReactNode };
 
 const queryClient = new QueryClient();
 
-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 rpcUrl = '/api/rpc';
 
 const wagmiConfig = createWagmiConfig(rpcUrl);
 

template/web/src/store/createWagmiConfig.ts

@@ -8,6 +8,7 @@ export function createWagmiConfig(rpcUrl: string, projectId?: string) {
     console.log('projectId:', projectId);
   }
 
+  // Temporary hack, until we configure a FE page in OnchainKit to copy just the API key
   const baseUrl = rpcUrl.replace(/\/v1\/(.+?)\//, '/v1/base/');
   const baseSepoliaUrl = rpcUrl.replace(/\/v1\/(.+?)\//, '/v1/base-sepolia/');