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?
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
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>