Implement Native PayButton Generator

assets/css/paybutton-admin.css

@@ -59,6 +59,142 @@
     border: none;
 }
 
+/* ------------------------------
+   Button Generator Page Styles
+------------------------------ */
+.pb-generator-container {
+    display: flex;
+    gap: 2rem;
+  }
+
+.pb-generator-form {
+  flex: 1;
+  max-width: 400px;
+}
+
+.pb-generator-form label {
+  font-weight: bold;
+  display: block;
+  margin-bottom: 0.5rem;
+}
+
+.pb-generator-input {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.pb-generator-preview {
+  flex: 1;
+}
+
+.pb-generator-preview #pbGenPreview {
+  background-color: #fff;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  padding: 1rem;
+  min-height: 80px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 1rem;
+  color: #333;
+  transition: box-shadow 0.3s ease, border-color 0.3s ease;
+}
+
+.pb-generator-preview #pbGenPreview:hover {
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+  border-color: #0074C2;
+}
+
+#pbGenShortcode {
+  font-family: monospace;
+  font-size: 0.8rem;
+  line-height: 1.5;
+  color: #333;
+  background-color: #f9f9f9;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  padding: 1rem;
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
+  width: 100%;
+  resize: vertical;
+  word-break: break-all;
+}
+
+#pbGenToValidationResult{
+  margin-top: 0px;
+}
+
+/* Grouped Colors */
+.pb-generator-colors {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  margin-top: 1rem;
+}
+
+.pb-generator-colors .pb-generator-color {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+} 
+
+.pb-generator-widget {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-top: 1rem;
+}
+
+.pb-generator-widget input[type="checkbox"] {
+  margin-left: 0.7rem;
+}
+
+/* Simple custom tooltip styling */
+.pbTooltip {
+  position: absolute;
+  cursor: help;
+  margin-left: 0.3rem;
+}
+
+.pbTooltip::before {
+  padding: 5px 3px;
+}
+
+.pbTooltip::after {
+  content: '';
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+  pointer-events: none;
+  z-index: 999999;         /* ensure it stays above WP admin menu */
+  max-width: 300px;        
+  background: #0074C2;
+  color: #fff;
+  padding: 5px 2px;
+  border-radius: 3px;
+  white-space: normal;
+  overflow-wrap: break-word;
+  text-align: center;
+}
+
+.pbTooltip:hover::after {
+  content: attr(data-tooltip);
+  opacity: 1;
+  padding: 5px 10px;
+}
+
+.shortcode-note {
+  font-size: 0.9em;
+  color: #555;
+  margin-top: 0.5rem;
+  font-style: italic;
+}
 /* ------------------------------
    Paywall Settings page styles
 ------------------------------ */
@@ -85,4 +221,47 @@ table.widefat.fixed.striped td {
 ------------------------------ */
 .pb-paragraph-margin-top {
     margin-top: 1rem;
+}
+
+/* ------------------------------
+   Utility - Clipboard
+------------------------------ */
+.shortcode-container {
+  position: relative;
+  margin-bottom: 1rem;
+}
+
+.shortcode-container textarea {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+/* The overlay covers the textarea but is hidden by default */
+.copy-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(66, 123, 236, 0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1rem;
+  color: #f6f7f7;
+  cursor: pointer;
+  transition: opacity 0.3s ease;
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* Show the overlay when hovering over the container */
+.shortcode-container:hover .copy-overlay {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.copy-overlay .overlay-text {
+  text-align: center;
+  font-weight:bold;
 }

assets/js/addressValidator.bundle.js

@@ -749,7 +749,7 @@
 
     var cashaddrExports = requireCashaddr();
 
-    // src/addressValidator.js
+	window.cashaddrExports = cashaddrExports;
 
     document.addEventListener('DOMContentLoaded', () => {
       // Find the wallet address input field by its ID.
@@ -771,8 +771,8 @@
       addressInput.addEventListener('input', () => {
         const address = addressInput.value.trim();
         if (address === "") {
-          resultSpan.textContent = '❌ Invalid address';
-          resultSpan.style.color = 'red';
+          resultSpan.textContent = '';
+          resultSpan.style.color = '';
           if (saveButton) saveButton.disabled = true;
           return;
         }
@@ -793,4 +793,4 @@
       addressInput.dispatchEvent(new Event('input'));
     });
 
-})();
+})();