fix(paywall): read token name from payment requirements instead of hardcoding USDC

typescript/.changeset/fix-paywall-token-name.md

@@ -0,0 +1,10 @@
+---
+"@x402/paywall": patch
+---
+
+fix(paywall): read token name from payment requirements instead of hardcoding "USDC"
+
+The EVM paywall now reads the token name from `extra.name` in payment requirements
+and uses it for all display text. Falls back to "Token" (generic) when `extra.name`
+is absent. This fixes mislabeled token names for non-USDC chains (MegaUSD, USDT0,
+Mezo USD, etc.).

typescript/packages/http/paywall/src/evm/EvmPaywall.tsx

@@ -49,6 +49,7 @@ export function EvmPaywall({ paymentRequired, onSuccessfulResponse }: EvmPaywall
   }
 
   const network = firstRequirement.network;
+  const tokenName = (firstRequirement.extra?.name as string) || "Token";
   const chainName = getNetworkDisplayName(network);
   const testnet = isTestnetNetwork(network);
 
@@ -138,11 +139,11 @@ export function EvmPaywall({ paymentRequired, onSuccessfulResponse }: EvmPaywall
     setIsPaying(true);
 
     try {
-      setStatus("Checking USDC balance...");
+      setStatus("Checking balance...");
       const balance = await getUSDCBalance(publicClient, address);
 
       if (balance === 0n) {
-        throw new Error(`Insufficient balance. Make sure you have USDC on ${chainName}`);
+        throw new Error(`Insufficient balance. Make sure you have ${tokenName} on ${chainName}`);
       }
 
       setStatus("Creating payment signature...");
@@ -196,11 +197,11 @@ export function EvmPaywall({ paymentRequired, onSuccessfulResponse }: EvmPaywall
         <h1 className="title">Payment Required</h1>
         <p>
           {paymentRequired.resource?.description && `${paymentRequired.resource.description}.`} To
-          access this content, please pay ${amount} {chainName} USDC.
+          access this content, please pay ${amount} {tokenName}.
         </p>
         {testnet && (
           <p className="instructions">
-            Need {chainName} USDC?{" "}
+            Need {tokenName} on {chainName}?{" "}
             <a href="https://faucet.circle.com/" target="_blank" rel="noopener noreferrer">
               Get some <u>here</u>.
             </a>
@@ -259,14 +260,16 @@ export function EvmPaywall({ paymentRequired, onSuccessfulResponse }: EvmPaywall
                 <span className="payment-value">
                   <button className="balance-button" onClick={() => setHideBalance(prev => !prev)}>
                     {formattedUsdcBalance && !hideBalance
-                      ? `$${formattedUsdcBalance} USDC`
-                      : "••••• USDC"}
+                      ? `$${formattedUsdcBalance} ${tokenName}`
+                      : `••••• ${tokenName}`}
                   </button>
                 </span>
               </div>
               <div className="payment-row">
                 <span className="payment-label">Amount:</span>
-                <span className="payment-value">${amount} USDC</span>
+                <span className="payment-value">
+                  ${amount} {tokenName}
+                </span>
               </div>
               <div className="payment-row">
                 <span className="payment-label">Network:</span>