@diviswap/sdk 1.7.10 → 1.7.12

package/dist/cli/index.js

@@ -72,6 +72,23 @@ async function detectFramework() {
   return null;
 }
 function getPackageRoot() {
+  try {
+    const bundleDir = __dirname;
+    if (fs.existsSync(path.join(bundleDir, "templates"))) {
+      return path.dirname(path.dirname(bundleDir));
+    }
+    let packageRoot = bundleDir;
+    for (let i = 0; i < 5; i++) {
+      if (fs.existsSync(path.join(packageRoot, "dist", "cli", "templates"))) {
+        return packageRoot;
+      }
+      if (fs.existsSync(path.join(packageRoot, "src", "cli", "templates"))) {
+        return packageRoot;
+      }
+      packageRoot = path.dirname(packageRoot);
+    }
+  } catch {
+  }
   if (fs.existsSync(path.join(process.cwd(), "src", "cli", "templates"))) {
     return process.cwd();
   }
@@ -1914,7 +1931,7 @@ async function uninstall(options = {}) {
 }
 
 // package.json
-var version = "1.7.10";
+var version = "1.7.12";
 
 // src/cli/index.ts
 var program = new commander.Command();

package/dist/cli/templates/nextjs-app/api-hooks.ts.hbs

@@ -106,7 +106,7 @@ export function useTransactions() {
         ...filters
       });
 
-      const response = await fetch(`/api/diviswap?${queryParams}`);
+      const response = await fetch(`/api/diviswap?\${queryParams}`);
       if (!response.ok) throw new Error('Failed to fetch transactions');
 
       const data = await response.json();
