@rhinestone/deposit-modal 0.1.65 → 0.1.67

package/dist/styles.css

@@ -102,6 +102,7 @@
   background-color: var(--rs-background);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  position: relative;
 }
 
 /* =============================================================================
@@ -292,6 +293,7 @@
   flex-direction: column;
   min-height: 280px;
   overflow-y: auto;
+  overscroll-behavior: none;
 }
 
 .rs-modal-body::-webkit-scrollbar {
@@ -1188,7 +1190,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 40px 12px;
+  padding: 24px 12px 16px;
   gap: 6px;
 }
 
@@ -1214,6 +1216,25 @@
   border-radius: 6px;
 }
 
+.rs-empty-disconnect {
+  margin-top: 8px;
+  padding: 0;
+  font-size: 11px;
+  font-weight: 400;
+  color: var(--rs-muted-foreground);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition: color 0.15s;
+  font-family: inherit;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.rs-empty-disconnect:hover {
+  color: var(--rs-foreground);
+}
+
 /* =============================================================================
    Link Styles
    ============================================================================= */
@@ -1349,17 +1370,17 @@
   width: 100%;
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 6px;
 }
 
 .rs-connect-wallet-row {
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: 10px;
   width: 100%;
-  padding: 10px 12px;
+  padding: 12px 14px;
   border: 1px solid var(--rs-border-surface);
-  border-radius: var(--rs-radius-md);
+  border-radius: var(--rs-radius-lg);
   background: var(--rs-background-secondary);
   color: inherit;
   cursor: pointer;
@@ -1387,9 +1408,9 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 36px;
-  height: 36px;
-  min-width: 36px;
+  width: 32px;
+  height: 32px;
+  min-width: 32px;
   border-radius: 50%;
   background: var(--rs-surface);
   color: var(--rs-muted);
@@ -1399,8 +1420,8 @@
 }
 
 .rs-connect-wallet-icon svg {
-  width: 18px;
-  height: 18px;
+  width: 20px;
+  height: 20px;
 }
 
 .rs-connect-wallet-icon--selected {
@@ -1447,14 +1468,14 @@
 }
 
 .rs-connect-wallet-label {
-  font-size: 12px;
-  color: var(--rs-muted);
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--rs-foreground);
 }
 
 .rs-connect-wallet-address {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--rs-foreground);
+  font-size: 12px;
+  color: var(--rs-muted);
 }
 
 .rs-connect-wallet-manage {
@@ -1728,11 +1749,11 @@
 }
 
 .rs-modal-header-nav-right {
-  width: 28px;
   display: flex;
   align-items: center;
   justify-content: flex-end;
   flex-shrink: 0;
+  gap: 2px;
 }
 
 .rs-modal-header-title {
@@ -2514,9 +2535,10 @@
 
 .rs-deposit-address-dropdown-label {
   font-size: 11px;
-  color: var(--rs-muted-foreground);
+  color: var(--rs-foreground);
   margin-bottom: 4px;
   font-weight: 500;
+  opacity: 0.65;
 }
 
 .rs-deposit-address-dropdown-trigger {
@@ -2575,6 +2597,7 @@
   gap: 2px;
   max-height: 200px;
   overflow-y: auto;
+  overscroll-behavior: none;
   animation: rs-dropdown-in 0.12s ease-out;
 }
 
@@ -2609,28 +2632,30 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 16px;
+  padding: 4px;
   background: var(--rs-surface);
-  border-radius: var(--rs-radius-lg);
+  border-radius: var(--rs-radius-md);
   margin: 4px 0;
 }
 
