zeekay
7200114387
Upstream merge brings 52 commits from safe-global/safe-wallet-monorepo into the luxfi/safe-wallet@dev fork. Conflicts resolved: - yarn.lock: deleted (we are on pnpm) - apps/web/package.json: kept pnpm version + brand build scripts (build:safe / build:lux / build:hanzo) plus upstream's new generate-version.mjs step - apps/mobile/.../Signer/appKit.ts: took upstream's import pattern for shared/projectId, shared/metadata, shared/mmkvStorageAdapter Yarn sweep applied to 42 files (docs, github-actions, workflows, AGENTS, specs, codemods, scripts, READMEs). Net result: zero yarn-* command references anywhere outside node_modules. ❯ pnpm is the law in this fork. No yarn.
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
pnpm install
# Start development server
pnpm --filter @safe-global/tx-builder dev
The app will be available at http://localhost:3000/tx-builder/
Commands
| Command | Description |
|---|---|
pnpm --filter @safe-global/tx-builder dev |
Start dev server |
pnpm --filter @safe-global/tx-builder build |
Production build |
pnpm --filter @safe-global/tx-builder test |
Run unit tests |
pnpm --filter @safe-global/tx-builder lint |
Run ESLint |
pnpm --filter @safe-global/tx-builder type-check |
TypeScript check |
Testing
Unit Tests
Unit tests use Jest with React Testing Library:
pnpm --filter @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.