zeekayandHanzo Dev
0988173773
typescript 7.0.2 is the native compiler and exports no JavaScript API, so next, ts-jest and typescript-eslint cannot read it. It comes in aliased as tsgo and does the typechecking; typescript stays on the 6 line for those tools. Four settings the native compiler removed move with it. baseUrl is gone, so every tsconfig that used it spells its own root as a "*" path; the shared base config's @safe-global/* paths were only correct because baseUrl re-rooted them, and now name the real directories from where they are written. moduleResolution node10 becomes bundler, downlevelIteration goes (it was a no-op at target esnext), and apps/web declares '*.css' and '*.md'. Two sources follow: the faker import drops its trailing '/.', and the IntersectionObserver mock gains scrollMargin. All eight packages report 0 diagnostics before and after, identical on 6.0.3 and 7.0.2. Co-authored-by: Hanzo Dev <[email protected]>
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.