Add transaction decoder tool#59
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR adds a transaction decoder tool to the documentation site that allows users to decode Cardano transaction CBOR hex into readable JSON format. The tool is accessible at /tools/tx-decoder and provides a simple interface for pasting transaction hex and viewing the decoded output.
Key Changes:
- New transaction decoder component with client-side CBOR decoding functionality
- Moved
@evolution-sdk/evolutionfrom devDependencies to dependencies in docs package to support client-side usage - Removed Devnet exports from main package index (preparatory refactoring)
- Added turbopack configuration for development mode module resolution
Reviewed Changes
Copilot reviewed 7 out of 9 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| docs/app/tools/tx-decoder/transaction-decoder.tsx | New React component implementing the transaction decoder UI with form controls and JSON display |
| docs/app/tools/tx-decoder/page.tsx | Page wrapper for the transaction decoder tool with metadata |
| docs/content/docs/index.mdx | Added card linking to the new transaction decoder tool |
| docs/package.json | Moved @evolution-sdk/evolution to dependencies for client-side import |
| docs/tsconfig.json | Removed TypeScript path mappings (now using workspace package resolution) |
| docs/next.config.mjs | Added turbopack resolveAlias for development mode |
| docs/next-env.d.ts | Updated types path reference |
| packages/evolution/src/index.ts | Removed Devnet exports (refactoring to separate package) |
| pnpm-lock.yaml | Updated dependency tree reflecting package movements and new evolution-devnet package references |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <button | ||
| onClick={decodeTx} | ||
| className="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors" | ||
| > | ||
| Decode Transaction | ||
| </button> |
There was a problem hiding this comment.
[nitpick] The "Decode Transaction" button is positioned before the input textarea, which creates a poor user experience. Users typically expect to enter data first before seeing the action button to process it. Consider moving the button below the textarea for a more intuitive flow.
| const [decodedJson, setDecodedJson] = useState<string>("") | ||
| const [error, setError] = useState<string | null>(null) | ||
|
|
||
| const decodeTx = async () => { |
There was a problem hiding this comment.
The decodeTx function is declared as async but doesn't use await or return a Promise. The Core.Transaction.fromCBORHex() and related operations are synchronous. Remove the async keyword to accurately reflect the function's behavior.
| const decodeTx = async () => { | |
| const decodeTx = () => { |
Adds a transaction decoder tool to the docs at /tools/tx-decoder that decodes CBOR transaction hex into readable JSON format.