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

Replace TokenSelector with the new version #16321

Merged
merged 13 commits into from
Sep 23, 2024
Merged

Conversation

micieslak
Copy link
Member

@micieslak micieslak commented Sep 11, 2024

[!WARNING]
status-im/SortFilterProxyModel#5 must be merged first and then SFPM subrepo must be updated accordingly before merging.

What does the PR do

  • Replaces TokenSelector with AssetSelector in SwapModal
  • Replaces TokenSelector with AssetSelectorCompact in BuyCryptoModal
  • Fixes stuttering scrolling in SwapModal
  • Remove the old TokenSelector and rename TokenSelectorNew into TokenSelector. It requires migration of existing tests to the new components with more focus on testing in separation, with separate unit tests for subcomponents.

Instead of single TokenSelector there are 3 small components composed of common sub-components:

  • AssetSelector (only assets, big button)
  • AssetSelectorCompact (only assets, small button)
  • TokenSelectorNew (both assets and collectibles in tabs, will be renamed to TokenSelector)

Closes: #16220
Closes: #16025
Closes: #16310

Affected areas

SwapModal, BuyCryptoModal

Architecture compliance

  • I am familiar with the application architecture and agreed good practices.
    My PR is consistent with this document: Architecture guidelines

@status-im-auto
Copy link
Member

status-im-auto commented Sep 11, 2024

Jenkins Builds

