Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: transaction confirmation page ui #17812

Merged
merged 1 commit into from
Dec 6, 2023

Conversation

briansztamfater
Copy link
Contributor

@briansztamfater briansztamfater commented Nov 3, 2023

fixes #16932

Summary

This PR implements transaction confirmation page UI with mocked data, backend integration to send transaction is pending as well as show transaction real data (estimated fees / duration / from data / to data).

Platforms

  • Android
  • iOS

Areas that maybe impacted

Functional
  • wallet / transactions

Steps to test

  • Open Status
  • Open new wallet
  • Select an account
  • Tap on Send
  • enter an address and tap Continue
  • Tap an asset
  • Check transaction confirmation page

status: ready

@briansztamfater briansztamfater added the feature feature requests label Nov 3, 2023
@briansztamfater briansztamfater self-assigned this Nov 3, 2023
@status-im-auto
Copy link
Member

status-im-auto commented Nov 3, 2023

Jenkins Builds

Click to see older builds (48)
Commit #️⃣ Finished (UTC) Duration Platform Result
✔️ 618f512 #1 2023-11-03 19:44:40 ~6 min ios 📱ipa 📲
✔️ 618f512 #1 2023-11-03 19:48:18 ~10 min android 🤖apk 📲
✔️ 618f512 #1 2023-11-03 19:48:27 ~10 min android-e2e 🤖apk 📲
✔️ 618f512 #1 2023-11-03 19:48:59 ~10 min tests 📄log
✔️ 0a461e0 #2 2023-11-08 15:24:17 ~6 min android-e2e 🤖apk 📲
✔️ 0a461e0 #2 2023-11-08 15:24:20 ~6 min android 🤖apk 📲
0a461e0 #2 2023-11-08 15:27:54 ~9 min tests 📄log
✔️ 0a461e0 #2 2023-11-08 15:28:51 ~10 min ios 📱ipa 📲
197204e #3 2023-11-16 00:13:16 ~2 min tests 📄log
✔️ 197204e #3 2023-11-16 00:17:33 ~6 min android 🤖apk 📲
✔️ 197204e #3 2023-11-16 00:17:34 ~6 min android-e2e 🤖apk 📲
✔️ 197204e #3 2023-11-16 00:22:54 ~11 min ios 📱ipa 📲
✔️ 9cbbd93 #5 2023-11-16 19:53:34 ~5 min ios 📱ipa 📲
✔️ 9cbbd93 #5 2023-11-16 19:53:50 ~6 min android-e2e 🤖apk 📲
✔️ 9cbbd93 #5 2023-11-16 19:54:12 ~6 min android 🤖apk 📲
✔️ 9cbbd93 #5 2023-11-16 19:57:35 ~9 min tests 📄log
✔️ 6ce6420 #6 2023-11-16 20:07:18 ~5 min android-e2e 🤖apk 📲
✔️ 6ce6420 #6 2023-11-16 20:10:08 ~8 min android 🤖apk 📲
✔️ 6ce6420 #6 2023-11-16 20:11:20 ~9 min tests 📄log
✔️ 6ce6420 #6 2023-11-16 20:15:59 ~14 min ios 📱ipa 📲
✔️ 63519c7 #8 2023-11-16 20:43:43 ~6 min android 🤖apk 📲
✔️ 63519c7 #8 2023-11-16 20:45:52 ~8 min android-e2e 🤖apk 📲
✔️ 63519c7 #8 2023-11-16 20:47:24 ~9 min tests 📄log
✔️ 63519c7 #8 2023-11-16 20:49:51 ~12 min ios 📱ipa 📲
d4aee2b #9 2023-11-22 20:19:17 ~5 min android 📄log
d4aee2b #9 2023-11-22 20:20:04 ~6 min ios 📄log
d4aee2b #9 2023-11-22 20:21:23 ~7 min tests 📄log
d4aee2b #9 2023-11-22 20:22:34 ~8 min android-e2e 📄log
✔️ 6dce070 #10 2023-11-22 20:31:25 ~6 min android 🤖apk 📲
✔️ 6dce070 #10 2023-11-22 20:32:03 ~6 min ios 📱ipa 📲
✔️ 6dce070 #10 2023-11-22 20:35:18 ~10 min tests 📄log
✔️ 6dce070 #10 2023-11-22 20:36:39 ~11 min android-e2e 🤖apk 📲
✔️ 6dce070 #11 2023-11-27 14:09:51 ~6 min ios 📱ipa 📲
✔️ 6dce070 #11 2023-11-27 14:10:23 ~7 min android 🤖apk 📲
✔️ 6dce070 #11 2023-11-27 14:11:14 ~7 min android-e2e 🤖apk 📲
✔️ 6dce070 #11 2023-11-27 14:17:00 ~13 min tests 📄log
✔️ a0f2c7f #12 2023-11-28 15:40:46 ~9 min ios 📱ipa 📲
✔️ a0f2c7f #12 2023-11-28 15:46:14 ~15 min android-e2e 🤖apk 📲
a0f2c7f #12 2023-11-28 15:50:04 ~18 min tests 📄log
✔️ a0f2c7f #12 2023-11-28 15:54:25 ~23 min android 🤖apk 📲
✔️ 37fc282 #13 2023-11-30 21:17:48 ~6 min android-e2e 🤖apk 📲
✔️ 37fc282 #13 2023-11-30 21:17:48 ~6 min android 🤖apk 📲
✔️ 37fc282 #13 2023-11-30 21:22:30 ~11 min tests 📄log
✔️ 37fc282 #13 2023-11-30 21:23:26 ~12 min ios 📱ipa 📲
✔️ 90166e8 #14 2023-12-01 16:47:30 ~8 min android 🤖apk 📲
✔️ 90166e8 #14 2023-12-01 16:50:04 ~10 min tests 📄log
✔️ 90166e8 #14 2023-12-01 16:50:11 ~10 min android-e2e 🤖apk 📲
✔️ 90166e8 #14 2023-12-01 16:52:28 ~13 min ios 📱ipa 📲
Commit #️⃣ Finished (UTC) Duration Platform Result
56a78c1 #16 2023-12-06 19:53:40 ~2 min ios 📄log
✔️ 56a78c1 #16 2023-12-06 19:58:12 ~6 min android 🤖apk 📲
✔️ 56a78c1 #16 2023-12-06 20:02:18 ~10 min android-e2e 🤖apk 📲
✔️ 56a78c1 #16 2023-12-06 20:02:24 ~10 min tests 📄log
✔️ fd0a23e #17 2023-12-06 22:11:04 ~6 min android 🤖apk 📲
✔️ fd0a23e #17 2023-12-06 22:14:57 ~10 min android-e2e 🤖apk 📲
✔️ fd0a23e #17 2023-12-06 22:15:06 ~10 min tests 📄log
✔️ fd0a23e #17 2023-12-06 22:15:58 ~11 min ios 📱ipa 📲