@@ -180,7 +180,7 @@ export function usePayees() {
     setError(null);
 
     try {
-      const response = await fetch(`/api/diviswap?resource=payees&customerId=${customerId}&customerEmail=${customerEmail}`);
+      const response = await fetch(`/api/diviswap?resource=payees&customerId=\${customerId}&customerEmail=\${customerEmail}`);
       if (!response.ok) throw new Error('Failed to fetch payees');
 
       const data = await response.json();
@@ -237,7 +237,7 @@ export function usePayees() {
     setError(null);
 
     try {
-      const response = await fetch(`/api/diviswap?resource=payee&id=${id}&customerId=${customerId}&customerEmail=${customerEmail}`, {
+      const response = await fetch(`/api/diviswap?resource=payee&id=\${id}&customerId=\${customerId}&customerEmail=\${customerEmail}`, {
         method: 'DELETE'
       });
 
@@ -286,7 +286,7 @@ export function useKYC() {
     setError(null);
 
     try {
-      const response = await fetch(`/api/diviswap?resource=kycStatus&customerId=${customerId}&customerEmail=${customerEmail}`);
+      const response = await fetch(`/api/diviswap?resource=kycStatus&customerId=\${customerId}&customerEmail=\${customerEmail}`);
       if (!response.ok) throw new Error('Failed to fetch KYC status');
 
       const data = await response.json();

package/dist/cli/templates/nextjs-app/api-route.ts.hbs

@@ -157,7 +157,7 @@ const postHandlers: Record<string, ActionHandler> = {
       if (params.routingNumber && params.routingNumber.includes('/')) {
         const expiryParts = params.routingNumber.split('/');
         expirationMonth = expiryParts[0];
-        expirationYear = expiryParts[1] ? `20${expiryParts[1]}` : '2025';
+        expirationYear = expiryParts[1] ? `20\${expiryParts[1]}` : '2025';
       }
 
       const debitCardPayload = {
@@ -230,7 +230,7 @@ const postHandlers: Record<string, ActionHandler> = {
       }
 
       // Clean up the payload - remove undefined/null values and empty strings for optional fields
-      const street = address.addressLine1 + (address.addressLine2 && address.addressLine2.trim() ? ` ${address.addressLine2.trim()}` : '');
+      const street = address.addressLine1 + (address.addressLine2 && address.addressLine2.trim() ? ` \${address.addressLine2.trim()}` : '');
       
       const kycPayload = {
         firstName: personalInfo.firstName,

package/dist/cli/templates/nextjs-app/client.ts.hbs

@@ -8,7 +8,7 @@ export class DiviswapClient {
     endpoint: string,
     options: RequestInit = {}
   ): Promise<T> {
-    const response = await fetch(`${this.baseUrl}${endpoint}`, {
+    const response = await fetch(`\${this.baseUrl}\${endpoint}`, {
       ...options,
       headers: {
         'Content-Type': 'application/json',
@@ -41,7 +41,7 @@ export class DiviswapClient {
 
   async getCustomerStatus(customerId: string, customerEmail: string) {
     try {
-      return await this.request(`?resource=customerStatus&customerId=${encodeURIComponent(customerId)}&customerEmail=${encodeURIComponent(customerEmail)}`);
+      return await this.request(`?resource=customerStatus&customerId=\${encodeURIComponent(customerId)}&customerEmail=\${encodeURIComponent(customerEmail)}`);
     } catch {
       return null;
     }
@@ -72,16 +72,16 @@ export class DiviswapClient {
         ...(params.type && { type: params.type }),
       }),
     });
-    return this.request(`?${searchParams}`);
+    return this.request(`?\${searchParams}`);
   }
 
   async getTransaction(id: string) {
-    return this.request(`?resource=transaction&id=${id}`);
+    return this.request(`?resource=transaction&id=\${id}`);
   }
 
   // Payee methods
   async getPayees(customerId: string, customerEmail: string) {
-    return this.request(`?resource=payees&customerId=${encodeURIComponent(customerId)}&customerEmail=${encodeURIComponent(customerEmail)}`);
+    return this.request(`?resource=payees&customerId=\${encodeURIComponent(customerId)}&customerEmail=\${encodeURIComponent(customerEmail)}`);
   }
 
   async createPayee(data: any) {
@@ -92,7 +92,7 @@ export class DiviswapClient {
   }
 
   async deletePayee(id: string, customerId: string, customerEmail: string) {
-    return this.request(`?resource=payee&id=${id}&customerId=${encodeURIComponent(customerId)}&customerEmail=${encodeURIComponent(customerEmail)}`, {
+    return this.request(`?resource=payee&id=\${id}&customerId=\${encodeURIComponent(customerId)}&customerEmail=\${encodeURIComponent(customerEmail)}`, {
       method: 'DELETE',
     });
   }

package/dist/cli/templates/nextjs-app/dashboard-hooks.ts.hbs

@@ -15,14 +15,14 @@ export function use{{prefix}}Dashboard() {
       customerEmail,
       ...params
     });
-    const response = await fetch(`/api/diviswap?${queryParams}`);
+    const response = await fetch(`/api/diviswap?\${queryParams}`);
     if (!response.ok) throw new Error('Failed to fetch transactions');
     return response.json();
   };
 
   const getPayees = async () => {
     if (!isAuthenticated || !customerId) return [];
-    const response = await fetch(`/api/diviswap?resource=payees&customerId=${customerId}&customerEmail=${customerEmail}`);
+    const response = await fetch(`/api/diviswap?resource=payees&customerId=\${customerId}&customerEmail=\${customerEmail}`);
     if (!response.ok) throw new Error('Failed to fetch payees');
     return response.json();
   };
@@ -36,7 +36,7 @@ export function use{{prefix}}Dashboard() {
       ...(params?.chain_id && { chain_id: params.chain_id.toString() }),
       ...(params?.is_default !== undefined && { is_default: params.is_default.toString() })
     });
-    const response = await fetch(`/api/diviswap?${queryParams}`);
+    const response = await fetch(`/api/diviswap?\${queryParams}`);
     if (!response.ok) throw new Error('Failed to fetch addresses');
     return response.json();
   };

package/dist/cli/templates/nextjs-app/example-page.tsx.hbs

@@ -20,7 +20,7 @@ export default function DiviswapDemo() {
   };
 
   const handleKYCError = (error: Error) => {
-    alert(`KYC Error: ${error.message}`);
+    alert(`KYC Error: \${error.message}`);
   };
 
   return (
@@ -60,7 +60,7 @@ export default function DiviswapDemo() {
         <div className="flex space-x-1 mb-8">
           <button
             onClick={() => setCurrentDemo('kyc-inline')}
-            className={`flex-1 py-3 px-6 text-sm font-medium rounded-lg transition-colors ${
+            className={`flex-1 py-3 px-6 text-sm font-medium rounded-lg transition-colors \${
               currentDemo === 'kyc-inline'
                 ? 'bg-indigo-100 text-indigo-700 border-2 border-indigo-200'
                 : 'text-gray-500 hover:text-gray-700 border-2 border-transparent'
@@ -70,7 +70,7 @@ export default function DiviswapDemo() {
           </button>
           <button
             onClick={() => setCurrentDemo('kyc-modal')}
-            className={`flex-1 py-3 px-6 text-sm font-medium rounded-lg transition-colors ${
+            className={`flex-1 py-3 px-6 text-sm font-medium rounded-lg transition-colors \${
               currentDemo === 'kyc-modal'
                 ? 'bg-indigo-100 text-indigo-700 border-2 border-indigo-200'
                 : 'text-gray-500 hover:text-gray-700 border-2 border-transparent'
@@ -80,7 +80,7 @@ export default function DiviswapDemo() {
           </button>
           <button
             onClick={() => setCurrentDemo('features')}
-            className={`flex-1 py-3 px-6 text-sm font-medium rounded-lg transition-colors ${
+            className={`flex-1 py-3 px-6 text-sm font-medium rounded-lg transition-colors \${
               currentDemo === 'features'
                 ? 'bg-indigo-100 text-indigo-700 border-2 border-indigo-200'
                 : 'text-gray-500 hover:text-gray-700 border-2 border-transparent'

package/dist/cli/templates/nextjs-app/kyc-hooks.ts.hbs

@@ -29,7 +29,7 @@ export function use{{prefix}}KYC() {
     
     try {
       // Format date of birth
-      const dateOfBirth = `${formData.dobYear}-${formData.dobMonth.padStart(2, '0')}-${formData.dobDay.padStart(2, '0')}`;
+      const dateOfBirth = `\${formData.dobYear}-\${formData.dobMonth.padStart(2, '0')}-\${formData.dobDay.padStart(2, '0')}`;
       
       // Prepare KYC data
       const kycData = {

package/dist/cli/templates/nextjs-app/kyc-wizard.tsx.hbs

@@ -82,7 +82,7 @@ export function LiberexKYC({
     setIsSubmitting(true);
     try {
       // Format date of birth
-      const dateOfBirth = `${formData.dobYear}-${formData.dobMonth.padStart(2, '0')}-${formData.dobDay.padStart(2, '0')}`;
+      const dateOfBirth = `\${formData.dobYear}-\${formData.dobMonth.padStart(2, '0')}-\${formData.dobDay.padStart(2, '0')}`;
       
       // Prepare KYC data
       const kycData = {
@@ -170,7 +170,7 @@ export function LiberexKYC({
   };
 
   return (
-    <div className={`diviswap-kyc-container ${className}`} style={containerStyle}>
+    <div className={`diviswap-kyc-container \${className}`} style={containerStyle}>
       {/* Progress Bar */}
       {currentStep !== 'intro' && currentStep !== 'success' && (
         <div className="progress-container">
@@ -178,7 +178,7 @@ export function LiberexKYC({
             <div 
               className="progress-fill" 
               style={{ 
-                width: `${progressPercentage}%`,
+                width: `\${progressPercentage}%`,
                 backgroundColor: themeConfig.primaryColor 
               }}
             />
@@ -620,7 +620,7 @@ function ReviewStep({ formData, onSubmit, onPrev, isSubmitting, theme }: any) {
             <span>Address:</span>
             <span>
               {formData.addressLine1}
-              {formData.addressLine2 && `, ${formData.addressLine2}`}
+              {formData.addressLine2 && `, \${formData.addressLine2}`}
             </span>
           </div>
           <div className="review-item">

package/dist/cli/templates/nextjs-app/provider.tsx.hbs

@@ -73,7 +73,7 @@ class DiviswapClient {
     endpoint: string,
     options: RequestInit = {}
   ): Promise<T> {
-    const response = await fetch(`${this.baseUrl}${endpoint}`, {
+    const response = await fetch(`\${this.baseUrl}\${endpoint}`, {
       ...options,
       headers: {
         'Content-Type': 'application/json',
@@ -106,7 +106,7 @@ class DiviswapClient {
 
   async getCustomerStatus(customerId: string, customerEmail: string) {
     try {
-      return await this.request(`?resource=customerStatus&customerId=${encodeURIComponent(customerId)}&customerEmail=${encodeURIComponent(customerEmail)}`);
+      return await this.request(`?resource=customerStatus&customerId=\${encodeURIComponent(customerId)}&customerEmail=\${encodeURIComponent(customerEmail)}`);
     } catch {
       return null;
     }
@@ -132,16 +132,16 @@ class DiviswapClient {
         ...(params.type && { type: params.type }),
       }),
     });
-    return this.request(`?${searchParams}`);
+    return this.request(`?\${searchParams}`);
   }
 
   async getTransaction(id: string) {
-    return this.request(`?resource=transaction&id=${id}`);
+    return this.request(`?resource=transaction&id=\${id}`);
   }
 
   // Payee methods
   async getPayees(customerId: string, customerEmail: string) {
-    return this.request(`?resource=payees&customerId=${encodeURIComponent(customerId)}&customerEmail=${encodeURIComponent(customerEmail)}`);
+    return this.request(`?resource=payees&customerId=\${encodeURIComponent(customerId)}&customerEmail=\${encodeURIComponent(customerEmail)}`);
   }
 
   async createPayee(data: any) {
@@ -152,7 +152,7 @@ class DiviswapClient {
   }
 
   async deletePayee(id: string, customerId: string, customerEmail: string) {
-    return this.request(`?resource=payee&id=${id}&customerId=${encodeURIComponent(customerId)}&customerEmail=${encodeURIComponent(customerEmail)}`, {
+    return this.request(`?resource=payee&id=\${id}&customerId=\${encodeURIComponent(customerId)}&customerEmail=\${encodeURIComponent(customerEmail)}`, {
       method: 'DELETE',
     });
   }

package/dist/cli/templates/react/api-client-wrapper.ts.hbs

@@ -18,10 +18,10 @@ class ApiClient {
   private async request<T = any>(endpoint: string, options: ApiOptions = {}): Promise<T> {
     const { params, ...fetchOptions } = options;
     
-    let url = `${this.baseUrl}${endpoint}`;
+    let url = `\${this.baseUrl}\${endpoint}`;
     if (params) {
       const searchParams = new URLSearchParams(params);
-      url += `?${searchParams.toString()}`;
+      url += `?\${searchParams.toString()}`;
     }
 
     const response = await fetch(url, {
@@ -34,7 +34,7 @@ class ApiClient {
 
     if (!response.ok) {
       const error = await response.json().catch(() => ({ message: 'Request failed' }));
-      throw new Error(error.message || `HTTP ${response.status}`);
+      throw new Error(error.message || `HTTP \${response.status}`);
     }
 
     return response.json();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@diviswap/sdk",
-  "version": "1.7.10",
+  "version": "1.7.12",
   "description": "Official Diviswap SDK - Crypto rails made simple",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/cli/templates/nextjs-app/api-hooks.ts.hbs

@@ -106,7 +106,7 @@ export function useTransactions() {
         ...filters
       });
 
-      const response = await fetch(`/api/diviswap?${queryParams}`);
+      const response = await fetch(`/api/diviswap?\${queryParams}`);
       if (!response.ok) throw new Error('Failed to fetch transactions');
 
       const data = await response.json();
@@ -180,7 +180,7 @@ export function usePayees() {
     setError(null);
 
     try {
-      const response = await fetch(`/api/diviswap?resource=payees&customerId=${customerId}&customerEmail=${customerEmail}`);
+      const response = await fetch(`/api/diviswap?resource=payees&customerId=\${customerId}&customerEmail=\${customerEmail}`);
       if (!response.ok) throw new Error('Failed to fetch payees');
 
       const data = await response.json();
@@ -237,7 +237,7 @@ export function usePayees() {
     setError(null);
 
     try {
-      const response = await fetch(`/api/diviswap?resource=payee&id=${id}&customerId=${customerId}&customerEmail=${customerEmail}`, {
+      const response = await fetch(`/api/diviswap?resource=payee&id=\${id}&customerId=\${customerId}&customerEmail=\${customerEmail}`, {
         method: 'DELETE'
       });
 
@@ -286,7 +286,7 @@ export function useKYC() {
     setError(null);
 
     try {
-      const response = await fetch(`/api/diviswap?resource=kycStatus&customerId=${customerId}&customerEmail=${customerEmail}`);
+      const response = await fetch(`/api/diviswap?resource=kycStatus&customerId=\${customerId}&customerEmail=\${customerEmail}`);
       if (!response.ok) throw new Error('Failed to fetch KYC status');
 
       const data = await response.json();

package/src/cli/templates/nextjs-app/api-route.ts.hbs

@@ -157,7 +157,7 @@ const postHandlers: Record<string, ActionHandler> = {
       if (params.routingNumber && params.routingNumber.includes('/')) {
         const expiryParts = params.routingNumber.split('/');
         expirationMonth = expiryParts[0];
-        expirationYear = expiryParts[1] ? `20${expiryParts[1]}` : '2025';
+        expirationYear = expiryParts[1] ? `20\${expiryParts[1]}` : '2025';
       }
 
       const debitCardPayload = {
@@ -230,7 +230,7 @@ const postHandlers: Record<string, ActionHandler> = {
       }
 
       // Clean up the payload - remove undefined/null values and empty strings for optional fields
-      const street = address.addressLine1 + (address.addressLine2 && address.addressLine2.trim() ? ` ${address.addressLine2.trim()}` : '');
+      const street = address.addressLine1 + (address.addressLine2 && address.addressLine2.trim() ? ` \${address.addressLine2.trim()}` : '');
       
       const kycPayload = {
         firstName: personalInfo.firstName,

package/src/cli/templates/nextjs-app/client.ts.hbs

@@ -8,7 +8,7 @@ export class DiviswapClient {
     endpoint: string,
     options: RequestInit = {}
   ): Promise<T> {
-    const response = await fetch(`${this.baseUrl}${endpoint}`, {
+    const response = await fetch(`\${this.baseUrl}\${endpoint}`, {
       ...options,
       headers: {
         'Content-Type': 'application/json',
@@ -41,7 +41,7 @@ export class DiviswapClient {
 
   async getCustomerStatus(customerId: string, customerEmail: string) {
     try {
-      return await this.request(`?resource=customerStatus&customerId=${encodeURIComponent(customerId)}&customerEmail=${encodeURIComponent(customerEmail)}`);
+      return await this.request(`?resource=customerStatus&customerId=\${encodeURIComponent(customerId)}&customerEmail=\${encodeURIComponent(customerEmail)}`);
     } catch {
       return null;
     }
@@ -72,16 +72,16 @@ export class DiviswapClient {
         ...(params.type && { type: params.type }),
       }),
     });
-    return this.request(`?${searchParams}`);
+    return this.request(`?\${searchParams}`);
   }
 
   async getTransaction(id: string) {
-    return this.request(`?resource=transaction&id=${id}`);
+    return this.request(`?resource=transaction&id=\${id}`);
   }
 
   // Payee methods
   async getPayees(customerId: string, customerEmail: string) {
-    return this.request(`?resource=payees&customerId=${encodeURIComponent(customerId)}&customerEmail=${encodeURIComponent(customerEmail)}`);
+    return this.request(`?resource=payees&customerId=\${encodeURIComponent(customerId)}&customerEmail=\${encodeURIComponent(customerEmail)}`);
   }
 
   async createPayee(data: any) {
@@ -92,7 +92,7 @@ export class DiviswapClient {
   }
 
   async deletePayee(id: string, customerId: string, customerEmail: string) {
-    return this.request(`?resource=payee&id=${id}&customerId=${encodeURIComponent(customerId)}&customerEmail=${encodeURIComponent(customerEmail)}`, {
+    return this.request(`?resource=payee&id=\${id}&customerId=\${encodeURIComponent(customerId)}&customerEmail=\${encodeURIComponent(customerEmail)}`, {
       method: 'DELETE',
     });
   }

package/src/cli/templates/nextjs-app/dashboard-hooks.ts.hbs

@@ -15,14 +15,14 @@ export function use{{prefix}}Dashboard() {
       customerEmail,
       ...params
     });
-    const response = await fetch(`/api/diviswap?${queryParams}`);
+    const response = await fetch(`/api/diviswap?\${queryParams}`);
     if (!response.ok) throw new Error('Failed to fetch transactions');
     return response.json();
   };
 
   const getPayees = async () => {
     if (!isAuthenticated || !customerId) return [];
-    const response = await fetch(`/api/diviswap?resource=payees&customerId=${customerId}&customerEmail=${customerEmail}`);
+    const response = await fetch(`/api/diviswap?resource=payees&customerId=\${customerId}&customerEmail=\${customerEmail}`);
     if (!response.ok) throw new Error('Failed to fetch payees');
     return response.json();
   };
@@ -36,7 +36,7 @@ export function use{{prefix}}Dashboard() {
       ...(params?.chain_id && { chain_id: params.chain_id.toString() }),
       ...(params?.is_default !== undefined && { is_default: params.is_default.toString() })
     });
-    const response = await fetch(`/api/diviswap?${queryParams}`);
+    const response = await fetch(`/api/diviswap?\${queryParams}`);
     if (!response.ok) throw new Error('Failed to fetch addresses');
     return response.json();
   };

package/src/cli/templates/nextjs-app/example-page.tsx.hbs

@@ -20,7 +20,7 @@ export default function DiviswapDemo() {
   };
 
   const handleKYCError = (error: Error) => {
-    alert(`KYC Error: ${error.message}`);
+    alert(`KYC Error: \${error.message}`);
   };
 
   return (
@@ -60,7 +60,7 @@ export default function DiviswapDemo() {
         <div className="flex space-x-1 mb-8">
           <button
             onClick={() => setCurrentDemo('kyc-inline')}
-            className={`flex-1 py-3 px-6 text-sm font-medium rounded-lg transition-colors ${
+            className={`flex-1 py-3 px-6 text-sm font-medium rounded-lg transition-colors \${
               currentDemo === 'kyc-inline'
                 ? 'bg-indigo-100 text-indigo-700 border-2 border-indigo-200'
                 : 'text-gray-500 hover:text-gray-700 border-2 border-transparent'
@@ -70,7 +70,7 @@ export default function DiviswapDemo() {
           </button>
           <button
             onClick={() => setCurrentDemo('kyc-modal')}
-            className={`flex-1 py-3 px-6 text-sm font-medium rounded-lg transition-colors ${
+            className={`flex-1 py-3 px-6 text-sm font-medium rounded-lg transition-colors \${
               currentDemo === 'kyc-modal'
                 ? 'bg-indigo-100 text-indigo-700 border-2 border-indigo-200'
                 : 'text-gray-500 hover:text-gray-700 border-2 border-transparent'
@@ -80,7 +80,7 @@ export default function DiviswapDemo() {
           </button>
           <button
             onClick={() => setCurrentDemo('features')}
-            className={`flex-1 py-3 px-6 text-sm font-medium rounded-lg transition-colors ${
+            className={`flex-1 py-3 px-6 text-sm font-medium rounded-lg transition-colors \${
               currentDemo === 'features'
                 ? 'bg-indigo-100 text-indigo-700 border-2 border-indigo-200'
                 : 'text-gray-500 hover:text-gray-700 border-2 border-transparent'

package/src/cli/templates/nextjs-app/kyc-hooks.ts.hbs

@@ -29,7 +29,7 @@ export function use{{prefix}}KYC() {
     
     try {
       // Format date of birth
-      const dateOfBirth = `${formData.dobYear}-${formData.dobMonth.padStart(2, '0')}-${formData.dobDay.padStart(2, '0')}`;
+      const dateOfBirth = `\${formData.dobYear}-\${formData.dobMonth.padStart(2, '0')}-\${formData.dobDay.padStart(2, '0')}`;
       
       // Prepare KYC data
       const kycData = {

package/src/cli/templates/nextjs-app/kyc-wizard.tsx.hbs

@@ -82,7 +82,7 @@ export function LiberexKYC({
     setIsSubmitting(true);
     try {
       // Format date of birth
-      const dateOfBirth = `${formData.dobYear}-${formData.dobMonth.padStart(2, '0')}-${formData.dobDay.padStart(2, '0')}`;
+      const dateOfBirth = `\${formData.dobYear}-\${formData.dobMonth.padStart(2, '0')}-\${formData.dobDay.padStart(2, '0')}`;
       
       // Prepare KYC data
       const kycData = {
@@ -170,7 +170,7 @@ export function LiberexKYC({
   };
 
   return (
-    <div className={`diviswap-kyc-container ${className}`} style={containerStyle}>
+    <div className={`diviswap-kyc-container \${className}`} style={containerStyle}>
       {/* Progress Bar */}
       {currentStep !== 'intro' && currentStep !== 'success' && (
         <div className="progress-container">
@@ -178,7 +178,7 @@ export function LiberexKYC({
             <div 
               className="progress-fill" 
               style={{ 
-                width: `${progressPercentage}%`,
+                width: `\${progressPercentage}%`,
                 backgroundColor: themeConfig.primaryColor 
               }}
             />
@@ -620,7 +620,7 @@ function ReviewStep({ formData, onSubmit, onPrev, isSubmitting, theme }: any) {
             <span>Address:</span>
             <span>
               {formData.addressLine1}
-              {formData.addressLine2 && `, ${formData.addressLine2}`}
+              {formData.addressLine2 && `, \${formData.addressLine2}`}
             </span>
           </div>
           <div className="review-item">

package/src/cli/templates/nextjs-app/provider.tsx.hbs

@@ -73,7 +73,7 @@ class DiviswapClient {
     endpoint: string,
     options: RequestInit = {}
   ): Promise<T> {
-    const response = await fetch(`${this.baseUrl}${endpoint}`, {
+    const response = await fetch(`\${this.baseUrl}\${endpoint}`, {
       ...options,
       headers: {
         'Content-Type': 'application/json',
@@ -106,7 +106,7 @@ class DiviswapClient {
 
   async getCustomerStatus(customerId: string, customerEmail: string) {
     try {
-      return await this.request(`?resource=customerStatus&customerId=${encodeURIComponent(customerId)}&customerEmail=${encodeURIComponent(customerEmail)}`);
+      return await this.request(`?resource=customerStatus&customerId=\${encodeURIComponent(customerId)}&customerEmail=\${encodeURIComponent(customerEmail)}`);
     } catch {
       return null;
     }
@@ -132,16 +132,16 @@ class DiviswapClient {
         ...(params.type && { type: params.type }),
       }),
     });
-    return this.request(`?${searchParams}`);
+    return this.request(`?\${searchParams}`);
   }
 
   async getTransaction(id: string) {
-    return this.request(`?resource=transaction&id=${id}`);
+    return this.request(`?resource=transaction&id=\${id}`);
   }
 
   // Payee methods
   async getPayees(customerId: string, customerEmail: string) {
-    return this.request(`?resource=payees&customerId=${encodeURIComponent(customerId)}&customerEmail=${encodeURIComponent(customerEmail)}`);
+    return this.request(`?resource=payees&customerId=\${encodeURIComponent(customerId)}&customerEmail=\${encodeURIComponent(customerEmail)}`);
   }
 
   async createPayee(data: any) {
@@ -152,7 +152,7 @@ class DiviswapClient {
   }
 
   async deletePayee(id: string, customerId: string, customerEmail: string) {
-    return this.request(`?resource=payee&id=${id}&customerId=${encodeURIComponent(customerId)}&customerEmail=${encodeURIComponent(customerEmail)}`, {
+    return this.request(`?resource=payee&id=\${id}&customerId=\${encodeURIComponent(customerId)}&customerEmail=\${encodeURIComponent(customerEmail)}`, {
       method: 'DELETE',
     });
   }

package/src/cli/templates/react/api-client-wrapper.ts.hbs

@@ -18,10 +18,10 @@ class ApiClient {
   private async request<T = any>(endpoint: string, options: ApiOptions = {}): Promise<T> {
     const { params, ...fetchOptions } = options;
     
-    let url = `${this.baseUrl}${endpoint}`;
+    let url = `\${this.baseUrl}\${endpoint}`;
     if (params) {
       const searchParams = new URLSearchParams(params);
-      url += `?${searchParams.toString()}`;
+      url += `?\${searchParams.toString()}`;
     }
 
     const response = await fetch(url, {
@@ -34,7 +34,7 @@ class ApiClient {
 
     if (!response.ok) {
       const error = await response.json().catch(() => ({ message: 'Request failed' }));
-      throw new Error(error.message || `HTTP ${response.status}`);
+      throw new Error(error.message || `HTTP \${response.status}`);
     }
 
     return response.json();