Onboarding: Identifiers page highlighting animation #16375

J-Son89 · 2023-06-23T15:00:33Z

Created a new profile-card component inside identifiers folder only for identifiers page
Created worklets for animation: background for card-container style, opacity for out of highlighting elements, and for each of identicon-ring, user-hash and emoji-hash
Used mask view to highlight identicon-ring

** Note **
This pr is a continuation of the work done here: #15925

I have just taken it and fixed it for Android and refactored the code a little

status-im-auto · 2023-06-23T15:03:07Z

Jenkins Builds

Click to see older builds (12)

❔	Commit	#️⃣	Finished (UTC)	Duration	Platform	Result
❌	`484af3a`	#1	2023-06-23 15:03:07	~2 min	`tests`	📄`log`
✔️	`484af3a`	#1	2023-06-23 15:07:54	~7 min	`android-e2e`	🤖`apk` 📲
✔️	`484af3a`	#1	2023-06-23 15:08:01	~7 min	`android`	🤖`apk` 📲
✔️	`484af3a`	#1	2023-06-23 15:08:29	~7 min	`ios`	📱`ipa` 📲

❌	`29b1165`	#2	2023-06-26 10:10:12	~8 min	`tests`	📄`log`
✔️	`29b1165`	#2	2023-06-26 10:11:38	~9 min	`ios`	📱`ipa` 📲
✔️	`29b1165`	#2	2023-06-26 10:14:32	~12 min	`android`	🤖`apk` 📲
✔️	`29b1165`	#2	2023-06-26 10:14:35	~12 min	`android-e2e`	🤖`apk` 📲

❌	`3ac36c4`	#3	2023-06-27 09:44:26	~5 min	`tests`	📄`log`
✔️	`3ac36c4`	#3	2023-06-27 09:47:19	~7 min	`ios`	📱`ipa` 📲
✔️	`3ac36c4`	#3	2023-06-27 09:47:28	~8 min	`android`	🤖`apk` 📲
✔️	`3ac36c4`	#3	2023-06-27 09:47:45	~8 min	`android-e2e`	🤖`apk` 📲

❔	Commit	#️⃣	Finished (UTC)	Duration	Platform	Result
✔️	`3aa94fe`	#4	2023-06-27 12:15:18	~5 min	`android-e2e`	🤖`apk` 📲
✔️	`3aa94fe`	#4	2023-06-27 12:16:29	~7 min	`android`	🤖`apk` 📲
✔️	`3aa94fe`	#4	2023-06-27 12:18:28	~8 min	`tests`	📄`log`
✔️	`3aa94fe`	#4	2023-06-27 12:19:31	~10 min	`ios`	📱`ipa` 📲

✔️	`cebc50d`	#5	2023-06-27 13:55:25	~7 min	`android-e2e`	🤖`apk` 📲
✔️	`cebc50d`	#5	2023-06-27 13:55:28	~7 min	`android`	🤖`apk` 📲
✔️	`cebc50d`	#5	2023-06-27 13:55:46	~7 min	`tests`	📄`log`
✔️	`cebc50d`	#5	2023-06-27 13:58:28	~10 min	`ios`	📱`ipa` 📲

ulisesmac

Looks good 👍

src/js/worklets/identifiers_highlighting.js

ulisesmac · 2023-06-23T20:36:44Z

src/status_im2/contexts/onboarding/identifiers/profile_card/view.cljs

+        emoji-hash-style     (worklets.identifiers-highlighting/emoji-hash-style @progress)]
+
+    [rn/view
+     {:key   (str name)


Why do we add this :key key?

I took over this branch, I guess rn will throw a warning if there's no key there. I can check

ulisesmac · 2023-06-23T20:41:01Z

src/status_im2/contexts/onboarding/identifiers/profile_card/view.cljs

+        {:style (reanimated/apply-animations-to-style
+                 {:opacity avatar-opacity}
+                 {})}


I'm not sure about what did we agree about animated styles. Whether they should be in the style namespace or in the view one.

For this PR, I suggest to be consistent, because some of them are in the style ns and this one is in view.

will move to style ns 👍 It's agreed they should go there.

ulisesmac · 2023-06-23T20:41:42Z

src/status_im2/contexts/onboarding/identifiers/profile_card/view.cljs

+        {:size            :heading-2
+         :weight          :semi-bold
+         :number-of-lines 1
+         :style           style/user-name} name]]


name should be in the following line (59)

ulisesmac · 2023-06-23T20:42:09Z

src/status_im2/contexts/onboarding/identifiers/profile_card/view.cljs

+       [quo/text
+        {:weight          :monospace
+         :number-of-lines 1
+         :style           style/emoji-hash} emoji-hash]]]]))