Click to see older builds (67)
Commit #️⃣ Finished (UTC) Duration Platform Result
✔️ d02d7f8 #1 2024-09-11 15:17:13 ~6 min tests/nim 📄log
d02d7f8 #1 2024-09-11 15:21:49 ~11 min tests/ui 📄log
✔️ d02d7f8 #1 2024-09-11 15:25:27 ~14 min linux-nix/x86_64 📦tgz
✔️ d02d7f8 #1 2024-09-11 15:26:26 ~15 min macos/x86_64 🍎dmg
✔️ d02d7f8 #1 2024-09-11 15:28:11 ~17 min linux/x86_64 📦tgz
✔️ d02d7f8 #1 2024-09-11 15:38:39 ~28 min macos/aarch64 🍎dmg
✔️ d02d7f8 #2 2024-09-11 20:56:09 ~7 min tests/ui 📄log
✔️ 34344dc #2 2024-09-13 11:12:59 ~4 min macos/aarch64 🍎dmg
✔️ 34344dc #2 2024-09-13 11:14:49 ~6 min tests/nim 📄log
✔️ 34344dc #2 2024-09-13 11:19:21 ~10 min macos/x86_64 🍎dmg
34344dc #3 2024-09-13 11:19:47 ~11 min tests/ui 📄log
✔️ 34344dc #2 2024-09-13 11:24:42 ~16 min linux/x86_64 📦tgz
✔️ 34344dc #2 2024-09-13 11:25:06 ~16 min linux-nix/x86_64 📦tgz
✔️ 6e468d5 #4 2024-09-13 12:06:54 ~9 min macos/aarch64 🍎dmg
✔️ 6e468d5 #4 2024-09-13 12:07:11 ~9 min tests/nim 📄log
✔️ 6e468d5 #5 2024-09-13 12:14:11 ~16 min tests/ui 📄log
✔️ 6e468d5 #4 2024-09-13 12:14:13 ~16 min macos/x86_64 🍎dmg
✔️ 6e468d5 #4 2024-09-13 12:16:51 ~19 min linux-nix/x86_64 📦tgz
✔️ 6e468d5 #4 2024-09-13 12:19:11 ~21 min linux/x86_64 📦tgz
✔️ 478b475 #5 2024-09-13 14:35:53 ~4 min macos/aarch64 🍎dmg
✔️ 478b475 #5 2024-09-13 14:38:10 ~6 min tests/nim 📄log
✔️ 478b475 #5 2024-09-13 14:42:01 ~10 min macos/x86_64 🍎dmg
✔️ 478b475 #6 2024-09-13 14:43:15 ~11 min tests/ui 📄log
✔️ 478b475 #5 2024-09-13 14:45:49 ~14 min linux/x86_64 📦tgz
✔️ 478b475 #5 2024-09-13 14:45:58 ~14 min linux-nix/x86_64 📦tgz
✔️ 6263bcf #6 2024-09-16 15:00:19 ~4 min macos/aarch64 🍎dmg
✔️ 6263bcf #6 2024-09-16 15:02:25 ~6 min tests/nim 📄log
✔️ 6263bcf #6 2024-09-16 15:06:47 ~10 min macos/x86_64 🍎dmg
✔️ 6263bcf #7 2024-09-16 15:09:54 ~13 min tests/ui 📄log
✔️ 6263bcf #6 2024-09-16 15:10:17 ~14 min linux-nix/x86_64 📦tgz
✔️ 6263bcf #6 2024-09-16 15:10:57 ~15 min linux/x86_64 📦tgz
✔️ 26eb757 #7 2024-09-16 21:52:05 ~6 min tests/nim 📄log
✔️ 26eb757 #7 2024-09-16 21:52:29 ~6 min macos/aarch64 🍎dmg
✔️ 26eb757 #7 2024-09-16 21:56:48 ~11 min macos/x86_64 🍎dmg
✔️ 26eb757 #8 2024-09-16 21:57:28 ~11 min tests/ui 📄log
✔️ 26eb757 #7 2024-09-16 21:59:05 ~13 min linux/x86_64 📦tgz
✔️ 26eb757 #7 2024-09-16 21:59:36 ~14 min linux-nix/x86_64 📦tgz
✔️ 83a85db #8 2024-09-18 12:12:10 ~6 min tests/nim 📄log
✔️ 83a85db #8 2024-09-18 12:13:54 ~8 min macos/aarch64 🍎dmg
✔️ 83a85db #8 2024-09-18 12:16:42 ~11 min macos/x86_64 🍎dmg
83a85db #9 2024-09-18 12:16:54 ~11 min tests/ui 📄log
✔️ 83a85db #8 2024-09-18 12:19:37 ~14 min linux-nix/x86_64 📦tgz
✔️ 83a85db #8 2024-09-18 12:20:26 ~14 min linux/x86_64 📦tgz
✔️ 13c42d3 #9 2024-09-18 12:58:51 ~3 min macos/aarch64 🍎dmg
✔️ 13c42d3 #9 2024-09-18 13:01:54 ~7 min tests/nim 📄log
✔️ 13c42d3 #9 2024-09-18 13:05:24 ~10 min macos/x86_64 🍎dmg
✔️ 13c42d3 #10 2024-09-18 13:06:47 ~11 min tests/ui 📄log
✔️ 13c42d3 #9 2024-09-18 13:07:30 ~12 min linux-nix/x86_64 📦tgz
✔️ 13c42d3 #9 2024-09-18 13:10:40 ~15 min linux/x86_64 📦tgz
✔️ a63ed71 #10 2024-09-18 14:14:54 ~4 min macos/aarch64 🍎dmg
✔️ a63ed71 #10 2024-09-18 14:17:10 ~6 min tests/nim 📄log
✔️ a63ed71 #11 2024-09-18 14:22:35 ~11 min tests/ui 📄log
✔️ a63ed71 #10 2024-09-18 14:22:59 ~12 min macos/x86_64 🍎dmg
✔️ a63ed71 #10 2024-09-18 14:23:51 ~13 min linux-nix/x86_64 📦tgz
✔️ a63ed71 #10 2024-09-18 14:25:58 ~15 min linux/x86_64 📦tgz
✔️ fc39b41 #11 2024-09-20 07:55:21 ~4 min macos/aarch64 🍎dmg
✔️ fc39b41 #11 2024-09-20 07:57:15 ~6 min tests/nim 📄log
✔️ fc39b41 #11 2024-09-20 08:01:59 ~11 min macos/x86_64 🍎dmg
✔️ fc39b41 #12 2024-09-20 08:02:35 ~11 min tests/ui 📄log
✔️ fc39b41 #11 2024-09-20 08:05:28 ~14 min linux/x86_64 📦tgz
✔️ fc39b41 #11 2024-09-20 08:07:14 ~16 min linux-nix/x86_64 📦tgz
✔️ 8a5499c #12 2024-09-20 08:36:50 ~4 min macos/aarch64 🍎dmg
✔️ 8a5499c #12 2024-09-20 08:39:30 ~6 min tests/nim 📄log
✔️ 8a5499c #12 2024-09-20 08:42:58 ~10 min macos/x86_64 🍎dmg
✔️ 8a5499c #13 2024-09-20 08:44:28 ~11 min tests/ui 📄log
✔️ 8a5499c #12 2024-09-20 08:45:21 ~12 min linux-nix/x86_64 📦tgz
✔️ 8a5499c #12 2024-09-20 08:48:35 ~15 min linux/x86_64 📦tgz
Commit #️⃣ Finished (UTC) Duration Platform Result
✔️ ee3bf86 #13 2024-09-20 10:31:24 ~4 min macos/aarch64 🍎dmg
✔️ ee3bf86 #13 2024-09-20 10:33:35 ~6 min tests/nim 📄log
ee3bf86 #14 2024-09-20 10:38:51 ~11 min tests/ui 📄log
✔️ ee3bf86 #13 2024-09-20 10:38:53 ~11 min linux-nix/x86_64 📦tgz
✔️ ee3bf86 #13 2024-09-20 10:40:11 ~13 min macos/x86_64 🍎dmg
✔️ ee3bf86 #13 2024-09-20 10:41:49 ~14 min linux/x86_64 📦tgz
✔️ ee3bf86 #15 2024-09-20 10:47:09 ~5 min tests/ui 📄log
✔️ eaa9db7 #14 2024-09-23 08:20:13 ~4 min macos/aarch64 🍎dmg
✔️ eaa9db7 #14 2024-09-23 08:22:27 ~6 min tests/nim 📄log
✔️ eaa9db7 #16 2024-09-23 08:27:15 ~11 min tests/ui 📄log
✔️ eaa9db7 #14 2024-09-23 08:27:22 ~11 min macos/x86_64 🍎dmg
✔️ eaa9db7 #14 2024-09-23 08:28:57 ~13 min linux-nix/x86_64 📦tgz
✔️ eaa9db7 #14 2024-09-23 08:30:24 ~14 min linux/x86_64 📦tgz

