signer-test-sdk-react 0.0.20 → 0.0.22

package/dist/src/WalletModal.css

@@ -1,46 +1,4 @@
 /* Wallet Modal Styles */
-
-/* GeistSans Font */
-@font-face {
-  font-family: 'GeistSans';
-  src: url('https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-sans/Geist-Regular.woff2') format('woff2');
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'GeistSans';
-  src: url('https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-sans/Geist-Medium.woff2') format('woff2');
-  font-weight: 500;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'GeistSans';
-  src: url('https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-sans/Geist-SemiBold.woff2') format('woff2');
-  font-weight: 600;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'GeistSans';
-  src: url('https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-sans/Geist-Bold.woff2') format('woff2');
-  font-weight: 700;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'GeistMono';
-  src: url('https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-mono/GeistMono-Regular.woff2') format('woff2');
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
-}
-
 .wallet-modal-overlay {
   position: fixed;
   top: 0;
@@ -52,23 +10,11 @@
   justify-content: center;
   z-index: 10000;
   animation: fadeIn 0.2s ease-out;
-  font-family: 'GeistSans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
-  will-change: opacity;
-  backface-visibility: hidden;
-  -webkit-backface-visibility: hidden;
-  transform: translateZ(0);
-  -webkit-transform: translateZ(0);
-  /* Theme variables (overridable via inline style from uiConfig.colors) */
-  --abstraxn-primary: #111827;
-  --abstraxn-primary-hover: #1f2937;
-  --abstraxn-primary-text: #ffffff;
 }
 
 /* Dark Theme (Default) */
 .wallet-modal-overlay.wallet-modal-theme-dark {
   background: rgba(0, 0, 0, 0.5);
-  --abstraxn-primary: #4b5563;
-  --abstraxn-primary-hover: #6b7280;
 }
 
 /* Light Theme */
@@ -76,32 +22,7 @@
   background: rgba(0, 0, 0, 0.3);
 }
 
-/* Shared primary button (uses theme variables above) */
-.wallet-modal-primary-btn {
-  width: 100%;
-  padding: 14px 24px;
-  border-radius: 12px;
-  border: none;
-  font-size: 16px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.2s;
-  background: var(--abstraxn-primary);
-  color: var(--abstraxn-primary-text);
-}
-
-.wallet-modal-primary-btn:hover:not(:disabled) {
-  background: var(--abstraxn-primary-hover);
-  transform: translateY(-1px);
-}
-
-.wallet-modal-primary-btn:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
 .wallet-modal-content {
-  position: relative;
   border-radius: 16px;
   width: 90%;
   max-width: 400px;
@@ -114,17 +35,6 @@
   flex-direction: column;
   gap: 20px;
   box-sizing: border-box;
-  font-family: 'GeistSans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
-  font-size: 14px;
-  will-change: transform, opacity;
-  backface-visibility: hidden;
-  -webkit-backface-visibility: hidden;
-  transform: translate3d(0, 0, 0);
-  -webkit-transform: translate3d(0, 0, 0);
-}
-
-.wallet-modal-content.selector-open {
-  overflow: hidden;
 }
 
 /* Dark Theme Content */
@@ -151,11 +61,11 @@
 
 @keyframes slideUp {
   from {
-    transform: translate3d(0, 20px, 0);
+    transform: translateY(20px);
     opacity: 0;
   }
   to {
-    transform: translate3d(0, 0, 0);
+    transform: translateY(0);
     opacity: 1;
   }
 }
@@ -236,7 +146,7 @@
   gap: 8px;
   cursor: pointer;
   transition: opacity 0.2s;
-  font-family: 'GeistMono', 'SF Mono', 'Monaco', 'Roboto Mono', monospace;
+  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Courier New', monospace;
 }
 
 .wallet-modal-theme-dark .wallet-modal-address {
@@ -375,16 +285,16 @@
 
 .wallet-modal-action-btn {
   border-radius: 12px;
-  padding: 12px 8px;
+  padding: 16px;
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 12px;
+  gap: 8px;
   cursor: pointer;
   transition: all 0.2s;
-  font-size: 15px;
-  font-weight: 600;
+  font-size: 14px;
+  font-weight: 500;
   border: 1px solid;
   text-align: center;
 }
@@ -396,7 +306,7 @@
 }
 
 .wallet-modal-theme-light .wallet-modal-action-btn {
-  background: #ffffff;
+  background: #f9fafb;
   border-color: #e5e7eb;
   color: #111827;
 }
