#825 | custom contract abi was put inside an expansion component
Fixes #825
Description
This PR includes a user-friendly solution for applying API JSON to non-verified contracts. Instead of displaying the whole JSON once uploaded occupying most of the page size, now it shows inside a collapsed by default expansion component which is more practical and displays nicer.
With this component, the enormous ABI JSON does not bother the user. Instead, it lets the user immediately interact with the read and write functions parsed from the ABI without scrolling down to find the needed components.
Test scenarios
https://deploy-preview-827--dev-mainnet-teloscan.netlify.app/address/0x90c7F370Fc9930C2BcB4972E7e9cBF979Af1d42e?tab=contract
upload the following ABI JSON file to load the actual contract interface: ComplexParamsContract.json
Screenshots
Deploy Preview for dev-mainnet-teloscan ready!
| Name | Link |
|---|---|
| Latest commit | 245e1d4c0da02b22975a79523cb0ee8cb54ac004 |
| Latest deploy log | https://app.netlify.com/sites/dev-mainnet-teloscan/deploys/66be1b6c44a500000872e303 |
| Deploy Preview | https://deploy-preview-827--dev-mainnet-teloscan.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.
Deploy Preview for teloscan-stage ready!
| Name | Link |
|---|---|
| Latest commit | 245e1d4c0da02b22975a79523cb0ee8cb54ac004 |
| Latest deploy log | https://app.netlify.com/sites/teloscan-stage/deploys/66be1b6c2456f90008d1f3d5 |
| Deploy Preview | https://deploy-preview-827--teloscan-stage.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.
Deploy Preview for testnet-teloscan ready!
| Name | Link |
|---|---|
| Latest commit | 245e1d4c0da02b22975a79523cb0ee8cb54ac004 |
| Latest deploy log | https://app.netlify.com/sites/testnet-teloscan/deploys/66be1b6b2456f90008d1f3d1 |
| Deploy Preview | https://deploy-preview-827--testnet-teloscan.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.
Use capital letters on buttons and tooltips to keep consistency through site.
need a higher contrast between selected text and baclground in the darkmode view