Hubble Bridge V2 UI

[AtelyPham]

Summary of changes

• Introduce new UI for Hubble Bridge V2 which includes new features
  • Route based components and states
  • Custom relayer
  • Interaction with the bridge while no wallet connected.
  • ...

Proposed area of change

Put an x in the boxes that apply.

• apps/bridge-dapp
• apps/hubble-stats
• apps/stats-dapp
• apps/webbsite
• apps/faucet
• apps/tangle-website
• libs/webb-ui-components

Reference issue to close (if applicable)

• Closes [BUG] Fix colors not being applied to icons in webb-ui-kit #1384
• Closes [TASK] - Make the whole theme toggle switch component clickable. #1393
• Closes [BUG] Can't withdraw on Tangle EVM without a relayer #1595
• Closes [FEAT] Getting Leaf/Note Index For the Change Note on the Withdraw & Transfer Flows #1517
• Closes [BUG] Hubble Bridge Fails to Persist New Chain or Account Selection When Switched from MetaMask #1568
• Closes [TASK] Implement updated tx completion flow #1417
• Closes [FEAT] Insufficient liquidity check for unwrapping in withdrawal #1404
• Closes [FEAT] Make relayer as tx default method #1401
• Closes [FEAT] Custom relayer search and selection function #1418
• Closes [FEAT] Add refund feature to transfer flow #1402
• Closes [TASK] Enable user interaction without wallet connection #1519
• Closes [BUG] Relayer has not yet relayed the commitment to the destination chain #1516
• Closes [TASK] Add Bridge Hubble SideMenuBar #1467

Screen Recording

If possible provide a screen recording of proposed change.

---

Code Checklist

Please be sure to add .stories documentation if any additions are made to libs/webb-ui-components.

• I have added tests that prove my fix is effective or that my feature works
• I have added necessary documentation (if appropriate)

[github-actions]

✅ Deploy Preview for stats-dapp development is ready! Thanks for the contribution @AtelyPham

Name	Link
🔨 Latest commit	a4d0f73326fec03786ebbcd06dbd8c0d1e695f00
🔍 Latest deploy log	https://app.netlify.com/sites/development-stats/deploys/64f98ee15f835a52fc3f639a
😎 Deploy Preview	https://64f98ee15f835a52fc3f639a--development-stats.netlify.app

---

To edit notification comments on pull requests, go to your Netlify site settings.

[github-actions]

✅ Deploy Preview for bridge-dapp development is ready! Thanks for the contribution @AtelyPham

Name	Link
🔨 Latest commit	a4d0f73326fec03786ebbcd06dbd8c0d1e695f00
🔍 Latest deploy log	https://app.netlify.com/sites/development-hubble-bridge/deploys/64f98ef0981eec51c28a1710
😎 Deploy Preview	https://64f98ef0981eec51c28a1710--development-hubble-bridge.netlify.app

---

To edit notification comments on pull requests, go to your Netlify site settings.

[monaiuu]

Transaction Input Card Updates:

• Reposition 'Fixed' and 'Custom' amount labels.

• Adjust padding to 6px for top and bottom, improving bridge card height.

• Implement missing hover state in dark mode with fill color set to 'monochrome/170'.

• In light mode, update default fill color to 'monochrome/20' and hover state fill color to 'E2E5EB' at 30% opacity for better contrast.

• Standardize stepper amount display to show 2 decimal places.

• Incorporate tooltips for 'Fixed' and 'Custom' amounts as shown below.

• If user opts for no relayer, update copy to No relayer for clarity as shown below.

Figma Link

[monaiuu]

Overall Updates Checklist:

Functions:

• Remove the 'fixed amount' option from the transfer flow.

UI & Theme:

• Add drop shadow to bridge card for improved contrast from background:
  • Light mode: #000 at 10% opacity, Y=8, Blur=50
  • Dark mode: #000 at 20% opacity, Y=8, Blur=50

• Improve contrast for light theme toggle switch in checked state:
  • Update handle color from Light/Blue/10 to Light/Blue/40.

• Ensure the footer is anchored to the bottom on larger screens.
  

Navigation & Labels:

• Enhance breadcrumb usage for consistency with Hubble Stats:
  • First breadcrumb: 'Hubble Bridge'
  • Second breadcrumb: Specific tab (e.g., deposit, transfer, withdrawal)
  • Third breadcrumb: Selection card title

• Standardize chain list naming in chain selection (e.g., Sepolia & Goerli should include 'Ethereum').
• Use lowercase for 'webbAlpha' in token selection.

[github-actions]

✅ Deploy Preview for stats-dapp development is ready! Thanks for the contribution @AtelyPham

Name	Link
🔨 Latest commit	e2ffe21f114c9e6786cec8dae86dd0f039935e2f
🔍 Latest deploy log	https://app.netlify.com/sites/development-stats/deploys/64fb936f00d9d5635b8e1217
😎 Deploy Preview	https://64fb936f00d9d5635b8e1217--development-stats.netlify.app

---

To edit notification comments on pull requests, go to your Netlify site settings.

[github-actions]

✅ Deploy Preview for bridge-dapp development is ready! Thanks for the contribution @AtelyPham

Name	Link
🔨 Latest commit	e2ffe21f114c9e6786cec8dae86dd0f039935e2f
🔍 Latest deploy log	https://app.netlify.com/sites/development-hubble-bridge/deploys/64fb941f2ec0d9648fcd0a79
😎 Deploy Preview	https://64fb941f2ec0d9648fcd0a79--development-hubble-bridge.netlify.app

---

To edit notification comments on pull requests, go to your Netlify site settings.