fix: Paymaster Proxy URL (#513)

Author: cpcramer

template/web/.env.local.example

@@ -2,4 +2,4 @@ NEXT_PUBLIC_GOOGLE_ANALYTICS_ID=
 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
+NEXT_PUBLIC_ENVIRONMENT=localhost

template/web/.env.test

@@ -1,5 +1,5 @@
 NEXT_PUBLIC_GOOGLE_ANALYTICS_ID=GA_TEST_1234567890
 NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=TEST_1234567890
 NEXT_PRIVATE_RPC_URL=https://sepolia.base.org
-ENVIRONMENT=localhost
-NEXT_PUBLIC_PAYMASTER_URL=TEST_https://api.developer.coinbase.com/rpc/v1/
+NEXT_PUBLIC_ENVIRONMENT=localhost
+NEXT_PUBLIC_PAYMASTER_URL=TEST_https://api.developer.coinbase.com/rpc/v1/

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

@@ -6,11 +6,12 @@ import isLocal from '../../../src/utils/isLocal';
 import { usePaymasterBundlerContract } from '../_contracts/usePaymasterBundlerContract';
 import { CallStatus } from './CallStatus';
 
-// Use the local API URL to target the Paymaster directly without a proxy
-// if running on localhost, otherwise use the Paymaster Proxy.
-const paymasterURL = process.env.NEXT_PUBLIC_PAYMASTER_URL;
+// Target the Paymaster directly without a proxy if running on localhost.
+// Use the Paymaster Proxy when deployed.
 const isLocalEnv = isLocal();
-const defaultUrl = isLocalEnv ? paymasterURL : `${document.location.origin}/api/paymaster-proxy`;
+const defaultUrl = isLocalEnv
+  ? process.env.NEXT_PUBLIC_PAYMASTER_URL
+  : `https://${process.env.NEXT_PUBLIC_VERCEL_PROJECT_PRODUCTION_URL}/api/paymaster-proxy`;
 
 export default function PaymasterBundlerDemo() {
   const { address } = useAccount();

template/web/src/store/environment.ts

@@ -11,7 +11,7 @@ export enum Environment {
 }
 
 export enum EnvironmentKeys {
-  environment = 'ENVIRONMENT',
+  environment = 'NEXT_PUBLIC_ENVIRONMENT',
 }
 
 export function getCurrentEnvironment(): Environment {

template/web/src/store/test/environment.test.ts

@@ -12,7 +12,7 @@ describe('environment', () => {
 
   describe('EnvironmentKeys', () => {
     it('should have the correct values', () => {
-      expect(EnvironmentKeys.environment).toEqual('ENVIRONMENT');
+      expect(EnvironmentKeys.environment).toEqual('NEXT_PUBLIC_ENVIRONMENT');
     });
   });