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

Implement transaction progress component #17933

Merged
merged 105 commits into from
Dec 6, 2023

Conversation

mmilad75
Copy link
Contributor

@mmilad75 mmilad75 commented Nov 17, 2023

fixes #16525

Design: https://www.figma.com/file/WQZcp6S0EnzxdTL4taoKDv/Design-System-for-Mobile?type=design&node-id=22699-214190&mode=design&t=lo60mCKqnVfMaM1g-0

Android iOS
Screen.Recording.2023-11-21.at.17.37.59.mov
Screen.Recording.2023-11-21.at.15.14.33.mov

@status-im-auto
Copy link
Member

status-im-auto commented Nov 17, 2023

Jenkins Builds

Click to see older builds (111)
Commit #️⃣ Finished (UTC) Duration Platform Result
2f63002 #1 2023-11-17 12:01:49 ~2 min tests 📄log
✔️ 2f63002 #1 2023-11-17 12:05:24 ~6 min ios 📱ipa 📲
✔️ 2f63002 #1 2023-11-17 12:05:31 ~6 min android-e2e 🤖apk 📲
✔️ 2f63002 #1 2023-11-17 12:05:42 ~6 min android 🤖apk 📲
✔️ e2aae35 #2 2023-11-21 09:53:13 ~6 min android-e2e 🤖apk 📲
✔️ e2aae35 #2 2023-11-21 09:54:26 ~7 min android 🤖apk 📲
✔️ e2aae35 #2 2023-11-21 09:57:31 ~10 min tests 📄log
✔️ e2aae35 #2 2023-11-21 10:00:04 ~12 min ios 📱ipa 📲
✔️ 390057f #4 2023-11-21 14:24:39 ~7 min ios 📱ipa 📲
✔️ 390057f #4 2023-11-21 14:27:45 ~11 min android 🤖apk 📲
✔️ 390057f #4 2023-11-21 14:28:10 ~11 min android-e2e 🤖apk 📲
✔️ 390057f #4 2023-11-21 14:28:16 ~11 min tests 📄log
✔️ daf2bce #5 2023-11-22 09:15:43 ~6 min android 🤖apk 📲
✔️ daf2bce #5 2023-11-22 09:18:20 ~8 min android-e2e 🤖apk 📲
✔️ daf2bce #5 2023-11-22 09:20:20 ~10 min tests 📄log
✔️ daf2bce #5 2023-11-22 09:21:59 ~12 min ios 📱ipa 📲
abd326d #6 2023-11-22 10:31:13 ~3 min tests 📄log
✔️ abd326d #6 2023-11-22 10:35:07 ~6 min android-e2e 🤖apk 📲
✔️ abd326d #6 2023-11-22 10:35:17 ~7 min android 🤖apk 📲
✔️ abd326d #6 2023-11-22 10:35:37 ~7 min ios 📱ipa 📲
✔️ 6a55b76 #7 2023-11-22 11:19:35 ~6 min android 🤖apk 📲
✔️ 6a55b76 #7 2023-11-22 11:19:35 ~6 min android-e2e 🤖apk 📲
✔️ 6a55b76 #7 2023-11-22 11:25:03 ~12 min ios 📱ipa 📲
✔️ b10a53d #8 2023-11-22 11:45:57 ~5 min android-e2e 🤖apk 📲
✔️ b10a53d #8 2023-11-22 11:46:13 ~6 min ios 📱ipa 📲
✔️ b10a53d #8 2023-11-22 11:49:01 ~8 min android 🤖apk 📲
b10a53d #8 2023-11-22 11:51:12 ~11 min tests 📄log
✔️ 5ff98d8 #9 2023-11-22 12:08:35 ~6 min android-e2e 🤖apk 📲
✔️ 5ff98d8 #9 2023-11-22 12:08:47 ~6 min android 🤖apk 📲
5ff98d8 #9 2023-11-22 12:13:22 ~11 min tests 📄log
✔️ 5ff98d8 #9 2023-11-22 12:14:41 ~12 min ios 📱ipa 📲
✔️ f63be22 #11 2023-11-23 11:27:20 ~7 min android 🤖apk 📲
✔️ f63be22 #10 2023-11-23 11:30:57 ~10 min android-e2e 🤖apk 📲
✔️ f63be22 #10 2023-11-23 11:31:36 ~11 min tests 📄log
✔️ f63be22 #10 2023-11-23 11:31:43 ~11 min ios 📱ipa 📲
✔️ e5e6ac3 #11 2023-11-23 13:54:12 ~6 min android-e2e 🤖apk 📲
✔️ e5e6ac3 #12 2023-11-23 13:54:36 ~6 min android 🤖apk 📲
✔️ e5e6ac3 #11 2023-11-23 14:00:31 ~12 min ios 📱ipa 📲
✔️ e5e6ac3 #11 2023-11-23 14:04:13 ~16 min tests 📄log
✔️ d459d73 #14 2023-11-27 15:16:48 ~7 min android-e2e 🤖apk 📲
✔️ d459d73 #15 2023-11-27 15:16:58 ~7 min android 🤖apk 📲
✔️ d459d73 #13 2023-11-27 15:21:17 ~11 min tests 📄log
✔️ d459d73 #14 2023-11-27 15:23:33 ~14 min ios 📱ipa 📲
✔️ eb7b060 #15 2023-11-28 09:01:31 ~6 min ios 📱ipa 📲
✔️ eb7b060 #16 2023-11-28 09:01:42 ~6 min android 🤖apk 📲
✔️ eb7b060 #15 2023-11-28 09:05:04 ~9 min android-e2e 🤖apk 📲
✔️ eb7b060 #14 2023-11-28 09:07:43 ~12 min tests 📄log
✔️ a0d079d #16 2023-11-28 10:54:44 ~6 min android-e2e 🤖apk 📲
✔️ a0d079d #17 2023-11-28 10:55:13 ~7 min android 🤖apk 📲
✔️ a0d079d #15 2023-11-28 11:00:38 ~12 min tests 📄log
✔️ a0d079d #16 2023-11-28 11:01:22 ~13 min ios 📱ipa 📲
✔️ d614dc5 #17 2023-11-28 13:39:04 ~6 min android-e2e 🤖apk 📲
✔️ d614dc5 #18 2023-11-28 13:39:10 ~6 min android 🤖apk 📲
✔️ d614dc5 #17 2023-11-28 13:45:04 ~12 min ios 📱ipa 📲
✔️ d614dc5 #16 2023-11-28 13:45:11 ~12 min tests 📄log
✔️ 75b294c #19 2023-11-28 15:04:01 ~6 min android 🤖apk 📲
✔️ 75b294c #18 2023-11-28 15:04:10 ~6 min ios 📱ipa 📲
✔️ 75b294c #18 2023-11-28 15:08:10 ~11 min android-e2e 🤖apk 📲
✔️ 75b294c #17 2023-11-28 15:08:15 ~11 min tests 📄log
✔️ fbc5b2c #21 2023-11-29 12:14:16 ~7 min android 🤖apk 📲
✔️ fbc5b2c #20 2023-11-29 12:17:16 ~10 min android-e2e 🤖apk 📲
✔️ fbc5b2c #20 2023-11-29 12:21:19 ~14 min ios 📱ipa 📲
✔️ 29b082b #22 2023-11-29 18:19:17 ~6 min android 🤖apk 📲
✔️ 29b082b #21 2023-11-29 18:20:22 ~7 min ios 📱ipa 📲
✔️ 29b082b #21 2023-11-29 18:22:57 ~9 min android-e2e 🤖apk 📲
29b082b #20 2023-11-29 18:25:12 ~11 min tests 📄log
✔️ 3c9b90b #23 2023-11-30 10:32:35 ~6 min android-e2e 🤖apk 📲
✔️ 3c9b90b #24 2023-11-30 10:35:33 ~9 min android 🤖apk 📲
3c9b90b #22 2023-11-30 10:37:25 ~11 min tests 📄log
✔️ 3c9b90b #23 2023-11-30 10:40:50 ~14 min ios 📱ipa 📲
✔️ 217f7c8 #25 2023-11-30 10:49:30 ~6 min android 🤖apk 📲
✔️ 217f7c8 #24 2023-11-30 10:50:53 ~7 min ios 📱ipa 📲
✔️ 217f7c8 #24 2023-11-30 10:51:53 ~8 min android-e2e 🤖apk 📲
✔️ 217f7c8 #23 2023-11-30 10:54:14 ~10 min tests 📄log
✔️ 9b23cdb #25 2023-11-30 12:26:58 ~5 min android-e2e 🤖apk 📲
✔️ 9b23cdb #25 2023-11-30 12:28:46 ~7 min ios 📱ipa 📲
✔️ 9b23cdb #26 2023-11-30 12:31:07 ~10 min android 🤖apk 📲
✔️ 9b23cdb #24 2023-11-30 12:32:20 ~11 min tests 📄log
✔️ 2e24d65 #26 2023-12-04 09:57:34 ~7 min ios 📱ipa 📲
✔️ 2e24d65 #26 2023-12-04 10:01:52 ~11 min android-e2e 🤖apk 📲
✔️ 2e24d65 #25 2023-12-04 10:03:21 ~13 min tests 📄log
✔️ 2e24d65 #27 2023-12-04 10:03:28 ~13 min android 🤖apk 📲
✔️ b07ab47 #28 2023-12-04 13:22:15 ~7 min android-e2e 🤖apk 📲
✔️ b07ab47 #29 2023-12-04 13:23:33 ~8 min android 🤖apk 📲
✔️ b07ab47 #27 2023-12-04 13:25:57 ~11 min tests 📄log
✔️ 8dcc8d3 #29 2023-12-04 13:38:09 ~6 min android-e2e 🤖apk 📲
✔️ 8dcc8d3 #30 2023-12-04 13:38:13 ~6 min android 🤖apk 📲
✔️ 8dcc8d3 #29 2023-12-04 13:38:46 ~7 min ios 📱ipa 📲
✔️ 8dcc8d3 #28 2023-12-04 13:42:40 ~11 min tests 📄log
✔️ 844da0d #30 2023-12-04 14:01:56 ~7 min android-e2e 🤖apk 📲
✔️ 844da0d #29 2023-12-04 14:06:52 ~12 min tests 📄log
✔️ 844da0d #31 2023-12-04 14:06:53 ~12 min android 🤖apk 📲
✔️ 844da0d #30 2023-12-04 14:07:03 ~12 min ios 📱ipa 📲
✔️ 5934ecd #31 2023-12-04 15:21:29 ~6 min android-e2e 🤖apk 📲
✔️ 5934ecd #31 2023-12-04 15:23:48 ~8 min ios 📱ipa 📲
✔️ 5934ecd #32 2023-12-04 15:26:26 ~11 min android 🤖apk 📲
✔️ 5934ecd #30 2023-12-04 15:26:28 ~11 min tests 📄log
✔️ 316a80f #33 2023-12-04 18:43:25 ~6 min android 🤖apk 📲
✔️ 316a80f #32 2023-12-04 18:44:04 ~7 min android-e2e 🤖apk 📲
✔️ 316a80f #32 2023-12-04 18:44:41 ~7 min ios 📱ipa 📲
✔️ 316a80f #31 2023-12-04 18:47:48 ~10 min tests 📄log
✔️ 08891dc #34 2023-12-05 10:18:33 ~6 min android 🤖apk 📲
✔️ 08891dc #33 2023-12-05 10:19:44 ~7 min ios 📱ipa 📲
✔️ 08891dc #33 2023-12-05 10:20:58 ~8 min android-e2e 🤖apk 📲
✔️ 08891dc #32 2023-12-05 10:23:24 ~10 min tests 📄log
✔️ 7148334 #34 2023-12-05 12:25:43 ~6 min android-e2e 🤖apk 📲
✔️ 7148334 #35 2023-12-05 12:25:46 ~6 min android 🤖apk 📲
✔️ c6e762d #35 2023-12-05 12:33:12 ~6 min android-e2e 🤖apk 📲
✔️ c6e762d #36 2023-12-05 12:33:12 ~6 min android 🤖apk 📲
✔️ c6e762d #34 2023-12-05 12:38:11 ~11 min tests 📄log
✔️ c6e762d #35 2023-12-05 12:41:01 ~14 min ios 📱ipa 📲
Commit #️⃣ Finished (UTC) Duration Platform Result
✔️ 63ba028 #37 2023-12-05 17:40:10 ~6 min android 🤖apk 📲
✔️ 63ba028 #36 2023-12-05 17:40:40 ~7 min ios 📱ipa 📲
✔️ 63ba028 #36 2023-12-05 17:44:20 ~11 min android-e2e 🤖apk 📲
✔️ c0b37b6 #37 2023-12-06 10:27:36 ~7 min android-e2e 🤖apk 📲
✔️ c0b37b6 #38 2023-12-06 10:27:43 ~7 min android 🤖apk 📲
✔️ c0b37b6 #36 2023-12-06 10:32:34 ~11 min tests 📄log
✔️ c0b37b6 #37 2023-12-06 10:34:33 ~13 min ios 📱ipa 📲

