status-mobile
status-mobile copied to clipboard
feat: add token tag component (#13599)
fixes #13599
Summary
Implements UI Component - Token tag
This implements and light and dark mode for the token tag component, it does not include the blurred versions of these as discussed with @cammellos and the solution for this needs to be discussed first.
Platforms
- Android. ( I only developed this on android emulator so not sure if IOS needs testing here)
- iOS
Areas that maybe impacted
Test in quo 2 components
Steps to test
- Open Status
- Open Options
- -Open Quo2 Preview
status: ready
Hey @J-Son89, and thank you so much for making your first pull request in status-react! :heart: Please help us make your experience better by filling out this brief questionnaire https://goo.gl/forms/uWqNcVpVz7OIopXg2
Jenkins Builds
Click to see older builds (49)
| :grey_question: | Commit | :hash: | Finished (UTC) | Duration | Platform | Result |
|---|---|---|---|---|---|---|
| :x: | dcc88fc0 | #1 | 2022-07-09 11:36:38 | ~26 sec | android-e2e |
:page_facing_up:log |
| :x: | dcc88fc0 | #1 | 2022-07-09 11:36:38 | ~21 sec | ios |
:page_facing_up:log |
| :x: | dcc88fc0 | #1 | 2022-07-09 11:36:42 | ~24 sec | android |
:page_facing_up:log |
| :heavy_multiplication_x: | 7d8d880a | #3 | 2022-07-11 00:11:06 | ~9 min | android-e2e |
:package:apk :calling: |
| :heavy_multiplication_x: | 7d8d880a | #3 | 2022-07-11 00:11:31 | ~9 min | android |
:package:apk :calling: |
| :heavy_multiplication_x: | 7d8d880a | #3 | 2022-07-11 00:13:11 | ~11 min | ios |
:package:ipa :calling: |
| :heavy_check_mark: | 7892c513 | #2 | 2022-07-11 00:11:41 | ~11 min | android-e2e |
:package:apk :calling: |
| :heavy_check_mark: | 7892c513 | #2 | 2022-07-11 00:11:42 | ~11 min | ios |
:package:ipa :calling: |
| :heavy_check_mark: | da40c3aa | #4 | 2022-07-11 10:48:29 | ~9 min | ios |
:package:ipa :calling: |
| :heavy_check_mark: | da40c3aa | #4 | 2022-07-11 10:50:25 | ~11 min | android-e2e |
:package:apk :calling: |
| :heavy_check_mark: | 27bc5095 | #5 | 2022-07-11 23:27:32 | ~9 min | ios |
:package:ipa :calling: |
| :heavy_check_mark: | 27bc5095 | #5 | 2022-07-11 23:29:27 | ~11 min | android-e2e |
:package:apk :calling: |
| :heavy_check_mark: | 13be0468 | #6 | 2022-07-28 12:58:18 | ~9 min | android-e2e |
:package:apk :calling: |
| :heavy_check_mark: | 13be0468 | #6 | 2022-07-28 12:59:03 | ~10 min | ios |
:package:ipa :calling: |
| :heavy_check_mark: | 13be0468 | #6 | 2022-07-28 12:59:05 | ~10 min | android |
:package:apk :calling: |
| :heavy_check_mark: | fc620d1a | #7 | 2022-08-01 10:04:32 | ~10 min | ios |
:package:ipa :calling: |
| :heavy_check_mark: | fc620d1a | #7 | 2022-08-01 10:05:31 | ~11 min | android |
:package:apk :calling: |
| :heavy_check_mark: | fc620d1a | #7 | 2022-08-01 10:05:46 | ~11 min | android-e2e |
:package:apk :calling: |
| :heavy_multiplication_x: | ed3cb425 | #8 | 2022-08-04 10:44:02 | ~9 min | ios |
:package:ipa :calling: |
| :heavy_multiplication_x: | ed3cb425 | #8 | 2022-08-04 10:45:05 | ~10 min | android |
:package:apk :calling: |
| :heavy_multiplication_x: | ed3cb425 | #8 | 2022-08-04 10:45:33 | ~11 min | android-e2e |
:package:apk :calling: |
| :heavy_check_mark: | c181fd2c | #9 | 2022-08-04 11:13:26 | ~11 min | ios |
:package:ipa :calling: |
| :heavy_check_mark: | c181fd2c | #9 | 2022-08-04 11:14:04 | ~11 min | android |
:package:apk :calling: |
| :heavy_multiplication_x: | 49a6ff68 | #10 | 2022-08-08 20:34:52 | ~8 min | android-e2e |
:package:apk :calling: |
| :heavy_multiplication_x: | 49a6ff68 | #10 | 2022-08-08 20:37:51 | ~11 min | ios |
:package:ipa :calling: |
| :heavy_check_mark: | da24629a | #11 | 2022-08-09 09:01:50 | ~8 min | android |
:package:apk :calling: |
| :heavy_check_mark: | da24629a | #11 | 2022-08-09 09:02:05 | ~8 min | android-e2e |
:package:apk :calling: |
| :heavy_check_mark: | da24629a | #11 | 2022-08-09 09:04:59 | ~11 min | ios |
:package:ipa :calling: |
| :heavy_check_mark: | ecad3c4a | #12 | 2022-08-16 13:40:24 | ~7 min | android-e2e |
:package:apk :calling: |
| :heavy_check_mark: | ecad3c4a | #12 | 2022-08-16 13:40:44 | ~7 min | android |
:package:apk :calling: |
| :heavy_check_mark: | ecad3c4a | #12 | 2022-08-16 13:42:50 | ~9 min | ios |
:package:ipa :calling: |
| :heavy_check_mark: | f114fb55 | #13 | 2022-08-16 13:52:36 | ~7 min | android-e2e |
:package:apk :calling: |
| :heavy_check_mark: | f114fb55 | #13 | 2022-08-16 13:52:59 | ~7 min | android |
:package:apk :calling: |
| :heavy_check_mark: | f114fb55 | #13 | 2022-08-16 13:55:00 | ~9 min | ios |
:package:ipa :calling: |
| :heavy_check_mark: | 3653b80c | #14 | 2022-08-22 10:06:18 | ~8 min | android-e2e |
:package:apk :calling: |
| :heavy_check_mark: | 3653b80c | #14 | 2022-08-22 10:06:30 | ~9 min | android |
:package:apk :calling: |
| :heavy_check_mark: | 3653b80c | #14 | 2022-08-22 10:09:19 | ~11 min | ios |
:package:ipa :calling: |
| :heavy_check_mark: | 177d1817 | #15 | 2022-08-24 11:00:18 | ~7 min | android |
:package:apk :calling: |
| :heavy_check_mark: | 177d1817 | #15 | 2022-08-24 11:00:21 | ~7 min | android-e2e |
:package:apk :calling: |
| :heavy_check_mark: | 177d1817 | #15 | 2022-08-24 11:14:49 | ~22 min | ios |
:package:ipa :calling: |
| :heavy_check_mark: | 56e80b87 | #16 | 2022-08-24 13:43:10 | ~13 min | android |
:package:apk :calling: |
| :heavy_check_mark: | 56e80b87 | #16 | 2022-08-24 13:44:05 | ~14 min | android-e2e |
:package:apk :calling: |
| :heavy_check_mark: | 56e80b87 | #16 | 2022-08-24 13:48:23 | ~18 min | ios |
:package:ipa :calling: |
| :heavy_check_mark: | e774b2bd | #18 | 2022-08-24 18:09:13 | ~7 min | android-e2e |
:package:apk :calling: |
| :heavy_check_mark: | e774b2bd | #18 | 2022-08-24 18:09:17 | ~7 min | android |
:package:apk :calling: |
| :heavy_check_mark: | e774b2bd | #18 | 2022-08-24 18:20:33 | ~19 min | ios |
:package:ipa :calling: |
| :heavy_check_mark: | 17588f72 | #19 | 2022-08-25 10:52:07 | ~8 min | android-e2e |
:package:apk :calling: |
| :heavy_check_mark: | 17588f72 | #19 | 2022-08-25 10:52:19 | ~9 min | android |
:package:apk :calling: |
| :heavy_check_mark: | 17588f72 | #19 | 2022-08-25 11:03:26 | ~20 min | ios |
:package:ipa :calling: |
| :grey_question: | Commit | :hash: | Finished (UTC) | Duration | Platform | Result |
|---|---|---|---|---|---|---|
| :heavy_check_mark: | 684e74c1 | #20 | 2022-08-25 11:30:32 | ~8 min | android-e2e |
:package:apk :calling: |
| :heavy_check_mark: | 684e74c1 | #20 | 2022-08-25 11:30:39 | ~8 min | android |
:package:apk :calling: |
| :heavy_check_mark: | 684e74c1 | #20 | 2022-08-25 11:43:37 | ~21 min | ios |
:package:ipa :calling: |
| :heavy_check_mark: | a4b20b35 | #21 | 2022-08-25 13:14:13 | ~7 min | android-e2e |
:package:apk :calling: |
| :heavy_check_mark: | a4b20b35 | #21 | 2022-08-25 13:14:22 | ~7 min | android |
:package:apk :calling: |
| :heavy_check_mark: | a4b20b35 | #21 | 2022-08-25 13:25:34 | ~18 min | ios |
:package:ipa :calling: |
Hi @J-Son89, thank you for the contribution.
You need to rebase your branch against develop for fixing the build error.
@J-Son89 linting failed, you can run make lint to see the errors. And then you can fix them manually or run make lint-fix

We should use same naming convention for all token icons. Maybe same as figma names, like
token-logo-snt, token-logo-eth, token-logo-default
Also result looks different when is required or is Purchasable is enabled,
Design:
PR:

Also result looks different when is required or is Purchasable is enabled, Design:
PR:
I discussed with Pedro from the design team, and the border color for the required icon should be able to be set externally. e.g so that certain groups can use it themed for their group.
Although, now I think about it. The purple used in the design should probably be the default color unless another border color is set.
Also result looks different when is required or is Purchasable is enabled, Design:
PR:
I discussed with Pedro from the design team, and the border color for the required icon should be able to be set externally. e.g so that certain groups can use it themed for their group.
Although, now I think about it. The purple used in the design should probably be the default color unless another border color is set.
Yes, I think they always come in purple (two different shades, one for light & one for dark), so no need to make the color customizable, as well because the icons at the moment they come already with that color:
https://www.figma.com/file/qLLuMLfpGxK9OfpIavwsmK/Mobile-Iconset?node-id=971%3A71
This one should be the right size, main-icons/verified is the old one, you can export also the dark mode version from figma (similarly for the + sign), let me know if you need any help and I can do that for you, if you'd like me to.
Also result looks different when is required or is Purchasable is enabled, Design:
PR:
I discussed with Pedro from the design team, and the border color for the required icon should be able to be set externally. e.g so that certain groups can use it themed for their group. Although, now I think about it. The purple used in the design should probably be the default color unless another border color is set.
Yes, I think they always come in purple (two different shades, one for light & one for dark), so no need to make the color customizable, as well because the icons at the moment they come already with that color:
https://www.figma.com/file/qLLuMLfpGxK9OfpIavwsmK/Mobile-Iconset?node-id=971%3A71
This one should be the right size,
main-icons/verifiedis the old one, you can export also the dark mode version from figma (similarly for the + sign), let me know if you need any help and I can do that for you, if you'd like me to.
I removed border-color and color from the required and purchasable-icons so that these just come from the icons directly.
also I added a default value for the required icon (the new icon above) and set the default value of the border-color of the whole tag to match too. I also added a prop so that the required icon can be set an the border-color of the whole tag too. This is so that other versions of the theme tag can be set. This is for the use case I discussed with Pedro from the design team.
regarding icons naming https://discord.com/channels/624205794384281629/626744384565674034/991236399737098240
regarding icons naming https://discord.com/channels/624205794384281629/626744384565674034/991236399737098240
updated the files I used to match this
@jo-mut i see a tag component in you community PR , could please take a look at this PR
@jo-mut i see a tag component in you community PR , could please take a look at this PR
I'll be following onto John's work on communities in some other work so I can also look into making them both referencing the same base tag component
I think all tags are sharing some properties. I implemented a base-tag but I think some properties are also missing on the base-tag. I will look into it
I think all tags are sharing some properties. I implemented a base-tag but I think some properties are also missing on the base-tag. I will look into it
cool, we can follow up to refactor both of these once this work is merged in.
yeah its just refactoring. As it is looks okay
88% of end-end tests have passed
Total executed tests: 86
Failed tests: 10
Passed tests: 76
Not executed tests: 1
IDs of not executed tests: 702157
IDs of failed tests: 700758,6263,700762,5319,700761,702076,6270,700760,700744,702158
Not executed tests (1)
Failed tests (10)
Click to expand
Class TestPublicChatMultipleDeviceMerged:
| 1. test_public_chat_delete_chat_long_press, id: 5319 |
Device 1: Device 2: |
| 2. test_public_chat_mark_all_messages_as_read, id: 6270 |
Device 1: Device 2: |
Class TestPublicChatBrowserOneDeviceMerged:
| 1. test_browser_delete_close_tabs, id: 702076 |
Device 1: |
Class TestOnboardingOneDeviceMerged:
| 1. test_onboarding_share_wallet_address, id: 700744 |
Device 1: |
Class TestWalletManagementDeviceMerged:
| 1. test_wallet_manage_assets, id: 700758 |
Device 1: |
| 2. test_wallet_add_account_seed_phrase_validation, id: 700762 |
Device 1: |
| 3. test_wallet_add_hide_unhide_account_private_key, id: 700761 |
Device 1: |
| 4. test_wallet_add_delete_watch_only_account, id: 700760 |
Device 1: |
Class TestEnsStickersMultipleDevicesMerged:
| 1. test_start_new_chat_public_key_validation, id: 702158 |
Device 1: Device 2: |
Class TestCommandsMultipleDevicesMerged:
| 1. test_1_1_chat_command_request_and_send_tx_stt_in_1_1_chat_offline, id: 6263 |
Device 1: Device 2: |
Passed tests (76)
Click to expand
Class TestSendTxDeviceMerged:
| 1. test_send_tx_eth_check_logcat, id: 700763 |
| Device sessions Device 1: |
| 2. test_send_tx_custom_token_18_decimals_invalid_password, id: 700765 |
| Device sessions Device 1: |
| 3. test_send_tx_token_8_decimals, id: 700764 |
| Device sessions Device 1: |
| 4. test_send_tx_set_recipient_options, id: 700757 |
| Device sessions Device 1: |
| 5. test_send_tx_sign_message_2tx_in_batch_tx_filters_request_stt_testdapp, id: 5342 |
| Device sessions Device 1: |
Class TestPublicChatMultipleDeviceMerged:
| 1. test_public_chat_message_edit, id: 700734 |
| Device sessions Device 1: Device 2: |
| 2. test_public_chat_unread_messages_counter, id: 5360 |
| Device sessions Device 1: Device 2: |
| 3. test_public_chat_emoji_send_copy_paste_reply, id: 700719 |
| Device sessions Device 1: Device 2: |
| 4. test_public_chat_unread_messages_counter_for_mention_relogin, id: 700718 |
| Device sessions Device 1: Device 2: |
| 5. test_public_chat_link_send_open, id: 700736 |
| Device sessions Device 1: Device 2: |
| 6. test_public_chat_links_with_previews_github_youtube_twitter_gif_send_enable, id: 700737 |
| Device sessions Device 1: Device 2: |
| 7. test_public_chat_message_send_check_timestamps_while_on_different_tab, id: 5313 |
| Device sessions Device 1: Device 2: |
| 8. test_public_chat_message_delete, id: 700735 |
| Device sessions Device 1: Device 2: |
Class TestPublicChatBrowserOneDeviceMerged:
| 1. test_public_chat_open_using_deep_link, id: 700739 |
| Device sessions Device 1: |
| 2. test_browser_bookmarks_create_edit_remove, id: 702077 |
| Device sessions Device 1: |
| 3. test_browser_blocked_url, id: 702072 |
| Device sessions Device 1: |
| 4. test_browser_connection_is_secure_not_secure_warning, id: 702073 |
| Device sessions Device 1: |
| 5. test_browser_web3_permissions_testdapp, id: 702078 |
| Device sessions Device 1: |
| 6. test_public_chat_tag_message, id: 700738 |
| Device sessions Device 1: |
| 7. test_public_chat_navigate_to_chat_when_relaunch, id: 5396 |
| Device sessions Device 1: |
| 8. test_public_chat_copy_and_paste_message_in_chat_input, id: 5317 |
| Device sessions Device 1: |
| 9. test_public_chat_fetch_more_history, id: 5675 |
| Device sessions Device 1: |
| 10. test_browser_offline, id: 702075 |
| Device sessions Device 1: |
| 11. test_browser_invalid_url, id: 702074 |
| Device sessions Device 1: |
Class TestOneToOneChatMultipleSharedDevices:
| 1. test_1_1_chat_text_message_edit_delete_push_disappear, id: 695843 |
| Device sessions Device 1: Device 2: |
| 2. test_1_1_chat_message_reaction, id: 6315 |
| Device sessions Device 1: Device 2: |
| 3. test_1_1_chat_emoji_send_reply_and_open_link, id: 5373 |
| Device sessions Device 1: Device 2: |
| 4. test_1_1_chat_image_send_save_reply, id: 6305 |
| Device sessions Device 1: Device 2: |
| 5. test_1_1_chat_is_shown_message_sent_delivered_from_offline, id: 5310 |
| Device sessions Device 1: Device 2: |
| 6. test_1_1_chat_text_message_with_push, id: 6316 |
| Device sessions Device 1: Device 2: |
| 7. test_1_1_chat_non_latin_message_to_newly_added_contact_with_profile_picture_on_different_networks, id: 5315 |
| Device sessions Device 1: Device 2: |
| 8. test_1_1_chat_delete_via_delete_button_relogin, id: 5387 |
| Device sessions Device 1: Device 2: |
| 9. test_1_1_chat_push_emoji, id: 6283 |
| Device sessions Device 1: Device 2: |
Class TestPairingSyncMultipleDevicesMerged:
| 1. test_pairing_sync_clear_history, id: 702394 |
| Device sessions Device 1: Device 2: |
| 2. test_pairing_sync_contacts_block_unblock, id: 702196 |
| Device sessions Device 1: Device 2: |
| 3. test_pairing_sync_initial_profile_picture, id: 702392 |
| Device sessions Device 1: Device 2: |
| 4. test_pairing_sync_initial_bookmarks, id: 702393 |
| Device sessions Device 1: Device 2: |
| 5. test_pairing_sync_initial_contacts_blocked_users, id: 702194 |
| Device sessions Device 1: Device 2: |
| 6. test_pairing_sync_1_1_chat_message, id: 702198 |
| Device sessions Device 1: Device 2: |
| 7. test_pairing_sync_public_chat_add_remove, id: 702199 |
| Device sessions Device 1: Device 2: |
| 8. test_pairing_sync_initial_public_chats, id: 702195 |
| Device sessions Device 1: Device 2: |
| 9. test_pairing_sync_contacts_add_remove_set_nickname_ens, id: 702197 |
| Device sessions Device 1: Device 2: |
Class TestOnboardingOneDeviceMerged:
| 1. test_onboarding_add_new_multiaccount_username_by_position_pass_validation, id: 700747 |
| Device sessions Device 1: |
| 2. test_onboarding_home_initial_popup, id: 700742 |
| Device sessions Device 1: |
| 3. test_onboarding_share_contact_address, id: 700743 |
| Device sessions Device 1: |
| 4. test_onboarding_backup_seed_phrase_restore_same_login_logcat, id: 700745 |
| Device sessions Device 1: |
| 5. test_onboarding_cant_sign_in_with_invalid_password_logcat, id: 700746 |
| Device sessions Device 1: |
Class TestWalletManagementDeviceMerged:
| 1. test_wallet_fetching_balance_after_offline_insufficient_funds_errors, id: 700766 |
| Device sessions Device 1: |
| 2. test_wallet_add_account_generate_new, id: 700759 |
| Device sessions Device 1: |
| 3. test_wallet_tx_history_copy_tx_hash_on_cellular, id: 700756 |
| Device sessions Device 1: |
Class TestEnsStickersMultipleDevicesMerged:
| 1. test_ens_command_send_tx_eth_1_1_chat, id: 702153 |
| Device sessions Device 1: Device 2: |
| 2. test_ens_mention_push_highlighted_public_chat, id: 702156 |
| Device sessions Device 1: Device 2: |
| 3. test_ens_mention_nickname_1_1_chat, id: 702155 |
| Device sessions Device 1: Device 2: |
| 4. test_ens_purchased_in_profile, id: 702152 |
| Device sessions Device 1: Device 2: |
Class TestContactBlockMigrateKeycardMultipleSharedDevices:
| 1. test_contact_block_unblock_public_chat_offline, id: 702176 |
| Device sessions Device 1: Device 2: |
| 2. test_contact_add_remove_mention_default_username_nickname_public_chat, id: 702175 |
| Device sessions Device 1: Device 2: |
| 3. test_keycard_command_send_tx_eth_1_1_chat, id: 702186 |
| Device sessions Device 1: Device 2: |
| 4. test_restore_account_migrate_multiaccount_to_keycard_db_saved, id: 702177 |
| Device sessions Device 1: Device 2: |
| 5. test_cellular_settings_on_off_public_chat_fetching_history, id: 702188 |
| Device sessions Device 1: Device 2: |
Class TestKeycardTxOneDeviceMerged:
| 1. test_keycard_relogin_after_restore, id: 700768 |
| Device sessions Device 1: |
| 2. test_keycard_send_tx_sign_message_request_stt_testdapp, id: 700769 |
| Device sessions Device 1: |
| 3. test_keycard_create_account_unlock_same_seed, id: 5689 |
| Device sessions Device 1: |
| 4. test_keycard_send_tx_eth, id: 700767 |
| Device sessions Device 1: |
| 5. test_keycard_wallet_recover_pairing_check_balance_after_offline_tx_history, id: 700770 |
| Device sessions Device 1: |
Class TestGroupChatMultipleDeviceMerged:
| 1. test_group_chat_push_system_messages_when_invited, id: 3994 |
| Device sessions Device 1: Device 2: Device 3: |
| 2. test_group_chat_highligted, id: 5756 |
| Device sessions Device 1: Device 2: Device 3: |
| 3. test_group_chat_join_send_text_messages_push, id: 700731 |
| Device sessions Device 1: Device 2: Device 3: |
| 4. test_group_chat_offline_pn, id: 3998 |
| Device sessions Device 1: Device 2: Device 3: |
| 5. test_group_chat_add_new_member_activity_centre, id: 700732 |
| Device sessions Device 1: Device 2: Device 3: |
| 6. test_group_chat_leave_relogin, id: 3997 |
| Device sessions Device 1: Device 2: Device 3: |
Class TestCommandsMultipleDevicesMerged:
| 1. test_1_1_chat_command_decline_eth_push_changing_state, id: 6265 |
| Device sessions Device 1: Device 2: |
| 2. test_1_1_chat_command_send_tx_eth_outgoing_tx_push, id: 6253 |
| Device sessions Device 1: Device 2: |
Class TestRestoreOneDeviceMerged:
| 1. test_restore_set_up_wallet_sign_phrase, id: 700749 |
| Device sessions Device 1: |
| 2. test_restore_account_migrate_multiaccount_to_keycard_no_db_saved_add_wallet_send_tx, id: 702189 |
| Device sessions Device 1: |
| 3. test_restore_seed_phrase_field_validation, id: 700750 |
| Device sessions Device 1: |
| 4. test_restore_uppercase_whitespaces_seed_phrase_special_char_passw_logcat, id: 700748 |
| Device sessions Device 1: |