[TASK] Standardize Asset, network, and relayer treatment

[seeddisperser]

Overview

To improve clarity and standardize how elements are represented, we need to implement rules for how assets, networks, relayers, and shielded assets are depicted.

Relevant Figma Links

Concept design

[monaiuu]

Handoff

To improve clarity and standardize how elements are represented, we need to implement rules for depicting assets, networks, relayers, and shielded assets. Please take a look below for the updates required.

• For token representation, we will remain using circular shapes to represent tokens.

• For network/chain representation, we will update to a rectangular shape to represent networks.

• To align with this update, the chain chips previously implemented will require an update to their radius to align with the chain representation.

• For relayer treatment, we will use a hexagon shape to represent all relayers to establish trust in using relayers.

• For shielded pools/assets, we will use a shield shape to represent its double meaning.

Design System Updates

These components have been added to the design system; please reference the following pages for reference:

• '🟢 Avatars' for added relayers and shielded token/pools treatment.

• '🟢 Chain Icons' for updated chain icon display & chain chips display.

Please note for this update, we will also have to ensure all dependent components are updated accordingly. I have audited and reviewed the entire design system and updated the component treatments accordingly. This update has also been pushed and should now similarly apply to all project files within Figma.