Highlight differences when changing features

[ericglau]

When adding or removing a selected feature, it may not be obvious what parts of the resulting code has changed. This is especially the case for Cairo because there is a lot of code that requires scrolling to view.

Enhance the UI so that differences are visibly highlighted when changing a feature.

For example, if the user starts with: then enables Mintable like the below: , this should cause the following sections to be highlighted:

import "@openzeppelin/contracts/access/Ownable.sol";

and

    function mint(address to, uint256 amount) public onlyOwner {
        _mint(to, amount);
    }

[kilnhast]

Hey @ericglau ! can I get assigned to this issue?

[ericglau]

@kilnhast Thanks, feel free to contribute a PR

[makiopen]

Hi @kilnhast thanks for looking into this issue! We were thinking that it would be a nice motion interaction highlighting the differences if we'd animate the typing and removal of the code eg. https://cngu.github.io/vue-typer/?ref=madewithvuejs.com

Let me know if I can help in any way!

[CoveMB]

Hey @kilnhast thanks for tackling the issue 🦾 Do you which to submit a merge request with your changes and collect feedback?

[kilnhast]

Hi @CoveMB I've tried to solve it locally, but was unable to do it. As, I've been unsuccessfull in solving this, I think someone else should have a go at it. I don't want to hold this up for others. Thanks for being patient with me.

[CoveMB]

Noted @kilnhast thanks for your investment, feel free to give this one or an other one go whenever 🌻