emoji-hash should be in the following line

ulisesmac · 2023-06-23T20:43:32Z

src/utils/worklets/identifiers_highlighting.cljs

@@ -0,0 +1,31 @@
+(ns utils.worklets.identifiers-highlighting)


Same quesiton as in the JS file: why we don't create those JS functions here in ClojureScript?

This was the way it was done when I joined the project and I've just been following this practice. Perhaps @briansztamfater or @Parveshdhull can provide a reason.

Check out Implement React Native Reanimated V2

and https://stackoverflow.com/a/72513996/7475429

Thank you so much @Parveshdhull for giving context. I think the current solution is good for now.

Now Reanimated 3 has been released but I think we are using 2.11, so do you think this will be improved when we migrate to 3?

Reanimated 3 also uses worklets, so we still have to rely on javascript workaround. Or we can look into cljs alternatives for creating worklets (not sure about performance impact though)
https://github.com/roman01la/cljs-worklet

Ok, it seems the JS approach is good enough. Thanks @Parveshdhull

status-im-auto · 2023-06-27T07:10:34Z

82% of end-end tests have passed

Total executed tests: 33
Failed tests: 6
Passed tests: 27

IDs of failed tests: 702732,703133,703086,702894,702783,702731

Failed tests (6)

Click to expand

Rerun failed tests

Class TestCommunityOneDeviceMerged:

1. test_restore_multiaccount_with_waku_backup_remove_switch, id: 703133

Device 1: Find `Button` by `accessibility id`: `show-profiles`
Device 1: Tap on found: Button

critical/test_public_chat_browsing.py:406: in test_restore_multiaccount_with_waku_backup_remove_switch
    self.errors.verify_no_errors()
base_test_case.py:182: in verify_no_errors
    pytest.fail('\n '.join([self.errors.pop(0) for _ in range(len(self.errors))]))
 Contact my-custom-nickname was not restored from backup!

Device sessions

Device 1:

Class TestCommunityMultipleDeviceMerged:

1. test_community_mark_all_messages_as_read, id: 703086
Device 1: Find `Button` by `accessibility id`: `mark-as-read` Device 1: Tap on found: Button `critical/test_public_chat_browsing.py:812: in test_community_mark_all_messages_as_read self.errors.verify_no_errors() base_test_case.py:182: in verify_no_errors pytest.fail('\n '.join([self.errors.pop(0) for _ in range(len(self.errors))])) New messages counter is not shown in home > Commmunity element` Device sessions Device 1: Steps, video, logs Failure screenshot Device 2: Steps, video, logs Failure screenshot
2. test_community_contact_block_unblock_offline, id: 702894
Device 2: Find `Text` by `xpath`: `//[starts-with(@text,'Hurray! unblocked')]/ancestor::android.view.ViewGroup[@content-desc='chat-item']//[@content-desc='message-status']/android.widget.TextView` Device 2: `Text` is `Sent` `critical/test_public_chat_browsing.py:785: in test_community_contact_block_unblock_offline self.errors.verify_no_errors() base_test_case.py:182: in verify_no_errors pytest.fail('\n '.join([self.errors.pop(0) for _ in range(len(self.errors))])) Message was not delivered after back up online.` Device sessions Device 1: Steps, video, logs Failure screenshot Device 2: Steps, video, logs Failure screenshot

Class TestGroupChatMultipleDeviceMergedNewUI:

1. test_group_chat_pin_messages, id: 702732
`Test is not run, e2e blocker` [[reason: [NOTRUN] Pin feature is in development]]

Class TestOneToOneChatMultipleSharedDevicesNewUi:

1. test_1_1_chat_is_shown_message_sent_delivered_from_offline, id: 702783
# STEP: Device1 goes back online and checks that 1-1 chat will be fetched Device 1: Looking for a message by text: test message `critical/chats/test_1_1_public_chats.py:1253: in test_1_1_chat_is_shown_message_sent_delivered_from_offline self.errors.verify_no_errors() base_test_case.py:182: in verify_no_errors pytest.fail('\n '.join([self.errors.pop(0) for _ in range(len(self.errors))])) Message status was not delivered after back up online, it is "Sending"! E Message was not delivered after resending from offline` [[Issue with messages not being sent for a long time]] Device sessions Device 1: Steps, video, logs Failure screenshot Device 2: Steps, video, logs Failure screenshot
2. test_1_1_chat_pin_messages, id: 702731
`Test is not run, e2e blocker` [[reason: [NOTRUN] Pin feature is in development]]

Passed tests (27)

Click to expand

Class TestCommunityOneDeviceMerged:

