Feat: integrate the MessagePassingBridge

[L03TJ3]

1) Summary

GoodProtocolUI currently exposes the MicroBridge flow at /microbridge but this only suppports fuse <> celo.
We need to add a new coexisting bridge page named GoodBridge at /goodbridge, built with the Message Passing Bridge (MPB) UI/controller patterns from GoodDollar’s shared design/sdk packages. The new page must follow existing GoodProtocolUI layout conventions (PageLayout, FAQ area, wallet gating) and must be feature-flagged for controlled rollout. Minipay users must not see GoodBridge in navigation. This bounty improves bridge UX consistency while keeping MicroBridge intact.

2) Desired behavior

• A new route /goodbridge exists and renders a GoodBridge page; /microbridge remains unchanged and functional.
• The GoodBridge page follows current bridge page structure: PageLayout + FAQ panel + wallet-gated content.
• When wallet is disconnected, users see the same style of “connect wallet” placeholder behavior used in current bridge pages.
• When wallet is connected, page mounts MPB controller/UI from @gooddollar/good-design (expected to be available as root export in latest version).
• Bridge chain/provider/route options are driven by MPB flow and fee API behavior (no custom hardcoded route matrix in GoodProtocolUI).
• Proper user-facing error feedback is shown for RPC/bridge failures (reusing MPB default error handling patterns where possible).
• GoodBridge visibility is controlled by feature flag goodBridgeEnabled and hidden from minipay navigation.
• No regression to existing MicroBridge navigation, route, or behavior.

3) Scope

In scope

• Add a new GoodBridge page component under src/pages/gd.
• Add lazy route registration for /goodbridge.
• Add sidebar entry for GoodBridge under Bridges section.
• Wire feature-flag behavior for goodBridgeEnabled in relevant UI surfaces.
• Enforce minipay navigation exclusion for GoodBridge.
• Reuse existing layout and wallet-gating patterns from current MicroBridge page.
• Keep implementation aligned with existing good-design/sdk-v2 MPB flow behavior.
• Update sdk-v2 and good-design dependencies to latest deployed version.

Out of scope

• Replacing or removing existing /microbridge flow.
• Final GoodBridge FAQ content authoring (copy will be provided later, just make sure PageLayout is used properly in line with the other pages).

4) Starting points

• src/pages/gd/MicroBridge/index.tsx — reference for current bridge page composition, SwitchChainModal, and wallet placeholder gating.

• src/routes.tsx — add lazy import + route for /goodbridge.

• src/components/SideBar.tsx — add GoodBridge nav item under Bridges, with minipay + feature-flag visibility logic.

• src/hooks/useFeaturesEnabled.tsx — add/use goodBridgeEnabled in feature config and consumer checks.

• src/components/Layout/PageLayout.tsx — shared layout contract for page title + FAQ placement.

• src/components/Faq/copies.tsx — prepare bridge FAQ integration point for future GoodBridge copy updates.

  (GoodWeb3-Mono reference): find in https://github.com/GoodDollar/GoodWeb3-Mono

• packages/good-design/src/apps/bridge/mpbridge/MPBBridgeController.tsx (GoodWeb3-Mono reference) — target controller behavior.

