ethshit
/
shipit-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

improvements to ux

Browse Source
enumerate
lza_menace 2 years ago
parent 56d74e7d2f
commit 58bb735142
1 changed files with 60 additions and 22 deletions
Show Stats Download Patch File Download Diff File

82
src/Contracts.svelte
Unescape Escape View File

@ -11,19 +11,27 @@
let contractAddress = ''; let contractAddress = '';
let contractApproved = true; let contractApproved = true;
let checked = false; let checked = false;
let gasCalculation = ''; let checksPending = false;
let gasCalculation = [];
let selectedStandard = 1; let selectedStandard = 1;
let tokenStandards = [ let tokenStandards = [
{ id: 1, text: 'ERC-721' }, { id: 1, text: 'ERC-721' },
{ id: 2, text: 'ERC-1155' } { id: 2, text: 'ERC-1155' }
] ]
let amt = 10;
let gasLimit = 0; let gasLimit = 0;
let si_gasLimit = 0; let si_gasLimit = 0;
evm.attachContract('sendit', sendit, SendIt.abi); evm.attachContract('sendit', sendit, SendIt.abi);
function clearMessages() {
gasCalculation = [];
checked = false;
checksPending = false;
errorMessage = '';
successMessage = '';
}
const approveSendIt = async () => { const approveSendIt = async () => {
await $contracts.nft.methods.setApprovalForAll(sendit, true).send({from: $selectedAccount}); await $contracts.nft.methods.setApprovalForAll(sendit, true).send({from: $selectedAccount});
} }
@ -38,6 +46,7 @@
const performCheck = async () => { const performCheck = async () => {
let tokenIds = []; let tokenIds = [];
let recipients = []; let recipients = [];
checksPending = true;
errorMessage = ''; errorMessage = '';
// Determine ABI // Determine ABI
@ -52,13 +61,14 @@
$web3.utils.toChecksumAddress(contractAddress) $web3.utils.toChecksumAddress(contractAddress)
} catch { } catch {
errorMessage = 'Invalid contract address supplied'; errorMessage = 'Invalid contract address supplied';
checksPending = false;
return; return;
} }
// Check textarea syntax // Check textarea syntax
let info = document.getElementById('recipientInfo').value; let info = document.getElementById('recipientInfo').value;
let lines = info.split(/(\s+)/); let lines = info.split(/(\s+)/);
if (lines.length < 2) { errorMessage = 'Invalid recipient info.'; return; } if (lines.length < 2) { errorMessage = 'Invalid recipient info; should be sending 2 or more tokens'; checksPending = false; return; }
for (let i = 0; i < lines.length; i++) { for (let i = 0; i < lines.length; i++) {
let line = lines[i].split(','); let line = lines[i].split(',');
if (line.length == 2) { if (line.length == 2) {
@ -69,6 +79,7 @@
recipients.push(recipient); recipients.push(recipient);
} catch { } catch {
errorMessage = `Invalid recipient address supplied (line ${i + 1})`; errorMessage = `Invalid recipient address supplied (line ${i + 1})`;
checksPending = false;
return; return;
} }
@ -81,6 +92,7 @@
tokenIds.push(tokenId); tokenIds.push(tokenId);
} catch(e) { } catch(e) {
errorMessage = e; errorMessage = e;
checksPending = false;
return; return;
} }
} else { } else {
@ -91,6 +103,7 @@
tokenIds.push(tokenId); tokenIds.push(tokenId);
} catch(e) { } catch(e) {
errorMessage = e; errorMessage = e;
checksPending = false;
return; return;
} }
} }
@ -103,18 +116,20 @@
let approved = await $contracts.nft.methods.isApprovedForAll($selectedAccount, sendit).call(); let approved = await $contracts.nft.methods.isApprovedForAll($selectedAccount, sendit).call();
if (!approved) { if (!approved) {
errorMessage = 'SendIt requires approval to bulk transfer tokens; click the "Approve" button below'; errorMessage = 'SendIt requires approval to bulk transfer tokens; click the "Approve" button below';
checksPending = false;
contractApproved = false; contractApproved = false;
return; return;
} }
} catch { } catch {
errorMessage = 'Unable to check contract approvals'; errorMessage = 'Unable to check contract approvals';
checksPending = false;
return; return;
} }
// Check gas consumption forecasts // Show gas consumption forecasts
await estimateGas(recipients, tokenIds); await estimateGas(recipients, tokenIds);
// Show results checked = true;
} }
async function estimateCBT(recipients, tokens) { async function estimateCBT(recipients, tokens) {
@ -138,14 +153,29 @@
if (recipients.length != tokens.length) { errorMessage = 'Invalid recipient/token IDs provided; please review'; return; } if (recipients.length != tokens.length) { errorMessage = 'Invalid recipient/token IDs provided; please review'; return; }
await estimateCBT(recipients, tokens); await estimateCBT(recipients, tokens);
await estimateSTF(recipients, tokens); await estimateSTF(recipients, tokens);
// let gasPrice = await $web3.eth.getGasPrice(); let gasPrice = await $web3.eth.getGasPrice();
let gasPrice = 20000000000; // let gasPrice = 50000000000;
let gasCostEth = await $web3.utils.fromWei((gasPrice * gasLimit).toString()); let gasPriceGwei = await $web3.utils.fromWei(gasPrice.toString(), 'gwei');
let gasCostWei = gasPrice * gasLimit;
let gasCostEth = await $web3.utils.fromWei(gasCostWei.toString());
let feeWei = await $contracts.sendit.methods.usageFee().call(); let feeWei = await $contracts.sendit.methods.usageFee().call();
let totalFeeWei = feeWei * recipients.length; let totalFeeWei = feeWei * recipients.length;
let totalFeeEth = $web3.utils.fromWei(totalFeeWei.toString());
let si_gasCostWei = gasPrice * si_gasLimit + totalFeeWei; let si_gasCostWei = gasPrice * si_gasLimit + totalFeeWei;
let si_gasCostEth = await $web3.utils.fromWei(si_gasCostWei.toString()); let si_gasCostEth = await $web3.utils.fromWei(si_gasCostWei.toString());
gasCalculation = `Transferring each token individual would require ${gasLimit} gas (${gasCostEth} Ξ). SendIt can do it for ${si_gasLimit} gas + a fee (${si_gasCostEth} Ξ).`; let diffWei = gasCostWei - si_gasCostWei;
let diffEth = await $web3.utils.fromWei(diffWei.toString());
let diffPerc = 100 - ((si_gasCostWei / gasCostWei) * 100);
gasCalculation.push(`Current network gas price is ~${gasPriceGwei} gwei.`);
gasCalculation.push(`Transferring ${recipients.length} tokens individually would cost ~${gasCostEth} Ξ (${gasLimit} gas).`);
gasCalculation.push(`SendIt can bulk transfer ${recipients.length} tokens for ${si_gasCostEth} Ξ (${si_gasLimit} gas + a small fee of ${totalFeeEth} Ξ).`);
if (diffPerc < 0) {
gasCalculation.push(`That is an additional cost of ${diffEth * -1} Ξ to transfer in one go to save you the time`);
} else {
gasCalculation.push(`That is a savings of ${diffEth} Ξ (saved ~${Math.round(diffPerc)}%)`);
}
gasCalculation = gasCalculation; // trigger recheck
} }
</script> </script>
@ -155,13 +185,13 @@
{#if $selectedAccount} {#if $selectedAccount}
<form> <form>
<div class="row"> <div class="row">
<div class="six columns"> <div class="ten columns">
<label for="contractAddress">Contract Address</label> <label for="contractAddress">Contract Address</label>
<input class="u-full-width" type="text" placeholder="0x..." id="contractAddress" bind:value={contractAddress}> <input class="u-full-width" type="text" placeholder="0x..." id="contractAddress" bind:value={contractAddress}>
</div> </div>
<div class="six columns"> <div class="two columns">
<label for="tokenStandard">Token Standard</label> <label for="tokenStandard">Token Standard</label>
<select class="u-full-width" id="tokenStandard" bind:value={selectedStandard} on:change="{() => checked = false}"> <select class="u-full-width" id="tokenStandard" bind:value={selectedStandard} on:change={clearMessages}>
{#each tokenStandards as s} {#each tokenStandards as s}
<option value={s.id}> <option value={s.id}>
{s.text} {s.text}
@ -171,13 +201,15 @@
</div> </div>
</div> </div>
<label for="recipientInfo">Recipient Address, Token ID</label> <label for="recipientInfo">Recipient Address, Token ID</label>
<textarea class="u-full-width" placeholder="0x653D2d1D10c79017b2eA5F5a6F02D9Ab6e725395,90 <textarea class="u-full-width" style="height: 10em;" placeholder="0x653D2d1D10c79017b2eA5F5a6F02D9Ab6e725395,90
0x653D2d1D10c79017b2eA5F5a6F02D9Ab6e725395,1775" id="recipientInfo"></textarea> 0x653D2d1D10c79017b2eA5F5a6F02D9Ab6e725395,1775" id="recipientInfo" on:change={clearMessages}></textarea>
<br /> <br />
{#if checked} {#if checked}
<input class="button-primary" type="submit" value="Transfer"> <input class="button-primary" type="submit" value="Transfer">
{:else} {:else}
<input class="button" type="submit" value="Check" on:click|preventDefault={performCheck}> <button class="button" disabled={checksPending} on:click|preventDefault={performCheck}>
{#if checksPending}checking...{:else}Check{/if}
</button>
{/if} {/if}
{#if !contractApproved} {#if !contractApproved}
<button class="button-primary" on:click|preventDefault={approveSendIt}>Approve</button> <button class="button-primary" on:click|preventDefault={approveSendIt}>Approve</button>
@ -185,23 +217,29 @@
</form> </form>
{/if} {/if}
{#if gasCalculation} <ul>
<p>{gasCalculation}</p> {#each gasCalculation as m, i}
{/if} {#if i == 3}
<li class="successMessage">{m}</li>
{:else}
<li>{m}</li>
{/if}
{/each}
</ul>
{#if errorMessage} {#if errorMessage}
<p id="errorMessage">{errorMessage}</p> <p class="errorMessage">{errorMessage}</p>
{/if} {/if}
{#if errorMessage} {#if errorMessage}
<p id="successMessage">{successMessage}</p> <p class="successMessage">{successMessage}</p>
{/if} {/if}
<style> <style>
#errorMessage { .errorMessage {
color: red; color: red;
} }
#successMessage { .successMessage {
color: green; color: green;
} }
</style> </style>
Write Preview
Loading…
Cancel
Save