feat(tangle-dapp): Hyperlane Integration

[vutuanlinh2k2]

Summary of changes

Provide a detailed description of proposed changes.

• Add Hyperlane Integration for bridging assets for EVM-to-EVM tx (using WETH for testing) (Hyperlane route config allows bridging one way only, need to add another route if needed but it should work the same)
• Update logic for BridgeContext and BridgeTxQueueContext
• Add Holesky to chainsConfig

Proposed area of change

Put an x in the boxes that apply.

• [ ] apps/bridge-dapp
• [ ] apps/hubble-stats
• [ ] apps/stats-dapp
• [x] apps/tangle-dapp
• [ ] apps/testnet-leaderboard
• [ ] apps/faucet
• [ ] apps/zk-explorer
• [ ] libs/webb-ui-components

Reference issue to close (if applicable)

Specify any issues that can be closed from these changes (e.g. Closes #233).

• Closes

Screen Recording

If possible provide a screen recording of proposed change.

https://github.com/user-attachments/assets/7a950da2-b49b-46cf-a0dd-058fb5f3491d

---

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)

[netlify[bot]]

✅ Deploy Preview for tangle-dapp ready!

Name	Link
🔨 Latest commit	febaf8dfdb85e6f0b8219d352799cdb49b0f4db0
🔍 Latest deploy log	https://app.netlify.com/sites/tangle-dapp/deploys/66d99900e1a29f0008ca0815
😎 Deploy Preview	https://deploy-preview-2525--tangle-dapp.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[yurixander]

CI failing 👀 @vutuanlinh2k2

[yurixander]

@vutuanlinh2k2

Some quick questions here:

• So far I'm only able to bridge from testnets, is this intended as testnet only for the time being?
• The only asset available is sygUSD and WETH. This means that I must have sygUSD or WETH, in, say, Sepolia or eventually Ethereum Mainnet?

Some possible issues:

• [x] There seems to be a tiny bug showing undefined for the symbol:
• [x] It is letting me attempt to transact even though the balance is 0 (when I click max it bypasses the 0 check):
• [x] Clicking the collapse button does not perform an action:
• [ ] Rococo Phala chain and sygUSD asset's icons are missing:

[drewstone]

Yes @yurixander currently deployments are only on Testnet, Hyperlane should be on mainnet too so we just need to configure it.

[devpavan04]

QA on the integration!

• I was able to bridge WETH from Holesky to Sepolia sucessfully ✅

https://github.com/user-attachments/assets/f0298bdc-d12c-4ac5-ad2f-a90efcd0bfc3

• Asset icon is missing here.

Here's a bug I encountered. See the screen recording below.

• I have enough balance on Sepolia to bridge to Holesky, and the Transfer button is enabled when I enter an amount and a destination address. ✅
• When I switch the destination chain to Roccoco Phala, where I don't have a sygUSD balance on Sepolia, the Transfer button is correctly disabled. ✅
• The bug occurs when I switch back to Holesky, where I do have a WETH balance on Sepolia. The Transfer button remains disabled when it should be enabled. ⚠️

https://github.com/user-attachments/assets/94cfd135-0088-4663-92f5-30aa07d9187d

• I believe the error message in red, Wrong EVM Chain Connected, doesn't need to be an error. We should inform the user that the connected chain and the selected source chain do not match, so they need to switch. Additionally, the message could be changed to Wallet and Source Chain Mismatch, as shown in the second screenshot below.

[drewstone]

@devpavan04 can you fix up the items you found in your QA and ready this PR for merging? You're correct that the functionality when on the wrong chain should be to make the button automatically switch chains when the user goes to transact.

[devpavan04]

https://github.com/user-attachments/assets/5e7f984f-2440-47c9-a31c-2cda810ccf32

https://github.com/user-attachments/assets/999168e2-d650-42ad-8b63-b8c76013d228

[AtelyPham]

Add https://stats.tangle.tools to .lycheeignore to resolve the CI issue, @devpavan04.

[drewstone]

Can we make sure to remove outdated DNS records we’re not using anymore from any Netlify sites too?

On Wed, Sep 4, 2024 at 2:15 PM Trung-Tin Pham @.***> wrote:

Add https://stats.tangle.tools to .lycheeignore https://github.com/webb-tools/webb-dapp/blob/develop/.lycheeignore to resolve the CI issue, @devpavan04 https://github.com/devpavan04.

— Reply to this email directly, view it on GitHub https://github.com/webb-tools/webb-dapp/pull/2525#issuecomment-2327938466, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADELLF4Z26Q3PP6O33FXL63ZU2JQVAVCNFSM6AAAAABNGMVNFGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGMRXHEZTQNBWGY . You are receiving this because your review was requested.Message ID: @.***>

[AtelyPham]

Can we make sure to remove outdated DNS records we’re not using anymore from any Netlify sites too? … On Wed, Sep 4, 2024 at 2:15 PM Trung-Tin Pham @.> wrote: Add https://stats.tangle.tools to .lycheeignore <https://github.com/webb-tools/webb-dapp/blob/develop/.lycheeignore> to resolve the CI issue, @devpavan04 https://github.com/devpavan04. — Reply to this email directly, view it on GitHub <#2525 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADELLF4Z26Q3PP6O33FXL63ZU2JQVAVCNFSM6AAAAABNGMVNFGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGMRXHEZTQNBWGY . You are receiving this because your review was requested.Message ID: @.>

I'll handle that shortly.