@status-im-auto
Copy link
Member

Copy link
Member

@caybro caybro left a comment

Choose a reason for hiding this comment

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

Looking good overall, gonna give it a test drive locally

Just some minor things inline

@status-im-auto
Copy link
Member

@micieslak micieslak force-pushed the chore/issue-16220-16025 branch 2 times, most recently from 6da2cf4 to 6e468d5 Compare September 13, 2024 11:57
@status-im-auto
Copy link
Member

@status-im-auto
Copy link
Member

@status-im-auto
Copy link
Member

@status-im-auto
Copy link
Member

}

function reset() {
button.selected = false
Copy link
Member

Choose a reason for hiding this comment

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

Shouldn't you reset the searchableAssetsPanel.highlightedKey here as well?

Copy link
Member

@caybro caybro left a comment

Choose a reason for hiding this comment

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

Found an issue related to search probably:

Zaznam.obrazovky.z.2024-09-17.12-50-07.mp4

If you edit the search string (and even back to empty), then the list of assets displays again

@caybro
Copy link
Member

caybro commented Sep 17, 2024

@micieslak also, it would be nice to add/show some collectibles in SendModal under Storybook, hard to see whether it works correctly or not

@caybro
Copy link
Member

caybro commented Sep 17, 2024

Another issue (specific to SwapModal); the search should not be persistent:

Zaznam.obrazovky.z.2024-09-17.12-54-38.mp4

@micieslak
Copy link
Member Author

Found an issue related to search probably:

Zaznam.obrazovky.z.2024-09-17.12-50-07.mp4
If you edit the search string (and even back to empty), then the list of assets displays again

Could you provide the full video? I cannot reproduce, not sure what I'm missing.

@caybro
Copy link
Member

caybro commented Sep 17, 2024

Found an issue related to search probably:
Zaznam.obrazovky.z.2024-09-17.12-50-07.mp4
If you edit the search string (and even back to empty), then the list of assets displays again

Could you provide the full video? I cannot reproduce, not sure what I'm missing.

Here it is, didn't press or type anything, just switched the Assets/Collectibles tab:

Zaznam.obrazovky.z.2024-09-17.13-36-53.mp4

No warnings in console at all

@status-im-auto
Copy link
Member

@status-im-auto
Copy link
Member

@caybro
Copy link
Member

caybro commented Sep 19, 2024

@caybro Thank you for the detailed testing. I managed to do the full transition to new components within this PR (unit tests added covering functionality that was covered so far, old stuff removed). I fixed issues you mentioned but I cannot reproduce the one with disappearing asset tab content. There were some small changes added, please re-test and check if the problem is there. If yes, I will probably need your help to investigate it.

I wonder it's reproducible in your env in TokenSelectorPage 🤔

No longer reproducible in TokenSelectorPage but still reproducible in SendModalPage. The app itself works fine though

Copy link
Member

@caybro caybro 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 and works fine in the app; pls remove TokenSelectorView (together with its SB page and QML test) completely instead of the changes done here, it's no longer used anywhere at all :)

@micieslak
Copy link
Member Author

Looks good and works fine in the app; pls remove TokenSelectorView (together with its SB page and QML test) completely instead of the changes done here, it's no longer used anywhere at all :)

TokenSelectorView removed, thanks for spotting that.

Copy link
Member

@caybro caybro left a comment

Choose a reason for hiding this comment

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

Nice job!

@status-im-auto
Copy link
Member

@status-im-auto
Copy link
Member

@caybro
Copy link
Member

caybro commented Sep 20, 2024

@caybro Thank you for the detailed testing. I managed to do the full transition to new components within this PR (unit tests added covering functionality that was covered so far, old stuff removed). I fixed issues you mentioned but I cannot reproduce the one with disappearing asset tab content. There were some small changes added, please re-test and check if the problem is there. If yes, I will probably need your help to investigate it.
I wonder it's reproducible in your env in TokenSelectorPage 🤔

No longer reproducible in TokenSelectorPage but still reproducible in SendModalPage. The app itself works fine though

Works correctly everywhere now, great job!

Copy link
Member

@caybro caybro left a comment

Choose a reason for hiding this comment

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

SwapModal:
image

SendModal looks better but the assets list is not scrollable:
image

Copy link
Member

@caybro caybro left a comment

Choose a reason for hiding this comment

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

All good! Scrolling fixed, the missing delegates were due to the SFPM changes (not being rebuilt on my side)

@micieslak
Copy link
Member Author

@caybro

  • first screen is about not synced SFPM repo
  • second issue, fixed

Thank you for testing!

@status-im-auto
Copy link
Member

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! 👍 Minor questions/suggestions


closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
padding: 0

Copy link
Contributor

Choose a reason for hiding this comment

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

WDYT of: onClosed: searchableAssetsPanel.clearSearch()

Copy link
Contributor

Choose a reason for hiding this comment

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

The idea here is that the search is persistent and I think it shouldn't be

Copy link
Member Author

Choose a reason for hiding this comment

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

I wasn't sure what approach is better and desired from design pov 🤔

Copy link
Contributor

Choose a reason for hiding this comment

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

I think it's uncommon to persist the filtering in the dropdown menu. But could be easily wrong 😄 Maybe Ben can help and we can create a task if any change is needed.

@benjthayer We have this kind of dropdown menu presented in the image below. It has the search bar that will filter the assets or collectibles. Should we persist the search string in between openings?
E.g. User searches for SNT and decides to close the menu. Goes back to the dropdown and opens the menu. The search bar should be empty, or SNT should still be there?

Screenshot 2024-09-20 at 20 38 00

font.pixelSize: 15
color: Theme.palette.baseColor1
text: ModelUtils.getByKey(holdingSelector.model, "tokensKey", holdingSelector.currentTokensKey, "symbol")
function update() {
Copy link
Contributor

Choose a reason for hiding this comment

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

Could this be replaced with the ModelEntry? So instead of calling update manually to create a ModelEntry to select the asset entry to be selected and to configure the assetKey in the AssetSelectorCompact. The AssetSelectorCompact will update the internals if the key is valid.

Copy link
Member Author

Choose a reason for hiding this comment

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

I think that this and other problems are intended to be fixed here: #16211

ui/app/AppLayouts/Wallet/panels/SwapInputPanel.qml Outdated Show resolved Hide resolved
d.isTokenSelected = true
tokenSelectorButton.name = name
tokenSelectorButton.icon = icon
button.name = name
Copy link
Contributor

Choose a reason for hiding this comment

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

Isn't it an issue if the custom data is not available in the model?

I'm wondering why we have this setCustom instead of selecting just the key from the outside and populate the button data with the data available from the model.

Copy link
Member Author

Choose a reason for hiding this comment

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

This approach gives a bit more flexibility but I'm not fully sure now if it's needed (it's possible to set content not available in model).

At some point it was said that history of activities may refer to tokens that are not currently in the wallet. So if we want to open send/swap modal on it, me must have possibility to set entry not present in the model normally used for selection. But indeed I'm not sure if it's necessary. Anyways, it was motivation of that approach.

storybook/qmlTests/tests/tst_AssetSelector.qml Outdated Show resolved Hide resolved
@micieslak
Copy link
Member Author

Thank you @alexjba for comments, please take a look at responses to decide with ones require some further adjustments.

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! Thank you 🍻

- clear search on close (AssetSelectorCompact)
- sectionProperty removed
- highlighting fixed in TokenSelectorPanel
- setCustom renamed to setSelection
- test data moved into Component object
@micieslak
Copy link
Member Author

@alexjba I added some fxes/amendments according to your suggestion:

  • clear search on close (AssetSelectorCompact)
  • sectionProperty removed (indeed it was not needed, and component still may be used without sections when model has no sectionName role)
  • highlighting fixed in TokenSelectorPanel
  • setCustom renamed to setSelection I think that name is more adequate. If needed we can change the way of managing selection. For now I think it's good enough.
  • test data moved into Component object

@status-im-auto
Copy link
Member

@micieslak micieslak merged commit 00fe754 into master Sep 23, 2024
9 checks passed
@micieslak micieslak deleted the chore/issue-16220-16025 branch September 23, 2024 10:30
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