Following the latest design on Figma, it is required to have a pill button instead of the ShareControl that will enable the user to change active addresses (by changing their zone context state value).
To do so, we simply used the QuaiPayButton component that already implemented the functionality and supports a right icon. The only thing worth mentioning here is that we used alignSelf: 'center' to avoid having it stretching to the entire width of the screen (default behaviour is alignSelf: 'stretch') .
Most importantly, since we needed to show the user the domain name based on the zone they had, we implemented some refactors to relate zones <> regions <> domains. To do so, we created a couple of enums and put everything dependant on zones (to avoid multiple cascading maps). Additionally, we fixed the obj mapping of zones and regions to correctly portrait the specification (link).
Description
Following the latest design on Figma, it is required to have a pill button instead of the ShareControl that will enable the user to change active addresses (by changing their zone context state value).
To do so, we simply used the
QuaiPayButtoncomponent that already implemented the functionality and supports a right icon. The only thing worth mentioning here is that we usedalignSelf: 'center'to avoid having it stretching to the entire width of the screen (default behaviour isalignSelf: 'stretch') .Most importantly, since we needed to show the user the domain name based on the zone they had, we implemented some refactors to relate zones <> regions <> domains. To do so, we created a couple of enums and put everything dependant on zones (to avoid multiple cascading maps). Additionally, we fixed the obj mapping of zones and regions to correctly portrait the specification (link).
Related links
QuaiPay-SpecProof