Helder demo

[thedevbirb]

This PR modifies the interface flow to show an example of inclusion preconfirmation on a real app leveraging the Bolt RPC and proposers running the Bolt sidecar on the Helder testnet.

Tasklist

• Get familiar with the Uniswap Interface codebase. It is pretty complex but very type-safe and well written, surely with extensibility in mind.
• Integrate the Helder testnet: general configuration; prompt user to add chain if missing; switch between chains smoothly.
• Send transactions using Metamask wallet_sendTransaction JSON-RPC method to just test the flow and the integration with the Bolt RPC -> Lead to some tiny fixes in the Bolt RPC + we know have https://bolt.chainbound.io/rpc!
• Retrieve user ETH balance on Helder using the eth_getBalance with Bolt RPC. Note: use useAsyncMemo or similar constructs to avoid async function coloring. The usual Uniswap flow is very specific and lastly requires a custom endpoint that doesn't support every chain. We can't use that endpoint and we want to add async/await in every file
• Migrate from wallet_sendTransaction to wallet_signMessage (if available, or eth_sign as a non-optimal alternative) + eth_sendRawTransaction to Bolt RPC, to bypass Metamask for that and having more flexibility. Note: the current ethers.js version (v5.7.2) doesn't support wallet_signTransaction unfortunately.
• Automatic nonce management of preconfirmations on the frontend -> reloading the page clears it
• Remove from the UI everything that we don't need i.e., just keep the send page.
• Show additional popup when the transaction is actually included in a block
• More branding awareness

Notes

Sending transactions via wallets

• Unfortunately, we're stuck in the following scenario using wallets, in particular MetaMask:
  • MetaMask doesn't support wallet_signTransaction due to difficult nonce management. See Sign transaction without broadcast MetaMask/metamask-extension#3475 for a more detailed discussion
  • For security reasons, most wallets do not allow to arbitrary raw bytes using the internal signing key but the add a prefix to avoid an user signing transactions by mistake. As such, the wallet_signMessage RPC method available to interact with wallets on the browser will call the internal personal_sign method which adds constructs the signature as sign(keccak256("\x19Ethereum Signed Message:\n" + len(message) + message))). For a more detailed reference, see https://docs.walletconnect.com/advanced/multichain/rpc-reference/ethereum-rpc#personal_sign
  • However, it is possible on MetaMask to enable the old'n'risky eth_sign in the advanced settings. This is currently the used approach and the fastest to iterate on the demo
• Due to the previous point, in our current flow we can't really create a valid signed raw transaction unless the wallet implements the wallet_signTransaction method or has the eth_sign method still available. This leads to due possible paths for the web-demo:
  • Use another browser wallet that supports such function (to be find)
  • Only transfer ERC-20s and use EIP-712 style signing for that, but more research needs to be done on the feasibility of that
• For context, both UniswapX and CowSwap work with EIP-712 signatures where you permit to the smart contracts to move ERC20 assets on your behalf. You don't pay fees directly but you receive less tokens once the swap has been concluded by the solver