@briansztamfater briansztamfater marked this pull request as draft November 3, 2023 21:42
@briansztamfater briansztamfater force-pushed the feat/select-asset-ui branch 3 times, most recently from efd5cb3 to 5c8a1b2 Compare November 14, 2023 19:40
@briansztamfater briansztamfater force-pushed the feat/select-asset-ui branch 3 times, most recently from ccbf998 to a10a1ac Compare November 15, 2023 20:24
@briansztamfater briansztamfater force-pushed the feat/transaction-confirmation-ui branch from 0a461e0 to 197204e Compare November 16, 2023 00:10
@briansztamfater briansztamfater force-pushed the feat/transaction-confirmation-ui branch from 197204e to b322a24 Compare November 16, 2023 19:38
@briansztamfater briansztamfater changed the title [WIP] feat: transaction confirmation page ui feat: transaction confirmation page ui Nov 16, 2023
@briansztamfater briansztamfater marked this pull request as ready for review November 16, 2023 20:04
Copy link
Contributor

@ulisesmac ulisesmac left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @briansztamfater

Just left some comments :)

Comment on lines +29 to +44
{:style {:flex-direction :row
:margin-top 4}}
[quo/text
{:size :heading-1
:weight :semi-bold
:style style/title-container
:accessibility-label :send-label}
(i18n/label :t/from)]
[quo/summary-tag
{:label "Collectibles vault"
:type :account
:emoji "🍑"
:customization-color :purple}]]
[rn/view
{:style {:flex-direction :row
:margin-top 4}}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These and other style maps can be moved to the style ns

@briansztamfater briansztamfater force-pushed the feat/transaction-confirmation-ui branch from 63519c7 to d4aee2b Compare November 22, 2023 20:13
@qoqobolo qoqobolo force-pushed the feat/select-asset-ui branch from 8f0e4eb to 21f3f1c Compare November 27, 2023 10:10
Base automatically changed from feat/select-asset-ui to develop November 27, 2023 14:03
@briansztamfater briansztamfater force-pushed the feat/transaction-confirmation-ui branch 2 times, most recently from a0f2c7f to 37fc282 Compare November 30, 2023 21:10
@status-im-auto
Copy link
Member

85% of end-end tests have passed

Total executed tests: 48
Failed tests: 3
Expected to fail tests: 4
Passed tests: 41
IDs of failed tests: 703133,703086,702844 
IDs of expected to fail tests: 702732,703503,702731,702808 

Failed tests (3)

Click to expand
  • Rerun failed tests

  • Class TestCommunityMultipleDeviceMerged:

    1. test_community_mark_all_messages_as_read, id: 703086

    Device 1: Tap on found: Button
    Device 1: Click until `Text` by `accessibility id`: `community-description-text` will be presented

    critical/chats/test_public_chat_browsing.py:769: in test_community_mark_all_messages_as_read
        self.errors.verify_no_errors()
    base_test_case.py:191: in verify_no_errors
        pytest.fail('\n '.join([self.errors.pop(0) for _ in range(len(self.errors))]))
     Unread messages badge is shown in community element while there are no unread messages
    E    New messages badge is shown in community channel element while there are no unread messages
    



    Device sessions

    2. test_community_links_with_previews_github_youtube_twitter_gif_send_enable, id: 702844

    Device 2: Find EmojisNumber by xpath: //*[starts-with(@text,'https://m.youtube.com/watch?v=Je7yErjEVt4')]/ancestor::android.view.ViewGroup[@content-desc='chat-item']/../..//*[@content-desc='emoji-reaction-4']/android.widget.TextView
    Device 2: Element EmojisNumber text is equal to 1

    critical/chats/test_public_chat_browsing.py:608: in test_community_links_with_previews_github_youtube_twitter_gif_send_enable
        self.errors.verify_no_errors()
    base_test_case.py:191: in verify_no_errors
        pytest.fail('\n '.join([self.errors.pop(0) for _ in range(len(self.errors))]))
     No preview image is shown for https://github.com/status-im/status-mobile/pull/11707
    



    Device sessions

    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/chats/test_public_chat_browsing.py:273: in test_restore_multiaccount_with_waku_backup_remove_switch
        self.errors.verify_no_errors()
    base_test_case.py:191: in verify_no_errors
        pytest.fail('\n '.join([self.errors.pop(0) for _ in range(len(self.errors))]))
     Incorrect contacts number restored: 3 instead of 2
    E    admin_closed was not restored from waku-backup!!
    



    Device sessions

    Expected to fail tests (4)

    Click to expand

    Class TestGroupChatMultipleDeviceMergedNewUI:

    1. test_group_chat_pin_messages, id: 702732

    Test is not run, e2e blocker  
    

    [[reason: [NOTRUN] Pin feature is in development]]

    2. test_group_chat_offline_pn, id: 702808

    Device 3: Looking for a message by text: message from old member
    Device 3: Looking for a message by text: message from new member

    critical/chats/test_group_chat.py:323: in test_group_chat_offline_pn
        self.errors.verify_no_errors()
    base_test_case.py:191: in verify_no_errors
        pytest.fail('\n '.join([self.errors.pop(0) for _ in range(len(self.errors))]))
     Messages PN was not fetched from offline 
    

    [[Data delivery issue]]

    Device sessions

    Class TestOneToOneChatMultipleSharedDevicesNewUi:

    1. test_1_1_chat_pin_messages, id: 702731

    Test is not run, e2e blocker  
    

    [[reason: [NOTRUN] Pin feature is in development]]

    Class TestCommunityOneDeviceMerged:

    1. test_community_discovery, id: 703503

    Test is not run, e2e blocker  
    

    [[reason: [NOTRUN] Curated communities not loading, https://github.com//issues/17852]]

    Passed tests (41)

    Click to expand

    Class TestGroupChatMultipleDeviceMergedNewUI:

    1. test_group_chat_mute_chat, id: 703495
    Device sessions

    2. test_group_chat_send_image_save_and_share, id: 703297
    Device sessions

    3. test_group_chat_reactions, id: 703202
    Device sessions

    4. test_group_chat_join_send_text_messages_push, id: 702807
    Device sessions

    Class TestOneToOneChatMultipleSharedDevicesNewUi:

    1. test_1_1_chat_emoji_send_reply_and_open_link, id: 702782
    Device sessions

    2. test_1_1_chat_text_message_delete_push_disappear, id: 702733
    Device sessions

    3. test_1_1_chat_push_emoji, id: 702813
    Device sessions

    4. test_1_1_chat_non_latin_messages_stack_update_profile_photo, id: 702745
    Device sessions

    5. test_1_1_chat_edit_message, id: 702855
    Device sessions

    6. test_1_1_chat_send_image_save_and_share, id: 703391
    Device sessions

    7. test_1_1_chat_message_reaction, id: 702730
    Device sessions

    Class TestActivityMultipleDevicePR:

    1. test_navigation_jump_to, id: 702936
    Device sessions

    2. test_activity_center_reply_read_unread_delete_filter_swipe, id: 702947
    Device sessions

    Class TestOneToOneChatMultipleSharedDevicesNewUiTwo:

    1. test_1_1_chat_delete_via_long_press_relogin, id: 702784
    Device sessions

    2. test_1_1_chat_is_shown_message_sent_delivered_from_offline, id: 702783
    Device sessions

    3. test_1_1_chat_mute_chat, id: 703496
    Device sessions

    Class TestDeepLinksOneDevice:

    1. test_links_open_universal_links_from_chat, id: 704613
    Device sessions

    2. test_links_open_universal_links_from_other_apps, id: 704614
    Device sessions

    3. test_links_deep_links, id: 702775
    Device sessions

    Class TestActivityMultipleDevicePRTwo:

    1. test_activity_center_mentions, id: 702957
    Device sessions

    2. test_activity_center_admin_notification_accept_swipe, id: 702958
    Device sessions

    Class TestCommunityMultipleDeviceMerged:

    1. test_community_several_images_send_reply, id: 703194
    Device sessions

    2. test_community_one_image_send_reply, id: 702859
    Device sessions

    3. test_community_emoji_send_copy_paste_reply, id: 702840
    Device sessions

    4. test_community_contact_block_unblock_offline, id: 702894
    Device sessions

    5. test_community_message_delete, id: 702839
    Device sessions

    6. test_community_message_send_check_timestamps_sender_username, id: 702838
    Device sessions

    7. test_community_message_edit, id: 702843
    Device sessions

    8. test_community_unread_messages_badge, id: 702841
    Device sessions

    Class TestActivityCenterContactRequestMultipleDevicePR:

    1. test_add_contact_field_validation, id: 702777
    Device sessions

    2. test_activity_center_contact_request_accept_swipe_mark_all_as_read, id: 702851
    Device sessions

    3. test_activity_center_contact_request_decline, id: 702850
    Device sessions

    Class TestCommunityOneDeviceMerged:

    1. test_community_copy_and_paste_message_in_chat_input, id: 702742
    Device sessions

    2. test_community_undo_delete_message, id: 702869
    Device sessions

    3. test_community_navigate_to_channel_when_relaunch, id: 702846
    Device sessions

    4. test_community_mute_community_and_channel, id: 703382
    Device sessions

    Class TestCommunityMultipleDeviceMergedTwo:

    1. test_community_markdown_support, id: 702809
    Device sessions

    2. test_community_hashtag_links_to_community_channels, id: 702948
    Device sessions

    3. test_community_mentions_push_notification, id: 702786
    Device sessions

    4. test_community_leave, id: 702845
    Device sessions

    5. test_community_join_when_node_owner_offline, id: 703629
    Device sessions

    @briansztamfater briansztamfater force-pushed the feat/transaction-confirmation-ui branch from 37fc282 to 90166e8 Compare December 1, 2023 16:39
    @churik churik self-assigned this Dec 6, 2023
    @churik
    Copy link
    Member

    churik commented Dec 6, 2023

    @briansztamfater I believe this should go through design review, as there is no flow to actually test - only one screen
    @Francesca-G
    Screens from my devices:

    • IPhone 14 Pro:
      IMAGE 2023-12-06 12:46:24

    • Google Pixel 7:
      IMAGE 2023-12-06 12:46:49

    [transaction-from status-account-props theme]
    [transaction-to user-props theme]
    [transaction-details theme]
    [rn/view {:style style/slide-button-container}
    Copy link
    Contributor

    Choose a reason for hiding this comment

    The reason will be displayed to describe this comment to others. Learn more.

    a nit here, we should instead use container-style prop on the actual component because it is much easier to read imo.

    also here we should be using slide-button from status-im2.common.standard-authentication.core instead as this will handle the auth flows 👍 -
    It's a follow up anyway and the UI will be the same 👍

    Copy link
    Contributor Author

    @briansztamfater briansztamfater Dec 6, 2023

    Choose a reason for hiding this comment

    The reason will be displayed to describe this comment to others. Learn more.

    Yes, I replaced it on the PR with with backend integration. Will merge this first and replace it shortly with the integration part ✨

    Copy link

    @Francesca-G Francesca-G left a comment

    Choose a reason for hiding this comment

    The reason will be displayed to describe this comment to others. Learn more.

    Looks good to me ✨

    Only issue to fix: the icon in the page nav is missing the copy "advanced" as per design:

    Screenshot 2023-12-06 alle 18 00 54

    Implementation with icon only:

    Screenshot 2023-12-06 alle 18 01 21

    @briansztamfater
    Copy link
    Contributor Author

    briansztamfater commented Dec 6, 2023

    Looks good to me ✨

    Only issue to fix: the icon in the page nav is missing the copy "advanced" as per design:

    Screenshot 2023-12-06 alle 18 00 54 >

    Implementation with icon only:

    Screenshot 2023-12-06 alle 18 01 21

    Will create an issue to fix this as we need to first make modification to our navigation component. Thanks for the review!

    @briansztamfater briansztamfater force-pushed the feat/transaction-confirmation-ui branch 2 times, most recently from 178ec4d to 56a78c1 Compare December 6, 2023 19:51
    @briansztamfater briansztamfater force-pushed the feat/transaction-confirmation-ui branch from 56a78c1 to fd0a23e Compare December 6, 2023 22:04
    @briansztamfater briansztamfater merged commit 198a4d7 into develop Dec 6, 2023
    @briansztamfater briansztamfater deleted the feat/transaction-confirmation-ui branch December 6, 2023 23:16
    yevh-berdnyk pushed a commit that referenced this pull request Dec 8, 2023
    Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
    Projects
    Archived in project
    Archived in project
    Development

    Successfully merging this pull request may close these issues.

    Implement Send > Transaction Confirmation & Sign page
    7 participants