Spaces:
Running
Running
File size: 5,747 Bytes
b0f38c2 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 | // Main application script
document.addEventListener('DOMContentLoaded', () => {
// Sample data - in real app this would come from your Node.js backend
const routesData = {
"routes": [
{
"description": "WETH for DAI on UniswapV2 > DAI for PEPE on Pancakeswap > PEPE for WETH on SushiSwap",
"borrowTokenT0": "0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2",
"t0decimals": 18,
"swapOnExchangeR1": "0x7a250d5630B4cF539739dF2C5dAcb4c659F2488D",
"swapForTokenT1": "0x6B175474E89094C44Da98b954EedeAC495271d0F",
"t1decimals": 18,
"swapOnExchangeR2": "0xEfF92A263d31888d860bD50809A8D171709b7b1c",
"swapForTokenT2": "0x6982508145454Ce325dDbE47a25d4ec3d2311933",
"t2decimals": 18,
"swapBackOnExchangeR3": "0xd9e1cE17f2641f24aE83637ab66a2cca9C378B9F",
"active": true,
"profitPotential": 1.23
},
{
"description": "PEPE for DAI on UniswapV2 > DAI for WETH on Pancakeswap > WETH for PEPE on SushiSwap",
"borrowTokenT0": "0x6982508145454Ce325dDbE47a25d4ec3d2311933",
"t0decimals": 18,
"swapOnExchangeR1": "0x7a250d5630B4cF539739dF2C5dAcb4c659F2488D",
"swapForTokenT1": "0x6B175474E89094C44Da98b954EedeAC495271d0F",
"t1decimals": 18,
"swapOnExchangeR2": "0xEfF92A263d31888d860bD50809A8D171709b7b1c",
"swapForTokenT2": "0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2",
"t2decimals": 18,
"swapBackOnExchangeR3": "0xd9e1cE17f2641f24aE83637ab66a2cca9C378B9F",
"active": false,
"profitPotential": 0.87
}
]
};
// Render routes
const routesContainer = document.getElementById('routes-container');
routesData.routes.forEach(route => {
const routeCard = document.createElement('div');
routeCard.className = `route-card bg-gray-600 p-4 rounded-lg ${route.active ? 'active' : ''}`;
routeCard.innerHTML = `
<div class="flex justify-between items-start">
<div>
<h3 class="font-medium">${route.description}</h3>
<div class="text-sm text-gray-300 mt-1">
<span class="inline-block mr-3">Profit: <span class="text-green-400">$${route.profitPotential.toFixed(4)}</span></span>
<span class="inline-block">Status: <span class="${route.active ? 'text-green-400' : 'text-red-400'}">${route.active ? 'Active' : 'Inactive'}</span></span>
</div>
</div>
<button class="toggle-route px-3 py-1 rounded text-sm ${route.active ? 'bg-red-500 hover:bg-red-600' : 'bg-green-500 hover:bg-green-600'} transition-colors">
${route.active ? 'Deactivate' : 'Activate'}
</button>
</div>
`;
routesContainer.appendChild(routeCard);
});
// Update stats
document.getElementById('active-routes').textContent = routesData.routes.filter(r => r.active).length;
document.getElementById('profit-potential').textContent = `$${routesData.routes.reduce((sum, route) => sum + (route.active ? route.profitPotential : 0), 0).toFixed(2)}`;
// Start bot button
document.getElementById('start-bot').addEventListener('click', () => {
const gasPrice = document.getElementById('gas-price').value;
const minProfit = document.getElementById('min-profit').value;
alert(`Starting arbitrage bot with gas price: ${gasPrice} Gwei and min profit: $${minProfit}`);
// In real app, this would call your Node.js backend
});
// Route toggle buttons
document.addEventListener('click', (e) => {
if (e.target.classList.contains('toggle-route')) {
const card = e.target.closest('.route-card');
card.classList.toggle('active');
const status = card.querySelector('span.text-green-400, span.text-red-400');
if (status.classList.contains('text-green-400')) {
status.classList.remove('text-green-400');
status.classList.add('text-red-400');
status.textContent = 'Inactive';
e.target.classList.remove('bg-red-500', 'hover:bg-red-600');
e.target.classList.add('bg-green-500', 'hover:bg-green-600');
e.target.textContent = 'Activate';
} else {
status.classList.remove('text-red-400');
status.classList.add('text-green-400');
status.textContent = 'Active';
e.target.classList.remove('bg-green-500', 'hover:bg-green-600');
e.target.classList.add('bg-red-500', 'hover:bg-red-600');
e.target.textContent = 'Deactivate';
}
// Update stats
const activeRoutes = document.querySelectorAll('.route-card.active').length;
const totalProfit = Array.from(document.querySelectorAll('.route-card')).reduce((sum, card) => {
if (card.classList.contains('active')) {
const profitText = card.querySelector('.text-green-400').textContent;
return sum + parseFloat(profitText.replace('$', ''));
}
return sum;
}, 0);
document.getElementById('active-routes').textContent = activeRoutes;
document.getElementById('profit-potential').textContent = `$${totalProfit.toFixed(2)}`;
}
});
}); |