[M2] Integrate block explorer URL override for Otterscan

[augustocollerone]

Summary

This is a copy of a stale PR

This PR delivers part of Milestone 2: Frontend Integration of the CoW Grants Program RFP: CoW Protocol Playground Block Explorer Integration proposal by CoBuilders.

Updates the CoW Swap and Explorer Dockerfiles to use REACT_APP_BLOCK_EXPLORER_URL, enabling all block explorer links to point to the local Otterscan instance (port 8003) instead of Etherscan.

Milestone 2 Deliverables

CoW Swap Frontend Integration

• Configure REACT_APP_BLOCK_EXPLORER_URL=http://localhost:8003 in build
• Transaction hash links point to local Otterscan
• Address links point to local Otterscan
• All navigation flows work correctly

CoW Explorer Frontend Integration

• Configure REACT_APP_BLOCK_EXPLORER_URL=http://localhost:8003 in build
• "View on Blockchain" links point to local Otterscan
• Address and token links point to local Otterscan
• All navigation flows work correctly

Success Criteria

"One-click navigation from frontends to the local block explorer for all transactions and addresses"

• Clicking any explorer link in CoW Swap (port 8000) → Opens in Otterscan (port 8003)
• Clicking any explorer link in CoW Explorer (port 8001) → Opens in Otterscan (port 8003)

Changes

Modified Files

File	Changes
Dockerfile.cowswap	Added REACT_APP_BLOCK_EXPLORER_URL build arg
Dockerfile.explorer	Added REACT_APP_BLOCK_EXPLORER_URL env var

Architecture

┌─────────────┐     ┌─────────────┐
│  CoW Swap   │     │ CoW Explorer│
│ (port 8000) │     │ (port 8001) │
└──────┬──────┘     └──────┬──────┘
       │                   │
       │   All explorer    │
       │   links now       │
       │   point to ───────┤
       │                   │
       └───────────┬───────┘
                   │
                   ▼
           ┌─────────────┐
           │  Otterscan  │
           │ (port 8003) │
           └─────────────┘

Dependencies

This PR depends on:

• PR: cowprotocol/cowswap#XXX - Adds REACT_APP_BLOCK_EXPLORER_URL env var support

Testing

1. Start the playground:

   docker compose -f docker-compose.fork.yml up --build

2. Open CoW Swap at http://localhost:8000:

   • Make a swap or view transaction history
   • Click any "View on Explorer" or transaction link
   • Expected: Opens http://localhost:8003/tx/{hash}

3. Open CoW Explorer at http://localhost:8001:

   • Browse any order or transaction
   • Click any address or transaction link
   • Expected: Opens http://localhost:8003/address/{addr}

4. Verify Otterscan shows the transaction/address details with full traces

Demo

1. User clicks transaction in CoW Swap
2. Otterscan opens with full transaction details
3. Traces, logs, and gas profiling visible locally

Milestones

Milestone	Description	Status
M1	Otterscan Integration	PR #4000
M2	Frontend Integration	This PR (+ cowswap PR)
M3	Documentation	Pending

---

Submitted by CoBuilders as part of the CoW Grants Program

[gemini-code-assist]

Code Review

This pull request integrates Otterscan as the local block explorer by updating Docker configurations and adding new services for Otterscan and Sourcify. My review identifies several opportunities to improve the long-term maintainability and reproducibility of the playground environment. Key suggestions include pinning base images and git dependencies to specific versions to prevent unexpected breakages, and optimizing Dockerfiles for better layer caching and clarity.

[gemini-code-assist]

Cloning the master branch makes the build non-reproducible, as master can change at any time, potentially introducing breaking changes. It is strongly recommended to clone a specific git tag or commit hash to ensure deterministic and stable builds.

RUN git clone --depth 1 --branch v1.2.0 --recurse-submodules https://github.com/argotorg/sourcify.git /sourcify

[gemini-code-assist]

The variable REACT_APP_EXPLORER_URL_DEV is defined but appears to be unused in the rest of the file. The build command only passes REACT_APP_BLOCK_EXPLORER_URL. If this variable is not needed, it should be removed to avoid confusion.

[gemini-code-assist]

The REACT_APP_BLOCK_EXPLORER_URL environment variable is already set for the build stage using the ENV instruction on line 18. It is redundant to set it again on the RUN command line, as the build process will automatically pick up the variable from the environment. Removing the redundancy improves clarity.

RUN APP_ID=1 yarn build:explorer

[jmg-duarte]

In the gif, the link you click is still named Etherscan though, it can be a bit confusing for playground users

[augustocollerone]

In the gif, the link you click is still named Etherscan though, it can be a bit confusing for playground users

@jmg-duarte that could be an improvement to make but it would not live in this repo but rather in Cowswap repo, where the PR for this feature was already merged