Skip to content

Refactor index.html for improved structure and logic #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Sulios wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Refactor index.html for improved structure and logic #2

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
185 changes: 108 additions & 77 deletions examples/basic/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,21 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My Futures Exchange</title>
<meta name="viewport" content="width=device-width" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />

<script src="/s3/sdk/sdk.1.8.0.js"></script>

<style>
/* Enforce full height without forcing viewport dimensions (vh/vw) which can be unstable on mobile */
html,
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
width: 100%;
height: 100%;
}

#app {
Expand All @@ -20,90 +24,117 @@
overflow: hidden;
}
</style>
<script src="/s3/sdk/sdk.1.8.0.js"></script>
</head>
<body>
<div id="app"></div>

<script>
const { origin, protocol, pathname } = window.location;
if (pathname === "/") location.href = "/en/futures/BTCUSDT";
// Destructure location properties for cleaner access
const { origin, protocol, pathname, host } = window.location;
const DEFAULT_PAIR = 'BTCUSDT';
const DEFAULT_LANG = 'en';

// Determine if running in a development environment based on protocol
const isDev = protocol === "http:";
FuturesSDK.createTradeUI({
container: document.getElementById("app"),
config: {
staticBaseUrl: `${origin}/s3/static/`, // in production, you have to change this to your static base url
apiBaseUrl: isDev ? `${origin}` : undefined, // in production, you don't need to configure this, it's default as Asterdex's url
futuresWsHost: "wss://fstream.asterdex.com/compress",
enableThemeToggle: false,

// supportNetworks: ['bnb', 'eth', 'arb'], // optional, default to ['bnb']
// supportLanguages: ['en', 'zh-CN'], // optional, default to all languages

headerConfig: {
// logo: {
// darkImgUrl: 'https://static.asterdex.com/cloud-futures/static/images/aster/logo.svg',
// lightImgUrl: 'https://static.asterdex.com/cloud-futures/static/images/aster/logo.svg',
// // navTo: 'https://www.asterdex.com',
// },
// menu: {
// data: [{
// text: {'en': 'Swap', 'zh-CN': '兑换'},
// navTo: 'https://www.asterdex.com',
// }],
// placement: 'left',
// },
// token: {
// imgUrl: `https://www.asterdex.com/cloud-futures/static/images/futures/assets/leon/logo.svg`,
// navTo: 'https://dex.leonicornswap.com/swap?outputCurrency=0x2c8368f8F474Ed9aF49b87eAc77061BEb986c2f1',
// lpPairAddress: '0xd0fc8ba7e267f2bc56044a7715a489d851dc6d78', // Uniswap V3: UNI-USDC
// lpBaseAddress: '0x1f9840a85d5af5bf1d1762f925bdaddc4201f984', // UNI
// lpQuoteAddress: '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48', // USDC
// network: 'eth',
// pricePrecision: 6,
// },
// customerService: {
// navTo: 'https://asterdex.zendesk.com/hc/%lng%/requests/new',
// },
},
lightPalette: {
primaryHover: "#6B78EE", // background hover
primary: "#584CEA", // background; text hover,
sellHover: "#FD5CB7",
sell: "#EF3E9E",
buyHover: "#3CC6BE",
buy: "#1DB1A8",
},
loadingImage: {
url: "/public/loading.gif",
},
defaultTheme: "light",
},
state: {
symbol: getSymbolFromUrl(),
lng: getLngFromUrl(),
},
});
FuturesSDK.eventListener.on("symbolChange", (data) => {
window.history.replaceState(
{},
null,
`/${getLngFromUrl()}/futures/${data.symbol}`
);
});
FuturesSDK.eventListener.on("lngChange", (data) => {
window.history.pushState(
{},
null,
`/${data.lng}/futures/${getSymbolFromUrl()}`
);
});
// --- URL Parsing Functions ---

/** Extracts the language code from the current URL path. Defaults to 'en'. */
function getLngFromUrl() {
return location.pathname.split("/")[1] || "en";
// Pathname structure is expected to be: /<lang>/futures/<symbol>
return pathname.split("/")[1] || DEFAULT_LANG;
}

/** Extracts the trading symbol from the current URL path. Defaults to 'BTCUSDT'. */
function getSymbolFromUrl() {
return location.pathname.split("/")[3] || "BTCUSDT";
// Pathname structure is expected to be: /<lang>/futures/<symbol>
return pathname.split("/")[3] || DEFAULT_PAIR;
}

// Redirects root path to a default trading pair and language.
if (pathname === "/") {
window.location.href = `/${DEFAULT_LANG}/futures/${DEFAULT_PAIR}`;
}

// --- Futures SDK Initialization ---

// Ensure the SDK is loaded before proceeding
if (typeof FuturesSDK === 'undefined') {
console.error("FuturesSDK is not loaded. Check the script source.");
} else {
FuturesSDK.createTradeUI({
container: document.getElementById("app"),
config: {
// Base URL for static assets (logos, images, etc.)
staticBaseUrl: `${origin}/s3/static/`,
// API URL configuration: uses current origin in dev, relies on default in production
apiBaseUrl: isDev ? `${origin}` : undefined,
// WebSocket host for real-time market data
futuresWsHost: "wss://fstream.asterdex.com/compress",
// Disables the built-in theme toggle control
enableThemeToggle: false,

// --- Optional Header Customization (Uncomment and configure as needed) ---
/*
headerConfig: {
logo: {
darkImgUrl: 'https://static.asterdex.com/cloud-futures/static/images/aster/logo.svg',
lightImgUrl: 'https://static.asterdex.com/cloud-futures/static/images/aster/logo.svg',
// navTo: 'https://www.asterdex.com',
},
menu: {
data: [{
text: {'en': 'Swap', 'zh-CN': '兑换'},
navTo: 'https://www.asterdex.com',
}],
placement: 'left',
},
},
*/

// Theme palette adjustments
lightPalette: {
primaryHover: "#6B78EE", // Background hover color
primary: "#584CEA", // Primary accent color (background, text hover)
sellHover: "#FD5CB7",
sell: "#EF3E9E",
buyHover: "#3CC6BE",
buy: "#1DB1A8",
},
// Custom loading image path
loadingImage: {
url: "/public/loading.gif",
},
defaultTheme: "light",
},
state: {
// Initial state derived from URL
symbol: getSymbolFromUrl(),
lng: getLngFromUrl(),
},
});

// --- SDK Event Listeners for URL Synchronization ---

// Update URL when the user changes the trading symbol in the UI
FuturesSDK.eventListener.on("symbolChange", (data) => {
window.history.replaceState(
{},
null,
// Uses replaceState to avoid cluttering history with every symbol change
`/${getLngFromUrl()}/futures/${data.symbol}`
);
});

// Update URL when the user changes the language in the UI
FuturesSDK.eventListener.on("lngChange", (data) => {
window.history.pushState(
{},
null,
// Uses pushState since language changes are less frequent and should be history navigable
`/${data.lng}/futures/${getSymbolFromUrl()}`
);
});
}
</script>
</body>
Expand Down