@@ -418,11 +328,11 @@
 }
 
 .wallet-modal-theme-dark .wallet-modal-action-btn svg {
-  color: #9ca3af;
+  color: #a855f7;
 }
 
 .wallet-modal-theme-light .wallet-modal-action-btn svg {
-  color: #6b7280;
+  color: #9333ea;
 }
 
 /* Asset Display */
@@ -438,11 +348,6 @@
   border: 1px solid;
 }
 
-.wallet-modal-asset:hover {
-  border-color: #9333ea;
-  background: rgba(147, 51, 234, 0.02);
-}
-
 .wallet-modal-theme-dark .wallet-modal-asset {
   background: #2a2a2a;
   border-color: #3a3a3a;
@@ -470,35 +375,22 @@
   flex: 1;
 }
 
-.wallet-modal-asset-icon-wrapper {
-  position: relative;
+.wallet-modal-asset-icon {
   width: 40px;
   height: 40px;
-  flex-shrink: 0;
-}
-
-.wallet-modal-asset-icon-img {
-  width: 100%;
-  height: 100%;
-  border-radius: 50%;
-  object-fit: cover;
-}
-
-.wallet-modal-asset-icon {
-  width: 100%;
-  height: 100%;
   border-radius: 50%;
   background: linear-gradient(135deg, #627eea 0%, #4c6ef5 100%);
   display: flex;
   align-items: center;
   justify-content: center;
   color: white;
+  flex-shrink: 0;
 }
 
 .wallet-modal-asset-details {
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: 4px;
   flex: 1;
   min-width: 0;
 }
@@ -506,7 +398,6 @@
 .wallet-modal-asset-name {
   font-size: 16px;
   font-weight: 600;
-  text-align: left;
 }
 
 .wallet-modal-theme-dark .wallet-modal-asset-name {
@@ -519,8 +410,9 @@
 
 .wallet-modal-asset-balance {
   font-size: 14px;
-  font-weight: 500;
-  text-align: left;
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
 
 .wallet-modal-theme-dark .wallet-modal-asset-balance {
@@ -532,19 +424,11 @@
 }
 
 .wallet-modal-asset-status {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  width: 10px;
-  height: 10px;
+  width: 8px;
+  height: 8px;
   border-radius: 50%;
   background: #10b981;
-  border: 2px solid white;
-  z-index: 1;
-}
-
-.wallet-modal-theme-dark .wallet-modal-asset-status {
-  border-color: #1a1a1a;
+  flex-shrink: 0;
 }
 
 .wallet-modal-asset-arrow {
@@ -606,6 +490,21 @@
   flex-shrink: 0;
 }
 
+.wallet-modal-theme-dark .wallet-modal-menu-item svg {
+  color: #9ca3af;
+}
+
+.wallet-modal-theme-light .wallet-modal-menu-item svg {
+  color: #6b7280;
+}
+
+.wallet-modal-theme-dark .wallet-modal-menu-item:hover svg {
+  color: #a855f7;
+}
+
+.wallet-modal-theme-light .wallet-modal-menu-item:hover svg {
+  color: #9333ea;
+}
 
 /* Disconnect button - Red theme */
 .wallet-modal-menu-item-disconnect {
@@ -794,7 +693,7 @@
   display: flex;
   align-items: center;
   gap: 8px;
-  font-family: 'GeistMono', 'SF Mono', 'Monaco', 'Roboto Mono', monospace;
+  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Courier New', monospace;
   text-align: left;
 }
 
@@ -819,7 +718,6 @@
   border: none;
   cursor: pointer;
   padding: 8px;
-  margin: 0;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -827,7 +725,6 @@
   transition: all 0.2s;
   width: 40px;
   height: 40px;
-  box-sizing: border-box;
 }
 
 .wallet-modal-back:disabled {
@@ -886,19 +783,17 @@
   color: #111827;
 }
 
-.wallet-modal-content .wallet-modal-receive-title {
+.wallet-modal-receive-title {
   font-size: 20px;
-  font-weight: 500;
+  font-weight: 600;
   margin: 0;
-  flex: 1;
-  text-align: center;
 }
 
-.wallet-modal-content.wallet-modal-theme-dark .wallet-modal-receive-title {
+.wallet-modal-theme-dark .wallet-modal-receive-title {
   color: #ffffff;
 }
 
-.wallet-modal-content.wallet-modal-theme-light .wallet-modal-receive-title {
+.wallet-modal-theme-light .wallet-modal-receive-title {
   color: #111827;
 }
 
@@ -961,7 +856,7 @@
 
 .wallet-modal-address-full {
   flex: 1;
-  font-family: 'GeistMono', 'SF Mono', 'Monaco', 'Roboto Mono', monospace;
+  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Courier New', monospace;
   font-size: 14px;
   word-break: break-all;
   text-align: left;
@@ -1035,7 +930,7 @@
   display: flex;
   flex-direction: column;
   gap: 20px;
-  /* padding: 20px 0; */
+  padding: 20px 0;
 }
 
 .wallet-modal-send-field {
@@ -1248,7 +1143,7 @@
   border: 1px solid;
   background: transparent;
   font-size: 14px;
-  font-family: 'GeistMono', 'SF Mono', monospace;
+  font-family: monospace;
   outline: none;
   transition: all 0.2s;
   box-sizing: border-box;
@@ -1317,23 +1212,25 @@
 }
 
 .wallet-modal-theme-dark .wallet-modal-send-preview-btn {
-  background: var(--abstraxn-primary);
-  color: var(--abstraxn-primary-text);
+  background: linear-gradient(135deg, #9333ea 0%, #7e22ce 100%);
+  color: #ffffff;
 }
 
 .wallet-modal-theme-light .wallet-modal-send-preview-btn {
-  background: var(--abstraxn-primary);
-  color: var(--abstraxn-primary-text);
+  background: linear-gradient(135deg, #9333ea 0%, #7e22ce 100%);
+  color: #ffffff;
 }
 
 .wallet-modal-theme-dark .wallet-modal-send-preview-btn:hover:not(.disabled) {
-  background: var(--abstraxn-primary-hover);
+  background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
   transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(147, 51, 234, 0.3);
 }
 
 .wallet-modal-theme-light .wallet-modal-send-preview-btn:hover:not(.disabled) {
-  background: var(--abstraxn-primary-hover);
+  background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
   transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(147, 51, 234, 0.2);
 }
 
 /* Preview Modal */
@@ -1419,13 +1316,14 @@
 }
 
 .wallet-modal-preview-btn-primary {
-  background: var(--abstraxn-primary);
-  color: var(--abstraxn-primary-text);
+  background: linear-gradient(135deg, #9333ea 0%, #7e22ce 100%);
+  color: #ffffff;
 }
 
 .wallet-modal-preview-btn-primary:hover:not(:disabled) {
-  background: var(--abstraxn-primary-hover);
+  background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
   transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(147, 51, 234, 0.3);
 }
 
 .wallet-modal-preview-btn-secondary {
@@ -1469,17 +1367,17 @@
   justify-content: center;
 }
 
-.wallet-modal-content .wallet-modal-success-title {
+.wallet-modal-success-title {
   font-size: 24px;
-  font-weight: 500;
+  font-weight: 600;
   margin: 0;
 }
 
-.wallet-modal-content.wallet-modal-theme-dark .wallet-modal-success-title {
+.wallet-modal-theme-dark .wallet-modal-success-title {
   color: #ffffff;
 }
 
-.wallet-modal-content.wallet-modal-theme-light .wallet-modal-success-title {
+.wallet-modal-theme-light .wallet-modal-success-title {
   color: #111827;
 }
 
@@ -1528,13 +1426,14 @@
   font-weight: 600;
   cursor: pointer;
   transition: all 0.2s;
-  background: var(--abstraxn-primary);
-  color: var(--abstraxn-primary-text);
+  background: linear-gradient(135deg, #9333ea 0%, #7e22ce 100%);
+  color: #ffffff;
 }
 
 .wallet-modal-success-btn:hover {
-  background: var(--abstraxn-primary-hover);
+  background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
   transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(147, 51, 234, 0.3);
 }
 
 .wallet-modal-action-btn-primary {
@@ -1545,14 +1444,13 @@
   font-weight: 600;
   cursor: pointer;
   transition: all 0.2s;
-  background: var(--abstraxn-primary);
-  color: var(--abstraxn-primary-text);
+  background: linear-gradient(135deg, #9333ea 0%, #7e22ce 100%);
+  color: #ffffff;
 }
 
 .wallet-modal-action-btn-primary:hover {
   transform: translateY(-2px);
-  background: var(--abstraxn-primary-hover);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
+  box-shadow: 0 4px 12px rgba(147, 51, 234, 0.4);
 }
 
 /* Manage Modal */
@@ -1568,19 +1466,19 @@
   gap: 20px;
 }
 
-.wallet-modal-content .wallet-modal-manage-section-title {
+.wallet-modal-manage-section-title {
   font-size: 16px;
-  font-weight: 500;
+  font-weight: 600;
   margin: 0;
   text-align: left;
   letter-spacing: -0.01em;
 }
 
-.wallet-modal-content.wallet-modal-theme-dark .wallet-modal-manage-section-title {
+.wallet-modal-theme-dark .wallet-modal-manage-section-title {
   color: #ffffff;
 }
 
-.wallet-modal-content.wallet-modal-theme-light .wallet-modal-manage-section-title {
+.wallet-modal-theme-light .wallet-modal-manage-section-title {
   color: #111827;
 }
 
@@ -1646,7 +1544,7 @@
 
 .wallet-modal-manage-address-text {
   flex: 1;
-  font-family: 'GeistMono', 'SF Mono', 'Monaco', 'Roboto Mono', monospace;
+  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Courier New', monospace;
   font-size: 14px;
   word-break: break-all;
   min-width: 0;
@@ -1847,9 +1745,295 @@
   margin-bottom: 16px;
 }
 
-/* Balance Display */
+.wallet-modal-chain-selector {
+  position: relative;
+  width: 100%;
+}
+
+.wallet-modal-chain-selector-btn {
+  width: 100%;
+  padding: 12px 16px;
+  border-radius: 12px;
+  border: 1px solid;
+  background: transparent;
+  cursor: pointer;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.wallet-modal-theme-dark .wallet-modal-chain-selector-btn {
+  border-color: #3a3a3a;
+  background: #2a2a2a;
+  color: #ffffff;
+}
+
+.wallet-modal-theme-light .wallet-modal-chain-selector-btn {
+  border-color: #e5e7eb;
+  background: #f9fafb;
+  color: #111827;
+}
+
+.wallet-modal-theme-dark .wallet-modal-chain-selector-btn:hover {
+  background: #3a3a3a;
+  border-color: #4a4a4a;
+}
+
+.wallet-modal-theme-light .wallet-modal-chain-selector-btn:hover {
+  background: #f3f4f6;
+  border-color: #d1d5db;
+}
+
+.wallet-modal-chain-selector-current {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex: 1;
+  min-width: 0;
+}
+
+.wallet-modal-chain-icon {
+  width: 24px;
+  height: 24px;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  background: rgba(147, 51, 234, 0.1);
+}
+
+.wallet-modal-theme-dark .wallet-modal-chain-icon {
+  color: #a855f7;
+}
+
+.wallet-modal-theme-light .wallet-modal-chain-icon {
+  color: #9333ea;
+}
+
+.wallet-modal-chain-info {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  flex: 1;
+  min-width: 0;
+  text-align: left;
+}
+
+.wallet-modal-chain-name {
+  font-size: 15px;
+  font-weight: 500;
+}
+
+.wallet-modal-theme-dark .wallet-modal-chain-name {
+  color: #ffffff;
+}
+
+.wallet-modal-theme-light .wallet-modal-chain-name {
+  color: #111827;
+}
+
+.wallet-modal-chain-type {
+  font-size: 12px;
+  font-weight: 400;
+  opacity: 0.7;
+}
+
+.wallet-modal-theme-dark .wallet-modal-chain-type {
+  color: #9ca3af;
+}
+
+.wallet-modal-theme-light .wallet-modal-chain-type {
+  color: #6b7280;
+}
+
+.wallet-modal-chain-arrow {
+  flex-shrink: 0;
+  transition: transform 0.2s;
+}
+
+.wallet-modal-chain-arrow.open {
+  transform: rotate(180deg);
+}
+
+.wallet-modal-chain-selector-placeholder {
+  padding: 12px 16px;
+  border-radius: 12px;
+  border: 1px solid;
+  text-align: left;
+  font-size: 15px;
+  width: 100%;
+}
+
+.wallet-modal-theme-dark .wallet-modal-chain-selector-placeholder {
+  border-color: #3a3a3a;
+  background: #2a2a2a;
+  color: #9ca3af;
+}
+
+.wallet-modal-theme-light .wallet-modal-chain-selector-placeholder {
+  border-color: #e5e7eb;
+  background: #f9fafb;
+  color: #6b7280;
+}
+
+.wallet-modal-chain-dropdown {
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 0;
+  right: 0;
+  width: 100%;
+  z-index: 10001;
+  border-radius: 12px;
+  border: 1px solid;
+  overflow: hidden;
+  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+}
+
+.wallet-modal-theme-dark .wallet-modal-chain-dropdown {
+  background: #1a1a1a;
+  border-color: #3a3a3a;
+}
+
+.wallet-modal-theme-light .wallet-modal-chain-dropdown {
+  background: #ffffff;
+  border-color: #e5e7eb;
+}
+
+.wallet-modal-chain-tabs {
+  display: flex;
+  border-bottom: 1px solid;
+  padding: 8px;
+  gap: 4px;
+}
+
+.wallet-modal-theme-dark .wallet-modal-chain-tabs {
+  border-color: #3a3a3a;
+}
+
+.wallet-modal-theme-light .wallet-modal-chain-tabs {
+  border-color: #e5e7eb;
+}
+
+.wallet-modal-chain-tab {
+  flex: 1;
+  padding: 8px 12px;
+  border-radius: 8px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 500;
+  transition: all 0.2s;
+}
+
+.wallet-modal-theme-dark .wallet-modal-chain-tab {
+  color: #9ca3af;
+}
+
+.wallet-modal-theme-light .wallet-modal-chain-tab {
+  color: #6b7280;
+}
+
+.wallet-modal-theme-dark .wallet-modal-chain-tab.active {
+  background: #2a2a2a;
+  color: #ffffff;
+}
+
+.wallet-modal-theme-light .wallet-modal-chain-tab.active {
+  background: #f3f4f6;
+  color: #111827;
+}
+
+.wallet-modal-chain-list {
+  max-height: 300px;
+  overflow-y: auto;
+  padding: 4px;
+}
+
+.wallet-modal-chain-item {
+  width: 100%;
+  padding: 12px;
+  border-radius: 8px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  transition: all 0.2s;
+  text-align: left;
+}
+
+.wallet-modal-theme-dark .wallet-modal-chain-item {
+  color: #ffffff;
+}
+
+.wallet-modal-theme-light .wallet-modal-chain-item {
+  color: #111827;
+}
+
+.wallet-modal-theme-dark .wallet-modal-chain-item:hover {
+  background: #2a2a2a;
+}
+
+.wallet-modal-theme-light .wallet-modal-chain-item:hover {
+  background: #f3f4f6;
+}
+
+.wallet-modal-theme-dark .wallet-modal-chain-item.active {
+  background: rgba(147, 51, 234, 0.15);
+}
+
+.wallet-modal-theme-light .wallet-modal-chain-item.active {
+  background: rgba(147, 51, 234, 0.1);
+}
+
+.wallet-modal-chain-item .wallet-modal-chain-icon {
+  width: 28px;
+  height: 28px;
+}
+
+.wallet-modal-chain-item .wallet-modal-chain-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.wallet-modal-chain-item .wallet-modal-chain-name {
+  font-size: 14px;
+}
+
+.wallet-modal-chain-badge {
+  font-size: 10px;
+  font-weight: 500;
+  padding: 2px 6px;
+  border-radius: 4px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.wallet-modal-theme-dark .wallet-modal-chain-badge {
+  background: rgba(251, 191, 36, 0.2);
+  color: #fbbf24;
+}
+
+.wallet-modal-theme-light .wallet-modal-chain-badge {
+  background: rgba(251, 191, 36, 0.15);
+  color: #d97706;
+}
+
+.wallet-modal-chain-item svg:last-child {
+  flex-shrink: 0;
+  color: #10b981;
+}
 
 /* Export Warning Modal */
+.wallet-modal-export-warning {
+  /* Same size as other modals - no max-width override */
+}
+
 .wallet-modal-export-warning-content {
   display: flex;
   flex-direction: column;
@@ -2092,8 +2276,8 @@
   font-weight: 600;
   cursor: pointer;
   transition: all 0.2s;
-  background: var(--abstraxn-primary);
-  color: var(--abstraxn-primary-text);
+  background: linear-gradient(135deg, #9333ea 0%, #7e22ce 100%);
+  color: #ffffff;
   box-sizing: border-box;
   display: flex;
   align-items: center;
@@ -2102,7 +2286,7 @@
 }
 
 .wallet-modal-theme-dark .wallet-modal-export-warning-reveal:not(.disabled) {
-  background: var(--abstraxn-primary);
+  background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
 }
 
 .wallet-modal-export-warning-reveal:hover:not(.disabled) {
@@ -2110,11 +2294,11 @@
 }
 
 .wallet-modal-theme-dark .wallet-modal-export-warning-reveal:hover:not(.disabled) {
-  background: var(--abstraxn-primary-hover);
+  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.4);
 }
 
 .wallet-modal-theme-light .wallet-modal-export-warning-reveal:hover:not(.disabled) {
-  background: var(--abstraxn-primary-hover);
+  box-shadow: 0 4px 12px rgba(147, 51, 234, 0.4);
 }
 
 .wallet-modal-loading-spinner {
@@ -2160,19 +2344,17 @@
   margin-bottom: 24px;
 }
 
-.wallet-modal-content .wallet-modal-export-title {
+.wallet-modal-export-title {
   font-size: 20px;
-  font-weight: 500;
+  font-weight: 600;
   margin: 0;
-  flex: 1;
-  text-align: center;
 }
 
-.wallet-modal-content.wallet-modal-theme-dark .wallet-modal-export-title {
+.wallet-modal-theme-dark .wallet-modal-export-title {
   color: #ffffff;
 }
 
-.wallet-modal-content.wallet-modal-theme-light .wallet-modal-export-title {
+.wallet-modal-theme-light .wallet-modal-export-title {
   color: #111827;
 }
 
@@ -2185,7 +2367,7 @@
 .wallet-modal-export-key-display {
   padding: 16px;
   border-radius: 12px;
-  font-family: 'GeistMono', 'SF Mono', 'Monaco', 'Roboto Mono', monospace;
+  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Courier New', monospace;
   font-size: 13px;
   line-height: 1.6;
   word-break: break-all;
@@ -2292,15 +2474,15 @@
   font-weight: 600;
   cursor: pointer;
   transition: all 0.2s;
-  color: var(--abstraxn-primary-text);
+  color: #ffffff;
 }
 
 .wallet-modal-theme-dark .wallet-modal-export-done-btn {
-  background: var(--abstraxn-primary);
+  background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
 }
 
 .wallet-modal-theme-light .wallet-modal-export-done-btn {
-  background: var(--abstraxn-primary);
+  background: linear-gradient(135deg, #9333ea 0%, #7e22ce 100%);
 }
 
 .wallet-modal-export-done-btn:hover {
@@ -2308,12 +2490,10 @@
 }
 
 .wallet-modal-theme-dark .wallet-modal-export-done-btn:hover {
-  background: var(--abstraxn-primary-hover);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
+  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.4);
 }
 
 .wallet-modal-theme-light .wallet-modal-export-done-btn:hover {
-  background: var(--abstraxn-primary-hover);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 4px 12px rgba(147, 51, 234, 0.4);
 }