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(dapps) add DAppsService component and ConnectDAppModal #14615

Merged
merged 5 commits into from
May 20, 2024

Conversation

stefandunca
Copy link
Contributor

@stefandunca stefandunca commented May 6, 2024

Closes #14607

Implement the initial Pairing user workflow and disconnect option forthe first session.

Also

  • rename pairing modal accordingly (PairWCModal.qml) to make room for the proper
    ConnectDAppModal.qml
  • basic tests for service helpers
  • update storybook to reflect the new user workflows

HEAD~1: feat(wallet) customize NetworkFilter for dapps display
HEAD~2: chore(dapps) move dApps UX into its own DAppsWorkflow component
HEAD~3: chore(dapps) move wallet connect service code outside popups
HEAD~4: chore(storybook) load WalletConnect SDK in storybook by QRC for now

Demo using test dApp at https://react-app.walletconnect.com/

connect_wc_flow.mov

@stefandunca stefandunca changed the base branch from master to wc_connect_dapp_modal-14556 May 6, 2024 20:55
@status-im-auto
Copy link
Member

status-im-auto commented May 6, 2024

Jenkins Builds

Click to see older builds (51)
Commit #️⃣ Finished (UTC) Duration Platform Result
✔️ 1555892 #2 2024-05-06 21:01:25 ~5 min tests/nim 📄log
✔️ 1555892 #2 2024-05-06 21:01:50 ~6 min macos/aarch64 🍎dmg
✔️ 1555892 #2 2024-05-06 21:07:06 ~11 min macos/x86_64 🍎dmg
✔️ 8e79216 #3 2024-05-07 16:21:37 ~4 min macos/aarch64 🍎dmg
✔️ 8e79216 #3 2024-05-07 16:23:03 ~5 min tests/nim 📄log
8e79216 #3 2024-05-07 16:26:01 ~8 min tests/ui 📄log
✔️ 8e79216 #3 2024-05-07 16:26:37 ~9 min macos/x86_64 🍎dmg
✔️ 8e79216 #3 2024-05-07 16:34:30 ~17 min linux/x86_64 📦tgz
✔️ 8e79216 #3 2024-05-07 16:50:51 ~33 min windows/x86_64 💿exe
✔️ 76b4f9e #4 2024-05-10 14:08:15 ~5 min tests/nim 📄log
✔️ 76b4f9e #4 2024-05-10 14:08:49 ~6 min macos/aarch64 🍎dmg
✔️ 76b4f9e #4 2024-05-10 14:10:45 ~8 min macos/x86_64 🍎dmg
76b4f9e #4 2024-05-10 14:12:53 ~10 min tests/ui 📄log
✔️ 76b4f9e #4 2024-05-10 14:21:32 ~19 min linux/x86_64 📦tgz
✔️ 76b4f9e #4 2024-05-10 14:32:28 ~29 min windows/x86_64 💿exe
✔️ 6841757 #5 2024-05-10 17:10:18 ~4 min macos/aarch64 🍎dmg
✔️ 6841757 #5 2024-05-10 17:11:57 ~6 min tests/nim 📄log
✔️ 6841757 #5 2024-05-10 17:13:50 ~8 min macos/x86_64 🍎dmg
6841757 #5 2024-05-10 17:16:16 ~10 min tests/ui 📄log
✔️ 6841757 #5 2024-05-10 17:23:15 ~17 min linux/x86_64 📦tgz
✔️ 6841757 #5 2024-05-10 17:37:38 ~31 min windows/x86_64 💿exe
✔️ 6841757 #6 2024-05-13 08:38:11 ~4 min macos/aarch64 🍎dmg
✔️ 6841757 #6 2024-05-13 08:39:47 ~6 min tests/nim 📄log
✔️ 6841757 #6 2024-05-13 08:43:05 ~9 min macos/x86_64 🍎dmg
6841757 #6 2024-05-13 08:43:44 ~10 min tests/ui 📄log
✔️ 6841757 #6 2024-05-13 08:49:27 ~15 min linux/x86_64 📦tgz
✔️ 6841757 #6 2024-05-13 09:04:40 ~31 min windows/x86_64 💿exe
✔️ 98a9234 #7 2024-05-13 13:37:50 ~4 min macos/aarch64 🍎dmg
✔️ 98a9234 #7 2024-05-13 13:39:56 ~6 min tests/nim 📄log
✔️ 98a9234 #7 2024-05-13 13:44:18 ~10 min macos/x86_64 🍎dmg
98a9234 #7 2024-05-13 13:44:26 ~10 min tests/ui 📄log
✔️ 98a9234 #7 2024-05-13 13:48:39 ~15 min linux/x86_64 📦tgz
✔️ 98a9234 #7 2024-05-13 14:06:10 ~32 min windows/x86_64 💿exe
✔️ 1a95bf9 #8 2024-05-14 12:28:45 ~4 min macos/aarch64 🍎dmg
✔️ 1a95bf9 #8 2024-05-14 12:30:01 ~6 min tests/nim 📄log
✔️ 1a95bf9 #8 2024-05-14 12:32:20 ~8 min macos/x86_64 🍎dmg
✔️ 1a95bf9 #8 2024-05-14 12:35:35 ~11 min tests/ui 📄log
✔️ 1a95bf9 #8 2024-05-14 12:45:00 ~21 min linux/x86_64 📦tgz
✔️ 1a95bf9 #8 2024-05-14 12:56:56 ~33 min windows/x86_64 💿exe
✔️ 9ce7926 #9 2024-05-14 16:32:07 ~5 min macos/aarch64 🍎dmg
✔️ 9ce7926 #9 2024-05-14 16:33:33 ~6 min tests/nim 📄log
✔️ 9ce7926 #9 2024-05-14 16:39:36 ~12 min macos/x86_64 🍎dmg
✔️ 9ce7926 #9 2024-05-14 16:43:14 ~16 min tests/ui 📄log
✔️ 9ce7926 #9 2024-05-14 16:44:51 ~18 min linux/x86_64 📦tgz
✔️ 9ce7926 #9 2024-05-14 16:58:27 ~31 min windows/x86_64 💿exe
✔️ 97a50cc #11 2024-05-16 13:57:40 ~5 min macos/aarch64 🍎dmg
✔️ 97a50cc #11 2024-05-16 14:02:17 ~9 min macos/x86_64 🍎dmg
✔️ 97a50cc #11 2024-05-16 14:04:23 ~12 min tests/ui 📄log
✔️ 97a50cc #11 2024-05-16 14:09:11 ~16 min linux/x86_64 📦tgz
✔️ 97a50cc #11 2024-05-16 14:24:20 ~31 min windows/x86_64 💿exe
✔️ 97a50cc #12 2024-05-16 14:51:25 ~7 min tests/nim 📄log
Commit #️⃣ Finished (UTC) Duration Platform Result
✔️ 3493085 #12 2024-05-17 06:56:19 ~4 min macos/aarch64 🍎dmg
✔️ 3493085 #13 2024-05-17 06:57:52 ~6 min tests/nim 📄log
✔️ 3493085 #12 2024-05-17 06:59:57 ~8 min macos/x86_64 🍎dmg
3493085 #12 2024-05-17 07:03:02 ~11 min tests/ui 📄log
✔️ 3493085 #12 2024-05-17 07:09:38 ~17 min linux/x86_64 📦tgz
✔️ 3493085 #12 2024-05-17 07:23:31 ~31 min windows/x86_64 💿exe
✔️ 3493085 #13 2024-05-17 11:04:39 ~16 min tests/ui 📄log
✔️ 7fabb60 #13 2024-05-17 11:36:43 ~4 min macos/aarch64 🍎dmg
✔️ 7fabb60 #14 2024-05-17 11:38:08 ~6 min tests/nim 📄log
✔️ 7fabb60 #13 2024-05-17 11:40:24 ~8 min macos/x86_64 🍎dmg
7fabb60 #14 2024-05-17 11:43:01 ~11 min tests/ui 📄log
✔️ 7fabb60 #13 2024-05-17 11:49:54 ~18 min linux/x86_64 📦tgz
✔️ 7fabb60 #13 2024-05-17 12:05:24 ~33 min windows/x86_64 💿exe
✔️ 7fabb60 #15 2024-05-20 12:24:18 ~16 min tests/ui 📄log

