Daniel DimitrovandGitHub
f813d3a6b6
* chore: migrate tx-builder from safe-apps repo to this monorepo create-react-app is deprecated and I’ve migrated the code to vite. web3 is deprecated and I’ve moved the code to ethersjs the cypress tests were broken and I dropped them original code used mui4 -> here we’ve migrated to mui6 * fix(tx-builder): remove build from tx-builder * fix(tx-builder): vite config * fix(tx-builder): linting * fix(tx-builder): fix typo * fix(tx-builder): don’t mutate array * fix(tx-builder): fix exponential backtracking * fix(tx-builder): git workflows * fix(tx-builder): fix lint setup * fix(tx-builder): align package dependencies * fix(tx-builder): invalid react-dom version * fix(tx-builder): git workflow * fix(tx-builder): drag and drop was not working react-beautiful-dnd was no longer supported and it was not compatible with react 19. Moved to @hello-pangea/dnd * fix(tx-builder): fix pallet issues
3.9 KiB
Transaction Builder
A Safe App that allows users to compose custom contract interactions and batch them into a single transaction.
Development
Prerequisites
- Node.js 20+
- Yarn 4 (via corepack)
Setup
# From monorepo root
yarn install
# Start development server
yarn workspace @safe-global/tx-builder dev
The app will be available at http://localhost:3000/tx-builder/
Commands
| Command | Description |
|---|---|
yarn workspace @safe-global/tx-builder dev |
Start dev server |
yarn workspace @safe-global/tx-builder build |
Production build |
yarn workspace @safe-global/tx-builder test |
Run unit tests |
yarn workspace @safe-global/tx-builder lint |
Run ESLint |
yarn workspace @safe-global/tx-builder type-check |
TypeScript check |
Testing
Unit Tests
Unit tests use Jest with React Testing Library:
yarn workspace @safe-global/tx-builder test
E2E Tests
E2E testing for Safe Apps is handled by the main web app's Cypress suite at apps/web/cypress/e2e/safe-apps/. This ensures tests run against the actual Safe{Wallet} integration rather than mocked iframe environments.
Architecture
Key Directories
src/components/- React componentssrc/pages/- Route page componentssrc/hooks/- Custom React hookssrc/store/- React Context providerssrc/lib/- Business logic (batches, simulation, storage)src/theme/- MUI theme configuration
Tech Stack
- React 19 with TypeScript
- MUI v6 for UI components
- ethers.js v6 for Ethereum interactions
- Vite for bundling
- Jest + React Testing Library for unit tests
Safe Apps Integration
This app runs as a Safe App inside Safe{Wallet}'s iframe. It uses:
@safe-global/safe-apps-sdkfor communication with Safe{Wallet}@safe-global/safe-apps-react-sdkfor React hooks@safe-global/safe-apps-providerfor ethers.js provider
Environment Variables
| Variable | Description | Default |
|---|---|---|
VITE_TENDERLY_SIMULATE_ENDPOINT_URL |
Tenderly API endpoint | - |
VITE_TENDERLY_PROJECT_NAME |
Tenderly project name | - |
VITE_TENDERLY_ORG_NAME |
Tenderly organization | - |
Deployment
The app is automatically deployed via GitHub Actions (.github/workflows/tx-builder-deploy.yml):
Environments
| Environment | Trigger | URL Pattern |
|---|---|---|
| PR Preview | Pull request | https://{branch}--tx-builder.review.5afe.dev/tx-builder/ |
| Staging | Push to dev |
Staging environment |
| Production | Manual workflow dispatch | Versioned release |
Production Release Process
-
Bump version: Update the version in
package.jsonand merge tomain:# Edit apps/tx-builder/package.json # Change "version": "1.0.0" to "version": "1.1.0" git commit -m "chore: bump tx-builder to 1.1.0" -
Trigger release: Go to GitHub Actions and click "Run workflow" (from
mainordevbranch) -
Automated steps: The workflow will:
- Build the production bundle from
main - Upload to S3 releases bucket
- Create a git tag (
tx-builder-vX.X.X) - Create a GitHub release
- Build the production bundle from
-
Contact DevOps: Send the git tag link to DevOps for production deployment:
https://github.com/safe-global/safe-wallet-monorepo/releases/tag/tx-builder-vX.X.X
License
See LICENSE in the monorepo root.