[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

[jmg-duarte]

Can't build (Podman & Docker)

#49 [sourcify  5/10] RUN npm install && npm run build:lerna
#49 CANCELED

#45 [explorer node-build 3/6] RUN --mount=type=cache,target=/var/cache/apt,sharing=locked apt-get update &&     apt-get install -y git libssl-dev pkg-config git autoconf automake file g++ libtool make python3
#45 CANCELED
------
 > [frontend node-build 5/6] RUN yarn install --frozen-lockfile --no-cache:
0.293 error This project's package.json defines "packageManager": "yarn@[email protected]". However the current global version of Yarn is 1.22.22.
0.293 
0.293 Presence of the "packageManager" field indicates that the project is meant to be used with Corepack, a tool included by default with all official Node.js distributions starting from 16.9 and 14.19.
0.293 Corepack must currently be enabled by running corepack enable in your terminal. For more information, check out https://yarnpkg.com/corepack.
------
Dockerfile.cowswap:26

@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

The PR allows to customize the link, not the name. Renaming it to "block explorer" or making it a variable to properly reflect the name of the underlying link would be better. Just that.

[augustocollerone]

Can't build (Podman & Docker)

#49 [sourcify  5/10] RUN npm install && npm run build:lerna
#49 CANCELED

#45 [explorer node-build 3/6] RUN --mount=type=cache,target=/var/cache/apt,sharing=locked apt-get update &&     apt-get install -y git libssl-dev pkg-config git autoconf automake file g++ libtool make python3
#45 CANCELED
------
 > [frontend node-build 5/6] RUN yarn install --frozen-lockfile --no-cache:
0.293 error This project's package.json defines "packageManager": "yarn@[email protected]". However the current global version of Yarn is 1.22.22.
0.293 
0.293 Presence of the "packageManager" field indicates that the project is meant to be used with Corepack, a tool included by default with all official Node.js distributions starting from 16.9 and 14.19.
0.293 Corepack must currently be enabled by running corepack enable in your terminal. For more information, check out https://yarnpkg.com/corepack.
------
Dockerfile.cowswap:26

@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

The PR allows to customize the link, not the name. Renaming it to "block explorer" or making it a variable to properly reflect the name of the underlying link would be better. Just that.

Hey @jmg-duarte, I've pushed a fix for the build failure.

After investigating, it turns out this issue is not related to this PR - it's a pre-existing problem in the main branch. The cowswap repository cowprotocol/cowswap#6847, and since our Dockerfiles clone without specifying a branch, they pull the develop branch which now requires pnpm. This would break the playground build for anyone, regardless of which branch they're on.

I've updated both Dockerfile.cowswap and Dockerfile.explorer to:

• Enable Corepack (Node's built-in package manager handler)
• Auto-detect whether to use yarn or pnpm based on the packageManager field in package.json

I've tested locally and confirmed the build now completes successfully. Let me know if it works on your end.

Regarding the "Etherscan" label naming - I can take a look at that in the cowswap repo, but it will likely involve more changes than just updating a string given how many places those labels are used. If you're okay with it, we can move forward with merging this PR and I'll address the label change separately in the other repo.