1. test_community_copy_and_paste_message_in_chat_input, id: 702742
Device sessions Device 1: Steps, video, logs
2. test_community_navigate_to_channel_when_relaunch, id: 702846
Device sessions Device 1: Steps, video, logs

Class TestGroupChatMultipleDeviceMergedNewUI:

1. test_group_chat_join_send_text_messages_push, id: 702807
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs Device 3: Steps, video, logs
2. test_group_chat_offline_pn, id: 702808
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs Device 3: Steps, video, logs

Class TestOneToOneChatMultipleSharedDevicesNewUi:

1. test_1_1_chat_emoji_send_reply_and_open_link, id: 702782
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
2. test_1_1_chat_text_message_delete_push_disappear, id: 702733
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
3. test_1_1_chat_delete_via_long_press_relogin, id: 702784
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
4. test_1_1_chat_push_emoji, id: 702813
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
5. test_1_1_chat_non_latin_messages_stack_update_profile_photo, id: 702745
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
6. test_1_1_chat_edit_message, id: 702855
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
7. test_1_1_chat_message_reaction, id: 702730
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs

Class TestActivityCenterContactRequestMultipleDevicePR:

1. test_activity_center_contact_request_accept_swipe_mark_all_as_read, id: 702851
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
2. test_activity_center_contact_request_decline, id: 702850
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs

Class TestActivityMultipleDevicePR:

1. test_activity_center_mentions, id: 702957
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
2. test_navigation_jump_to, id: 702936
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
3. test_activity_center_reply_read_unread_delete_filter_swipe, id: 702947
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
4. test_activity_center_admin_notification_accept_swipe, id: 702958
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs

Class TestCommunityMultipleDeviceMerged:

1. test_community_several_images_send_reply, id: 703194
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
2. test_community_one_image_send_reply, id: 702859
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
3. test_community_emoji_send_copy_paste_reply, id: 702840
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
4. test_community_mentions_push_notification, id: 702786
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
5. test_community_message_delete, id: 702839
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
6. test_community_message_send_check_timestamps_sender_username, id: 702838
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
7. test_community_links_with_previews_github_youtube_twitter_gif_send_enable, id: 702844
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
8. test_community_message_edit, id: 702843
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
9. test_community_leave, id: 702845
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs
10. test_community_unread_messages_badge, id: 702841
Device sessions Device 1: Steps, video, logs Device 2: Steps, video, logs

VolodLytvynenko · 2023-06-27T11:59:12Z

Hi, @J-Son89 take a look please, integration tests are failed https://ci.status.im/job/status-mobile/job/prs/job/tests/job/PR-16375/3/consoleText
Thanx

J-Son89 · 2023-06-27T12:05:21Z

whoops, thanks @VladimrLitvinenko will check!

J-Son89 · 2023-06-27T12:45:16Z

resolved now @VladimrLitvinenko 👍

VolodLytvynenko · 2023-06-27T13:22:10Z

@J-Son89 I like how it looks! Thank you for your work.

Only one low-priority issue has been found. I don't want to block the current PR with this issue. Would you prefer to fix it separately or is the scope of this PR? Please let me know if it has been addressed. If not, we can proceed with merging the PR.

ISSUE 1: The text is shown on the edge of the screen on the Identifiers page

Actual result:

iPhone 11 Pro max, IOS 13

Nexus 4 API 30

Expected result:

The text is not out of the line of card-container

J-Son89 · 2023-06-27T13:26:25Z

@VladimrLitvinenko - good spot! I think it will be best to do in a follow up as it would be great to get this pr merged in. This pr is already quite large and I think that issue is in develop too?

VolodLytvynenko · 2023-06-27T13:31:22Z

@VladimrLitvinenko - good spot! I think it will be best to do in a follow up as it would be great to get this pr merged in. This pr is already quite large and I think that issue is in develop too?

@J-Son89 you are correct. I realized that this issue is also present in the develop branch. I didn't notice it initially.
Current PR can be merged. Thank you!

J-Son89 · 2023-06-27T13:33:52Z

@VladimrLitvinenko - good spot! I think it will be best to do in a follow up as it would be great to get this pr merged in. This pr is already quite large and I think that issue is in develop too?

@J-Son89 you are correct. I realized that this issue is also present in the develop branch. I didn't notice it initially. Current PR can be merged. Thank you!

Me neither, thanks for checking that! I will try create the follow up pr today and if not I will file an issue to track it 👍

J-Son89 self-assigned this Jun 23, 2023

J-Son89 requested review from Parveshdhull, rahulpsingh, vkjr and ulisesmac June 23, 2023 15:03

J-Son89 changed the title ~~Jc/watson~~ Onboarding: Identifiers page highlighting animation Jun 23, 2023

