Skip to content

Commit

Permalink
feat(@desktop/wallet): Adapt Token Selector
Browse files Browse the repository at this point in the history 
fixes #16702
  • Loading branch information
@Khushboo-dev-cpp
Khushboo-dev-cpp committed Nov 26, 2024
1 parent c996971 commit f96d34b
Show file tree
Hide file tree
Showing 17 changed files with 267 additions and 49 deletions.
11 changes: 11 additions & 0 deletions storybook/pages/SearchableAssetsPanelPage.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,17 @@ Pane {
iconSource: Constants.tokenIcon("ZRX"),
balances: [],

sectionName: "Popular assets"
},
{
tokensKey: "abc_key",
communityId: "",
name: "0x",
currencyBalanceAsString: "41,22 USD",
symbol: "ABC",
iconSource: Constants.tokenIcon("ABC"),
balances: [],

sectionName: "Popular assets"
}
]
Expand Down
6 changes: 6 additions & 0 deletions storybook/pages/TokenSelectorAssetDelegatePage.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ SplitView {
symbol: "ETH"
currencyBalanceAsString: "14,456.42 USD"
iconSource: Constants.tokenIcon(symbol)
isAutoHovered: ctrlIsAutoHovered.checked

balancesModel: ListModel {
readonly property var data: [
Expand Down Expand Up @@ -85,6 +86,11 @@ SplitView {
text: "Highlighted"
checked: false
}
Switch {
id: ctrlIsAutoHovered
text: "isAutoHovered"
checked: false
}

Item { Layout.fillHeight: true }
}
Expand Down
8 changes: 8 additions & 0 deletions storybook/pages/TokenSelectorCollectibleDelegatePage.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,11 +34,13 @@ SplitView {
name: nameTextField.text
balance: balanceSpinBox.value ? balanceSpinBox.value : ""
image: Constants.tokenIcon("ETH")
networkIcon: "network/Network=Ethereum"

goDeeperIconVisible: goDeeperSwitch.checked

interactive: interactiveSwitch.checked
highlighted: highlightedSwitch.checked
isAutoHovered: ctrlIsAutoHovered.checked
}
}

Expand Down Expand Up @@ -95,6 +97,12 @@ SplitView {
checked: false
}

Switch {
id: ctrlIsAutoHovered
text: "isAutoHovered"
checked: false
}

Item { Layout.fillHeight: true }
}
}
Expand Down
18 changes: 16 additions & 2 deletions storybook/pages/TokenSelectorPage.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,8 @@ Pane {
name: "My token",
balance: 1,
icon: Constants.tokenIcon("CFI"),
chainId: 11155111,
iconUrl: "network/Network=Ethereum"
}
]
},
Expand All @@ -106,18 +108,24 @@ Pane {
name: "Furbeard",
balance: 1,
icon: Constants.tokenIcon("FUEL"),
chainId: 11155111,
iconUrl: "network/Network=Ethereum"
},
{
key: "collection_1_key_2",
name: "Magicat",
balance: 1,
icon: Constants.tokenIcon("ENJ"),
chainId: 11155111,
iconUrl: "network/Network=Ethereum"
},
{
key: "collection_1_key_3",
name: "Happy Meow",
balance: 1,
icon: Constants.tokenIcon("FUN"),
chainId: 11155111,
iconUrl: "network/Network=Ethereum"
}
]
},
Expand All @@ -130,19 +138,25 @@ Pane {
key: "collection_2_key_1",
name: "Unicorn 1",
balance: 12,
icon: Constants.tokenIcon("CVC")
icon: Constants.tokenIcon("CVC"),
chainId: 11155111,
iconUrl: "network/Network=Ethereum"
},
{
key: "collection_2_key_2",
name: "Unicorn 2",
balance: 1,
icon: Constants.tokenIcon("CVC")
icon: Constants.tokenIcon("CVC"),
chainId: 11155111,
iconUrl: "network/Network=Ethereum"
}
]
},
{
groupName: "Unicorn",
icon: Constants.tokenIcon("ELF"),
chainId: 11155111,
iconUrl: "network/Network=Ethereum",
type: "other",
subitems: [
{
Expand Down
18 changes: 16 additions & 2 deletions storybook/pages/TokenSelectorPanelPage.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,8 @@ Pane {
name: "My token",
balance: 1,
icon: Constants.tokenIcon("CFI"),
chainId: 11155111,
iconUrl: "network/Network=Ethereum"
}
]
},
Expand All @@ -105,18 +107,24 @@ Pane {
name: "Furbeard",
balance: 1,
icon: Constants.tokenIcon("FUEL"),
chainId: 11155111,
iconUrl: "network/Network=Ethereum"
},
{
key: "collection_1_key_2",
name: "Magicat",
balance: 1,
icon: Constants.tokenIcon("ENJ"),
chainId: 11155111,
iconUrl: "network/Network=Ethereum"
},
{
key: "collection_1_key_3",
name: "Happy Meow",
balance: 1,
icon: Constants.tokenIcon("FUN"),
chainId: 11155111,
iconUrl: "network/Network=Ethereum"
}
]
},
Expand All @@ -129,20 +137,26 @@ Pane {
key: "collection_2_key_1",
name: "Unicorn 1",
balance: 12,
icon: Constants.tokenIcon("CVC")
icon: Constants.tokenIcon("CVC"),
chainId: 11155111,
iconUrl: "network/Network=Ethereum"
},
{
key: "collection_2_key_2",
name: "Unicorn 2",
balance: 1,
icon: Constants.tokenIcon("CVC")
icon: Constants.tokenIcon("CVC"),
chainId: 11155111,
iconUrl: "network/Network=Ethereum"
}
]
},
{
groupName: "Unicorn",
icon: Constants.tokenIcon("ELF"),
type: "other",
chainId: 11155111,
iconUrl: "network/Network=Ethereum",
subitems: [
{
key: "collection_3_key_1",
Expand Down
6 changes: 6 additions & 0 deletions storybook/qmlTests/tests/tst_SearchableAssetsPanel.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ import QtTest 1.15

import AppLayouts.Wallet.panels 1.0

import StatusQ.Core.Theme 0.1

import Storybook 1.0

import utils 1.0
Expand Down Expand Up @@ -157,6 +159,8 @@ Item {
const delegate1 = listView.itemAtIndex(0)
verify(delegate1)
compare(delegate1.name, "Status Test Token")
verify(delegate1.isAutoHovered)
compare(delegate1.background.color, Theme.palette.baseColor2)
}
{
searchBox.text = "zrx"
Expand All @@ -166,6 +170,8 @@ Item {
const delegate1 = listView.itemAtIndex(0)
verify(delegate1)
compare(delegate1.name, "0x")
verify(delegate1.isAutoHovered)
compare(delegate1.background.color, Theme.palette.baseColor2)
}
{
control.clearSearch()
Expand Down
25 changes: 25 additions & 0 deletions storybook/qmlTests/tests/tst_TokenSelectorAssetDelegate.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import AppLayouts.Wallet.views 1.0

import Storybook 1.0

import StatusQ.Core.Theme 0.1

Item {
id: root

Expand All @@ -21,6 +23,7 @@ Item {
symbol: "ETH"
currencyBalanceAsString: "42.02 USD"
iconSource: ""
isAutoHovered: false
width: 250

readonly property SignalSpy clickSpy: SignalSpy {
Expand Down Expand Up @@ -129,5 +132,27 @@ Item {
verify(subBalanceText1.visible)
verify(subBalanceText2.visible)
}


function test_hovered_highlighted_states() {
const control = createTemporaryObject(delegateCmp, root,
{ balancesModel })

control.highlighted = true
compare(control.background.color, Theme.palette.statusListItem.highlightColor)

mouseMove(control, control.width/2, control.height/2)
compare(control.hovered, true)
compare(control.background.color, Theme.palette.baseColor2)

control.highlighted = false
mouseMove(control, control.width/2, control.height/2)
compare(control.hovered, true)
compare(control.background.color, Theme.palette.baseColor2)

// test isAutoHovered behaviour
control.isAutoHovered = true
compare(control.background.color, Theme.palette.baseColor2)
}
}
}
7 changes: 7 additions & 0 deletions storybook/qmlTests/tests/tst_TokenSelectorButton.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import AppLayouts.Wallet.controls 1.0

import Storybook 1.0

import StatusQ.Components 0.1

Item {
id: root

Expand Down Expand Up @@ -39,6 +41,11 @@ Item {
verify(!TestUtils.findTextItem(button, button.text))
verify(TestUtils.findTextItem(button, "ETH"))
verify(findChild(button, "selectedContent"))

const icon = TestUtils.findByType(button, StatusRoundedImage)
verify(icon)
compare(icon.width, 24)
compare(icon.height, 24)
}
}
}
19 changes: 18 additions & 1 deletion ui/app/AppLayouts/Wallet/adaptors/CollectiblesSelectionAdaptor.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,16 @@ QObject {
/** Account key used for filtering **/
property string accountKey


/**
Expected model structure:
chainId [int] - network chain id
chainName [string] - name of network
iconUrl [string] - network icon url
**/
property var networksModel

/**
Expected model structure:
Expand Down Expand Up @@ -64,13 +74,20 @@ QObject {
**/
readonly property alias model: communityGroupsGrouppedByCollection

LeftJoinModel {
id: jointCollectiblesByNwChainId
leftModel: collectiblesModel ?? null
rightModel: networksModel
joinRole: "chainId"
}

SortFilterProxyModel {
id: initiallyFilteredAndSorted

objectName: "collectiblesSelectionAdaptor_initiallyFilteredAndSorted"

sourceModel: ObjectProxyModel {
sourceModel: collectiblesModel ?? null
sourceModel: jointCollectiblesByNwChainId

delegate: QObject {
readonly property int balance: balanceAggregator.value /* 3 */
Expand Down
Loading

0 comments on commit f96d34b

Please sign in to comment.