diff --git a/tools/RootstockBridge.html b/tools/RootstockBridge.html index 0257cb3..fafe979 100644 --- a/tools/RootstockBridge.html +++ b/tools/RootstockBridge.html @@ -4,8 +4,10 @@ - + + + Rootstock Bridge @@ -141,6 +143,8 @@
Simple html page to interact with the Rootstock (RSK) Bl let bridgeAbi; url.innerText = testnetRskUrl; bridgeAddressElement.innerText = bridgeAddress; + const bytes32FormatExample = '0x0000...1111'; + const txHashFormatExample = '1111...1111'; const selectNetworkElement = document.getElementById('selectNetwork'); @@ -201,11 +205,16 @@
Simple html page to interact with the Rootstock (RSK) Bl inputText.setAttribute('class', 'form-control mx-2'); let extraPlaceholder = ''; + if(element.name.endsWith('FederatorPublicKeyOfType') && input.type.startsWith('string')) { - extraPlaceholder = '(rsk, btc or mst)' + extraPlaceholder = ' (rsk, btc or mst)' + } else if(input.type === 'bytes32') { + extraPlaceholder = `: ${bytes32FormatExample} (66 chars long with 0x prefix)`; + } else if(input.type === 'string' && input.name === 'hash') { + extraPlaceholder = `: ${txHashFormatExample} (64 chars long, no 0x prefix)`; } - inputText.setAttribute('placeholder', `${input.type} ${input.name} ${extraPlaceholder}`); + inputText.setAttribute('placeholder', `${input.type} ${input.name}${extraPlaceholder}`); inputElements.push(inputText); } return inputElements; @@ -229,7 +238,7 @@
Simple html page to interact with the Rootstock (RSK) Bl const getBridgeAbi = async () => { const url = 'https://raw.githubusercontent.com/rsksmart/precompiled-abis/master/abis/bridge.json'; - const response = await fetch(url); + const response = await fetch(url, { mode: 'cors' }); const bridgeAbi = await response.json(); return bridgeAbi; }; @@ -259,26 +268,27 @@
Simple html page to interact with the Rootstock (RSK) Bl throw new Error(message); } - inputs.forEach((input, index) => { + const validateInput = (input, index) => { const placeholder = input.placeholder.trim(); - const inputType = placeholder.split(' ')[0]; + const inputType = placeholder.split(' ')[0].trim(); if(inputType === 'int256' || inputType === 'uint256') { const value = Number(input.value); if(isNaN(value)) { const message = `Input "${placeholder}" must be a number`; alert(message); throw new Error(message); + } else if(value < 0) { + const message = `Input "${placeholder}" must be a positive number`; + alert(message); + throw new Error(message); } } else if(inputType === 'bytes32') { - const value = input.value.startsWith('0x') ? input.value.substring(2) : input.value; - if(value.length !== 64) { - const message = `Input "${placeholder}" must be a 64 (or 66 with the 0x prefix) characters long hex string`; + const has0xPrefix = input.value.startsWith('0x'); + if(!has0xPrefix || input.value.length !== 66) { + const message = `Input "${placeholder.substring(0, 17)}" must be a 66 characters long hex string with the 0x prefix like: ${bytes32FormatExample}`; alert(message); throw new Error(message); } - if(input.value.startsWith('0x')) { - console.warn(`The bridge only accepts hex strings without the 0x prefix. This tool will remove the 0x prefix for you, but remember to remove if manually calling the bridge methods.`); - } } else if(placeholder === 'string type (rsk, btc or mst)') { const value = input.value; if(value !== 'rsk' && value !== 'btc' && value !== 'mst') { @@ -286,16 +296,26 @@
Simple html page to interact with the Rootstock (RSK) Bl alert(message); throw new Error(message); } + } else if(placeholder.startsWith('string hash')) { + const value = input.value; + const has0xPrefix = value.startsWith('0x'); + if(has0xPrefix || value.length !== 64) { + const message = `Input "${placeholder.substring(0, 11)}" must be a 64 characters long hex string without the 0x prefix like: ${txHashFormatExample}`; + alert(message); + throw new Error(message); + } } - }); + }; + + inputs.forEach(validateInput); }; const handleClick = async () => { const button = event.target; const inputs = Array.from(button.parentNode.querySelectorAll('input')); - const args = inputs.map(input => input.value); ensureAllInputsAreFilled(inputs); + const args = inputs.map(input => input.value); const functionName = button.innerText; const displayElement = button.parentNode.querySelector('.display');