feat : added transaction history ,transaction details and currency selector

css/main.min.css

@@ -1050,3 +1050,311 @@ aside h4 {
     animation: none !important;
   }
 }
+.tx-details-container {
+  max-width: 800px;
+  margin: 1rem auto;
+  padding: 1rem;
+  font-family: inherit;
+}
+.tx-header {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.5rem;
+  margin-bottom: 1.5rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid rgba(var(--text-color), 0.1);
+}
+.tx-title {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: rgba(var(--text-color), 0.95);
+  margin: 0;
+}
+.tx-card {
+  background-color: rgba(var(--foreground-color), 1);
+  border-radius: 0.75rem;
+  overflow: hidden;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  border: 1px solid rgba(var(--text-color), 0.1);
+  margin-top: 1rem;
+}
+.tx-status-header {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 1.25rem;
+  background-color: rgba(var(--text-color), 0.03);
+  border-bottom: 1px solid rgba(var(--text-color), 0.1);
+}
+.status-indicator {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.status-indicator.confirmed {
+  background-color: var(--color-success);
+  box-shadow: 0 0 0 4px rgba(var(--color-success-rgb), 0.2);
+}
+.status-indicator.pending {
+  background-color: var(--color-warning);
+  box-shadow: 0 0 0 4px rgba(var(--color-warning-rgb), 0.2);
+}
+.status-details {
+  flex-grow: 1;
+}
+.status-title {
+  font-size: 1.15rem;
+  font-weight: 600;
+  color: rgba(var(--text-color), 0.95);
+  margin: 0;
+}
+.status-subtext {
+  font-size: 0.85rem;
+  color: rgba(var(--text-color), 0.7);
+  margin: 0.25rem 0 0;
+}
+.tx-info-grid {
+  padding: 1.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+.tx-address-section {
+  display: flex;
+  align-items: stretch;
+  gap: 1rem;
+  background: rgba(var(--text-color), 0.02);
+  padding: 1rem;
+  border-radius: 0.5rem;
+}
+.address-card {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.address-label {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: rgba(var(--text-color), 0.6);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+.address-value {
+  font-family: "Roboto Mono", monospace;
+  font-size: 0.85rem;
+  color: rgba(var(--text-color), 0.9);
+  word-break: break-all;
+  background: rgba(var(--text-color), 0.05);
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.25rem;
+}
+.tx-arrow {
+  font-size: 1.5rem;
+  color: rgba(var(--text-color), 0.4);
+  display: flex;
+  align-items: center;
+  padding: 0 0.5rem;
+}
+.tx-hash-section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.section-label {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: rgba(var(--text-color), 0.6);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+.hash-value {
+  background-color: rgba(var(--text-color), 0.05);
+  padding: 0.75rem;
+  border-radius: 0.25rem;
+  font-family: "Roboto Mono", monospace;
+  font-size: 0.85rem;
+  color: rgba(var(--text-color), 0.9);
+  word-break: break-all;
+}
+.tx-metrics-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 1rem;
+}
+.metric-card {
+  background-color: rgba(var(--text-color), 0.03);
+  padding: 1rem;
+  border-radius: 0.5rem;
+  text-align: center;
+  border: 1px solid rgba(var(--text-color), 0.08);
+  transition: background-color 0.2s ease, transform 0.2s ease;
+}
+.metric-card:hover {
+  background-color: rgba(var(--text-color), 0.06);
+  transform: translateY(-2px);
+}
+.metric-label {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: rgba(var(--text-color), 0.6);
+  margin-bottom: 0.5rem;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  display: block;
+}
+.metric-value {
+  font-size: 0.95rem;
+  font-weight: 500;
+  color: rgba(var(--text-color), 0.95);
+  word-break: break-word;
+}
+.tx-actions {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1.25rem;
+  border-top: 1px solid rgba(var(--text-color), 0.1);
+  background-color: rgba(var(--text-color), 0.03);
+}
+.tx-actions .button {
+  flex: 1;
+}
+@media (max-width: 768px) {
+  .tx-address-section {
+    flex-direction: column;
+    gap: 0.75rem;
+    align-items: stretch;
+  }
+  .tx-arrow {
+    transform: rotate(90deg);
+    margin: 0.5rem auto;
+    padding: 0;
+  }
+  .tx-metrics-grid {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+@media (max-width: 576px) {
+  .tx-header {
+    padding-bottom: 0.75rem;
+  }
+  .tx-status-header {
+    padding: 1rem;
+    gap: 0.75rem;
+  }
+  .status-title {
+    font-size: 1.1rem;
+  }
+  .tx-info-grid {
+    padding: 1rem;
+    gap: 1.25rem;
+  }
+  .tx-address-section {
+    padding: 0.75rem;
+  }
+  .tx-metrics-grid {
+    grid-template-columns: 1fr;
+  }
+  .tx-actions {
+    flex-direction: column;
+    padding: 1rem;
+  }
+}
+.valuation-toggle {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.85rem;
+  color: rgba(var(--text-color), 0.8);
+  margin-top: 0.5rem;
+  margin-right: 0.5rem;
+}
+.toggle-switch {
+  position: relative;
+  display: inline-block;
+  width: 3rem;
+  height: 1.5rem;
+}
+.toggle-switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+.toggle-slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(var(--text-color), 0.2);
+  transition: 0.4s;
+  border-radius: 1.5rem;
+}
+.toggle-slider:before {
+  position: absolute;
+  content: "";
+  height: 1.1rem;
+  width: 1.1rem;
+  left: 0.2rem;
+  bottom: 0.2rem;
+  background-color: white;
+  transition: 0.4s;
+  border-radius: 50%;
+}
+input:checked + .toggle-slider {
+  background-color: var(--accent-color);
+}
+input:checked + .toggle-slider:before {
+  transform: translateX(1.5rem);
+}
+.transaction-controls {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 1rem;
+  padding: 0.5rem;
+  background-color: rgba(var(--text-color), 0.03);
+  border-radius: 0.5rem;
+  border: 1px solid rgba(var(--text-color), 0.08);
+}
+.filter-control {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.filter-control label {
+  font-size: 0.9rem;
+  color: rgba(var(--text-color), 0.8);
+  font-weight: 500;
+}
+.filter-control select {
+  padding: 0.4rem 0.6rem;
+  border-radius: 0.4rem;
+  border: 1px solid rgba(var(--text-color), 0.1);
+  background-color: rgba(var(--foreground-color), 1);
+  color: rgba(var(--text-color), 0.9);
+  font-size: 0.9rem;
+  cursor: pointer;
+  outline: none;
+}
+.margin-left-auto + .margin-left-auto {
+  display: none !important;
+}
+.filter-control select:focus {
+  border-color: var(--accent-color);
+}
+#bsc_balance_wrapper {
+  background-color: rgba(var(--text-color), 0.06);
+  padding: max(1rem, 1.5vw);
+  border-radius: 0.5rem;
+  width: 100%;
+}
+#bsc_balance_wrapper li:not(:last-of-type) {
+  border-bottom: solid thin rgba(var(--text-color), 0.3);
+  padding-bottom: 0.5rem;
+}

index.html

@@ -2853,6 +2853,7 @@
 
  
       function togglePrivateKeyVisibility(input) {
+        console.log(input)
   const target = input.closest("sm-input");
   // const checkBalanceButton = document.querySelector("#check_balance_button");
         console.log(target)
@@ -2976,6 +2977,7 @@
           });
       }
       function handleSenderInput(e) {
+        console.log(e.target.isValid)
         getRef("check_balance_button").disabled = false;
         if (!e.target.isValid) {
           // getRef("sender_balance_container").classList.add("hidden");