Ability to reorder and optionally render the components within the Address component.

[JacobHomanics]

The Address component is the main identity of the user and everything else that exists on the blockchain, thus out of all of the components, we should explore further customizable options surrounding this component.

I have several ideas for this component, however am trying to stay within the vision of Scaffold Eth 2. For a much deeper discussion on the overall vision of SE2 please visit Issue #786.

I think we should approach this in baby steps to ensure that we don't overshoot and overcommit resulting in wasted resources/time.

The first proposition is to provide the ability to change the render order of the "icon", "address", and "copy" components found within the Address component. Additionally, by nature, also implement the ability to optionally choose to render each component.

The first draft of the proposed changes can be found at: main...Hotmanics:scaffold-eth-2:customizations-to-address-component

Demo:

Demo Implementation:

As you can see, with the proposed changes, we slightly modified the Address component and keep the implementation process as intuitive as possible. As a result, we turn the Address component from working in 1 scenario to working in 15 scenarios. Albeit, some of them wouldn't make sense to use. However, as a developer you would need to specifically go out of your way to make your component "incorrect".

There was also an issue brought up in Issue #786 where the proposed changes are a "code smell". We should explore better ways to implement this if they exist.

Known Issues

The aforementioned code smell.

In this commit's current state, the margins of each component are only set to work with the default configuration. Looking at the Demo screenshot, you can see the margins do not work well in every scenario. Additional work will need to be done to fix the margins based on each component's render order. This will work will be done if we choose to move forward with this idea.

Excited to start the discussion on this and hopefully some future ideas working for this component!

[kkomelin]

For the proper margin between elements, I suggest settings the gap property to the parent element instead. In that case, the order of the elements doesn't matter anymore.