├── bridgeBlink.html ├── index.html ├── readme.md ├── script.js ├── style.css └── testnet ├── README.md ├── index.html ├── script.js └── style.css /bridgeBlink.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Title 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Eclipse Mainnet Bridge 6 | 7 | 8 | 10 | 11 | 12 | 13 | 14 |

15 |

UNOFFICIAL ETHEREUM MAINNET - ECLIPSE BRIDGE by hkey

16 | 36 | 37 |

38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # UI FOR ECLIPSE - ETHEREUM MAINNET BRIDGE 2 | 3 | An interface for the official Eclipse - Ethereum MAINNET bridge. It has been coded to facilitate users and developers in using the Eclipse MAINNET bridge. 4 | 5 | ## How to use? 6 | 7 | - Go to the [project page](https://hkey0.github.io/EclipseBridge/) served by Github pages. 8 | - Connect with your Metamask wallet. 9 | - Enter the amount you want to transfer in ether and your Eclipse wallet address. 10 | - Click on the "BRIDGE" button and confirm the transaction. The etherscan page will open in a new tab to follow the transaction. 11 | 12 | 13 | ## How to run it locally? 14 | 15 | The HTML, CSS and Javascript code is executed by your browser, which means that when you download the files and open the index.html file in your browser, you will see something like the project page. 16 | 17 | But metamask will not allow you to link to the index.html files. To connect with metamask you need to serve the html file with an http server. You can do this simply with a Visual Studio Code extension called [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer). 18 | 19 | ## Preview 20 | 21 | ![preview image](https://i.ibb.co/mFFbK96/resim.png) 22 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | // import { ethers } from 'https://cdn.ethers.io/lib/ethers-5.2.umd.min.js'; 2 | 3 | async function getEclipseBalance(address) { 4 | const response = await fetch("https://mainnetbeta-rpc.eclipse.xyz/", { 5 | method: "POST", 6 | headers: { "Content-Type": "application/json" }, 7 | body: JSON.stringify({ 8 | jsonrpc: "2.0", 9 | id: 1, 10 | method: "getBalance", 11 | params: [address], 12 | }), 13 | }); 14 | 15 | const { 16 | result: { value }, 17 | } = await response.json(); 18 | return value / 1_000_000_000; 19 | } 20 | 21 | 22 | document.addEventListener("DOMContentLoaded", function () { 23 | if (window.self === window.top) { 24 | document.body.style.transform = "scale(1.6)"; 25 | } 26 | document.getElementById("balance").value = 27 | `Your will see your Eclipse balance here.`; 28 | var web3 = new Web3(Web3.givenProvider); 29 | window.valid_address = false; 30 | 31 | document 32 | .getElementById("eclipse-wallet") 33 | .addEventListener("input", async function () { 34 | let data = document.getElementById("eclipse-wallet").value; 35 | console.log(data); 36 | if (data.length >= 41) { 37 | let balance = await getEclipseBalance(data) 38 | .then((b) => { 39 | console.log("Balance is ", b); 40 | window.valid_address = true; 41 | document.getElementById("balance").value = 42 | `Your Eclipse balance is: ${b}`; 43 | document.getElementById("bridge-button").disabled = null; 44 | }) 45 | .catch((err) => { 46 | window.valid_address = false; 47 | document.getElementById("bridge-button").disabled = true; 48 | }); 49 | } 50 | }); 51 | 52 | async function testi() { 53 | connectBtn = document.getElementById("connect-button"); 54 | walletArea = document.getElementById("sender-eth-addr"); 55 | 56 | // switch to mainnet 57 | await window.ethereum.request({ 58 | method: "wallet_switchEthereumChain", 59 | params: [{ chainId: web3.utils.toHex(1) }], 60 | }); 61 | 62 | await window.ethereum.request({ method: "eth_requestAccounts" }); 63 | web3 = new Web3(window.ethereum); 64 | connectBtn.innerText = "Logout"; 65 | 66 | walletArea.value = (await web3.eth.getAccounts())[0]; 67 | } 68 | 69 | testi(); 70 | 71 | async function deposit() { 72 | let chain = await window.ethereum.chainId; 73 | if (chain != 0x1) { 74 | await window.ethereum.request({ 75 | method: "wallet_switchEthereumChain", 76 | params: [{ chainId: web3.utils.toHex(1) }], 77 | }); 78 | } 79 | 80 | eclipseAddr = document.getElementById("eclipse-wallet").value; 81 | amountinWei = ethers.utils.parseEther( 82 | document.getElementById("ether-amount").value, 83 | ); 84 | 85 | console.log("Eclipse addr: ", eclipseAddr, amountinWei); 86 | var contract = new web3.eth.Contract( 87 | [ 88 | { 89 | inputs: [ 90 | { 91 | internalType: "bytes32", 92 | name: "hexSolanaAddress", 93 | type: "bytes32", 94 | }, 95 | { 96 | internalType: "uint256", 97 | name: "amountWei", 98 | type: "uint256", 99 | }, 100 | ], 101 | name: "deposit", 102 | outputs: [], 103 | stateMutability: "payable", 104 | type: "function", 105 | }, 106 | ], 107 | "0x83cb71d80078bf670b3efec6ad9e5e6407cd0fd1", 108 | ); 109 | 110 | let ecipseAddrParam = ethers.utils.hexlify( 111 | ethers.utils.base58.decode(eclipseAddr), 112 | ); 113 | contract.methods 114 | .deposit(ecipseAddrParam, amountinWei) 115 | .send({ 116 | from: (await web3.eth.getAccounts())[0], 117 | value: amountinWei, 118 | }) 119 | .once("transactionHash", (hash) => { 120 | window.open("https://etherscan.io/tx/" + hash); 121 | console.log("hash", hash); 122 | }) 123 | .then(function (result) { 124 | console.log(result); 125 | }); 126 | } 127 | 128 | document 129 | .getElementById("bridge-button") 130 | .addEventListener("click", async function () { 131 | deposit(); 132 | }); 133 | 134 | window.ethereum.on("accountsChanged", async () => { 135 | this.location.reload(); 136 | }); 137 | }); 138 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Arial, sans-serif; 3 | display: flex; 4 | justify-content: center; 5 | align-items: center; 6 | height: 100vh; 7 | background-color: #a9e190; 8 | transform: scale(0.75); 9 | overflow: hidden; 10 | } 11 | 12 | .dev-credit { 13 | margin: 0px; 14 | margin-top: 10px; 15 | color: black; 16 | 17 | } 18 | 19 | .form-container { 20 | width: 500px; 21 | background-color: white; 22 | padding: 20px; 23 | border-radius: 8px; 24 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 25 | 26 | 27 | background: rgba(255, 255, 255, 0.18); 28 | border-radius: 16px; 29 | box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); 30 | backdrop-filter: blur(20px); 31 | -webkit-backdrop-filter: blur(20px); 32 | border: 1px solid rgba(255, 255, 255, 0.3); 33 | } 34 | 35 | form { 36 | display: flex; 37 | flex-direction: column; 38 | } 39 | 40 | input[type="number"], 41 | input[type="text"], 42 | input[type="password"] { 43 | padding: 10px; 44 | margin-bottom: 10px; 45 | border: 1px solid #ddd; 46 | border-radius: 4px; 47 | 48 | background: rgba(255, 255, 255, 0.18); 49 | box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); 50 | backdrop-filter: blur(20px); 51 | -webkit-backdrop-filter: blur(20px); 52 | border: 1px solid rgba(255, 255, 255, 0.3); 53 | } 54 | 55 | button { 56 | padding: 10px; 57 | border: none; 58 | border-radius: 4px; 59 | background-color: #0c0d0d; 60 | color: white; 61 | cursor: pointer; 62 | } 63 | 64 | button:hover { 65 | transition: 0.3s; 66 | background-color: #252627; 67 | } 68 | 69 | button:disabled { 70 | background-color: #5c5c5c; 71 | color: black; 72 | cursor: not-allowed; 73 | opacity: 0.5; 74 | } 75 | 76 | h1 { 77 | text-align: center; 78 | color: #333; 79 | font-size: 24px; 80 | margin-bottom: 20px; 81 | } 82 | 83 | textarea:focus, input:focus{ 84 | outline: none; 85 | } 86 | 87 | -------------------------------------------------------------------------------- /testnet/README.md: -------------------------------------------------------------------------------- 1 | # UI FOR ECLIPSE - SEPOLIA BRIDGE 2 | 3 | An interface for the official Eclipse - Sepolia bridge. It has been coded to facilitate users and developers in using the Eclipse testnet bridge. 4 | 5 | ## How to use? 6 | 7 | - Go to the [project page](https://hkey0.github.io/EclipseBridge/) served by Github pages. 8 | - Connect with your Metamask wallet. 9 | - Enter the amount you want to transfer in Ether and your eclipse wallet address. You can see the wallet address using the `solana address` command. 10 | - Click on the "BRIDGE" button and confirm the transaction. The etherscan page will open in a new tab to follow the transaction. 11 | 12 | 13 | ## How to run it locally? 14 | 15 | The HTML, CSS and Javascript code is executed by your browser, which means that when you download the files and open the index.html file in your browser, you will see something like the project page. 16 | 17 | But metamask will not allow you to link to the index.html files. To connect with metamask you need to serve the html file with an http server. You can do this simply with a Visual Studio Code extension called [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer). 18 | 19 | ## Preview 20 | 21 | ![preview image](https://i.ibb.co/HCDQR3j/image.png) 22 | -------------------------------------------------------------------------------- /testnet/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Eclipse Bridge Sepolia 6 | 7 | 8 | 10 | 11 | 12 | 13 | 14 |

