jaeswift-website/jupiterswap/index.html

200 lines
8.2 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JAESWIFT // SWAP TERMINAL</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=JetBrains+Mono:wght@300;400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/section.css">
<link rel="stylesheet" href="/css/jupiterswap.css">
</head>
<body>
<div class="scanline-overlay"></div>
<div class="grid-bg"></div>
<nav class="nav-main" id="navbar">
<div class="nav-container">
<a href="/" class="nav-logo">
<span class="logo-bracket">[</span> JAE <span class="logo-bracket">]</span>
</a>
<button class="nav-toggle" id="navToggle" aria-label="Menu">
<span></span><span></span><span></span>
</button>
<ul class="nav-menu" id="navMenu"></ul>
<div class="nav-status">
<span class="nav-clock" id="navClock"></span>
</div>
</div>
</nav>
<div class="breadcrumb">
<a href="/">HOME</a>
<span class="separator">/</span>
<a href="/armoury">ARMOURY</a>
<span class="separator">/</span>
<a href="/armoury/lab.html">LAB</a>
<span class="separator">/</span>
<span class="current">SWAP TERMINAL</span>
</div>
<section class="section-header" style="padding-top: calc(var(--nav-height) + 1.5rem);">
<div class="section-header-label">LAB // JUPITER AGGREGATOR</div>
<h1 class="section-header-title">SWAP TERMINAL</h1>
<p class="section-header-sub">&gt; Swap any Solana token at the best rates &mdash; powered by Jupiter, routing across all major DEXs.</p>
</section>
<div class="jup-container">
<!-- Info Panel -->
<div class="jup-info-panel">
<div class="jup-info-row">
<span class="jup-info-icon">&#9670;</span>
<span class="jup-info-text">Best price routing across Raydium, Orca, Meteora, Phoenix, and 20+ DEXs</span>
</div>
<div class="jup-info-row">
<span class="jup-info-icon">&#9670;</span>
<span class="jup-info-text">Connect your wallet via the navbar &mdash; the terminal will detect it automatically</span>
</div>
<div class="jup-info-row">
<span class="jup-info-icon">&#9670;</span>
<span class="jup-info-text">Transactions are executed directly from your wallet &mdash; non-custodial</span>
</div>
<div class="jup-info-row jup-info-referral">
<span class="jup-info-icon">&#9670;</span>
<span class="jup-info-text">A small referral fee supports JAESWIFT.XYZ development</span>
</div>
</div>
<!-- Terminal Wrapper -->
<div class="jup-terminal-wrapper">
<div class="jup-terminal-header">
<span class="jup-terminal-dot"></span>
<span class="jup-terminal-dot jup-terminal-dot--yellow"></span>
<span class="jup-terminal-dot jup-terminal-dot--green"></span>
<span class="jup-terminal-title">JUPITER SWAP TERMINAL v4</span>
</div>
<div id="jupiter-terminal"></div>
<div class="jup-terminal-loading" id="jup-loading">
<div class="jup-spinner"></div>
<span>INITIALISING SWAP TERMINAL...</span>
</div>
</div>
</div>
<footer class="footer">
<div class="footer-container">
<div class="footer-left">
<span class="footer-logo">[JAE]</span>
<span class="footer-copy">&copy; 2026 JAESWIFT.XYZ</span>
</div>
<div class="footer-right">
<span class="footer-signal">SIGNAL &#9608;&#9608;&#9608;&#9608;<span class="signal-flicker">&#9608;</span></span>
</div>
</div>
</footer>
<script src="/js/wallet-connect.js"></script>
<script src="/js/nav.js"></script>
<script src="/js/clock.js"></script>
<script src="https://terminal.jup.ag/main-v4.js" data-preload defer></script>
<script>
(function () {
'use strict';
const REFERRAL = '9NuiHnHQ9kQVj8JwPCpmE4VU1MhwcYL9gWbkiAyn8';
const RPC = 'https://api.mainnet-beta.solana.com';
const loadingEl = document.getElementById('jup-loading');
function getWalletProvider() {
// Pull provider from the sitewide wallet-connect system
if (window.solWallet && window.solWallet.connected && window.solWallet.provider) {
return window.solWallet.provider;
}
// Fallback: try Phantom / Solflare direct
if (window.phantom?.solana?.isConnected) return window.phantom.solana;
if (window.solflare?.isConnected) return window.solflare;
return null;
}
function launchTerminal() {
if (!window.Jupiter || !window.Jupiter.init) {
setTimeout(launchTerminal, 300);
return;
}
const walletProvider = getWalletProvider();
window.Jupiter.init({
displayMode: 'integrated',
integratedTargetId: 'jupiter-terminal',
endpoint: RPC,
platformFeeAndAccounts: undefined,
referralAccount: REFERRAL,
defaultExplorer: 'Solscan',
formProps: {
fixedOutputMint: false,
},
enableWalletPassthrough: true,
passthroughWalletContextState: walletProvider ? {
wallet: {
adapter: walletProvider,
readyState: 'Installed',
},
publicKey: walletProvider.publicKey || null,
connected: true,
connecting: false,
disconnecting: false,
connect: () => walletProvider.connect(),
disconnect: () => walletProvider.disconnect(),
select: () => {},
sendTransaction: walletProvider.sendTransaction
? walletProvider.sendTransaction.bind(walletProvider)
: undefined,
signTransaction: walletProvider.signTransaction
? walletProvider.signTransaction.bind(walletProvider)
: undefined,
signAllTransactions: walletProvider.signAllTransactions
? walletProvider.signAllTransactions.bind(walletProvider)
: undefined,
signMessage: walletProvider.signMessage
? walletProvider.signMessage.bind(walletProvider)
: undefined,
} : undefined,
});
// Hide loading once the terminal iframe/content appears
const observer = new MutationObserver(function () {
const termEl = document.getElementById('jupiter-terminal');
if (termEl && termEl.children.length > 0) {
if (loadingEl) loadingEl.style.display = 'none';
observer.disconnect();
}
});
observer.observe(document.getElementById('jupiter-terminal'), { childList: true, subtree: true });
}
// Re-sync wallet when user connects via navbar
window.addEventListener('wallet-connected', function () {
// Re-init terminal with new wallet
setTimeout(launchTerminal, 200);
});
window.addEventListener('wallet-disconnected', function () {
setTimeout(launchTerminal, 200);
});
// Kick off
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', function () {
setTimeout(launchTerminal, 500);
});
} else {
setTimeout(launchTerminal, 500);
}
})();
</script>
</body>
</html>