ulisesmac reviewed Jun 23, 2023

View reviewed changes

J-Son89 force-pushed the jc/watson branch from 484af3a to 29b1165 Compare June 26, 2023 10:01

vkjr approved these changes Jun 26, 2023

View reviewed changes

ulisesmac approved these changes Jun 26, 2023

View reviewed changes

J-Son89 added the request-manual-qa label Jun 27, 2023

J-Son89 force-pushed the jc/watson branch from 29b1165 to 3ac36c4 Compare June 27, 2023 09:39

VolodLytvynenko self-assigned this Jun 27, 2023

J-Son89 force-pushed the jc/watson branch from 3ac36c4 to 3aa94fe Compare June 27, 2023 12:09

VolodLytvynenko added the Tested - OK label Jun 27, 2023

Adjust identifiers page to do highlighting (#15752)

cebc50d

cammellos force-pushed the jc/watson branch from 3aa94fe to cebc50d Compare June 27, 2023 13:48

cammellos merged commit cebc50d into develop Jun 27, 2023

cammellos deleted the jc/watson branch June 27, 2023 13:48

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Onboarding: Identifiers page highlighting animation #16375

Onboarding: Identifiers page highlighting animation #16375

J-Son89 commented Jun 23, 2023 •

edited

Loading

status-im-auto commented Jun 23, 2023 •

edited

Loading

ulisesmac left a comment

ulisesmac Jun 23, 2023

J-Son89 Jun 26, 2023

ulisesmac Jun 23, 2023

J-Son89 Jun 26, 2023

ulisesmac Jun 23, 2023

ulisesmac Jun 23, 2023

ulisesmac Jun 23, 2023

J-Son89 Jun 26, 2023

Parveshdhull Jun 26, 2023 •

edited

Loading

Parveshdhull Jun 26, 2023

ulisesmac Jun 26, 2023

Parveshdhull Jun 26, 2023

ulisesmac Jun 27, 2023

status-im-auto commented Jun 27, 2023

Class TestCommunityOneDeviceMerged:

Class TestCommunityMultipleDeviceMerged:

Class TestGroupChatMultipleDeviceMergedNewUI:

Class TestOneToOneChatMultipleSharedDevicesNewUi:

Class TestCommunityOneDeviceMerged:

Class TestGroupChatMultipleDeviceMergedNewUI:

Class TestOneToOneChatMultipleSharedDevicesNewUi:

Class TestActivityCenterContactRequestMultipleDevicePR:

Class TestActivityMultipleDevicePR:

Class TestCommunityMultipleDeviceMerged:

VolodLytvynenko commented Jun 27, 2023

J-Son89 commented Jun 27, 2023

J-Son89 commented Jun 27, 2023

VolodLytvynenko commented Jun 27, 2023

J-Son89 commented Jun 27, 2023

VolodLytvynenko commented Jun 27, 2023

J-Son89 commented Jun 27, 2023

		@@ -0,0 +1,31 @@
		(ns utils.worklets.identifiers-highlighting)

Onboarding: Identifiers page highlighting animation #16375

Onboarding: Identifiers page highlighting animation #16375

Conversation

J-Son89 commented Jun 23, 2023 • edited Loading

status-im-auto commented Jun 23, 2023 • edited Loading

Jenkins Builds

ulisesmac left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Parveshdhull Jun 26, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

status-im-auto commented Jun 27, 2023

82% of end-end tests have passed

Failed tests (6)

Class TestCommunityOneDeviceMerged:

Class TestCommunityMultipleDeviceMerged:

Class TestGroupChatMultipleDeviceMergedNewUI:

Class TestOneToOneChatMultipleSharedDevicesNewUi:

Passed tests (27)

Class TestCommunityOneDeviceMerged:

Class TestGroupChatMultipleDeviceMergedNewUI:

Class TestOneToOneChatMultipleSharedDevicesNewUi:

Class TestActivityCenterContactRequestMultipleDevicePR:

Class TestActivityMultipleDevicePR:

Class TestCommunityMultipleDeviceMerged:

VolodLytvynenko commented Jun 27, 2023

J-Son89 commented Jun 27, 2023

J-Son89 commented Jun 27, 2023

VolodLytvynenko commented Jun 27, 2023

ISSUE 1: The text is shown on the edge of the screen on the Identifiers page

Actual result:

Expected result:

J-Son89 commented Jun 27, 2023

VolodLytvynenko commented Jun 27, 2023

J-Son89 commented Jun 27, 2023

J-Son89 commented Jun 23, 2023 •

edited

Loading

status-im-auto commented Jun 23, 2023 •

edited

Loading

Parveshdhull Jun 26, 2023 •

edited

Loading