Update index.html

index.html

@@ -74,6 +74,26 @@
             .checking_mempool, .checking_mempool span {
                 color: lightgreen;
             }
+            .feerates {
+                display: flex;
+                justify-content: space-around;
+            }
+            .fee {
+                width: 100%;
+                max-width: 6rem;
+                margin-right: 2rem;
+                margin-left: 0px;
+                text-align: center;
+                cursor: pointer;
+            }
+            .fee .num {
+                background-color: grey;
+                border: 1px solid white;
+                padding: .3rem;
+            }
+            .maxfee .num {
+                background-color: green;
+            }
             @media screen and (max-width: 600px) {
             }
         </style>
@@ -184,18 +204,36 @@
     </head>
     <body>
         <h1>Welcome to the online inscriber</h1>
-        <p>First enter a bitcoin addresses from an ordinal wallet</p>
+        <p>First enter a <span class="type_of_address">taproot</span> address from an ordinal wallet</p>
-        <!-- <p><input class="address" value="tb1padwymyc6x2dfc3cwzvpxxcqsr3c46cjx9zxg0jmcuf44fjuwljxs7x68fm"></p> -->
         <p><input class="address"></p>
         <p>Then upload a file you want that address to own</p>
         <form>
             <p><input type="file" class="form" /></p>
+            <p>Select a feerate (measured in sats per byte)</p>
+            <div class="feerates"><div class="fee minfee"><div class="num">...</div><div class="name">Min</div></div><div class="fee midfee"><div class="num">...</div><div class="name">Mid</div></div><div class="fee maxfee"><div class="num">...</div><div class="name">Max</div></div></div>
+            <div id="sliderange">
+                <p>Sats per byte: <span id="sats_per_byte">1</span></p>
+                <input id="sats_range" type="range" min="1" max="100" value="1">
+            </div>
+            <script>
+                var slider = document.getElementById( "sats_range" );
+                var output = document.getElementById( "sats_per_byte" );
+                output.innerHTML = slider.value;
+                slider.oninput = function() {
+                    output.innerHTML = this.value;
+                    sessionStorage[ "feerate" ] = this.value;
+                    $$( '.fee .num' ).forEach( function( item ) {
+                        item.style.backgroundColor = "grey";
+                    });
+                }
+            </script>
         </form>
         <p><button class="submit">Submit</button></p>
         <div class="display"></div>
         <div style="display: none;" class="file"></div>
         <script>
             sessionStorage.clear();
+            const privkey = bytesToHex( cryptoUtils.Noble.utils.randomPrivateKey() );
             $( '.form' ).addEventListener( "change", async function() {
                 if ( this.files[ 0 ].size < 90000 ) {
                     var b64 = await encodeBase64( this );
@@ -213,7 +251,6 @@
                 const hex = $( '.file' ).innerText;
                 const data = hexToBytes( hex );
                 const KeyPair = cryptoUtils.KeyPair;
-                const privkey = bytesToHex( cryptoUtils.Noble.utils.randomPrivateKey() );
                 const seckey = new KeyPair(privkey);
                 const pubkey   = seckey.pub.rawX;
                 const mimetype = ec.encode( sessionStorage[ "mimetype" ] );
@@ -231,7 +268,11 @@
                 var decodedToAddress = "5120" + BTON.Tap.decodeAddress( toAddress ).hex;
                 console.log('To address decoded:', decodedToAddress );
                 var txsize = 200 + ( hex.length / 2 );
-                var feerate = await getMinFeeRate();
+                if ( sessionStorage[ "feerate" ] ) {
+                    var feerate = Number( sessionStorage[ "feerate" ] );
+                } else {
+                    var feerate = await getMaxFeeRate();
+                }
                 var fee = feerate * txsize;
                 var btc_price = sessionStorage[ "bitcoin_price" ];
                 var sats_price = await satsToDollars( fee + 1000 );
@@ -250,13 +291,13 @@
                 var txid = txinfo[ 0 ];
                 var vout = txinfo[ 1 ];
                 var amt = txinfo[ 2 ];
-                if ( !txid || !vout || !amt ) {
+                // if ( !txid || !vout || !amt ) {
-                    await waitSomeSeconds( 2 );
+                //     await waitSomeSeconds( 2 );
-                    txinfo = await addressReceivedMoneyInThisTx( fundingAddress );
+                //     txinfo = await addressReceivedMoneyInThisTx( fundingAddress );
-                    txid = txinfo[ 0 ];
+                //     txid = txinfo[ 0 ];
-                    vout = txinfo[ 1 ];
+                //     vout = txinfo[ 1 ];
-                    amt = txinfo[ 2 ];
+                //     amt = txinfo[ 2 ];
-                }
+                // }
                 // var amt = prompt( "give me the amount you sent" );
                 // amt = Number( amt );
                 // var txid = prompt( "give me the txid" );
@@ -293,7 +334,7 @@
                 $( '.modal' ).style.display = "block";
                 $( '.black-bg' ).style.display = "block";
             });
-            async function getMinFeeRate() {
+            async function getMaxFeeRate() {
                 var fees = await getData( "https://mempool.space/api/v1/fees/recommended" );
                 fees = JSON.parse( fees );
                 // if ( !( "minimumFee" in fees ) ) return "error -- site down";
@@ -302,6 +343,18 @@
                 var minfee = fees[ "fastestFee" ];
                 return minfee;
             }
+            function isValidTaprootAddress( address ) {
+                try {
+                    BTON.Tap.decodeAddress( address ).hex;
+                    return true;
+                } catch( e ) {}
+                return;
+            }
+            async function getAllFeeRates() {
+                var fees = await getData( "https://mempool.space/api/v1/fees/recommended" );
+                fees = JSON.parse( fees );
+                return fees;
+            }
             function getData( url ) {
                 return new Promise( async function( resolve, reject ) {
                     function inner_get( url ) {
@@ -458,8 +511,35 @@
                 $( ".black-bg" ).style.display = "none";
                 $( ".modal" ).style.display = "none";
             }
+            $$( '.fee' ).forEach( function( item ) {
+                item.onclick = function() {
+                    $$( '.fee .num' ).forEach( function( item2 ) {
+                        item2.style.backgroundColor = "grey";
+                    });
+                    this.getElementsByClassName( "num" )[ 0 ].style.backgroundColor = "green";
+                    sessionStorage[ "feerate" ] = this.getElementsByClassName( "num" )[ 0 ].innerText;
+                }
+            });
+            function checkAddress() {
+                if ( !isValidTaprootAddress( $( '.address' ).value ) ) {
+                    $( '.address' ).style.backgroundColor = "#ff5252";
+                    $( '.address' ).style.border = "2px solid red";
+                    $( '.type_of_address' ).style.border = "1px solid white";
+                } else {
+                    $( '.address' ).style.backgroundColor = "initial";
+                    $( '.address' ).style.border = "1px solid white";                    
+                    $( '.type_of_address' ).style.borderStyle = "none";
+                }
+            }
+            $( '.address' ).onchange = checkAddress;
+            $( '.address' ).onpaste = checkAddress;
+            $( '.address' ).onkeyup = checkAddress;
             async function init() {
                 sessionStorage[ "bitcoin_price" ] = await getBitcoinPrice();
+                var allrates = await getAllFeeRates();
+                $( '.minfee .num' ).innerText = allrates[ "minimumFee" ];
+                $( '.midfee .num' ).innerText = allrates[ "hourFee" ];
+                $( '.maxfee .num' ).innerText = allrates[ "fastestFee" ];
                 await waitSomeSeconds( 10 );
                 init();
             }