+.rs-deposit-address-qr canvas,
 .rs-deposit-address-qr svg {
-  border-radius: var(--rs-radius-sm);
+  display: block;
+  border-radius: var(--rs-radius-md);
 }
 
 .rs-deposit-address-info {
   display: flex;
   flex-direction: column;
-  align-items: center;
-  gap: 8px;
+  gap: 0;
   width: 100%;
 }
 
 .rs-deposit-address-label {
   font-size: 13px;
-  font-weight: 500;
-  color: var(--rs-muted-foreground);
+  font-weight: 600;
+  color: var(--rs-muted);
+  margin-bottom: 8px;
 }
 
 .rs-deposit-address-value {
@@ -2640,31 +2665,35 @@
     monospace;
   color: var(--rs-foreground);
   word-break: break-all;
-  text-align: center;
-  padding: 10px 12px;
-  background: var(--rs-surface);
-  border: 1px solid var(--rs-border-surface);
-  border-radius: var(--rs-radius-sm);
+  text-align: left;
+  padding: 8px 12px;
+  background: transparent;
+  border: 1px solid var(--rs-border);
+  border-radius: var(--rs-radius-sm) var(--rs-radius-sm) 0 0;
+  border-bottom: none;
   width: 100%;
 }
 
 .rs-deposit-address-copy {
   display: flex;
   align-items: center;
+  justify-content: center;
   gap: 6px;
+  width: 100%;
   padding: 8px 16px;
-  border: none;
-  background: transparent;
-  color: var(--rs-muted-foreground);
+  border: 1px solid var(--rs-border);
+  border-radius: 0 0 var(--rs-radius-sm) var(--rs-radius-sm);
+  background: var(--rs-surface);
+  color: var(--rs-foreground);
   font-size: 13px;
   font-weight: 500;
   cursor: pointer;
-  transition: color 0.15s;
+  transition: background 0.15s;
   font-family: inherit;
 }
 
 .rs-deposit-address-copy:hover {
-  color: var(--rs-foreground);
+  background: var(--rs-surface-hover);
 }
 
 .rs-deposit-address-balance {
@@ -2743,6 +2772,209 @@
   color: var(--rs-foreground);
 }
 
+/* =============================================================================
+   Deposit Notifications (QR flow toast cards)
+   ============================================================================= */
+
+.rs-step--with-notifications {
+  position: relative;
+}
+
+.rs-deposit-notifications {
+  position: absolute;
+  bottom: 12px;
+  left: 12px;
+  right: 12px;
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  pointer-events: none;
+}
+
+.rs-deposit-notification {
+  pointer-events: auto;
+  background: var(--rs-background);
+  border: 1px solid var(--rs-border);
+  border-radius: var(--rs-radius-lg);
+  overflow: hidden;
+  box-shadow:
+    0 -4px 20px rgba(0, 0, 0, 0.10),
+    0 -1px 6px rgba(0, 0, 0, 0.06);
+  animation: rs-notification-slide-up 0.3s ease-out;
+}
+
+@keyframes rs-notification-slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(16px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.rs-deposit-notification-header {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 14px 14px 0;
+}
+
+.rs-deposit-notification-icon {
+  flex-shrink: 0;
+  padding-top: 1px;
+}
+
+.rs-deposit-notification-badge {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.rs-deposit-notification-badge svg {
+  width: 14px;
+  height: 14px;
+}
+
+.rs-deposit-notification-badge .rs-spinner {
+  width: 16px;
+  height: 16px;
+}
+
+.rs-deposit-notification-badge--complete {
+  background-color: var(--rs-success-tint);
+  color: var(--rs-success);
+}
+
+.rs-deposit-notification-badge--failed {
+  background-color: var(--rs-error-tint);
+  color: var(--rs-error);
+}
+
+.rs-deposit-notification-badge--processing {
+  background-color: var(--rs-primary-tint);
+  color: var(--rs-primary);
+}
+
+.rs-deposit-notification-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.rs-deposit-notification-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--rs-foreground);
+  line-height: 1.3;
+}
+
+.rs-deposit-notification-subtitle {
+  font-size: 12px;
+  color: var(--rs-muted-foreground);
+  line-height: 1.4;
+  margin-top: 2px;
+}
+
+.rs-deposit-notification-close {
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  color: var(--rs-muted-foreground);
+  cursor: pointer;
+  border-radius: 4px;
+  padding: 0;
+  transition: color 0.15s, background 0.15s;
+}
+
+.rs-deposit-notification-close:hover {
+  color: var(--rs-foreground);
+  background: var(--rs-surface);
+}
+
+.rs-deposit-notification-close svg {
+  width: 16px;
+  height: 16px;
+}
+
+.rs-deposit-notification-details {
+  margin: 10px 14px 0;
+  padding: 8px 10px;
+  background: var(--rs-surface);
+  border-radius: var(--rs-radius-sm);
+}
+
+.rs-deposit-notification-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 5px 0;
+}
+
+.rs-deposit-notification-row + .rs-deposit-notification-row {
+  border-top: 1px solid var(--rs-border-surface);
+}
+
+.rs-deposit-notification-label {
+  font-size: 12px;
+  color: var(--rs-muted-foreground);
+}
+
+.rs-deposit-notification-value {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--rs-muted);
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
+}
+
+.rs-deposit-notification-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  color: var(--rs-muted);
+  text-decoration: none;
+  transition: color 0.15s;
+}
+
+.rs-deposit-notification-link:hover {
+  color: var(--rs-foreground);
+}
+
+.rs-deposit-notification-link-icon {
+  width: 10px;
+  height: 10px;
+}
+
+.rs-deposit-notification-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: 10px 0;
+  border: none;
+  border-top: 1px solid var(--rs-border-surface);
+  background: transparent;
+  color: var(--rs-muted-foreground);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: color 0.15s;
+  margin-top: 10px;
+}
+
+.rs-deposit-notification-toggle:hover {
+  color: var(--rs-foreground);
+}
+
 /* =============================================================================
    Step Indicator (numbered circles with dotted line)
    ============================================================================= */