@stefandunca stefandunca force-pushed the dapp_connection-14607 branch 2 times, most recently from 76b4f9e to 6841757 Compare May 10, 2024 17:05
Base automatically changed from wc_connect_dapp_modal-14556 to master May 13, 2024 08:33
@stefandunca stefandunca force-pushed the dapp_connection-14607 branch 3 times, most recently from 1a95bf9 to 9ce7926 Compare May 14, 2024 16:26
@stefandunca stefandunca marked this pull request as ready for review May 14, 2024 17:00
storybook/pages/DAppsWorkflowPage.qml Outdated Show resolved Hide resolved
Copy link
Contributor

@alexjba alexjba left a comment

Choose a reason for hiding this comment

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

Very nice work! 👍

  1. The only blocker for me is that I can't test it and IDK if it's some setup/config I'm missing or it's a bug somewhere.
Screen.Recording.2024-05-16.at.23.03.39.mov
Debug: WC WalletConnectSDK.wcCall.pair; pairLink: wc:465a7cf1a1dc8cf745c20a25e96203a49a8d0a3f32d53be41b96639a4f969000@2?expiryTimestamp=1715890121&relay-protocol=irn&symKey=5936d61cf931e0d831a749d96f7ce3ada9bbef132fa9f2009946b456db20eb6d (qrc:/app/AppLayouts/Wallet/services/dapps/WalletConnectSDK.qml:224, pair)
Debug: WC WalletConnectSDK.onPairResponse; error: Cannot read property 'pair' of null (qrc:/app/AppLayouts/Wallet/services/dapps/WalletConnectSDK.qml:450, onPairResponse)
  1. These colours are ok in the app? I can't reach this state
