Getting toWei function using window.ethereum

user_624869 0
Viewed 1017

I am simply trying to access a toWei utils function on a front end website in JavaScript.

Since we removed our window.web3, MetaMask no longer automatically reloads the page on chain/network changes.

(Source: https://docs.metamask.io/guide/provider-migration.html#summary-of-breaking-changes)

So I am using window.ethereum which has been fine so far. But I can't find, even with considerable googling, a direct example of using window.ethereum to access a .toWei(..) function.

For example, I'd want something like:

var weiVal = window.ethereum.toWei(String(eth_float), 'ether');

But this particular function call doesn't exist. How can I do this?

metamask ethereum javascript
2 Answers

The toWei() function was a part of the removed web3 module, and is not part of the MetaMask browser extension anymore.

Currently 0 results in code: https://github.com/MetaMask/metamask-extension/search?q=toWei

However, you can import the web3 JS package to your frontend and use the function from here.

<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
<script>
    const web3 = new Web3();
    const weiAmount = web3.utils.toWei("1", "ether");
    console.log(weiAmount);
</script>

Source of the minified package: the official web3.js repo - https://github.com/ChainSafe/web3.js

user_16931920

Converting from ethereum to wei is just a multiplication by 10^-18 (and vice-versa by 10^18). Here's a demo:

function e2w() {
  val = document.getElementById("numberInput").value;
  console.log("Wei: " + val * 10 ** 18);
}

function w2e() {
  val = document.getElementById("numberInput").value;
  console.log("Ethereum: " + val * 10 ** -18);
}
<form>
  <label for="numberInput">Enter value</label><br>
  <input type="number" step="any" id="numberInput"><br>
  <button onclick="e2w()">Eth --> Wei</button>
  <button onclick="w2e()">Wei --> Eth</button>
</form>

A more general solution for unit conversion among all Ethereum units here:

BigNumber.config({
  DECIMAL_PLACES: 50
});

const units = {
  "wei": 1,
  "kwei": 10 ** 3,
  "mwei": 10 ** 6,
  "gwei": 10 ** 9,
  "microether": 10 ** 12,
  "milliether": 10 ** 15,
  "ether": 10 ** 18,
}

function unitConverter() {
  fromUnit = document.getElementById("from").value;
  toUnit = document.getElementById("to").value;
  inputNumber = document.getElementById("inputNumber").value;
  result = new BigNumber(inputNumber).times(units[fromUnit]).div(units[toUnit]).toString(10);
  document.getElementById("outputNumber").innerHTML = result;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/bignumber.js/9.0.1/bignumber.min.js"></script>
<label for="from">from:</label>
<select id="from" name="fromUnits" onchange="unitConverter()">
  <option value="wei">Wei</option>
  <option value="kwei">Kwei (babbage)</option>
  <option value="mwei">Mwei (lovelace)</option>
  <option value="gwei">Gwei (shannon)</option>
  <option value="microether">microether (szabo)</option>
  <option value="milliether">milliether (finney)</option>
  <option value="ether">Ether</option>
</select>
<p>
  <label for="to">to:</label>
  <select id="to" name="toUnits" onchange="unitConverter()">
    <option value="wei">Wei</option>
    <option value="kwei">Kwei (babbage)</option>
    <option value="mwei">Mwei (lovelace)</option>
    <option value="gwei">Gwei (shannon)</option>
    <option value="microether">microether (szabo)</option>
    <option value="milliether">milliether (finney)</option>
    <option value="ether">Ether</option>
  </select>
  <p>
    <label>Input</label>
    <input id="inputNumber" type="number" placeholder="Input:" value=1 oninput="unitConverter()" onchange="unitConverter()">
    <p>
      <p>Output: <span id="outputNumber">1</span></p>

user_23147370
Related