@abstraxn/signer-react 2.1.4 → 2.2.0

package/dist/src/components/WalletModal/components/ManageWalletModal.css

@@ -26,6 +26,8 @@
   align-items: center;
   gap: 12px;
   text-align: left;
+  /* Calmer, SDK-style hover/press */
+  transition: color 0.18s ease-out, transform 0.12s ease-out;
 }
 
 .wallet-modal-theme-dark .wallet-modal-manage-list-item {
@@ -39,11 +41,16 @@
 }
 
 .wallet-modal-theme-dark .wallet-modal-manage-list-item:hover {
-  background: rgba(255, 255, 255, 0.04);
+  color: #e5e7eb;
 }
 
 .wallet-modal-theme-light .wallet-modal-manage-list-item:hover {
-  background: rgba(17, 24, 39, 0.04);
+  color: #374151;
+}
+
+.wallet-modal-manage-list-item:active {
+  /* Subtle press instead of shrink/bounce */
+  transform: translateY(1px);
 }
 
 .wallet-modal-manage-list-icon {
@@ -56,17 +63,109 @@
   opacity: 0.85;
 }
 
+.wallet-modal-provider-icon {
+  color: currentColor;
+}
+
+.wallet-modal-provider-icon-google {
+  color: inherit;
+}
+
+.wallet-modal-provider-icon-discord {
+  color: #5865f2;
+}
+
+.wallet-modal-provider-icon-x {
+  color: inherit;
+}
+
+.wallet-modal-theme-dark .wallet-modal-provider-icon-x {
+  color: #ffffff;
+}
+
+.wallet-modal-theme-light .wallet-modal-provider-icon-x {
+  color: #111111;
+}
+
+.wallet-modal-theme-dark .wallet-modal-provider-icon-email,
+.wallet-modal-theme-dark .wallet-modal-provider-icon-passkey {
+  color: rgba(255, 255, 255, 0.92);
+}
+
+.wallet-modal-theme-light .wallet-modal-provider-icon-email,
+.wallet-modal-theme-light .wallet-modal-provider-icon-passkey {
+  color: #111827;
+}
+
 .wallet-modal-manage-list-label {
   flex: 1;
   font-size: 14px;
   font-weight: 500;
 }
 
+.wallet-modal-mfa-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 10px;
+  margin-right: 4px;
+  border-radius: 9999px;
+  font-size: 12px;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+.wallet-modal-mfa-badge-enabled {
+  background-color: #dcfce7;
+  color: #166534;
+}
+
+.wallet-modal-theme-dark .wallet-modal-mfa-badge-enabled {
+  background-color: rgba(34, 197, 94, 0.2);
+  color: #86efac;
+}
+
+.wallet-modal-mfa-badge-disabled {
+  background-color: #fee2e2;
+  color: #991b1b;
+}
+
+.wallet-modal-theme-dark .wallet-modal-mfa-badge-disabled {
+  background-color: rgba(239, 68, 68, 0.2);
+  color: #fca5a5;
+}
+
 .wallet-modal-manage-list-arrow {
   flex-shrink: 0;
   opacity: 0.5;
 }
 
+.wallet-modal-mfa-disable-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  margin-right: 8px;
+  border-radius: 999px;
+  color: #ef4444;
+  opacity: 0.95;
+  cursor: pointer;
+  transition: transform 0.15s ease, opacity 0.15s ease, background-color 0.15s ease;
+}
+
+.wallet-modal-mfa-disable-trigger:hover {
+  opacity: 1;
+  transform: scale(1.05);
+}
+
+.wallet-modal-theme-dark .wallet-modal-mfa-disable-trigger:hover {
+  background-color: rgba(239, 68, 68, 0.16);
+}
+
+.wallet-modal-theme-light .wallet-modal-mfa-disable-trigger:hover {
+  background-color: rgba(239, 68, 68, 0.12);
+}
+
 .wallet-modal-manage-toast {
   position: absolute;
   left: 50%;
@@ -244,3 +343,1345 @@
   flex-shrink: 0;
   opacity: 0.5;
 }