(cond
(and (= network :arbitrum)
(= state :sending)) [:i/positive-state
(colors/theme-colors colors/success-50
Copy link
Contributor

Choose a reason for hiding this comment

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

please use (colors/resolve-color :success theme)
same for danger
(colors/resolve-color :danger theme)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Done

:network network
:state state
:customization-color :blue})

Copy link
Contributor

Choose a reason for hiding this comment

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

@mmilad75, could you please also add the test for [quo/confirmation-propgress] without props?
p.s. also there is a misprint in quo/confirmation-propgress name)

Copy link
Member

@smohamedjavid smohamedjavid left a comment

Choose a reason for hiding this comment

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

🚀 🚀

Copy link
Member

@briansztamfater briansztamfater left a comment

Choose a reason for hiding this comment

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

💪

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 ✨

Adding the follow up required label due to some color issues to fix, as commented here: https://www.figma.com/file/Tf5nfkYvpbnNCo4rKLK7lS/Feedback-for-Mobile?type=design&node-id=3446%3A227419&mode=design&t=9BcgigIIvs3P1pKV-1

@mmilad75 mmilad75 merged commit aaf0b8e into develop Dec 6, 2023
6 checks passed
@mmilad75 mmilad75 deleted the milad/16525-transaction-progress-ui branch December 6, 2023 10:39
yevh-berdnyk pushed a commit that referenced this pull request Dec 8, 2023
* copy codes

