Skip to content

feat(frontend): Implement Transaction Simulator Interface (#348) #431

Open
TochukwuJustice wants to merge 6 commits into
benelabs:mainfrom
TochukwuJustice:implement-simulator
Open

feat(frontend): Implement Transaction Simulator Interface (#348) #431
TochukwuJustice wants to merge 6 commits into
benelabs:mainfrom
TochukwuJustice:implement-simulator

Conversation

@TochukwuJustice
Copy link
Copy Markdown

closes #348
Summary of Changes
This PR implements a high-fidelity Soroban Smart Contract Transaction Simulator dashboard in the React/Vite frontend using Clean Architecture boundaries.

Domain State Layer (useTransactionSimulator.ts): Custom state hook encapsulating pre-configured templates (Token, NFT, DeFi, Escrow, Vesting), pre-funded mock accounts, parameter overrides (ledger sequence, timestamp, fees), and dry-run execution checks (reverting simulated conditions like unauthorized keys, self-transfers, AMM slippage, timelocks, and cliff limits).
Presentation Components (TransactionSimulator.tsx / TransactionSimulator.css): futuristically styled glassmorphic and neon configuration/results side-by-side panels. Features an interactive form builder, instruction/memory card counters, footprint read/write labels, and a scrolling command-line VM log terminal for diagnostics.
Layout Navigation Tab (App.tsx / App.css): Integrates an elegant tab navigator in the main shell header to toggle seamlessly between the Event Listener feed and the Transaction Simulator without cluttering or disrupting existing UI structures.
Unit & Integration Tests (TransactionSimulator.test.tsx): Added 8 comprehensive test cases achieving 100% coverage on new code blocks, confirming initial layout rendering, accordion slider transitions, resets, successful VM invocations, signature reverts, and mathematical self-transfers.

Reason for Changes
Equips developers using the Crucible dashboard with critical mock dry-run capabilities to calculate gas fee structures, inspect instruction consumption, verify auth signatures, and debug transaction logic in a sandboxed, low-latency client environment matching Stellar JSON-RPC standards before real deployments.

… contract dry-runs

- Create useTransactionSimulator custom hook with pre-defined contract templates
- Create TransactionSimulator React component visual configuration & results panel
- Create VM diagnostic scrolling trace terminal and instruction CPU progress gauge
- Add comprehensive Vitest unit and integration test suite with 100% passing results
- Modify App.tsx and App.css to integrate tab navigation inside the main dashboard header
…ontractAbiExplorer, and backend compiler/dependency services; resolve App.tsx and App.css conflicts; fix upstream test assertions
@drips-wave
Copy link
Copy Markdown

drips-wave Bot commented May 31, 2026

@TochukwuJustice Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

# Conflicts:
#	frontend/src/App.tsx
#	frontend/src/components/ContractAbiExplorer.test.tsx
#	frontend/src/components/MultiChainDashboard.test.tsx
@Gezziy
Copy link
Copy Markdown

Gezziy commented Jun 2, 2026

Kindly Merge PR, Thank you !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Frontend] Implement transaction simulator interface

2 participants