Add Cypress E2E tests for core functionality across multiple networks

[portdeveloper]

Description

This PR

• Adds Cypress as a dev dependency
• Adds id react-select-container to the div containing NetworksDropdown component for selection in Cypress tests
• Implements 5 end-to-end tests to ensure core functionality
• Runs a simple call to the heimdall backend to wake it up before the tests.
• Implements a GitHub workflow that is run on pushes and pull requests on main

Before merging

• We should add NEXT_PUBLIC_HEIMDALL_URL to GitHub Actions Repository secrets

Tests Added

1. DAI Contract Interaction on Ethereum main net

   • Visits the application homepage
   • Inputs DAI contract address (0x6B175474E89094C44Da98b954EedeAC495271d0F)
   • Loads the contract and verifies URL
   • Interacts with balanceOf method
   • Verifies result display

2. Proxy Contract Interaction on Base Network

   • Selects Base network from dropdown
   • Loads proxy contract (0xca808b3eada02d53073e129b25f74b31d8647ae0)
   • Verifies Implementation Address visibility
   • Interacts with balanceOf method using vitalik.eth address
   • Checks for result display

3. Unverified Contract Interaction on Sepolia Testnet

   • Selects Sepolia network
   • Loads unverified contract (0x759c0e9d7858566df8ab751026bedce462ff42df)
   • Initiates decompilation process
   • Verifies presence of changeOwner write method in UI

4. Contract Interaction on BNB Smart Chain

   • Navigates to "Other chains" and selects BNB Smart Chain
   • Loads WETH contract (0x2170ed0880ac9a755fd29b2688956bd959f933f8)
   • Interacts with balanceOf method
   • Verifies result display

5. Custom Chain (Parex) Addition and ABI Submission

   • Adds Parex as a custom chain with specific network details
   • Loads a contract on Parex (0x6058518142C6AD506530F5A62dCc58050bf6fC28)
   • Manually submits contract ABI
   • Interacts with getUserBalance method
   • Verifies result display

Pics and video

Tests running on the same repo with env vars set:

0728.mp4

TODO

• Update the README file to include information about running Cypress tests
• ADD VIDEO AND PICTURES to the PR

Related Issues

*Fixes #137 *

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
abi-ninja-v2	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 31, 2024 0:46am

[Ansonhkg]

This is cool!

[technophile-04]

TYSM @portdeveloper this is really AWESOME!!!