Bug fixes and UX improvements

-- added better indication for pending transactions -- fixed details of same address not refreshing when clicking on 'go' again -- made 'all' as default for searched address -- added a favicon
2022-07-31 17:17:47 +05:30 · 2022-07-31 17:17:47 +05:30 · 6fa634b096
commit 6fa634b096
parent c409ade8f6
5 changed files with 72 additions and 39 deletions
--- a/css/main.css
+++ b/css/main.css
@ -864,7 +864,7 @@ ol li::before {
  content: "+ ";
 }
 .transaction.unconfirmed-tx {
-  grid-template-areas: "icon time amount" "icon receiver receiver" "icon txid txid" "icon unconfirmed unconfirmed";
+  grid-template-areas: "icon time amount" "icon receiver receiver" "icon txid txid" "icon unconfirmed unconfirmed" "icon badge badge";
 }
 .transaction.unconfirmed-tx .icon {
  fill: var(--yellow);
@ -888,6 +888,16 @@ ol li::before {
  font-size: 0.9rem;
  color: rgba(var(--text-color), 0.8);
 }
+.transaction .pending-badge {
+  grid-area: badge;
+  font-size: 0.8rem;
+  padding: 0.2rem 0.5rem;
+  border-radius: 0.5rem;
+  background-color: var(--yellow);
+  color: rgba(var(--foreground-color), 1);
+  font-weight: 500;
+  justify-self: flex-start;
+}
 .transaction__amount {
  grid-area: amount;
  font-size: 1rem;
@ -922,7 +932,6 @@ ol li::before {
  height: 4rem;
  width: 4rem;
  border-radius: 5rem;
-  margin-bottom: 2rem;
  -webkit-animation: popup 1s;
          animation: popup 1s;
 }
--- a/css/main.min.css
+++ b/css/main.min.css
--- a/css/main.scss
+++ b/css/main.scss
@ -806,7 +806,7 @@ ol {
    }
  }
  &.unconfirmed-tx {
-    grid-template-areas: "icon time amount" "icon receiver receiver" "icon txid txid" "icon unconfirmed unconfirmed";
+    grid-template-areas: "icon time amount" "icon receiver receiver" "icon txid txid" "icon unconfirmed unconfirmed" "icon badge badge";
    .icon {
      fill: var(--yellow);
    }
@ -830,6 +830,16 @@ ol {
    font-size: 0.9rem;
    color: rgba(var(--text-color), 0.8);
  }
+  .pending-badge {
+    grid-area: badge;
+    font-size: 0.8rem;
+    padding: 0.2rem 0.5rem;
+    border-radius: 0.5rem;
+    background-color: var(--yellow);
+    color: rgba(var(--foreground-color), 1);
+    font-weight: 500;
+    justify-self: flex-start;
+  }
  &__amount {
    grid-area: amount;
    font-size: 1rem;
@ -862,7 +872,6 @@ ol {
  height: 4rem;
  width: 4rem;
  border-radius: 5rem;
-  margin-bottom: 2rem;
  animation: popup 1s;
  &.success {
    fill: rgba(var(--background-color), 1);
--- a/favicon.svg
+++ b/favicon.svg
@ -0,0 +1,3 @@
+<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M75.9466 56.32C74.2933 62.9333 64 59.5733 60.8 58.6667L63.7333 47.04C67.04 48 77.6533 49.3867 75.9466 56.32ZM59.36 64.64L56.16 77.4933C60.1066 78.5067 72.32 82.4 74.1333 75.1467C76.0533 67.5733 63.3066 65.6 59.36 64.64ZM115.733 76.9067C108.587 105.493 79.68 122.88 51.0933 115.733C22.5066 108.587 5.13597 79.68 12.2666 51.0933C19.4133 22.5067 48.32 5.14133 76.9066 12.2667C105.44 19.4133 122.827 48.32 115.733 76.9067ZM75.7866 42.9333L78.1866 33.3333L72.32 32L69.9733 41.2267C68.4266 40.8533 66.88 40.48 65.28 40.16L67.6266 30.72L61.8133 29.3333L59.4133 38.88C58.1333 38.56 56.8533 38.2933 55.68 37.9733L47.6266 35.9467L46.0266 42.1867C46.0266 42.1867 50.4 43.2 50.2933 43.2533C52.6933 43.84 53.12 45.3333 53.0133 46.6667L46.4533 72.96C46.1866 73.7067 45.3333 74.6667 43.7866 74.4C43.84 74.4533 39.52 73.3333 39.52 73.3333L36.64 80L44.2133 81.92C45.6533 82.2933 47.04 82.6667 48.4266 82.9867L45.9733 92.6933L51.84 94.1867L54.24 84.5333C55.84 84.96 57.3866 85.3333 58.88 85.76L56.48 95.3067L62.3466 96.8L64.8 87.0933C74.6666 88.96 82.24 88.2133 85.3333 79.2C88 72 85.3333 67.7333 80 65.0133C83.84 64 86.72 61.6 87.52 56.3733C88.5866 49.28 83.1466 45.4933 75.7866 42.9333Z" fill="#FFBF5E"/>
+</svg>
--- a/index.html
+++ b/index.html
@ -5,13 +5,14 @@
    <title>Bitcoin Web Wallet</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <script src="components.js" defer></script>
+    <link rel="shortcut icon" href="favicon.svg" type="image/x-icon">
    <link rel="stylesheet" href="css/main.min.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Calistoga&family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap"
        rel="stylesheet">
+    <script src="components.js" defer></script>
    <script src="https://unpkg.com/uhtml@3.0.1/es.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
@ -115,9 +116,9 @@
                        style="background-color: rgba(var(--foreground-color), 1);">
                        <h5>Transactions</h5>
                        <strip-select id="filter_selector">
-                            <strip-option value="sent" selected>Sent</strip-option>
+                            <strip-option value="all" selected>All</strip-option>
+                            <strip-option value="sent">Sent</strip-option>
                            <strip-option value="received">Received</strip-option>
-                            <strip-option value="all">All</strip-option>
                        </strip-select>
                    </div>
                    <ul id="transactions_list" class="observe-empty-state"></ul>
@ -208,7 +209,7 @@
                                    </svg>
                                </label>
                            </sm-input>
-                            <button type="submit" id="convert_priv_key">Go</button>
+                            <button type="submit" id="convert_priv_key" class="button button--primary cta">Go</button>
                        </sm-form>
                        <div class="grid gap-0-5">
                            <sm-input type="password" id="btc_private" class="password-field"
@ -387,14 +388,20 @@
                </button>
            </div>
        </header>
-        <div class="grid gap-0-5 justify-center text-center">
+        <div class="grid gap-2">
            <svg class="icon user-action-result__icon success" xmlns="http://www.w3.org/2000/svg" height="24px"
                viewBox="0 0 24 24" width="24px" fill="#000000">
                <path d="M0 0h24v24H0V0z" fill="none" />
                <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" />
            </svg>
-            <h4>Transaction sent</h4>
-            <sm-copy id="txid"></sm-copy>
+            <div class="grid gap-0-5 justify-center text-center">
+                <h4>Transaction sent</h4>
+                <p>Confirmation of transaction might take few hours. </p>
+            </div>
+            <div class="grid">
+                <span class="label">Transaction ID</span>
+                <sm-copy id="txid" value="dsknsodkgbnsldkgn"></sm-copy>
+            </div>
        </div>
    </sm-popup>
    <template id="sender_template">
@ -755,31 +762,7 @@
                pagesData.params = params
            switch (pageId) {
                case 'address_details':
-                    console.log(params)
-                    if (params.address) {
-                        const address = getRef('check_address_input').value;
-                        getRef('check_address_input').value = params.address
-                        if (btc_api.validateAddress(params.address)) {
-                            render.transactions(params.address)
-                        } else {
-                            getRef('address_balance').parentElement.classList.add('hidden')
-                            getRef('transactions_list').previousElementSibling.classList.add('hidden');
-                            if (transactionsLazyLoader) {
-                                transactionsLazyLoader.clear()
-                                transactionsLazyLoader = null
-                            }
-                        }
-                    } else {
-                        getRef('check_address_button').disabled = true;
-                        getRef('address_balance').parentElement.classList.add('hidden')
-                        getRef('transactions_list').previousElementSibling.classList.add('hidden');
-
-                        getRef('check_address_input').value = ''
-                        if (transactionsLazyLoader) {
-                            transactionsLazyLoader.clear()
-                            transactionsLazyLoader = null
-                        }
-                    }
+                    render.addressDetails(params.address)
                    break;
                case 'send':
                    getExchangeRate().then(() => {
@ -1104,7 +1087,6 @@
                        icon = svg`<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"/></svg>`;
                    }
                } else {
-                    console.log(transactionDetails)
                    transactionReceiver = (type === 'out' ? `Sent to ${receiver}` : `Received from ${sender}`);
                    icon = svg`<svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><path d="M6,2l0.01,6L10,12l-3.99,4.01L6,22h12v-6l-4-4l4-3.99V2H6z M16,16.5V20H8v-3.5l4-4L16,16.5z"/></g></svg>`;
                }
@ -1116,6 +1098,7 @@
                        <div class="transaction__amount amount-shown" data-btc-amount="${amount}">${formatAmount(amount * globalExchangeRate[getRef('currency_selector').value])}</div>
                        <div class="transaction__receiver wrap-around">${transactionReceiver}</div>
                        <div class="transaction__id wrap-around">TXID: ${txid}</div>
+                        ${!block ? html`<p class="pending-badge">Confirmation pending: amount will be deducted after transaction is confirmed</p>` : ''}
                        </li>
                        `;
                // ${!block ? html`
@ -1156,6 +1139,31 @@
                } catch (err) {
                    notify(err, 'error');
                }
+            },
+            addressDetails(address) {
+                if (address) {
+                    getRef('check_address_input').value = address
+                    if (btc_api.validateAddress(address)) {
+                        render.transactions(address)
+                    } else {
+                        getRef('address_balance').parentElement.classList.add('hidden')
+                        getRef('transactions_list').previousElementSibling.classList.add('hidden');
+                        if (transactionsLazyLoader) {
+                            transactionsLazyLoader.clear()
+                            transactionsLazyLoader = null
+                        }
+                    }
+                } else {
+                    getRef('check_address_button').disabled = true;
+                    getRef('address_balance').parentElement.classList.add('hidden')
+                    getRef('transactions_list').previousElementSibling.classList.add('hidden');
+
+                    getRef('check_address_input').value = ''
+                    if (transactionsLazyLoader) {
+                        transactionsLazyLoader.clear()
+                        transactionsLazyLoader = null
+                    }
+                }
            }
        }
        const currencyIcons = {
@ -1390,7 +1398,11 @@

        getRef('check_address_button').addEventListener('click', evt => {
            const address = getRef('check_address_input').value;
-            location.hash = `#/address_details?address=${address}`;
+            if (pagesData.params.hasOwnProperty('address') && address === pagesData.params.address) {
+                render.addressDetails(address)
+            } else {
+                location.hash = `#/address_details?address=${address}`;
+            }
        })

        function getAddressDetails(address) {