From 95085424a550931d5d9c5349d070aa47b4cbdd9e Mon Sep 17 00:00:00 2001
From: Paul Cramer <paulccramer@gmail.com>
Date: Sat, 1 Jun 2024 14:42:48 -0400
Subject: [PATCH] fix: Update Paymaster URL environment variable.  (#510)

---
 .changeset/rare-shirts-flow.md                        |  5 +++++
 .../_components/PaymasterBundlerDemo.tsx              | 11 +++--------
 template/web/src/utils/paymasterClient.ts             |  2 +-
 3 files changed, 9 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/rare-shirts-flow.md

diff --git a/.changeset/rare-shirts-flow.md b/.changeset/rare-shirts-flow.md
new file mode 100644
index 00000000..d2beb589
--- /dev/null
+++ b/.changeset/rare-shirts-flow.md
@@ -0,0 +1,5 @@
+---
+'@coinbase/build-onchain-apps': patch
+---
+
+- **fix**: Update Paymaster URL environment variable. By @cpcramer
diff --git a/template/web/app/paymaster-bundler/_components/PaymasterBundlerDemo.tsx b/template/web/app/paymaster-bundler/_components/PaymasterBundlerDemo.tsx
index 44f64fc7..bdd4e39a 100644
--- a/template/web/app/paymaster-bundler/_components/PaymasterBundlerDemo.tsx
+++ b/template/web/app/paymaster-bundler/_components/PaymasterBundlerDemo.tsx
@@ -8,13 +8,13 @@ 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_PRIVATE_PAYMASTER_URL;
+const paymasterURL = process.env.NEXT_PUBLIC_PAYMASTER_URL;
 const isLocalEnv = isLocal();
 const defaultUrl = isLocalEnv ? paymasterURL : `${document.location.origin}/api/paymaster-proxy`;
 
 export default function PaymasterBundlerDemo() {
   const { address } = useAccount();
-  const { data: transactionID, writeContracts } = useWriteContracts();
+  const { data: callID, writeContracts } = useWriteContracts();
   const contract = usePaymasterBundlerContract();
 
   if (contract.status !== 'ready') {
@@ -76,12 +76,7 @@ export default function PaymasterBundlerDemo() {
         >
           Mint NFT
         </button>
-        {transactionID && <CallStatus id={transactionID} />}
-        {transactionID && (
-          <div className={clsx('mt-4 overflow-x-auto rounded-lg bg-gray-800 p-4 text-lg')}>
-            <strong>Transaction ID:</strong> <span className="break-all">{transactionID}</span>
-          </div>
-        )}
+        {callID && <CallStatus id={callID} />}
       </section>
     </div>
   );
diff --git a/template/web/src/utils/paymasterClient.ts b/template/web/src/utils/paymasterClient.ts
index f2b9686d..4a0f0acc 100644
--- a/template/web/src/utils/paymasterClient.ts
+++ b/template/web/src/utils/paymasterClient.ts
@@ -3,7 +3,7 @@ import { paymasterActionsEip7677 } from 'permissionless/experimental';
 import { createClient, http } from 'viem';
 import { baseSepolia } from 'viem/chains';
 
-const paymasterService = process.env.NEXT_PRIVATE_PAYMASTER_URL ?? '';
+const paymasterService = process.env.NEXT_PUBLIC_PAYMASTER_URL ?? '';
 
 export const paymasterClient = createClient({
   chain: baseSepolia,