Screenshot 2024-05-16 at 23 07 37

ui/app/mainui/AppMain.qml Outdated Show resolved Hide resolved
ui/app/mainui/AppMain.qml Outdated Show resolved Hide resolved
@stefandunca
Copy link
Contributor Author

stefandunca commented May 17, 2024

Thanks for the feedback.

  1. The only blocker for me is that I can't test it and IDK if it's some setup/config I'm missing or it's a bug somewhere.

Screen.Recording.2024-05-16.at.23.03.39.mov

Debug: WC WalletConnectSDK.wcCall.pair; pairLink: wc:465a7cf1a1dc8cf745c20a25e96203a49a8d0a3f32d53be41b96639a4f969000@2?expiryTimestamp=1715890121&relay-protocol=irn&symKey=5936d61cf931e0d831a749d96f7ce3ada9bbef132fa9f2009946b456db20eb6d (qrc:/app/AppLayouts/Wallet/services/dapps/WalletConnectSDK.qml:224, pair)
Debug: WC WalletConnectSDK.onPairResponse; error: Cannot read property 'pair' of null (qrc:/app/AppLayouts/Wallet/services/dapps/WalletConnectSDK.qml:450, onPairResponse)

The only thing I can think of is the limitation we have that only one instance of status-desktop is working loading the SDK. However, in this case you should see an earlier webengine error that storage can't be accessed. I postponed to look more into this. Please try again, closing the other instances if you have open :(

  1. These colours are ok in the app? I can't reach this state

I fixed the background, thanks for the heads up. Please have another look.

Storybook: also automate related workflows for faster iteration

Also extend the inspector utils to handle Loaders and Popups

Updates: #14607
Allow to show all selected icons in the network filter
Hide checkboxes in the network filter dropdown

Updates #14607
Implement the initial Pairing user workflow and disconnect option for
the first session.

Also

- rename pairing modal accordingly (`PairWCModal.qml`) to make room for the proper
`ConnectDAppModal.qml`
- basic tests for service helpers
- update storybook to reflect the new user workflows

Closes #14607
Copy link
Contributor

@alexjba alexjba left a comment

Choose a reason for hiding this comment

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

Nice work! Sorry for the delay

@stefandunca stefandunca merged commit ee72ec7 into master May 20, 2024
8 checks passed
@stefandunca stefandunca deleted the dapp_connection-14607 branch May 20, 2024 13:09
stefandunca added a commit that referenced this pull request May 21, 2024
stefandunca added a commit that referenced this pull request May 21, 2024
Spent too much time figuring out the puzzle of
service->module->view->QML just to call a
status-go function.

Keeping this attempt for later while moving to a
simplified Controller/Provider approach. I will
come back to the abstraction when we add tests
to use it.

Updates: #14615
stefandunca added a commit that referenced this pull request May 24, 2024
stefandunca added a commit that referenced this pull request May 24, 2024
Spent too much time figuring out the puzzle of
service->module->view->QML just to call a
status-go function.

Keeping this attempt for later while moving to a
simplified Controller/Provider approach. I will
come back to the abstraction when we add tests
to use it.

Updates: #14615
stefandunca added a commit that referenced this pull request May 28, 2024
stefandunca added a commit that referenced this pull request May 28, 2024
Spent too much time figuring out the puzzle of
service->module->view->QML just to call a
status-go function.

Keeping this attempt for later while moving to a
simplified Controller/Provider approach. I will
come back to the abstraction when we add tests
to use it.

Updates: #14615
stefandunca added a commit that referenced this pull request May 28, 2024
stefandunca added a commit that referenced this pull request May 28, 2024
Spent too much time figuring out the puzzle of
service->module->view->QML just to call a
status-go function.

Keeping this attempt for later while moving to a
simplified Controller/Provider approach. I will
come back to the abstraction when we add tests
to use it.

Updates: #14615
stefandunca added a commit that referenced this pull request May 30, 2024
stefandunca added a commit that referenced this pull request May 30, 2024
Spent too much time figuring out the puzzle of
service->module->view->QML just to call a
status-go function.

Keeping this attempt for later while moving to a
simplified Controller/Provider approach. I will
come back to the abstraction when we add tests
to use it.

Updates: #14615
stefandunca added a commit that referenced this pull request May 30, 2024
stefandunca added a commit that referenced this pull request May 30, 2024
Spent too much time figuring out the puzzle of
service->module->view->QML just to call a
status-go function.

Keeping this attempt for later while moving to a
simplified Controller/Provider approach. I will
come back to the abstraction when we add tests
to use it.

Updates: #14615
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
4 participants