Add shareable address link functionality

index.html

@@ -383,21 +383,32 @@
           >
             <div class="balance-header">
               <h3><i class="fas fa-wallet"></i> Address Balance</h3>
-              <div class="toggle-container">
+              <div class="balance-actions">
                 <button
-                  class="toggle-btn active"
+                  id="shareAddressBtn"
-                  data-currency="TON"
+                  class="btn-icon share-btn"
-                  onclick="toggleTransactionBalance('TON')"
+                  onclick="shareAddress()"
+                  title="Share Address Link"
+                  style="display: none"
                 >
-                  TON
+                  <i class="fas fa-share-alt"></i>
-                </button>
-                <button
-                  class="toggle-btn"
-                  data-currency="USDT"
-                  onclick="toggleTransactionBalance('USDT')"
-                >
-                  USDT
                 </button>
+                <div class="toggle-container">
+                  <button
+                    class="toggle-btn active"
+                    data-currency="TON"
+                    onclick="toggleTransactionBalance('TON')"
+                  >
+                    TON
+                  </button>
+                  <button
+                    class="toggle-btn"
+                    data-currency="USDT"
+                    onclick="toggleTransactionBalance('USDT')"
+                  >
+                    USDT
+                  </button>
+                </div>
               </div>
             </div>
             <div class="balance-display">
@@ -3133,7 +3144,95 @@
             }
           });
         }
+
+        handleSharedLinks();
       });
+
+      // Shareable link functionality
+      function shareAddress() {
+        const currentAddress =
+          document.getElementById("displayedAddress").textContent;
+        if (!currentAddress) {
+          showNotification("No address to share", "error");
+          return;
+        }
+
+        const shareUrl = `${window.location.origin}${
+          window.location.pathname
+        }#transactions?address=${encodeURIComponent(currentAddress)}`;
+
+        if (navigator.clipboard && navigator.clipboard.writeText) {
+          navigator.clipboard
+            .writeText(shareUrl)
+            .then(() => {
+              showNotification(
+                "Shareable link copied to clipboard!",
+                "success"
+              );
+            })
+            .catch(() => {
+              showShareFallback(shareUrl);
+            });
+        } else {
+          showShareFallback(shareUrl);
+        }
+      }
+
+      function showShareFallback(url) {
+        const textArea = document.createElement("textarea");
+        textArea.value = url;
+        document.body.appendChild(textArea);
+        textArea.select();
+        try {
+          document.execCommand("copy");
+          showNotification("Shareable link copied to clipboard!", "success");
+        } catch (err) {
+          showNotification("Please copy this link: " + url, "info");
+        }
+        document.body.removeChild(textArea);
+      }
+
+      function handleSharedLinks() {
+        if (window.location.hash) {
+          const hash = window.location.hash.substring(1);
+
+          if (hash.startsWith("transactions")) {
+            const params = new URLSearchParams(hash.split("?")[1] || "");
+            const address = params.get("address");
+
+            // Show the transactions page first
+            showPage("transactions");
+
+            if (address) {
+              // Pre-fill the address and load transactions
+              document.getElementById("transactionInput").value = address;
+              showNotification("Loading shared address data...", "info");
+              setTimeout(() => {
+                loadTransactions(address);
+              }, 100);
+            }
+
+            // Clear the hash from URL after processing
+            history.replaceState(null, null, window.location.pathname);
+          }
+        }
+      }
+
+      const originalLoadTransactions = loadTransactions;
+      window.loadTransactions = async function (inputValue = null) {
+        await originalLoadTransactions(inputValue);
+
+        // Show the share button when balance is displayed
+        const balanceSection = document.getElementById("transactionBalance");
+        const shareBtn = document.getElementById("shareAddressBtn");
+        if (
+          balanceSection &&
+          balanceSection.style.display !== "none" &&
+          shareBtn
+        ) {
+          shareBtn.style.display = "inline-flex";
+        }
+      };
     </script>
   </body>
 </html>

style.css

@@ -2405,3 +2405,109 @@ body {
 .tx-hash-link:hover::after {
   opacity: 1;
 }
+
+/* Share Button Styling */
+.balance-actions {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.share-btn {
+  background: var(--bg-color);
+  border: 1px solid var(--border-color);
+  color: var(--text-secondary);
+  border-radius: var(--border-radius-sm);
+  padding: 0.5rem;
+  transition: all 0.2s ease;
+  cursor: pointer;
+}
+
+.share-btn:hover {
+  background: var(--primary-color);
+  color: white;
+  border-color: var(--primary-color);
+  transform: translateY(-1px);
+}
+
+@media (max-width: 768px) {
+  .balance-actions {
+    flex-direction: row;
+    align-items: center;
+    gap: 0.75rem;
+    justify-content: flex-end;
+    flex-wrap: nowrap;
+  }
+
+  .share-btn {
+    padding: 0.5rem 0.75rem;
+    font-size: 0.8rem;
+    border-radius: var(--border-radius-sm);
+    min-width: auto;
+    min-height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.4rem;
+    background: var(--primary-color);
+    color: white;
+    border-color: var(--primary-color);
+    font-weight: 500;
+  }
+
+  .share-btn:hover {
+    background: var(--primary-color-dark);
+  }
+
+  .toggle-container {
+    flex-shrink: 0;
+  }
+
+  .toggle-btn {
+    padding: 0.4rem 0.8rem;
+    font-size: 0.8rem;
+    min-height: 36px;
+  }
+
+  .balance-header {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    flex-wrap: nowrap;
+  }
+
+  .balance-header h3 {
+    margin-bottom: 0;
+    flex-shrink: 0;
+    font-size: 1rem;
+  }
+
+  .balance-actions {
+    flex-shrink: 0;
+    gap: 0.75rem;
+  }
+
+  /* balance section on mobile */
+  .balance-info {
+    padding: 1rem;
+  }
+
+  .balance-display {
+    text-align: center;
+    margin: 1rem 0;
+  }
+
+  .address-display {
+    margin-top: 1rem;
+    padding: 0.75rem;
+    background: var(--bg-color);
+    border-radius: var(--border-radius-sm);
+  }
+
+  .address-value {
+    word-break: break-all;
+    font-size: 0.85rem;
+    line-height: 1.4;
+  }
+}