@@ -2963,3 +3195,433 @@
   color: var(--rs-muted-foreground);
   margin-top: 8px;
 }
+
+/* =============================================================================
+   History Button (Header)
+   ============================================================================= */
+
+.rs-modal-header-history {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  margin-right: 2px;
+  border: none;
+  border-radius: var(--rs-radius);
+  background: transparent;
+  color: var(--rs-muted-foreground);
+  cursor: pointer;
+  transition: color 0.15s, background-color 0.15s;
+}
+
+.rs-modal-header-history:hover:not(:disabled) {
+  color: var(--rs-foreground);
+  background: var(--rs-surface);
+}
+
+.rs-modal-header-history:active:not(:disabled) {
+  background: var(--rs-surface-hover);
+  transform: scale(0.96);
+}
+
+.rs-modal-header-history:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+.rs-modal-header-history svg {
+  width: 15px;
+  height: 15px;
+}
+
+/* =============================================================================
+   Deposit History Panel
+   ============================================================================= */
+
+.rs-history-panel {
+  position: absolute;
+  inset: 0;
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  background: var(--rs-background);
+  border-radius: inherit;
+  animation: rs-history-slide-in 0.2s cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+@keyframes rs-history-slide-in {
+  from {
+    opacity: 0;
+    transform: translateX(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+/* Header */
+
+.rs-history-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--rs-border-surface);
+  min-height: var(--rs-height-titlebar);
+}
+
+.rs-history-back {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: none;
+  border-radius: var(--rs-radius);
+  background: transparent;
+  color: var(--rs-muted-foreground);
+  cursor: pointer;
+  transition: color 0.15s, background-color 0.15s;
+  flex-shrink: 0;
+}
+
+.rs-history-back:hover {
+  color: var(--rs-foreground);
+  background: var(--rs-surface);
+}
+
+.rs-history-back svg {
+  width: 16px;
+  height: 16px;
+}
+
+.rs-history-header-title {
+  flex: 1;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--rs-foreground);
+  letter-spacing: -0.01em;
+}
+
+.rs-history-header-spacer {
+  width: 28px;
+  flex-shrink: 0;
+}
+
+/* Scrollable body */
+
+.rs-history-body {
+  flex: 1;
+  overflow-y: auto;
+  min-height: 0;
+}
+
+.rs-history-body::-webkit-scrollbar {
+  width: 4px;
+}
+
+.rs-history-body::-webkit-scrollbar-thumb {
+  background: var(--rs-border);
+  border-radius: 2px;
+}
+
+/* State screens (loading, empty, error) */
+
+.rs-history-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  padding: 56px 24px;
+  text-align: center;
+}
+
+.rs-history-spinner {
+  width: 24px;
+  height: 24px;
+  color: var(--rs-muted-foreground);
+  animation: rs-spinner 1s linear infinite;
+}
+
+.rs-history-spinner svg {
+  width: 100%;
+  height: 100%;
+}
+
+.rs-history-state-icon {
+  width: 32px;
+  height: 32px;
+  color: var(--rs-muted-foreground);
+}
+
+.rs-history-state-icon--error {
+  color: var(--rs-error);
+}
+
+.rs-history-state-icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.rs-history-state-text {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--rs-muted);
+}
+
+.rs-history-state-hint {
+  font-size: 12px;
+  color: var(--rs-muted-foreground);
+  margin-top: -4px;
+}
+
+/* List */
+
+.rs-history-list {
+  display: flex;
+  flex-direction: column;
+}
+
+/* Row */
+
+.rs-history-row {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--rs-border-surface);
+  transition: background-color 0.12s;
+}
+
+.rs-history-row:last-child {
+  border-bottom: none;
+}
+
+.rs-history-row:hover {
+  background: var(--rs-background-secondary);
+}
+
+/* Row primary: route + status */
+
+.rs-history-row-primary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+/* Chain route with icons */
+
+.rs-history-route {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+
+.rs-history-chain {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  min-width: 0;
+}
+
+.rs-history-chain-icon {
+  width: 18px;
+  height: 18px;
+  border-radius: 4px;
+  flex-shrink: 0;
+  object-fit: cover;
+}
+
+.rs-history-chain-name {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--rs-foreground);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.rs-history-route-arrow {
+  width: 12px;
+  height: 12px;
+  color: var(--rs-muted-foreground);
+  flex-shrink: 0;
+}
+
+/* Status with dot indicator */
+
+.rs-history-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.01em;
+  line-height: 1;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.rs-history-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.rs-history-dot--pending {
+  background: var(--color-amber8);
+}
+
+.rs-history-dot--processing {
+  background: var(--color-blue9);
+  animation: rs-history-dot-pulse 1.5s ease-in-out infinite;
+}
+
+.rs-history-dot--completed {
+  background: var(--color-green9);
+}
+
+.rs-history-dot--failed {
+  background: var(--color-red9);
+}
+
+@keyframes rs-history-dot-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+
+.rs-history-status--completed {
+  color: var(--color-green10);
+}
+
+.rs-history-status--failed {
+  color: var(--color-red10);
+}
+
+.rs-history-status--processing {
+  color: var(--color-blue11);
+}
+
+.rs-history-status--pending {
+  color: var(--color-amber8);
+}
+
+/* Row secondary: amount + time */
+
+.rs-history-row-secondary {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.rs-history-amount {
+  font-size: 12px;
+  color: var(--rs-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+
+.rs-history-token {
+  font-weight: 500;
+  color: var(--rs-foreground);
+}
+
+.rs-history-token-target {
+  color: var(--rs-muted-foreground);
+}
+
+.rs-history-no-amount {
+  color: var(--rs-muted-foreground);
+}
+
+.rs-history-time {
+  font-size: 11px;
+  color: var(--rs-muted-foreground);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+/* Tx hash links */
+
+.rs-history-row-links {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 1px;
+}
+
+.rs-history-tx-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  padding: 2px 6px;
+  border-radius: 4px;
+  background: var(--rs-surface);
+  color: var(--rs-muted-foreground);
+  text-decoration: none;
+  transition: color 0.12s, background-color 0.12s;
+  cursor: pointer;
+}
+
+.rs-history-tx-link:hover {
+  color: var(--rs-foreground);
+  background: var(--rs-surface-hover);
+}
+
+.rs-history-tx-hash {
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  font-size: 10px;
+  letter-spacing: 0.01em;
+}
+
+.rs-history-ext-icon {
+  width: 10px;
+  height: 10px;
+  flex-shrink: 0;
+  opacity: 0.5;
+}
+
+.rs-history-tx-link:hover .rs-history-ext-icon {
+  opacity: 1;
+}
+
+/* Load more */
+
+.rs-history-load-more {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 4px 16px 12px;
+  padding: 8px 16px;
+  border: 1px solid var(--rs-border-surface);
+  border-radius: var(--rs-radius);
+  background: transparent;
+  color: var(--rs-muted);
+  font-size: 12px;
+  font-weight: 500;
+  font-family: inherit;
+  cursor: pointer;
+  transition: color 0.15s, background-color 0.15s, border-color 0.15s;
+}
+
+.rs-history-load-more:hover:not(:disabled) {
+  color: var(--rs-foreground);
+  background: var(--rs-background-secondary);
+  border-color: var(--rs-border);
+}
+
+.rs-history-load-more:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}