feat(tangle-dapp): Implement stake & unstake liquifier functionality for EVM-based liquid staking

[yurixander]

Summary of changes

Provide a detailed description of proposed changes.

• ➕ Users can now liquid stake and unstake assets for EVM-based chains: Polygon, Livepeer, and Chainlink. More ERC20-based tokens can be easily added and integrated as needed.
• ➕ On development, Sepolia Testnet is used to interact with some dummy/skeleton liquifier contracts that I deployed. These contracts have the same signature as the actual contracts but with dummy data. This allows for easier testing and development of the liquifier interface.
• ➕ Added useful step indicator for the processing notification (ex. (1/2)), since the liquid staking process for EVM-based chains is composed of two steps (approve ERC20 for spending, then call liquifier contract).
• 🔧 Re-organized liquid staking page structure, since now it is no longer a specific page per token.
• 🔧 Generalized liquid staking logic to accommodate for non-Substrate based chains. This should make it easier to integrate new protocols in the future.
• 🐛 Fixed bug where scroll area was not scrollable when selecting/changing liquid staking networks.
• 🐛 Fixed bug where inputting large amounts into the amount input would cause an error to be thrown.

Proposed area of change

Put an x in the boxes that apply.

• apps/bridge-dapp
• apps/hubble-stats
• apps/stats-dapp
• 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 [FEAT] Add stake & unstake liquifier functionality for Ethereum-based tokens such as Chainlink #2446

Screen Recording

If possible provide a screen recording of proposed change.

evm.liquid.stake.unstake.mp4

---

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]

✅ Deploy Preview for tangle-dapp ready!

Name	Link
🔨 Latest commit	d8b0f0b
🔍 Latest deploy log	https://app.netlify.com/sites/tangle-dapp/deploys/66c83e3d9dce5d0008ff4943
😎 Deploy Preview	https://deploy-preview-2500--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.

[drewstone]

With the introduction of Liquifie, it might be better to call them LsProtocolId unless we will map these protocols to chains and use Ethereum chain ID as a common parameter for staking protocols on Ethereum (Chainlink, Graph, Livepeer, etc.)

[yurixander]

Nearly ready to submit for review here. Just need to cleanup logic and errors.

[AtelyPham]

LGTM 👍!

[drewstone]

My take is that we should use chain selection for chains and token selection for protocols.

Right now it looks like you're conflating chain selection with protocols, which creates unnecessarily many options. Ethereum should be what you select for LINK and it should show all valid tokens for Liquid Staking on Ethereum (LINK, GRAPH, Livepeer, etc.), Polygon would be a chain as well and MATIC on that chain.

If this messes with how the naming conventions are in code we should modify things so its clear on this front. But it should be preserved that we use chains for the label that simiarly says Tangle Parachain/Polkadot/etc.

[yurixander]

Ok gotcha so where it says Chainlink I would instead show the chain (Ethereum Mainnet) and then where it says LINK it would be the token on that chain? @drewstone

[drewstone]

Correct @yurixander. I think that slot is best for chain selection so its clear when you're bridging from one chain to another. Therefore, it can be clear if you're liquid staking and remaining on Ethereum vs bridging to Tangle.

[yurixander]

Correct @yurixander. I think that slot is best for chain selection so its clear when you're bridging from one chain to another. Therefore, it can be clear if you're liquid staking and remaining on Ethereum vs bridging to Tangle.

Makes sense and I agree. I'll implement that in my other PR.