Merge pull request #290 from Ejirowebfi/feat/issue-238-trade-creation

Feat/issue 238 Trade Creation Interface

Author: Mystery-CLI

frontend/index.html

@@ -81,6 +81,7 @@ <h1 class="logo">
                     <li role="none"><a href="#trade-dashboard" role="menuitem" class="nav-link" data-i18n="nav.tradeDashboard">My Trades</a></li>
                     <li role="none"><a href="#events" role="menuitem" class="nav-link" data-i18n="nav.events">View Events</a></li>
                     <li role="none"><a href="#search" role="menuitem" class="nav-link" data-i18n="nav.search">Search</a></li>
+                    <li role="none"><a href="#create-trade" role="menuitem" class="nav-link" data-i18n="nav.createTrade">Create Trade</a></li>
                     <li role="none"><a href="#history" role="menuitem" class="nav-link" data-i18n="nav.history">History</a></li>
                     <li role="none"><a href="#disputes" role="menuitem" class="nav-link" data-i18n="nav.disputes">Disputes</a></li>
                     <li role="none"><a href="#arbitrator" role="menuitem" class="nav-link" data-i18n="nav.arbitrator">Arbitrator</a></li>
@@ -1111,6 +1112,16 @@ <h3>API Accessibility Features</h3>
                 </div>
             </div>
         </section>
+        <!-- Create Trade Section -->
+        <section id="create-trade" aria-labelledby="tc-heading" class="section">
+            <div class="container">
+                <h2 id="tc-heading" class="section-title">Create Trade</h2>
+                <div class="td-panel tc-panel-wrap">
+                    <div id="tc-panel" role="region" aria-live="polite" aria-label="Trade creation form"></div>
+                </div>
+            </div>
+        </section>
+
         <!-- Transaction History Section -->
         <section id="history" aria-labelledby="hx-heading" class="section">
             <div class="container">
@@ -1237,5 +1248,6 @@ <h2 id="error-modal-title" class="error-modal-title">Something went wrong</h2>
     <script type="module" src="app.js"></script>
     <script src="dashboard.js"></script>
     <script src="history.js"></script>
+    <script src="trade-create.js"></script>
 </body>
 </html>

frontend/styles.css

@@ -2959,3 +2959,96 @@ body.offline .offline-indicator {
     .hx-timeline-item { flex-wrap: wrap; }
     .hx-timeline-time { margin-left: 0; }
 }
+
+/* ============================================================
+   Trade Creation Interface (#238)
+   ============================================================ */
+
+.tc-panel-wrap { max-width: 560px; }
+
+.tc-form { display: flex; flex-direction: column; gap: var(--space-md); }
+
+.tc-field { display: flex; flex-direction: column; gap: var(--space-xs); }
+
+.tc-label {
+    font-size: var(--font-size-sm);
+    font-weight: 500;
+    color: var(--color-text-secondary);
+}
+
+.tc-optional { color: var(--color-text-muted); font-weight: 400; }
+
+.tc-addr-input { font-family: monospace; font-size: var(--font-size-sm); }
+
+.tc-amount-row { flex-direction: row; align-items: flex-end; gap: var(--space-sm); }
+.tc-amount-group { flex: 1; display: flex; flex-direction: column; gap: var(--space-xs); }
+.tc-currency-group { display: flex; flex-direction: column; gap: var(--space-xs); }
+
+.tc-arb-select { width: 100%; }
+
+.tc-field-error {
+    font-size: var(--font-size-sm);
+    color: var(--color-error, #f87171);
+}
+
+.tc-input-error {
+    border-color: var(--color-error, #f87171) !important;
+    outline-color: var(--color-error, #f87171);
+}
+
+.tc-actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; margin-top: var(--space-sm); }
+
+/* Preview */
+.tc-preview-note {
+    color: var(--color-text-muted);
+    font-size: var(--font-size-sm);
+    margin-bottom: var(--space-md);
+}
+
+.tc-preview-grid { margin-bottom: var(--space-lg); }
+
+.tc-fee-note { color: var(--color-text-secondary); }
+.tc-fee-hint { font-size: var(--font-size-sm); color: var(--color-text-muted); }
+
+/* State panels (submitting / success / error) */
+.tc-state-panel {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    padding: var(--space-xl) var(--space-lg);
+    gap: var(--space-sm);
+}
+
+.tc-state-title { font-size: var(--font-size-lg); font-weight: 600; }
+
+.tc-spinner {
+    display: inline-block;
+    width: 36px; height: 36px;
+    border: 3px solid var(--color-border);
+    border-top-color: var(--color-accent-primary);
+    border-radius: 50%;
+    animation: tc-spin 0.8s linear infinite;
+}
+@keyframes tc-spin { to { transform: rotate(360deg); } }
+
+.tc-success-icon {
+    font-size: 2.5rem;
+    color: #22c55e;
+    line-height: 1;
+}
+
+.tc-error-icon {
+    font-size: 2.5rem;
+    color: var(--color-error, #f87171);
+    line-height: 1;
+}
+
+.tc-error-msg { color: var(--color-error, #f87171); max-width: 400px; }
+
+.tc-tx-hash { font-size: var(--font-size-sm); color: var(--color-text-muted); word-break: break-all; }
+
+@media (max-width: 640px) {
+    .tc-amount-row { flex-direction: column; }
+    .tc-panel-wrap { max-width: 100%; }
+}