• packages/sdk-v2/src/sdk/mpbridge/* (GoodWeb3-Mono reference) — source of truth for bridge fees/routes/validation and flow states.

• See the demo story example of how it can be integrated in: https://github.com/GoodDollar/GoodWeb3-Mono/blob/master/packages/good-design/src/stories/apps/bridge/MicroBridgeController.stories.tsx
  The demo should not by default be taken as is. make sure it fits within the existing structure of GoodProtocolUI and the behavior from the demo make sense. eg. do we need switchchainModal? how is it handled in other places in ProtocolUI?

5) DoD + How to test

DoD

• /goodbridge route is implemented and accessible in GoodProtocolUI.
• New GoodBridge page is added and follows PageLayout + FAQ side panel pattern.
• Wallet-disconnected state shows connect-wallet placeholder; connected state mounts MPB controller.
• Sidebar includes GoodBridge entry under Bridges with goodBridgeEnabled gating.
• GoodBridge sidebar entry is hidden for minipay users.
• /microbridge flow remains intact (no behavior regression).
• RPC/bridge failures present actionable user feedback (no silent failures).
• yarn lint and yarn build pass.
• Properly test on mobile. If there are changes or fixes needed in the UI components, please ask for help.
• PR includes desktop + mobile screenshots, + a demo video for the full flow. Ping maintainers on telegram or on github to request tokens to test

How to test

# from GoodProtocolUI repo

yarn install

yarn lint
yarn build

yarn start

Manual QA:

1. Open /goodbridge disconnected: verify placeholder.
2. Connect wallet: verify MPB UI loads and can select chain/provider.
3. Verify available routes adapt based on fee availability (no hardcoded mismatch).
4. Trigger a bridge attempt and verify pending/success/error UX states.
5. Verify /microbridge still behaves as before.
6. Verify GoodBridge nav visibility toggles correctly for goodBridgeEnabled and remains hidden in minipay.

[Gutopro]

Hi @L03TJ3 can you assign this to me?

[L03TJ3]

Sure, since its your first time contributing make sure you aware of the Contribution Guidelines

If questions, dont hesitate to ask. Either on github, or we are also available on telegram

[Gutopro]

Thanks I'll be sure to read it and drop my weekly updates @L03TJ3

[Gutopro]

Hi @L03TJ3 I've gone through the CONTRIBUTING.md file and I've forked the GoodProtocolUI repository and I have cloned it. Now I have used yarn to install the dependencies and i ran yarn start to spin up my local sever it runs on port 3000 of localhost, I realize that when I visit the url on my browser it's a blank page, I don't get any logs in my terminal except that it's running on localhost:3000/ however when I visit the site it is blank nothing is rendered. For Yacl I'm I suppose to run the following commands in my repository root directory? What is it for?

[Gutopro]

Hi @L03TJ3 any updates on this? and would you prefer I ask questions in telegram or here is okay for faster feedback > Hi @L03TJ3 I've gone through the CONTRIBUTING.md file and I've forked the GoodProtocolUI repository and I have cloned it. Now I have used yarn to install the dependencies and i ran yarn start to spin up my local sever it runs on port 3000 of localhost, I realize that when I visit the url on my browser it's a blank page, I don't get any logs in my terminal except that it's running on localhost:3000/ however when I visit the site it is blank nothing is rendered. For Yacl I'm I suppose to run the following commands in my repository root directory? What is it for?

[L03TJ3]

I see that we are missing some setup steps in the instructions. will make sure they are updated going forward.

You need to add a new file at root called .env
and use these minimal environment variables to load the app locally:

DISABLE_ESLINT_PLUGIN=true
BROWSER=none
PUBLIC_URL='public'
REACT_APP_DATASTUDIO_DASHBOARD_URL=https://datastudio.google.com/embed/u/0/reporting/3c056ecc-2895-422c-9724-a12891dba5b6/page/mlwTB
REACT_APP_NETWORK=development-celo
REACT_APP_FUSE_RPC=https://rpc.fuse.io
REACT_APP_MAINNET_RPC='https://1rpc.io/eth,https://eth.llamarpc.com'
REACT_APP_CELO_PHASE_1=1
REACT_APP_CELO_PHASE_2=1
REACT_APP_CELO_PHASE_3=1
REACT_APP_CELO_RPC=https://forno.celo.org
REACT_APP_FEEDCONTEXT_PROD=kjzl6cwe1jw149ao1fmo5ip9866yqmyt2wpf6zaeinam7w02s00pdeitldtmjxc
REACT_APP_POSTHOG_KEY=phc_VfJkmAUgLw36oH4oYeDmJHsvRrURBYF5zaFUeSKgfgD
REACT_APP_POSTHOG_PROXY=https://vercelrp.gooddapp.org/ingest/
REACT_APP_GOODID_CELO_EXPLORER=https://celo.blockscout.com/api?
REACT_APP_XDC_RPC=https://rpc.ankr.com/xdc
REACT_APP_EXCLUDED_RPCS="tatum"

# REACT_APP_GRAPH_KEY=<optional, but can be requested from thegraph.com in subgraph studio>
# REACT_APP_ETHERSCAN_KEY=<optional, but can be requested from etherscan.com>
# REOWN_PROJECT_ID=<you can request a project id on cloud.reown.com if it does not work without it>

---

On yalc: its purely a developer tool for when you are making changes to our sdks and want to test them locally (like our sdk-v2 and good-design packages, coming from Web3-Mono repo.

As long as the things you work on are solely inside the protocolUI repo, yalc is not relevant to be used.

[L03TJ3]

@Gutopro. it was weekend so responses can take a bit longer.
communication can happen both here or in telegram, whatever you prefer. I get notifications from both channels :)

[Gutopro]

Thanks @L03TJ3 I'm on it, I'll be sure to update you on my progress

[Gutopro]

So once I add the .env and add the lines of code below when I run yarn start the site will load correctly

[L03TJ3]

@Gutopro
yes.
flow:

• git clone
• yarn install --immutable
• add .env > copy-paste what I shared
• yarn start