Skip to content

Commit 1b10e9a

Browse files
plagtechplagtech
authored
Update index.html
1 parent b186400 commit 1b10e9a

1 file changed

Lines changed: 104 additions & 1 deletion

File tree

‎index.html‎

Lines changed: 104 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,37 @@
7676
body.dark-mode #settingsModal h3, body.dark-mode #walletModal h3 { color: #1a1a2e !important; }
7777
body.dark-mode .shadow-lg { box-shadow: 0 20px 60px rgba(255, 107, 53, 0.3) !important; }
7878
body.dark-mode .shadow-md { box-shadow: 0 4px 12px rgba(255, 107, 53, 0.2) !important; }
79+
80+
/* Success Modal Animation */
81+
@keyframes slideUp {
82+
from {
83+
opacity: 0;
84+
transform: translateY(50px);
85+
}
86+
to {
87+
opacity: 1;
88+
transform: translateY(0);
89+
}
90+
}
91+
92+
#successModal > div {
93+
animation: slideUp 0.4s ease-out;
94+
}
95+
96+
.confetti {
97+
position: absolute;
98+
width: 10px;
99+
height: 10px;
100+
background: #f0f;
101+
animation: confettiFall 3s linear forwards;
102+
}
103+
104+
@keyframes confettiFall {
105+
to {
106+
transform: translateY(100vh) rotate(360deg);
107+
opacity: 0;
108+
}
109+
}
79110
</style>
80111
<body class="bg-gradient-to-br from-orange-100 via-yellow-50 to-green-100 min-h-screen transition-colors duration-300">
81112

@@ -290,6 +321,34 @@ <h3 class="text-2xl font-bold text-gray-800 mb-4">Connect Wallet</h3>
290321
<button id="closeModal" class="mt-4 w-full text-gray-600 hover:text-gray-800 font-semibold">Cancel</button>
291322
</div>
292323
</div>
324+
325+
<!-- Success Modal -->
326+
<div id="successModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
327+
<div class="bg-white rounded-2xl p-6 max-w-md w-full mx-4 border-4 border-green-300 transition-colors duration-300 relative overflow-hidden">
328+
<!-- Confetti animation -->
329+
<div class="absolute inset-0 pointer-events-none" id="confettiContainer"></div>
330+
331+
<div class="text-center relative z-10">
332+
<div class="text-6xl mb-4 animate-bounce">🎉</div>
333+
<h3 class="text-2xl font-bold text-gray-800 mb-2">Swap Successful!</h3>
334+
<p class="text-gray-600 mb-4" id="successMessage">Your swap has been completed</p>
335+
336+
<div class="bg-gradient-to-r from-green-50 to-emerald-50 rounded-xl p-4 mb-4 border-2 border-green-200">
337+
<div class="text-sm text-gray-600 mb-1">You received</div>
338+
<div class="text-2xl font-bold text-green-600" id="successAmount">-</div>
339+
</div>
340+
341+
<a id="basescanLink" href="#" target="_blank" rel="noopener noreferrer" class="block w-full bg-gradient-to-r from-blue-500 to-indigo-600 hover:from-blue-600 hover:to-indigo-700 text-white font-bold py-3 rounded-xl transition mb-3">
342+
View on Basescan 🔍
343+
</a>
344+
345+
<button id="closeSuccessModal" class="w-full bg-gradient-to-r from-orange-500 to-yellow-500 hover:from-orange-600 hover:to-yellow-600 text-white font-bold py-3 rounded-xl transition">
346+
Done 🥭
347+
</button>
348+
</div>
349+
</div>
350+
</div>
351+
293352
<div id="accountInfo" class="hidden text-right">
294353
<div class="text-xs text-gray-600">Connected</div>
295354
<div id="accountAddress" class="font-mono text-xs bg-orange-100 px-2 py-1 rounded border border-orange-300"></div>
@@ -864,6 +923,45 @@ <h3 class="font-bold text-orange-800 mb-2 text-sm">🎯 Target Price</h3>
864923
function hideWalletModal() {
865924
document.getElementById('walletModal').classList.add('hidden');
866925
}
926+
927+
function showSuccessModal(txHash, amountOut, tokenOutSymbol) {
928+
// Show modal
929+
document.getElementById('successModal').classList.remove('hidden');
930+
931+
// Set content
932+
document.getElementById('successAmount').textContent = `${parseFloat(amountOut).toFixed(6)} ${tokenOutSymbol}`;
933+
document.getElementById('basescanLink').href = `https://basescan.org/tx/${txHash}`;
934+
935+
// Create confetti
936+
createConfetti();
937+
}
938+
939+
function hideSuccessModal() {
940+
document.getElementById('successModal').classList.add('hidden');
941+
}
942+
943+
function createConfetti() {
944+
const container = document.getElementById('confettiContainer');
945+
container.innerHTML = ''; // Clear previous confetti
946+
947+
const colors = ['#ff6b35', '#f7931e', '#fdc830', '#37b34a', '#4facfe', '#a78bfa'];
948+
949+
for (let i = 0; i < 50; i++) {
950+
const confetti = document.createElement('div');
951+
confetti.className = 'confetti';
952+
confetti.style.left = Math.random() * 100 + '%';
953+
confetti.style.animationDelay = Math.random() * 0.5 + 's';
954+
confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
955+
container.appendChild(confetti);
956+
}
957+
958+
// Remove confetti after animation
959+
setTimeout(() => {
960+
container.innerHTML = '';
961+
}, 3000);
962+
}
963+
964+
document.getElementById('closeSuccessModal').addEventListener('click', hideSuccessModal);
867965

868966
async function connectWallet(walletType) {
869967
console.log('Attempting to connect:', walletType);
@@ -1169,7 +1267,10 @@ <h3 class="font-bold text-orange-800 mb-2 text-sm">🎯 Target Price</h3>
11691267

11701268
updateButtonStates();
11711269

1172-
alert('✅ Swap executed successfully! Check your wallet for tokens.');
1270+
// Show success modal instead of alert
1271+
const tokenOutName = TOKENS[tokenOut.toLowerCase()] || 'tokens';
1272+
const estimatedOut = document.getElementById('estimatedAmount').textContent;
1273+
showSuccessModal(tx.hash, estimatedOut, tokenOutName);
11731274

11741275
} else {
11751276
const date = document.getElementById('executionDate').value;
@@ -1307,6 +1408,8 @@ <h3 class="font-bold text-orange-800 mb-2 text-sm">🎯 Target Price</h3>
13071408
await tx.wait();
13081409
console.log('Limit order created!');
13091410

1411+
// Show success modal for limit order
1412+
hideSuccessModal(); // Just use regular success message for limit orders
13101413
alert('🎯 Limit order created successfully! It will execute automatically when the price reaches your target.');
13111414

13121415
document.getElementById('amountInLimit').value = '';

0 commit comments

Comments
 (0)