@swapper-finance/sdk
Version:
JavaScript SDK form Swapper
366 lines (322 loc) ā¢ 9.71 kB
JavaScript
/**
* Swapper SDK Theme URL Generator
*
* This script generates example URLs for testing different theme configurations
* with the Swapper SDK iframe integration.
*/
const fs = require("fs");
const path = require("path");
// Base URL for the iframe app
const BASE_URL = "http://localhost:3001";
// Default integrator ID for all examples
const DEFAULT_INTEGRATOR_ID = "d6e438dfa14e80701b9b";
// Example style configurations
const themeExamples = {
// Basic theme examples
"Light Theme (Default)": {},
"Dark Theme": {
themeMode: "dark",
},
// Brand theme examples
"Uniswap Colors": {
themeMode: "light",
brandTheme: {
primaryColor: "#ff37c6",
secondaryColor: "#ff37c6",
},
},
// Brand theme examples
"Light with Brand Colors": {
themeMode: "light",
brandTheme: {
primaryColor: "#FF6B35",
secondaryColor: "#845EC2",
},
},
"Dark with Brand Colors": {
themeMode: "dark",
brandTheme: {
primaryColor: "#FF6B35",
secondaryColor: "#845EC2",
},
},
"Corporate Blue Theme": {
themeMode: "light",
brandTheme: {
primaryColor: "#0066CC",
secondaryColor: "#004499",
},
},
"Gaming Green Theme": {
themeMode: "dark",
brandTheme: {
primaryColor: "#00FF88",
secondaryColor: "#00CC66",
},
},
"Crypto Orange Theme": {
themeMode: "dark",
brandTheme: {
primaryColor: "#FF8C00",
secondaryColor: "#FF6347",
},
},
// Component customization examples
"Full Custom Light": {
themeMode: "light",
brandTheme: {
primaryColor: "#6C63FF",
secondaryColor: "#4A90E2",
},
componentStyles: {
backgroundColor: "#FFFFFF",
borderRadius: "16px",
width: "450px",
textColor: "#1A1A1A",
primaryButtonBackground: "#6C63FF",
primaryButtonText: "#FFFFFF",
secondaryButtonBackground: "#F5F5F5",
secondaryButtonText: "#6C63FF",
successColor: "#28A745",
warningColor: "#FFC107",
errorColor: "#DC3545",
},
},
"Full Custom Dark": {
themeMode: "dark",
brandTheme: {
primaryColor: "#BB86FC",
secondaryColor: "#03DAC6",
},
componentStyles: {
backgroundColor: "#121212",
borderRadius: "12px",
width: "400px",
textColor: "#E1E1E1",
primaryButtonBackground: "#BB86FC",
primaryButtonText: "#000000",
secondaryButtonBackground: "#333333",
secondaryButtonText: "#E1E1E1",
successColor: "#4CAF50",
warningColor: "#FF9800",
errorColor: "#F44336",
cardBackground: "#1E1E1E",
inputBackground: "#2A2A2A",
},
},
// Business/Professional themes
"Financial Services": {
themeMode: "light",
brandTheme: {
primaryColor: "#1B5E20",
secondaryColor: "#2E7D32",
},
componentStyles: {
borderRadius: "8px",
successColor: "#4CAF50",
warningColor: "#FF8F00",
errorColor: "#D32F2F",
},
},
"Fintech Dark": {
themeMode: "dark",
brandTheme: {
primaryColor: "#00E676",
secondaryColor: "#1DE9B6",
},
componentStyles: {
backgroundColor: "#0A0A0A",
cardBackground: "#1A1A1A",
borderRadius: "10px",
},
},
// Creative themes
"Sunset Theme": {
themeMode: "dark",
brandTheme: {
primaryColor: "#FF6B6B",
secondaryColor: "#4ECDC4",
},
componentStyles: {
backgroundColor: "#2C1810",
cardBackground: "#3D2817",
successColor: "#51CF66",
warningColor: "#FFD43B",
errorColor: "#FF6B6B",
},
},
"Ocean Theme": {
themeMode: "light",
brandTheme: {
primaryColor: "#228BE6",
secondaryColor: "#15AABF",
},
componentStyles: {
backgroundColor: "#F0F8FF",
cardBackground: "#FFFFFF",
borderRadius: "20px",
successColor: "#51CF66",
warningColor: "#FFD43B",
},
},
};
// Integration parameter examples
const integrationExamples = {
"Basic Ethereum": {
integratorId: DEFAULT_INTEGRATOR_ID,
dstChain: "ethereum",
dstToken: "0xA0b86a33E6441b8b9fF8A91D0fe999c61F0DEE39",
},
"Polygon USDC": {
integratorId: DEFAULT_INTEGRATOR_ID,
dstChain: "polygon",
dstToken: "0x3c499c542cef5e3811e1192ce70d8cc03d5c3359",
},
};
/**
* Generate a complete URL with styles and integration parameters
*/
function generateURL(baseUrl, styles = {}, integration = {}) {
const url = new URL(baseUrl);
// Always add the default integrator ID
url.searchParams.set("integratorId", DEFAULT_INTEGRATOR_ID);
// Add integration parameters
Object.entries(integration).forEach(([key, value]) => {
if (value) url.searchParams.set(key, value);
});
// Add styles if provided
if (Object.keys(styles).length > 0) {
url.searchParams.set("styles", JSON.stringify(styles));
}
return url.toString();
}
/**
* Generate all example URLs
*/
function generateAllExamples() {
const examples = [];
console.log("šØ Swapper SDK Theme Examples\n");
console.log("Copy these URLs to test different theme configurations:\n");
// Generate theme-only examples
Object.entries(themeExamples).forEach(([name, styles]) => {
const url = generateURL(BASE_URL, styles);
const example = { name, url, type: "Theme Only" };
examples.push(example);
console.log(`š ${name}`);
console.log(`š ${url}\n`);
});
console.log("\n" + "=".repeat(80) + "\n");
console.log("š§ Examples with Integration Parameters\n");
// Generate some examples with integration parameters
const popularThemes = [
"Dark Theme",
"Light with Brand Colors",
"Corporate Blue Theme",
"Gaming Green Theme",
];
popularThemes.forEach((themeName) => {
Object.entries(integrationExamples).forEach(
([integrationName, integration]) => {
const styles = themeExamples[themeName];
const url = generateURL(BASE_URL, styles, integration);
const name = `${themeName} + ${integrationName}`;
const example = { name, url, type: "Full Integration" };
examples.push(example);
console.log(`š ${name}`);
console.log(`š ${url}\n`);
},
);
});
return examples;
}
/**
* Save examples to HTML file for easy browsing
*/
function generateHTMLFile(examples) {
const html = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Swapper SDK Theme Examples</title>
<style>
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; margin: 40px; line-height: 1.6; }
.header { text-align: center; margin-bottom: 40px; }
.section { margin-bottom: 40px; }
.example { background: #f8f9fa; border-radius: 8px; padding: 20px; margin-bottom: 20px; border-left: 4px solid #007bff; }
.example h3 { margin-top: 0; color: #007bff; }
.url { background: #e9ecef; padding: 10px; border-radius: 4px; word-break: break-all; font-family: Monaco, monospace; font-size: 12px; }
.button { display: inline-block; background: #007bff; color: white; padding: 8px 16px; text-decoration: none; border-radius: 4px; margin-top: 10px; }
.button:hover { background: #0056b3; }
.type-badge { background: #6c757d; color: white; padding: 2px 8px; border-radius: 12px; font-size: 11px; }
</style>
</head>
<body>
<div class="header">
<h1>šØ Swapper SDK Theme Examples</h1>
<p>Click any link below to test different theme configurations</p>
</div>
<div class="section">
<h2>Theme Examples</h2>
${examples
.filter((ex) => ex.type === "Theme Only")
.map(
(example) => `
<div class="example">
<h3>${example.name} <span class="type-badge">${example.type}</span></h3>
<div class="url">${example.url}</div>
<a href="${example.url}" class="button" target="_blank">Open Example</a>
</div>
`,
)
.join("")}
</div>
<div class="section">
<h2>Quick Copy URLs</h2>
<textarea style="width: 100%; height: 200px; font-family: Monaco, monospace; font-size: 12px;">
${examples.map((ex) => `${ex.name}: ${ex.url}`).join("\n\n")}
</textarea>
</div>
</body>
</html>`;
const filePath = path.join(__dirname, "swapper-theme-examples.html");
fs.writeFileSync(filePath, html);
console.log(`\nš HTML file generated: ${filePath}`);
console.log(
"Open this file in your browser for an interactive example gallery!\n",
);
}
/**
* Save examples to JSON for programmatic use
*/
function generateJSONFile(examples) {
const jsonData = {
generated: new Date().toISOString(),
baseUrl: BASE_URL,
examples: examples,
themes: themeExamples,
integrations: integrationExamples,
};
const filePath = path.join(__dirname, "swapper-theme-examples.json");
fs.writeFileSync(filePath, JSON.stringify(jsonData, null, 2));
console.log(`š JSON file generated: ${filePath}`);
}
// Main execution
if (require.main === module) {
const examples = generateAllExamples();
generateHTMLFile(examples);
generateJSONFile(examples);
console.log("ā
Example generation complete!");
console.log("\nQuick start:");
console.log("1. Start your iframe app: cd iframe-app && npm run dev");
console.log("2. Open swapper-theme-examples.html in your browser");
console.log("3. Click any example to test the theme\n");
}
module.exports = {
generateURL,
themeExamples,
integrationExamples,
generateAllExamples,
};