Merge pull request #6 from blooo-io/fix/LDG-329-transfer-of-ethers-be…

…tween-accounts Fix transfer of sol between accounts
blooo-io · Dec 5, 2023 · efd7430 · efd7430
2 parents 0437ef1 + bf8ec71
commit efd7430
Show file tree

Hide file tree

Showing 7 changed files with 9,763 additions and 0 deletions.
diff --git a/ether-transfer/.gitignore b/ether-transfer/.gitignore
@@ -0,0 +1,5 @@
+/node_modules
+/.parcel-cache
+/dist
+
+.DS_Store
diff --git a/ether-transfer/assets/ledger-logo.jpg b/ether-transfer/assets/ledger-logo.jpg
diff --git a/ether-transfer/index.html b/ether-transfer/index.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Parcel Sandbox</title>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="style.css">
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
+    <script type="module" src="index.js"></script>
+  </head>
+
+  <body class="m-5">
+    <div class="d-flex flex-column justify-content-center m-5 align-items-center">
+      <p>Click on the bellow button to connect your Ledger Wallet</p>
+      <button class="btn btn-primary w-25" data-bs-toggle="modal" data-bs-target="#WalletModal">Connect your Wallet</button>
+    </div>
+    <div class="d-flex flex-row">
+      <div id="app" class="w-50">
+        <form class="row g-3">
+          <div class="col-md-12">
+            <label for="wallet" class="form-label">Wallet Public Key</label>
+            <input type="text" class="form-control" id="wallet" disabled>
+          </div>
+          <div class="col-md-12">
+            <label for="recipient" class="form-label">Recipient</label>
+            <input type="text" class="form-control" id="recipient">
+          </div>
+          <div class="col-md-6">
+            <label for="gasPrice" class="form-label">Gas Price in wei</label>
+            <input type="text" class="form-control" id="gasPrice" disabled>
+          </div>
+          <div class="col-md-6">
+            <label for="gasLimit" class="form-label">Gas Limit in wei</label>
+            <input type="text" class="form-control" id="gasLimit">
+          </div>
+          <div class="col-md-6">
+            <label for="chainId" class="form-label">Chain ID</label>
+            <input type="text" class="form-control" id="chainId" disabled>
+          </div>
+          <div class="col-md-6">
+            <label for="value" class="form-label">Value</label>
+            <input type="text" class="form-control" id="value" >
+          </div>
+          <div class="col-12">
+            <button type="button" id="tx-transfer" class="btn btn-primary">Create Transaction</button>
+          </div>
+        </form>
+      </div>
+      <div class="w-50 d-flex flex-column">
+            <p class="url">Goerli etherscan: </p>
+            <p  id="url"></p>
+      </div>
+    </div>
+
+    <!-- Modal -->
+    <div class="modal fade" id="WalletModal" tabindex="-1" aria-labelledby="WalletModalLabel" aria-hidden="true">
+      <div class="modal-dialog">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title" id="WalletModalLabel">Choose your Wallet</h5>
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+          </div>
+          <div class="modal-body d-flex justify-content-center">
+            <button id="connect-ledger" class="rounded-3 align-self-center" data-bs-dismiss="modal">
+              <img src="./assets/ledger-logo.jpg" class="card-img-top" alt="Ledger">
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/ether-transfer/index.js b/ether-transfer/index.js
@@ -0,0 +1,84 @@
+import { ethers } from "ethers";
+import TransportWebHID from "@ledgerhq/hw-transport-webhid";
+import Eth from "@ledgerhq/hw-app-eth";
+import ledgerService from "@ledgerhq/hw-app-eth/lib/services/ledger"
+
+//Infuria provider for Goerli network
+const provider = new ethers.providers.JsonRpcProvider("https://ethereum-goerli.publicnode.com/");
+
+
+const chainId = 5;
+let gasPrice;
+let addressWallet;
+let recipient = "0x920f19c7F7Ce5b3170AdB94fDcC4570Da95D286b";
+let value = 0.001;
+let gasLimit = 1000000;
+let nonce;
+let _eth;
+
+document.getElementById("connect-ledger").onclick = async function () {
+
+    //Connecting to the Ledger Nano with HID protocol
+    const transport = await TransportWebHID.create();
+
+    //Getting an Ethereum instance and get the Ledger Nano ethereum account public key
+    _eth = new Eth(transport);
+    const { address } = await _eth.getAddress("44'/60'/0'/0/0", false);
+
+    //Get some properties from provider
+    addressWallet = address;
+    gasPrice = (await provider.getGasPrice())._hex;
+    gasPrice = parseInt(gasPrice,16) * 1.15;
+
+    //Fill the inputs with the default value
+    document.getElementById("wallet").value = address;
+    document.getElementById("gasPrice").value = parseInt(gasPrice) + " wei";
+    document.getElementById("chainId").value = chainId;
+    document.getElementById("value").value = value;
+    document.getElementById("recipient").value = recipient;
+    document.getElementById("gasLimit").value = gasLimit;
+}
+
+
+document.getElementById("tx-transfer").onclick = async function () {
+    //Getting information from the inputs
+    addressWallet = document.getElementById("wallet").value;
+    recipient =  document.getElementById("recipient").value;
+    value =  document.getElementById("value").value;
+    gasLimit =  parseInt(document.getElementById("gasLimit").value);
+    nonce =  await provider.getTransactionCount(addressWallet, "latest");
+
+    //Building transaction with the information gathered
+    const transaction = {
+        to: recipient,
+        gasPrice: "0x" + parseInt(gasPrice).toString(16),
+        gasLimit: ethers.utils.hexlify(gasLimit),
+        nonce: nonce,
+        chainId: chainId,
+        data: "0x00",
+        value: ethers.utils.parseUnits(value, "ether")._hex,
+    }
+
+    //Serializing the transaction to pass it to Ledger Nano for signing
+    let unsignedTx = ethers.utils.serializeTransaction(transaction).substring(2);
+    const resolution = await ledgerService.resolveTransaction(unsignedTx, {}, {});
+
+    //Sign with the Ledger Nano (Sign what you see)
+    const signature = await _eth.signTransaction("44'/60'/0'/0/0",unsignedTx, resolution);
+
+    //Parse the signature
+    signature.r = "0x"+signature.r;
+    signature.s = "0x"+signature.s;
+    signature.v = parseInt(signature.v);
+    signature.from = addressWallet;
+
+    //Serialize the same transaction as before, but adding the signature on it
+    let signedTx = ethers.utils.serializeTransaction(transaction, signature);
+
+    //Sending the transaction to the blockchain
+    const hash = (await provider.sendTransaction(signedTx)).hash;
+
+    //Display the Goerli etherscan on the screen
+    const url = "https://goerli.etherscan.io/tx/" + hash;
+    document.getElementById("url").innerHTML = url;
+}