+
+/* Linked Profiles sub-view */
+.wallet-modal-linked-profiles-list {
+  display: flex;
+  flex-direction: column;
+  padding: 0 20px;
+  gap: 0;
+}
+
+.wallet-modal-linked-profiles-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px 0;
+  border-bottom: 1px solid;
+  min-height: 52px;
+}
+
+.wallet-modal-theme-dark .wallet-modal-linked-profiles-row {
+  color: #ffffff;
+  border-bottom-color: rgba(255, 255, 255, 0.08);
+}
+
+.wallet-modal-theme-light .wallet-modal-linked-profiles-row {
+  color: #111827;
+  border-bottom-color: rgba(17, 24, 39, 0.08);
+}
+
+.wallet-modal-linked-profiles-row:last-child {
+  border-bottom: none;
+}
+
+.wallet-modal-linked-profiles-action {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.wallet-modal-linked-connect,
+.wallet-modal-linked-disconnect {
+  padding: 6px 12px;
+  border-radius: 8px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 500;
+  /* Consistent, minimal interaction motion */
+  transition: color 0.18s ease-out, transform 0.12s ease-out;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+}
+
+.wallet-modal-linked-disconnect {
+  padding: 8px;
+}
+
+.wallet-modal-linked-connect:disabled,
+.wallet-modal-linked-disconnect:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.wallet-modal-theme-dark .wallet-modal-linked-connect {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.wallet-modal-theme-dark .wallet-modal-linked-connect:hover:not(:disabled) {
+  color: #22c55e;
+}
+
+.wallet-modal-theme-dark .wallet-modal-linked-connect:active:not(:disabled) {
+  transform: translateY(1px);
+}
+
+.wallet-modal-theme-light .wallet-modal-linked-connect {
+  color: #374151;
+}
+
+.wallet-modal-theme-light .wallet-modal-linked-connect:hover:not(:disabled) {
+  color: #16a34a;
+}
+
+.wallet-modal-theme-light .wallet-modal-linked-connect:active:not(:disabled) {
+  transform: translateY(1px);
+}
+
+.wallet-modal-theme-dark .wallet-modal-linked-disconnect {
+  color: #9ca3af;
+}
+
+.wallet-modal-theme-dark .wallet-modal-linked-disconnect:hover:not(:disabled) {
+  color: #ef4444;
+}
+
+.wallet-modal-theme-dark .wallet-modal-linked-disconnect:active:not(:disabled) {
+  transform: translateY(1px);
+}
+
+.wallet-modal-theme-light .wallet-modal-linked-disconnect {
+  color: #6b7280;
+}
+
+.wallet-modal-theme-light .wallet-modal-linked-disconnect:hover:not(:disabled) {
+  color: #dc2626;
+}
+
+.wallet-modal-theme-light .wallet-modal-linked-disconnect:active:not(:disabled) {
+  transform: translateY(1px);
+}
+
+.wallet-modal-email-link-flow {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  padding: 16px 20px 20px;
+  min-width: 0;
+}
+
+.wallet-modal-email-link-form,
+.wallet-modal-email-link-otp {
+  width: 100%;
+  max-width: 360px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.wallet-modal-email-link-icon {
+  width: 52px;
+  height: 52px;
+  border-radius: 999px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 8px;
+}
+
+.wallet-modal-theme-dark .wallet-modal-email-link-icon {
+  background: rgba(148, 163, 184, 0.16);
+  color: #e5e7eb;
+}
+
+.wallet-modal-theme-light .wallet-modal-email-link-icon {
+  background: rgba(129, 140, 248, 0.16);
+  color: #4b5563;
+}
+
+.wallet-modal-email-link-title {
+  font-size: 18px;
+  font-weight: 600;
+  text-align: center;
+  margin: 4px 0;
+}
+
+.wallet-modal-theme-dark .wallet-modal-email-link-title {
+  color: #ffffff;
+}
+
+.wallet-modal-theme-light .wallet-modal-email-link-title {
+  color: #111827;
+}
+
+.wallet-modal-email-link-subtitle {
+  font-size: 13px;
+  text-align: center;
+  margin: 0 0 12px;
+}
+
+.wallet-modal-theme-dark .wallet-modal-email-link-subtitle {
+  color: #9ca3af;
+}
+
+.wallet-modal-theme-light .wallet-modal-email-link-subtitle {
+  color: #6b7280;
+}
+
+.wallet-modal-email-link-label {
+  font-size: 13px;
+  font-weight: 500;
+  margin-bottom: 4px;
+}
+
+.wallet-modal-theme-dark .wallet-modal-email-link-label {
+  color: #e5e7eb;
+}
+
+.wallet-modal-theme-light .wallet-modal-email-link-label {
+  color: #374151;
+}
+
+.wallet-modal-email-link-input {
+  width: 100%;
+  border-radius: 10px;
+  border: 1.5px solid;
+  padding: 10px 12px;
+  font-size: 14px;
+  outline: none;
+  background: transparent;
+  box-sizing: border-box;
+}
+
+.wallet-modal-theme-dark .wallet-modal-email-link-input {
+  border-color: #4b5563;
+  background: #111827;
+  color: #f9fafb;
+}
+
+.wallet-modal-theme-light .wallet-modal-email-link-input {
+  border-color: #e5e7eb;
+  background: #ffffff;
+  color: #111827;
+}
+
+.wallet-modal-email-link-input:focus {
+  border-color: var(--abstraxn-primary, #3b82f6);
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
+}
+
+.wallet-modal-email-link-error {
+  margin: 4px 0 0;
+  font-size: 12px;
+  color: #ef4444;
+  text-align: left;
+}
+
+.wallet-modal-email-link-button {
+  margin-top: 8px;
+  width: 100%;
+  padding: 12px 16px;
+  border-radius: 999px;
+  border: none;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.18s ease-out;
+  background: var(--abstraxn-primary);
+  color: var(--abstraxn-primary-text);
+}
+
+.wallet-modal-email-link-button:hover:not(:disabled) {
+  transform: translateY(-1px);
+  filter: brightness(1.02);
+}
+
+.wallet-modal-email-link-button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.wallet-modal-email-link-otp {
+  position: relative;
+}
+
+.wallet-modal-email-link-otp-back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  transition: background 0.15s ease-out, transform 0.1s ease-out;
+}
+
+.wallet-modal-theme-dark .wallet-modal-email-link-otp-back {
+  color: #9ca3af;
+}
+
+.wallet-modal-theme-light .wallet-modal-email-link-otp-back {
+  color: #6b7280;
+}
+
+.wallet-modal-email-link-otp-back:hover:not(:disabled) {
+  transform: translateY(-1px);
+}
+
+.wallet-modal-email-link-email {
+  font-size: 14px;
+  font-weight: 600;
+  text-align: center;
+  margin: 0 0 16px;
+}
+
+.wallet-modal-theme-dark .wallet-modal-email-link-email {
+  color: #ffffff;
+}
+
+.wallet-modal-theme-light .wallet-modal-email-link-email {
+  color: #111827;
+}
+
+.wallet-modal-email-link-resend {
+  margin-top: 12px;
+  font-size: 12px;
+  text-align: center;
+}
+
+.wallet-modal-theme-dark .wallet-modal-email-link-resend {
+  color: #9ca3af;
+}
+
+.wallet-modal-theme-light .wallet-modal-email-link-resend {
+  color: #6b7280;
+}
+
+.wallet-modal-email-link-resend-cooldown {
+  font-weight: 500;
+}
+
+.wallet-modal-email-link-resend-button {
+  border: none;
+  background: transparent;
+  padding: 0;
+  margin: 0;
+  font-size: 12px;
+  font-weight: 500;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.wallet-modal-theme-dark .wallet-modal-email-link-resend-button {
+  color: #e5e7eb;
+}
+
+.wallet-modal-theme-light .wallet-modal-email-link-resend-button {
+  color: #4b21a8;
+}
+
+.wallet-modal-linked-profiles-loading,
+.wallet-modal-linked-profiles-error,
+.wallet-modal-linked-profiles-empty {
+  padding: 20px 0;
+  font-size: 14px;
+  text-align: center;
+}
+
+.wallet-modal-theme-dark .wallet-modal-linked-profiles-loading,
+.wallet-modal-theme-dark .wallet-modal-linked-profiles-empty {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.wallet-modal-theme-light .wallet-modal-linked-profiles-loading,
+.wallet-modal-theme-light .wallet-modal-linked-profiles-empty {
+  color: #6b7280;
+}
+
+.wallet-modal-theme-dark .wallet-modal-linked-profiles-error {
+  color: #f87171;
+}
+
+.wallet-modal-theme-light .wallet-modal-linked-profiles-error {
+  color: #dc2626;
+}
+
+/* Second-layer overlay (separate modals on top of manage modal) */
+.wallet-modal-overlay-layer2 {
+  z-index: 110000 !important;
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  background: rgba(0, 0, 0, 0.4);
+  border-radius: 0;
+  transform: none !important;
+  -webkit-transform: none !important;
+}
+
+.wallet-modal-overlay-layer2 .wallet-modal-content {
+  position: relative;
+  z-index: 110001;
+  /* Reuse core modal motion for nested dialogs */
+  animation: slideUp 0.18s ease-out;
+}
+
+/* Unlink confirmation modal - standalone */
+.wallet-modal-unlink-confirm-modal {
+  position: relative;
+  max-width: 360px;
+  width: 100%;
+  padding: 24px 20px 20px;
+  padding-top: 48px;
+  text-align: center;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+}
+
+.wallet-modal-unlink-confirm-close {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  padding: 6px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  border-radius: 8px;
+  color: inherit;
+  opacity: 0.7;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: opacity 0.15s ease;
+}
+
+.wallet-modal-unlink-confirm-close:hover {
+  opacity: 1;
+}
+
+.wallet-modal-theme-dark .wallet-modal-unlink-confirm-close {
+  color: #e5e7eb;
+}
+
+.wallet-modal-theme-light .wallet-modal-unlink-confirm-close {
+  color: #374151;
+}
+
+/* Unlink confirmation content (shared with inline, keep for modal body) */
+.wallet-modal-unlink-confirm {
+  max-width: 400px;
+  padding: 24px 20px 20px;
+  text-align: center;
+}
+
+.wallet-modal-unlink-confirm-icon {
+  width: 48px;
+  height: 48px;
+  margin: 0 auto 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #ef4444;
+}
+
+.wallet-modal-unlink-confirm-title {
+  font-size: 18px;
+  font-weight: 600;
+  margin: 0 0 6px;
+}
+
+.wallet-modal-theme-dark .wallet-modal-unlink-confirm-title {
+  color: #ffffff;
+}
+
+.wallet-modal-theme-light .wallet-modal-unlink-confirm-title {
+  color: #111827;
+}
+
+.wallet-modal-unlink-confirm-subtitle {
+  font-size: 14px;
+  margin: 0 0 20px;
+  opacity: 0.8;
+}
+
+.wallet-modal-theme-dark .wallet-modal-unlink-confirm-subtitle {
+  color: #9ca3af;
+}
+
+.wallet-modal-theme-light .wallet-modal-unlink-confirm-subtitle {
+  color: #6b7280;
+}
+
+.wallet-modal-unlink-confirm-details {
+  padding: 12px 16px;
+  border-radius: 10px;
+  margin-bottom: 20px;
+  text-align: left;
+  font-size: 13px;
+}
+
+.wallet-modal-theme-dark .wallet-modal-unlink-confirm-details {
+  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  color: #e5e7eb;
+}
+
+.wallet-modal-theme-light .wallet-modal-unlink-confirm-details {
+  background: rgba(17, 24, 39, 0.04);
+  border: 1px solid rgba(17, 24, 39, 0.08);
+  color: #374151;
+}
+
+.wallet-modal-unlink-confirm-details-line {
+  margin: 0;
+  line-height: 1.5;
+}
+
+.wallet-modal-unlink-confirm-btn {
+  width: 100%;
+  padding: 12px 24px;
+  border-radius: 10px;
+  border: none;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  background: #ef4444;
+  color: #ffffff;
+  transition: background 0.2s, transform 0.1s;
+}
+
+.wallet-modal-unlink-confirm-btn:hover:not(:disabled) {
+  background: #dc2626;
+}
+
+.wallet-modal-unlink-confirm-btn:active:not(:disabled) {
+  transform: scale(0.98);
+}
+
+.wallet-modal-unlink-confirm-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.wallet-modal-unlink-confirm-footer {
+  margin-top: 20px;
+  font-size: 12px;
+  opacity: 0.7;
+}
+
+.wallet-modal-theme-dark .wallet-modal-unlink-confirm-footer {
+  color: #9ca3af;
+}
+
+.wallet-modal-theme-light .wallet-modal-unlink-confirm-footer {
+  color: #6b7280;
+}
+
+/* MFA disable confirm modal: two buttons in a row */
+.wallet-modal-mfa-disable-actions {
+  display: flex;
+  flex-direction: row;
+  gap: 12px;
+  justify-content: center;
+  margin-top: 20px;
+}
+
+.wallet-modal-mfa-disable-actions .wallet-modal-unlink-confirm-btn {
+  flex: 1;
+  min-width: 0;
+}
+
+.wallet-modal-mfa-disable-cancel {
+  background: #374151 !important;
+}
+
+.wallet-modal-mfa-disable-cancel:hover:not(:disabled) {
+  background: #4b5563 !important;
+}
+
+/* Success popup modal - standalone */
+.wallet-modal-success-popup-modal {
+  position: relative;
+  max-width: 340px;
+  width: 100%;
+  padding: 32px 24px 24px;
+  padding-top: 48px;
+  text-align: center;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+}
+
+.wallet-modal-success-popup-close {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  padding: 6px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  border-radius: 8px;
+  color: inherit;
+  opacity: 0.7;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: opacity 0.15s ease;
+}
+
+.wallet-modal-success-popup-close:hover {
+  opacity: 1;
+}
+
+.wallet-modal-theme-dark .wallet-modal-success-popup-close {
+  color: #e5e7eb;
+}
+
+.wallet-modal-theme-light .wallet-modal-success-popup-close {
+  color: #374151;
+}
+
+.wallet-modal-success-popup-btn {
+  width: 100%;
+  margin-top: 20px;
+  padding: 12px 24px;
+  border-radius: 10px;
+  border: 1px solid;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.2s, transform 0.1s;
+}
+
+.wallet-modal-theme-dark .wallet-modal-success-popup-btn {
+  background: rgba(255, 255, 255, 0.08);
+  border-color: rgba(255, 255, 255, 0.15);
+  color: #e5e7eb;
+}
+
+.wallet-modal-theme-light .wallet-modal-success-popup-btn {
+  background: #f9fafb;
+  border-color: rgba(17, 24, 39, 0.12);
+  color: #111827;
+}
+
+.wallet-modal-success-popup-btn:hover {
+  background: rgba(255, 255, 255, 0.12);
+}
+
+.wallet-modal-theme-light .wallet-modal-success-popup-btn:hover {
+  background: #f3f4f6;
+}
+
+.wallet-modal-success-popup-btn:active {
+  transform: scale(0.98);
+}
+
+/* Error popup modal (link-auth errors from OAuth redirect) */
+.wallet-modal-error-popup-modal {
+  position: relative;
+  max-width: 380px;
+  width: 100%;
+  padding: 32px 24px 24px;
+  padding-top: 48px;
+  text-align: center;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+}
+
+.wallet-modal-error-popup-icon {
+  width: 64px;
+  height: 64px;
+  margin: 0 auto 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+}
+
+.wallet-modal-error-popup-title {
+  font-size: 15px;
+  line-height: 1.45;
+  margin: 0 0 24px;
+  font-weight: 500;
+  word-break: break-word;
+}
+
+.wallet-modal-theme-dark .wallet-modal-error-popup-title {
+  color: #e5e7eb;
+}
+
+.wallet-modal-theme-light .wallet-modal-error-popup-title {
+  color: #111827;
+}
+
+.wallet-modal-error-popup-actions {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 20px;
+}
+
+.wallet-modal-error-popup-ok {
+  padding: 12px 32px;
+  border-radius: 9999px;
+  border: none;
+  font-size: 14px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  cursor: pointer;
+  transition: background 0.2s, transform 0.1s;
+  color: #ffffff;
+}
+
+.wallet-modal-theme-dark .wallet-modal-error-popup-ok {
+  background: #1f2937;
+}
+
+.wallet-modal-theme-light .wallet-modal-error-popup-ok {
+  background: #111827;
+}
+
+.wallet-modal-theme-dark .wallet-modal-error-popup-ok:hover {
+  background: #374151;
+}
+
+.wallet-modal-theme-light .wallet-modal-error-popup-ok:hover {
+  background: #374151;
+}
+
+.wallet-modal-error-popup-ok:active {
+  transform: scale(0.98);
+}
+
+.wallet-modal-error-popup-footer {
+  padding-top: 8px;
+  text-align: center;
+}
+
+.wallet-modal-theme-dark.wallet-modal-error-popup-footer .onboarding-footer-text {
+  color: #9ca3af;
+}
+
+.wallet-modal-theme-light.wallet-modal-error-popup-footer .onboarding-footer-text {
+  color: #6b7280;
+}
+
+/* Link/Unlink success popup (inline fallback / shared content) */
+.wallet-modal-success-popup {
+  max-width: 360px;
+  padding: 32px 24px 20px;
+  text-align: center;
+}
+
+.wallet-modal-success-popup-icon {
+  width: 64px;
+  height: 64px;
+  margin: 0 auto 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: #10b981;
+  color: #ffffff;
+}
+
+.wallet-modal-success-popup-title {
+  font-size: 18px;
+  font-weight: 600;
+  margin: 0 0 8px;
+}
+
+.wallet-modal-theme-dark .wallet-modal-success-popup-title {
+  color: #ffffff;
+}
+
+.wallet-modal-theme-light .wallet-modal-success-popup-title {
+  color: #111827;
+}
+
+.wallet-modal-success-popup-footer {
+  margin-top: 24px;
+  font-size: 12px;
+  opacity: 0.7;
+}
+
+.wallet-modal-theme-dark .wallet-modal-success-popup-footer {
+  color: #9ca3af;
+}
+
+.wallet-modal-theme-light .wallet-modal-success-popup-footer {
+  color: #6b7280;
+}
+
+/* MFA Redesign Styles */
+.wallet-modal-manage.mfa-redesign-container {
+  /* max-width: 480px; */
+  width: 100%;
+  padding: 0;
+  border-radius: 24px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.wallet-modal-manage.mfa-redesign-container .wallet-modal-receive-header {
+  padding: 20px;
+  margin-bottom: 0;
+}
+
+.mfa-redesign-content {
+  padding: 12px 20px 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.mfa-info-box {
+  display: flex;
+  gap: 12px;
+  padding: 12px;
+  border-radius: 14px;
+  align-items: center;
+}
+
+.wallet-modal-theme-dark .mfa-info-box {
+  background: rgba(255, 255, 255, 0.04);
+}
+
+.wallet-modal-theme-light .mfa-info-box {
+  background: rgba(0, 0, 0, 0.03);
+}
+
+.mfa-info-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--abstraxn-primary, #3b82f6);
+}
+
+.mfa-info-text {
+  font-size: 14px;
+  line-height: 1.5;
+  margin: 0;
+  opacity: 0.8;
+}
+
+.mfa-status-enabled-box {
+  align-items: flex-start;
+}
+
+.mfa-status-enabled-icon {
+  color: #22c55e;
+}
+
+.wallet-modal-theme-dark .mfa-status-enabled-icon {
+  background: rgba(34, 197, 94, 0.12);
+}
+
+.wallet-modal-theme-light .mfa-status-enabled-icon {
+  background: rgba(34, 197, 94, 0.1);
+}
+
+.mfa-status-enabled-copy {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.mfa-status-enabled-title {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 600;
+}
+
+.wallet-modal-theme-dark .mfa-status-enabled-title {
+  color: #e5e7eb;
+}
+
+.wallet-modal-theme-light .mfa-status-enabled-title {
+  color: #111827;
+}
+
+.wallet-modal-theme-dark .mfa-info-text {
+  color: rgba(255, 255, 255, 0.88);
+}
+
+.wallet-modal-theme-light .mfa-info-text {
+  color: #374151;
+}
+
+.mfa-qr-container {
+  padding: 18px;
+  border-radius: 20px;
+  border: 1px solid;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+}
+
+.wallet-modal-theme-dark .mfa-qr-container {
+  border-color: rgba(255, 255, 255, 0.08);
+}
+
+.wallet-modal-theme-light .mfa-qr-container {
+  border-color: rgba(0, 0, 0, 0.08);
+}
+
+.mfa-qr-wrapper {
+  padding: 16px;
+  background: #ffffff;
+  border-radius: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.mfa-qr-placeholder {
+  width: 100%;
+  min-height: 172px;
+  border-radius: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  font-weight: 500;
+  padding: 16px;
+}
+
+.wallet-modal-theme-dark .mfa-qr-placeholder {
+  background: rgba(255, 255, 255, 0.04);
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.wallet-modal-theme-light .mfa-qr-placeholder {
+  background: rgba(0, 0, 0, 0.03);
+  color: #6b7280;
+}
+
+.mfa-secret-display {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 16px;
+  border-radius: 14px;
+  width: 100%;
+}
+
+.wallet-modal-theme-dark .mfa-secret-display {
+  background: rgba(0, 0, 0, 0.3);
+}
+
+.wallet-modal-theme-light .mfa-secret-display {
+  background: rgba(0, 0, 0, 0.05);
+}
+
+.mfa-secret-key-icon {
+  opacity: 0.5;
+}
+
+.wallet-modal-theme-dark .mfa-secret-key-icon {
+  color: rgba(255, 255, 255, 0.78);
+  opacity: 1;
+}
+
+.wallet-modal-theme-light .mfa-secret-key-icon {
+  color: #6b7280;
+  opacity: 1;
+}
+
+.mfa-secret-code {
+  flex: 1;
+  font-family: "GeistMono", monospace;
+  font-size: 14px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  letter-spacing: 0.5px;
+}
+
+.wallet-modal-theme-dark .mfa-secret-code {
+  color: #f3f4f6;
+}
+
+.wallet-modal-theme-light .mfa-secret-code {
+  color: #1f2937;
+}
+
+.mfa-secret-copy {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 6px;
+  border-radius: 6px;
+  color: inherit;
+  opacity: 0.6;
+  transition: all 0.2s;
+}
+
+.wallet-modal-theme-dark .mfa-secret-copy {
+  color: rgba(255, 255, 255, 0.78);
+  opacity: 1;
+}
+
+.wallet-modal-theme-light .mfa-secret-copy {
+  color: #4b5563;
+}
+
+.mfa-secret-copy:hover {
+  opacity: 1;
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.mfa-secret-copy.copied {
+  color: #22c55e;
+  opacity: 1;
+}
+
+.mfa-verification-section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-top: 0;
+}
+
+.mfa-divider {
+  display: block;
+  font-size: 14px;
+  font-weight: 500;
+  /* opacity: 0.5; */
+  margin: 0;
+  text-align: left;
+}
+
+.wallet-modal-theme-dark .mfa-divider {
+  color: rgba(255, 255, 255, 0.75);
+}
+
+.wallet-modal-theme-light .mfa-divider {
+  color: #4b5563;
+}
+
+.mfa-otp-grid {
+  display: flex;
+  justify-content: center;
+  gap: 6px;
+}
+
+.mfa-otp-slot {
+  display: flex;
+  align-items: center;
+  gap: 0;
+}
+
+.mfa-otp-input {
+  width: 50px;
+  height: 55px;
+  border-radius: 14px;
+  border: 1.5px solid;
+  background: transparent;
+  text-align: center;
+  font-size: 24px;
+  font-weight: 700;
+  font-family: "GeistMono", monospace;
+  outline: none;
+  transition: all 0.2s;
+}
+
+.wallet-modal-theme-dark .mfa-otp-input {
+  border-color: rgba(255, 255, 255, 0.3);
+  color: #ffffff;
+}
+
+.wallet-modal-theme-light .mfa-otp-input {
+  border-color: rgba(0, 0, 0, 0.3);
+  color: #111827;
+}
+
+.mfa-otp-input:focus {
+  border-color: var(--abstraxn-primary, #3b82f6);
+  background: rgba(59, 130, 246, 0.05);
+  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
+}
+
+.mfa-otp-dash {
+  font-size: 24px;
+  opacity: 0.3;
+}
+
+.mfa-refresh-text {
+  text-align: center;
+  font-size: 13px;
+  opacity: 0.5;
+  margin: 0;
+}
+
+.wallet-modal-theme-dark .mfa-refresh-text {
+  color: rgba(255, 255, 255, 0.72);
+}
+
+.wallet-modal-theme-light .mfa-refresh-text {
+  color: #6b7280;
+}
+
+.mfa-setup-error {
+  font-size: 14px;
+  color: #ef4444;
+  margin: 0;
+  text-align: center;
+}
+
+.mfa-verify-button {
+  width: 100%;
+  padding: 18px;
+  border-radius: 18px;
+  border: none;
+  background: var(--abstraxn-primary, #111827);
+  color: var(--abstraxn-primary-text, #ffffff);
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.mfa-verify-button:hover:not(:disabled) {
+  transform: translateY(-1px);
+  background: var(--abstraxn-primary-hover, #1f2937);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.mfa-verify-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.mfa-verify-button.mfa-disable-primary-button {
+  background: #ef4444;
+  color: #ffffff;
+}
+
+.mfa-verify-button.mfa-disable-primary-button:hover:not(:disabled) {
+  background: #dc2626;
+}
+
+.mfa-trouble-text {
+  text-align: center;
+  font-size: 14px;
+  margin: 0;
+  opacity: 0.7;
+}
+
+.wallet-modal-theme-dark .mfa-trouble-text {
+  color: rgba(255, 255, 255, 0.82);
+}
+
+.wallet-modal-theme-light .mfa-trouble-text {
+  color: #374151;
+}
+
+.mfa-link-button {
+  background: transparent;
+  border: none;
+  color: inherit;
+  font-weight: 600;
+  cursor: pointer;
+  padding: 0;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.wallet-modal-theme-dark .mfa-link-button {
+  color: #cbd5e1;
+}
+
+.wallet-modal-theme-light .mfa-link-button {
+  color: #080808;
+}
+
+.wallet-modal-theme-dark .mfa-link-button:hover {
+  color: #e2e8f0;
+}
+
+.wallet-modal-theme-light .mfa-link-button:hover {
+  color: #080808;
+}
+
+.mfa-recovery-section {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  margin-top: 8px;
+}
+
+.mfa-recovery-grid {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.mfa-recovery-input {
+  text-transform: uppercase;
+}
+
+.mfa-recovery-field {
+  width: 100%;
+  height: 55px;
+  border-radius: 14px;
+  border: 1.5px solid;
+  background: transparent;
+  text-align: center;
+  font-size: 20px;
+  font-weight: 700;
+  font-family: "GeistMono", monospace;
+  text-transform: uppercase;
+  letter-spacing: 0.16em;
+  outline: none;
+  transition: all 0.2s;
+  box-sizing: border-box;
+  padding: 0 14px;
+}
+
+.wallet-modal-theme-dark .mfa-recovery-field {
+  border-color: rgba(255, 255, 255, 0.1);
+  color: #ffffff;
+}
+
+.wallet-modal-theme-light .mfa-recovery-field {
+  border-color: rgba(0, 0, 0, 0.1);
+  color: #111827;
+}
+
+.mfa-recovery-field:focus {
+  border-color: var(--abstraxn-primary, #3b82f6);
+  background: rgba(59, 130, 246, 0.05);
+  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
+}
+
+.mfa-recovery-field::placeholder {
+  letter-spacing: 0;
+  font-size: 14px;
+  font-weight: 500;
+  font-family: "GeistSans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif;
+  text-transform: none;
+}
+
+.wallet-modal-mfa-backup-list {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 10px;
+  margin-bottom: 14px;
+}
+
+.wallet-modal-mfa-backup-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 2px;
+  margin-bottom: 10px;
+}
+
+.wallet-modal-mfa-backup-heading-label {
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.wallet-modal-theme-dark .wallet-modal-mfa-backup-heading-label {
+  color: rgba(226, 232, 240, 0.7);
+}
+
+.wallet-modal-theme-light .wallet-modal-mfa-backup-heading-label {
+  color: rgba(15, 23, 42, 0.65);
+}
+
+.wallet-modal-mfa-backup-code-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 12px 14px;
+  border-radius: 10px;
+  border: 1px solid;
+  transition: all 0.2s ease;
+}
+
+.wallet-modal-theme-dark .wallet-modal-mfa-backup-code-wrapper {
+  background: rgba(15, 23, 42, 0.5);
+  border-color: rgba(148, 163, 184, 0.25);
+}
+
+.wallet-modal-theme-light .wallet-modal-mfa-backup-code-wrapper {
+  background: rgba(248, 250, 252, 0.9);
+  border-color: rgba(148, 163, 184, 0.35);
+}
+
+.wallet-modal-mfa-backup-code {
+  font-family: "GeistMono", monospace;
+  font-size: 15px;
+  font-weight: 700;
+  letter-spacing: 1px;
+}
+
+.wallet-modal-theme-dark .wallet-modal-mfa-backup-code {
+  color: #f9fafb;
+}
+
+.wallet-modal-theme-light .wallet-modal-mfa-backup-code {
+  color: #111827;
+}
+
+.wallet-modal-mfa-backup-actions {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.wallet-modal-mfa-backup-action-btn {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  padding: 12px 14px;
+  border-radius: 10px;
+  border: 1px solid transparent;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.wallet-modal-theme-dark .wallet-modal-mfa-backup-action-btn {
+  background: rgba(30, 41, 59, 0.45);
+  color: rgba(226, 232, 240, 0.95);
+  border-color: rgba(148, 163, 184, 0.28);
+}
+
+.wallet-modal-theme-light .wallet-modal-mfa-backup-action-btn {
+  background: rgba(241, 245, 249, 0.95);
+  color: #1f2937;
+  border-color: rgba(148, 163, 184, 0.3);
+}
+
+.wallet-modal-mfa-backup-action-btn:hover:not(:disabled) {
+  transform: translateY(-1px);
+  filter: brightness(1.05);
+}
+
+.wallet-modal-mfa-backup-action-btn.copied {
+  color: #22c55e;
+  background: rgba(34, 197, 94, 0.1);
+}
+
+.wallet-modal-mfa-backup-action-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  transform: none;
+}