fix

Author: spencerstock

examples/testapp/src/pages/pay-playground/components/CodeEditor.module.css

@@ -72,6 +72,52 @@
   user-select: none;
 }
 
+.inputContainer {
+  padding: 1rem 1.5rem;
+  border-bottom: 1px solid #e2e8f0;
+  background: #f8fafc;
+}
+
+.inputLabel {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  color: #475569;
+}
+
+.inputLabelText {
+  font-weight: 500;
+}
+
+.textInput {
+  width: 100%;
+  padding: 0.625rem 0.875rem;
+  font-size: 0.875rem;
+  font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
+  color: #0f172a;
+  background: white;
+  border: 1px solid #cbd5e1;
+  border-radius: 6px;
+  outline: none;
+  transition: all 0.2s;
+}
+
+.textInput:focus {
+  border-color: #0052ff;
+  box-shadow: 0 0 0 3px rgba(0, 82, 255, 0.1);
+}
+
+.textInput:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background: #f1f5f9;
+}
+
+.textInput::placeholder {
+  color: #94a3b8;
+}
+
 .editorWrapper {
   position: relative;
   height: 390px;

examples/testapp/src/pages/pay-playground/components/CodeEditor.tsx

@@ -9,6 +9,9 @@ interface CodeEditorProps {
   includePayerInfo: boolean;
   onPayerInfoToggle: (checked: boolean) => void;
   showPayerInfoToggle?: boolean;
+  paymasterUrl?: string;
+  onPaymasterUrlChange?: (url: string) => void;
+  showPaymasterUrlInput?: boolean;
 }
 
 export const CodeEditor = ({
@@ -20,6 +23,9 @@ export const CodeEditor = ({
   includePayerInfo,
   onPayerInfoToggle,
   showPayerInfoToggle = true,
+  paymasterUrl = '',
+  onPaymasterUrlChange,
+  showPaymasterUrlInput = false,
 }: CodeEditorProps) => {
   return (
     <div className={styles.editorPanel}>
@@ -70,6 +76,22 @@ export const CodeEditor = ({
         </div>
       )}
 
+      {showPaymasterUrlInput && (
+        <div className={styles.inputContainer}>
+          <label className={styles.inputLabel}>
+            <span className={styles.inputLabelText}>Paymaster URL</span>
+            <input
+              type="text"
+              value={paymasterUrl}
+              onChange={(e) => onPaymasterUrlChange?.(e.target.value)}
+              disabled={isLoading}
+              className={styles.textInput}
+              placeholder="https://your-paymaster.com/api"
+            />
+          </label>
+        </div>
+      )}
+
       <div className={styles.editorWrapper}>
         <textarea
           value={code}

examples/testapp/src/pages/pay-playground/constants/index.ts

@@ -2,6 +2,7 @@ export {
   DEFAULT_GET_PAYMENT_STATUS_CODE,
   DEFAULT_PAY_CODE,
   DEFAULT_PAY_WITH_TOKEN_CODE,
+  generatePayWithTokenCode,
   GET_PAYMENT_STATUS_QUICK_TIPS,
   PAY_CODE_WITH_PAYER_INFO,
   PAY_QUICK_TIPS,

examples/testapp/src/pages/pay-playground/constants/playground.ts

@@ -68,38 +68,21 @@ export const GET_PAYMENT_STATUS_QUICK_TIPS = [
   'Make sure to use the same testnet setting as the original payment',
 ];
 
-export const DEFAULT_PAY_WITH_TOKEN_CODE = `import { base } from '@base-org/account'
-
-try {
-  const result = await base.payWithToken({
-    amount: '1000000', // Amount in base units (e.g., 1 USDC = 1000000)
-    to: '0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045',
-    token: 'USDC', // Token symbol or contract address
-    testnet: true,
-    paymaster: {
+export const generatePayWithTokenCode = (
+  paymasterUrl: string,
+  includePayerInfo: boolean
+): string => {
+  const paymasterConfig = paymasterUrl
+    ? `paymaster: {
+      url: '${paymasterUrl}'
+    }`
+    : `paymaster: {
       // Paymaster configuration for gas sponsorship
       // url: 'https://your-paymaster.com/api'
-    }
-  })
-  
-  return result;
-} catch (error) {
-  console.error('Token payment failed:', error.message);
-  throw error;
-}`;
-
-export const PAY_WITH_TOKEN_CODE_WITH_PAYER_INFO = `import { base } from '@base-org/account'
+    }`;
 
-try {
-  const result = await base.payWithToken({
-    amount: '1000000', // Amount in base units (e.g., 1 USDC = 1000000)
-    to: '0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045',
-    token: 'USDC', // Token symbol or contract address
-    testnet: true,
-    paymaster: {
-      // Paymaster configuration for gas sponsorship
-      // url: 'https://your-paymaster.com/api'
-    },
+  const payerInfoConfig = includePayerInfo
+    ? `,
     payerInfo: {
       requests: [
         { type: 'name'},
@@ -108,14 +91,30 @@ try {
         { type: 'physicalAddress', optional: true },
         { type: 'onchainAddress' }
       ]
-    }
+    }`
+    : '';
+
+  return `import { base } from '@base-org/account'
+
+try {
+  const result = await base.payWithToken({
+    amount: '1000000', // Amount in base units (e.g., 1 USDC = 1000000)
+    to: '0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045',
+    token: 'USDC', // Token symbol or contract address
+    testnet: true,
+    ${paymasterConfig}${payerInfoConfig}
   })
   
   return result;
 } catch (error) {
   console.error('Token payment failed:', error.message);
   throw error;
 }`;
+};
+
+export const DEFAULT_PAY_WITH_TOKEN_CODE = generatePayWithTokenCode('', false);
+
+export const PAY_WITH_TOKEN_CODE_WITH_PAYER_INFO = generatePayWithTokenCode('', true);
 
 export const PAY_WITH_TOKEN_QUICK_TIPS = [
   'Get testnet ETH at <a href="https://faucet.circle.com/" target="_blank" rel="noopener noreferrer">https://faucet.circle.com/</a> - select "Base Sepolia" as the network',

examples/testapp/src/pages/pay-playground/index.page.tsx

@@ -4,10 +4,10 @@ import {
   DEFAULT_GET_PAYMENT_STATUS_CODE,
   DEFAULT_PAY_CODE,
   DEFAULT_PAY_WITH_TOKEN_CODE,
+  generatePayWithTokenCode,
   GET_PAYMENT_STATUS_QUICK_TIPS,
   PAY_CODE_WITH_PAYER_INFO,
   PAY_QUICK_TIPS,
-  PAY_WITH_TOKEN_CODE_WITH_PAYER_INFO,
   PAY_WITH_TOKEN_QUICK_TIPS,
 } from './constants';
 import { useCodeExecution } from './hooks';
@@ -16,6 +16,7 @@ import styles from './styles/Home.module.css';
 function PayPlayground() {
   const [includePayerInfo, setIncludePayerInfo] = useState(false);
   const [includePayWithTokenPayerInfo, setIncludePayWithTokenPayerInfo] = useState(false);
+  const [payWithTokenPaymasterUrl, setPayWithTokenPaymasterUrl] = useState('');
   const [payCode, setPayCode] = useState(DEFAULT_PAY_CODE);
   const [payWithTokenCode, setPayWithTokenCode] = useState(DEFAULT_PAY_WITH_TOKEN_CODE);
   const [getPaymentStatusCode, setGetPaymentStatusCode] = useState(DEFAULT_GET_PAYMENT_STATUS_CODE);
@@ -47,17 +48,24 @@ function PayPlayground() {
 
   const handlePayWithTokenReset = () => {
     setIncludePayWithTokenPayerInfo(false);
+    setPayWithTokenPaymasterUrl('');
     setPayWithTokenCode(DEFAULT_PAY_WITH_TOKEN_CODE);
     payWithTokenExecution.reset();
   };
 
   const handlePayWithTokenPayerInfoToggle = (checked: boolean) => {
     setIncludePayWithTokenPayerInfo(checked);
-    const newCode = checked ? PAY_WITH_TOKEN_CODE_WITH_PAYER_INFO : DEFAULT_PAY_WITH_TOKEN_CODE;
+    const newCode = generatePayWithTokenCode(payWithTokenPaymasterUrl, checked);
     setPayWithTokenCode(newCode);
     payWithTokenExecution.reset();
   };
 
+  const handlePayWithTokenPaymasterUrlChange = (url: string) => {
+    setPayWithTokenPaymasterUrl(url);
+    const newCode = generatePayWithTokenCode(url, includePayWithTokenPayerInfo);
+    setPayWithTokenCode(newCode);
+  };
+
   const handleGetPaymentStatusExecute = () => {
     getPaymentStatusExecution.executeCode(getPaymentStatusCode);
   };
@@ -144,6 +152,9 @@ try {
                 includePayerInfo={includePayWithTokenPayerInfo}
                 onPayerInfoToggle={handlePayWithTokenPayerInfoToggle}
                 showPayerInfoToggle={true}
+                paymasterUrl={payWithTokenPaymasterUrl}
+                onPaymasterUrlChange={handlePayWithTokenPaymasterUrlChange}
+                showPaymasterUrlInput={true}
               />
               <QuickTips tips={PAY_WITH_TOKEN_QUICK_TIPS} />
             </div>

examples/testapp/src/pages/pay-playground/utils/codeSanitizer.ts

@@ -3,11 +3,11 @@ import * as acorn from 'acorn';
 // Define the whitelist of allowed operations
 export const WHITELIST = {
   // Allowed SDK functions
-  allowedFunctions: ['pay', 'getPaymentStatus'],
+  allowedFunctions: ['pay', 'getPaymentStatus', 'payWithToken'],
 
   // Allowed object properties and methods
   allowedObjects: {
-    base: ['pay', 'getPaymentStatus'],
+    base: ['pay', 'getPaymentStatus', 'payWithToken'],
     console: ['log', 'error', 'warn', 'info'],
     Promise: ['resolve', 'reject', 'all', 'race'],
     Object: ['keys', 'values', 'entries', 'assign'],