* refactor preview

* refactor deprecated codes in view

* change condition structure in view-internal

* comment unused codes

* refactor title

* fix title style

* fix icon style

* fix context tag

* fix icon and row

* refactor icon-internal

* rename network-state and network-type

* fix progress-container style

* fix progress-box-container style

* fix progress container naming and style

* change progress-bar component

* fix progress box component

* convert to functional component and bring back the animation

* fix progress box for arbitrum-optimism network

* fix text-steps

* fix status-row

* refactor code style

* refactor get-network-text

* resolve comment

* add translations

* remove btn-title prop

* fix dark mode border color

* fix dark mode icon color

* move interval to preview

* add tests ns

* add tests

* fix lint issues

* fix rendering issue

* fix lint issue

* add arbitrum and optimism as separate networks

* create const for progress percentage

* fix progress bar component and preview

* refactor text-steps

* refactor names

* fix lint issues

* rename arbitrum-progress-percentage and optimism-progress-percentage

* update tests

* convert hard-coded color to customization-color

* fix progress_bar tests

* separate state for each network

* add progress percentage for each network and refactor params of functions

* separate epoch number for  each network

* update tests

* fix lint issues

* refactor codes

* fix lint issues

* resolve comments

* add confirmation progress

* use confirmation-progress component in transaction-progress

* fix preview

* add tests

* fix lint issue

* resolve comment

* refactor networks

* change sending state style

* update tests

* fix lint issues

* remove unused code

* add helper for calculate counter step

* add assoc-props to view-networks

* change text-internal props order

* fix colors/resolve-color usage

* refactor view codes

* add get-networks to preview

* add max-value to progress bar style

* remove threading macros in the previews

* remove inline functional components in the previews

* remove optimism-arbitrum checks in the view

* fix lint issues

* add max-progress and min-progress to confirmation-progress

* refactor text-steps

* fix counter structure in transaction-progress

* fix counter structure in confirmation-progress

* fix resolve-color usage

* fix lint issue

* fix tests

* resolve comments

* fix color issue

* fix margins

* fix lint issue
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 transaction progress component
8 participants