chore: updated styles for contract calls
7d4b96cd
1 file(s) · +6 −45
| 387 | 387 | } |
|
| 388 | 388 | ||
| 389 | 389 | getStatusText() { |
|
| 390 | - | if (this.loading) return "Processing..."; |
|
| 391 | 390 | if (this.error) return `Error: ${this.error}`; |
|
| 392 | 391 | if (this.result) { |
|
| 393 | 392 | if (this.isReadOnly) { |
|
| 394 | 393 | return `Result: ${JSON.stringify(this.result)}`; |
|
| 395 | 394 | } else { |
|
| 396 | - | return `Transaction: ${this.result.transactionHash}`; |
|
| 395 | + | return `tx: ${this.result.transactionHash}`; |
|
| 397 | 396 | } |
|
| 398 | 397 | } |
|
| 399 | 398 | return ""; |
|
| 441 | 440 | ||
| 442 | 441 | .info-row { |
|
| 443 | 442 | display: flex; |
|
| 444 | - | justify-content: space-between; |
|
| 445 | - | align-items: center; |
|
| 443 | + | flex-direction: column; |
|
| 446 | 444 | } |
|
| 447 | 445 | ||
| 448 | 446 | .info-label { |
|
| 449 | 447 | font-weight: 600; |
|
| 450 | - | min-width: 80px; |
|
| 451 | 448 | } |
|
| 452 | 449 | ||
| 453 | 450 | .info-value { |
|
| 454 | 451 | font-family: monospace; |
|
| 455 | - | word-break: break-all; |
|
| 456 | - | text-align: right; |
|
| 457 | 452 | flex: 1; |
|
| 458 | - | margin-left: 12px; |
|
| 459 | - | } |
|
| 460 | - | ||
| 461 | - | .method-info { |
|
| 462 | - | background: rgba(255, 255, 255, 0.05); |
|
| 463 | - | border-radius: calc(var(--border-radius) / 2); |
|
| 464 | - | padding: 12px; |
|
| 465 | - | } |
|
| 466 | - | ||
| 467 | - | .method-signature { |
|
| 468 | - | font-family: monospace; |
|
| 469 | - | font-size: 13px; |
|
| 470 | - | color: var(--color-primary); |
|
| 471 | - | margin-bottom: 8px; |
|
| 453 | + | font-size: 12px; |
|
| 454 | + | text-align: start; |
|
| 472 | 455 | } |
|
| 473 | 456 | ||
| 474 | 457 | button { |
|
| 479 | 462 | border-radius: var(--border-radius); |
|
| 480 | 463 | cursor: pointer; |
|
| 481 | 464 | font-size: 16px; |
|
| 482 | - | font-weight: 600; |
|
| 483 | 465 | transition: background-color 0.3s ease; |
|
| 484 | 466 | } |
|
| 485 | 467 | ||
| 493 | 475 | } |
|
| 494 | 476 | ||
| 495 | 477 | .status { |
|
| 496 | - | padding: 12px; |
|
| 497 | 478 | border-radius: calc(var(--border-radius) / 2); |
|
| 498 | - | font-size: 14px; |
|
| 479 | + | font-size: 12px; |
|
| 480 | + | font-family: monospace; |
|
| 499 | 481 | word-break: break-all; |
|
| 500 | - | border: 1px solid; |
|
| 501 | 482 | border-color: ${this.getStatusColor()}; |
|
| 502 | - | background: ${this.getStatusColor()}20; |
|
| 503 | 483 | color: ${this.getStatusColor()}; |
|
| 504 | 484 | } |
|
| 505 | 485 | ||
| 547 | 527 | <span class="info-value">${this.contractAddress}</span> |
|
| 548 | 528 | </div> |
|
| 549 | 529 | `; |
|
| 550 | - | } |
|
| 551 | - | ||
| 552 | - | // Method info section |
|
| 553 | - | if (this.methodData) { |
|
| 554 | - | const methodInfo = document.createElement("div"); |
|
| 555 | - | methodInfo.className = "method-info"; |
|
| 556 | - | ||
| 557 | - | const inputs = this.methodData.inputs || []; |
|
| 558 | - | const inputTypes = |
|
| 559 | - | inputs.length > 0 |
|
| 560 | - | ? inputs.map((input) => `${input.type} ${input.name}`).join(", ") |
|
| 561 | - | : ""; |
|
| 562 | - | const signature = `${this.methodName}(${inputTypes})`; |
|
| 563 | - | ||
| 564 | - | methodInfo.innerHTML = ` |
|
| 565 | - | <div class="method-signature">${signature}</div> |
|
| 566 | - | `; |
|
| 567 | - | ||
| 568 | - | container.appendChild(methodInfo); |
|
| 569 | 530 | } |
|
| 570 | 531 | ||
| 571 | 532 | container.appendChild(contractInfo); |
|