15 |

SEPOLIA-ECLIPSE BRIDGE

16 | 29 | 30 |

31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /testnet/script.js: -------------------------------------------------------------------------------- 1 | // import { ethers } from 'https://cdn.ethers.io/lib/ethers-5.2.umd.min.js'; 2 | 3 | document.addEventListener("DOMContentLoaded", function () { 4 | if (window.self === window.top) { 5 | document.body.style.transform = "scale(1.6)"; 6 | } 7 | 8 | var web3 = new Web3(Web3.givenProvider); 9 | 10 | async function testi() { 11 | connectBtn = document.getElementById("connect-button"); 12 | walletArea = document.getElementById("sender-eth-addr"); 13 | 14 | // switch to sepolia 15 | await window.ethereum.request({ 16 | method: "wallet_switchEthereumChain", 17 | params: [{ chainId: web3.utils.toHex(11155111) }], 18 | }); 19 | 20 | await window.ethereum.request({ method: "eth_requestAccounts" }); 21 | web3 = new Web3(window.ethereum); 22 | connectBtn.innerText = "Logout"; 23 | 24 | walletArea.value = (await web3.eth.getAccounts())[0]; 25 | } 26 | 27 | testi(); 28 | async function deposit() { 29 | let chain = await window.ethereum.chainId; 30 | if (chain != 0xaa36a7) { 31 | await window.ethereum.request({ 32 | method: "wallet_switchEthereumChain", 33 | params: [{ chainId: web3.utils.toHex(11155111) }], 34 | }); 35 | } 36 | 37 | eclipseAddr = document.getElementById("eclipse-wallet").value; 38 | amountinWei = ethers.utils.parseEther( 39 | document.getElementById("ether-amount").value, 40 | ); 41 | console.log("Eclipse addr: ", eclipseAddr, amountinWei); 42 | 43 | var contract = new web3.eth.Contract( 44 | [ 45 | { 46 | inputs: [ 47 | { 48 | internalType: "bytes32", 49 | name: "hexSolanaAddress", 50 | type: "bytes32", 51 | }, 52 | { 53 | internalType: "uint256", 54 | name: "amountWei", 55 | type: "uint256", 56 | }, 57 | ], 58 | name: "deposit", 59 | outputs: [], 60 | stateMutability: "payable", 61 | type: "function", 62 | }, 63 | ], 64 | "0xe49aaa25a10fd6e15dd7ddcb50904ca1e91f6e01", 65 | ); 66 | 67 | let ecipseAddrParam = ethers.utils.hexlify( 68 | ethers.utils.base58.decode(eclipseAddr), 69 | ); 70 | 71 | contract.methods 72 | .deposit(ecipseAddrParam, amountinWei) 73 | .send({ 74 | from: (await web3.eth.getAccounts())[0], 75 | value: amountinWei, 76 | }) 77 | .once("transactionHash", (hash) => { 78 | window.open("https://sepolia.etherscan.io/tx/" + hash); 79 | console.log("hash", hash); 80 | }) 81 | .then(function (result) { 82 | console.log(result); 83 | }); 84 | } 85 | 86 | document 87 | .getElementById("bridge-button") 88 | .addEventListener("click", async function () { 89 | deposit(); 90 | }); 91 | 92 | window.ethereum.on("accountsChanged", async () => { 93 | this.location.reload(); 94 | }); 95 | }); 96 | -------------------------------------------------------------------------------- /testnet/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Arial, sans-serif; 3 | display: flex; 4 | justify-content: center; 5 | align-items: center; 6 | height: 100vh; 7 | background-color: #a9e190; 8 | transform: scale(0.75); 9 | overflow: hidden; 10 | } 11 | 12 | .dev-credit { 13 | margin: 0px; 14 | margin-top: 10px; 15 | color: black; 16 | 17 | } 18 | 19 | .form-container { 20 | width: 500px; 21 | background-color: white; 22 | padding: 20px; 23 | border-radius: 8px; 24 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 25 | 26 | 27 | background: rgba(255, 255, 255, 0.18); 28 | border-radius: 16px; 29 | box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); 30 | backdrop-filter: blur(20px); 31 | -webkit-backdrop-filter: blur(20px); 32 | border: 1px solid rgba(255, 255, 255, 0.3); 33 | } 34 | 35 | form { 36 | display: flex; 37 | flex-direction: column; 38 | } 39 | 40 | input[type="number"], 41 | input[type="text"], 42 | input[type="password"] { 43 | padding: 10px; 44 | margin-bottom: 10px; 45 | border: 1px solid #ddd; 46 | border-radius: 4px; 47 | 48 | background: rgba(255, 255, 255, 0.18); 49 | box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); 50 | backdrop-filter: blur(20px); 51 | -webkit-backdrop-filter: blur(20px); 52 | border: 1px solid rgba(255, 255, 255, 0.3); 53 | } 54 | 55 | button { 56 | padding: 10px; 57 | border: none; 58 | border-radius: 4px; 59 | background-color: #0000007a; 60 | color: white; 61 | cursor: pointer; 62 | } 63 | 64 | button:hover { 65 | transition: 0.3s; 66 | background-color: #00000043; 67 | } 68 | 69 | h1 { 70 | text-align: center; 71 | color: #333; 72 | font-size: 24px; 73 | margin-bottom: 20px; 74 | } 75 | 76 | textarea:focus, input:focus{ 77 | outline: none; 78 | } 79 | 80 | --------------------------------------------------------------------------------

UNOFFICIAL ETHEREUM MAINNET - ECLIPSE BRIDGE by hkey

TWITTER: hkeydesign

Github Repo: hkey0/EclipseBridge

SEPOLIA-ECLIPSE BRIDGE

TWITTER: hkeydesign

Github Repo: hkey0/EclipseBridge