status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat(@desktop/wallet): update wallet navigation 

Fixed StatusBaseButton to expose a property to load either normal
icon or a round one.
Implemented new wallet navigation according to design in Figma.
Fixed regression: small accounts icons in accounts list view.
Updated wallet test.

Fixes #8598
This commit is contained in:
Ivan Belyakov 2023-01-05 15:50:55 +03:00 committed by Anthony Laibe
parent 52597472ed
commit f2549fc1ff
9 changed files with 217 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
test/ui-test/src/screens/StatusWalletScreen.py
View File

@ -9,12 +9,12 @@ from .StatusMainScreen import StatusMainScreen
class Tokens(Enum):
ETH: str = "ETH"
class SigningPhrasePopUp(Enum):
OK_GOT_IT_BUTTON: str = "signPhrase_Ok_Button"
class MainWalletScreen(Enum):
ADD_ACCOUNT_BUTTON: str = "mainWallet_Add_Account"
ADD_ACCOUNT_BUTTON: str = "mainWallet_Add_Account_Button"
ACCOUNT_NAME: str = "mainWallet_Account_Name"
ACCOUNT_ADDRESS_PANEL: str = "mainWallet_Address_Panel"
SEND_BUTTON_FOOTER: str = "mainWallet_Footer_Send_Button"
@ -28,7 +28,7 @@ class MainWalletScreen(Enum):
class AssetView(Enum):
LIST: str = "mainWallet_Assets_View_List"
class NetworkSelectorPopup(Enum):
LAYER_1_REPEATER: str = "mainWallet_Network_Popup_Chain_Repeater_1"
@ -57,7 +57,7 @@ class SendPopup(Enum):
ASSET_SELECTOR: str = "mainWallet_Send_Popup_Asset_Selector"
ASSET_LIST: str = "mainWallet_Send_Popup_Asset_List"
HIGH_GAS_BUTTON: str = "mainWallet_Send_Popup_GasSelector_HighGas_Button"
class AddAccountPopup(Enum):
SCROLL_BAR: str = "mainWallet_Add_Account_Popup_Main"
PASSWORD_INPUT: str = "mainWallet_Add_Account_Popup_Password"
@ -71,45 +71,45 @@ class AddAccountPopup(Enum):
PRIVATE_KEY_INPUT: str = "mainWallet_Add_Account_Popup_Private_Key"
ADD_ACCOUNT_BUTTON: str = "mainWallet_Add_Account_Popup_Footer_Add_Account"
SEED_PHRASE_INPUT_TEMPLATE: str = "mainWindow_Add_Account_Popup_Seed_Phrase_"
class SharedPopup(Enum):
POPUP_CONTENT: str = "sharedPopup_Popup_Content"
PASSWORD_INPUT: str = "sharedPopup_Password_Input"
PRIMARY_BUTTON: str = "sharedPopup_Primary_Button"
class CollectiblesView(Enum):
COLLECTIONS_REPEATER: str = "mainWallet_Collections_Repeater"
COLLECTIBLES_REPEATER: str = "mainWallet_Collectibles_Repeater"
COLLECTIONS_REPEATER: str = "mainWallet_Collections_Repeater"
COLLECTIBLES_REPEATER: str = "mainWallet_Collectibles_Repeater"
class WalletTabBar(Enum):
ASSET_TAB = 0
COLLECTION_TAB = 1
ACTIVITY_TAB = 2
ACTIVITY_TAB = 2
class TransactionsView(Enum):
TRANSACTIONS_LISTVIEW: str = "mainWallet_Transactions_List"
TRANSACTIONS_LISTVIEW: str = "mainWallet_Transactions_List"
TRANSACTIONS_DETAIL_VIEW_HEADER: str = "mainWallet_Transactions_Detail_View_Header"
class StatusWalletScreen:
#####################################
### Screen actions region:
#####################################
def accept_signing_phrase(self):
click_obj_by_name(SigningPhrasePopUp.OK_GOT_IT_BUTTON.value)
def add_watch_only_account(self, account_name: str, address: str):
click_obj_by_name(MainWalletScreen.ADD_ACCOUNT_BUTTON.value)
type(AddAccountPopup.ACCOUNT_NAME_INPUT.value, account_name)
click_obj_by_name(AddAccountPopup.ADVANCE_SECTION.value)
click_obj_by_name(AddAccountPopup.TYPE_SELECTOR.value)
time.sleep(1)
click_obj_by_name(AddAccountPopup.TYPE_WATCH_ONLY.value)
type(AddAccountPopup.ADDRESS_INPUT.value, address)
click_obj_by_name(AddAccountPopup.ADD_ACCOUNT_BUTTON.value)
@ -117,26 +117,26 @@ class StatusWalletScreen:
click_obj_by_name(MainWalletScreen.ADD_ACCOUNT_BUTTON.value)
type(AddAccountPopup.ACCOUNT_NAME_INPUT.value, account_name)
click_obj_by_name(AddAccountPopup.ADVANCE_SECTION.value)
click_obj_by_name(AddAccountPopup.TYPE_SELECTOR.value)
time.sleep(1)
click_obj_by_name(AddAccountPopup.TYPE_PRIVATE_KEY.value)
type(AddAccountPopup.PRIVATE_KEY_INPUT.value, private_key)
click_obj_by_name(AddAccountPopup.ADD_ACCOUNT_BUTTON.value)
wait_for_object_and_type(SharedPopup.PASSWORD_INPUT.value, password)
click_obj_by_name(SharedPopup.PRIMARY_BUTTON.value)
time.sleep(1)
def import_seed_phrase(self, account_name: str, password: str, mnemonic: str):
click_obj_by_name(MainWalletScreen.ADD_ACCOUNT_BUTTON.value)
type(AddAccountPopup.ACCOUNT_NAME_INPUT.value, account_name)
click_obj_by_name(AddAccountPopup.ADVANCE_SECTION.value)
time.sleep(1)
click_obj_by_name(AddAccountPopup.TYPE_SELECTOR.value)
@ -155,41 +155,41 @@ class StatusWalletScreen:
input_seed_phrase(AddAccountPopup.SEED_PHRASE_INPUT_TEMPLATE.value, words)
time.sleep(1)
click_obj_by_name(AddAccountPopup.ADD_ACCOUNT_BUTTON.value)
wait_for_object_and_type(SharedPopup.PASSWORD_INPUT.value, password)
click_obj_by_name(SharedPopup.PRIMARY_BUTTON.value)
time.sleep(1)
def generate_new_account(self, account_name: str, password: str):
click_obj_by_name(MainWalletScreen.ADD_ACCOUNT_BUTTON.value)
type(AddAccountPopup.ACCOUNT_NAME_INPUT.value, account_name)
time.sleep(1)
click_obj_by_name(AddAccountPopup.ADD_ACCOUNT_BUTTON.value)
time.sleep(1)
wait_for_object_and_type(SharedPopup.PASSWORD_INPUT.value, password)
click_obj_by_name(SharedPopup.PRIMARY_BUTTON.value)
time.sleep(1)
def verify_account_name_is_present(self, account_name: str):
verify_text_matching(MainWalletScreen.ACCOUNT_NAME.value, account_name)
type(AddAccountPopup.ACCOUNT_NAME_INPUT.value, account_name)
click_obj_by_name(AddAccountPopup.ADD_ACCOUNT_BUTTON.value)
def send_transaction(self, account_name, amount, token, chain_name, password):
list = get_obj(AssetView.LIST.value)
squish.waitFor("list.count > 0", 60*1000*2)
squish.waitFor("float(str(list.itemAtIndex(0).balance)) > 0", 60*1000*2)
click_obj_by_name(MainWalletScreen.SEND_BUTTON_FOOTER.value)
self._click_repeater(SendPopup.HEADER_ACCOUNTS_LIST.value, account_name)
time.sleep(1)
type(SendPopup.AMOUNT_INPUT.value, amount)
@ -201,9 +201,9 @@ class StatusWalletScreen:
if(not squish.isNull(tokenObj) and tokenObj.objectName == "AssetSelector_ItemDelegate_" + token):
click_obj(asset_list.itemAtIndex(index))
break
click_obj_by_name(SendPopup.MY_ACCOUNTS_TAB.value)
accounts = get_obj(SendPopup.MY_ACCOUNTS_LIST.value)
for index in range(accounts.count):
if(accounts.itemAtIndex(index).objectName == account_name):
@ -213,7 +213,7 @@ class StatusWalletScreen:
scroll_obj_by_name(SendPopup.SCROLL_BAR.value)
time.sleep(1)
click_obj_by_name(SendPopup.SEND_BUTTON.value)
wait_for_object_and_type(SharedPopup.PASSWORD_INPUT.value, password)
@ -225,7 +225,7 @@ class StatusWalletScreen:
if(repeater.itemAt(index).objectName == object_name):
click_obj(repeater.itemAt(index))
break
def add_saved_address(self, name: str, address: str):
click_obj_by_name(MainWalletScreen.SAVED_ADDRESSES_BUTTON.value)
click_obj_by_name(SavedAddressesScreen.ADD_BUTTON.value)
@ -289,20 +289,20 @@ class StatusWalletScreen:
click_obj_by_name(MainWalletScreen.ACCOUNT_NAME.value)
time.sleep(2)
return
assert False, "network name not found"
def click_first_account(self):
click_obj_by_name(MainWalletScreen.FIRST_ACCOUNT_ITEM.value)
#####################################
### Verifications region:
#####################################
def verify_account_name_is_present(self, account_name: str):
verify_text_matching(MainWalletScreen.ACCOUNT_NAME.value, account_name)
def verify_positive_balance(self, symbol: str):
time.sleep(5) # TODO: remove when it is faster @alaibe!
list = get_obj(AssetView.LIST.value)
@ -317,14 +317,14 @@ class StatusWalletScreen:
break
return
if not found:
verify_failure("Symbol " + symbol + " not found in the asset list")
reset += 1
time.sleep(5)
verify_failure("Balance was not positive")
def verify_saved_address_exists(self, name: str):
list = wait_and_get_obj(SavedAddressesScreen.SAVED_ADDRESSES_LIST.value)
for index in range(list.count):
@ -351,7 +351,7 @@ class StatusWalletScreen:
# ephemeral_notification_list = get_obj(MainWalletScreen.EPHEMERAL_NOTIFICATION_LIST.value)
# print(ephemeral_notification_list.itemAtIndex(0).objectName)
# verify(str(ephemeral_notification_list.itemAtIndex(0).primaryText ) == "Transaction pending...", "Tx was not sent!")
def verify_collectibles_exist(self, account_name: str):
tabbar = get_obj(MainWalletScreen.RIGHT_SIDE_TABBAR.value)
click_obj(tabbar.itemAt(WalletTabBar.COLLECTION_TAB.value))
@ -360,21 +360,21 @@ class StatusWalletScreen:
collectionsRepeater.itemAt(0).expanded = True
collectiblesRepeater = get_obj(CollectiblesView.COLLECTIBLES_REPEATER.value)
verify(collectiblesRepeater.count > 0, "Collectibles not retrieved for the account")
def verify_transactions_exist(self):
tabbar = get_obj(MainWalletScreen.RIGHT_SIDE_TABBAR.value)
click_obj(tabbar.itemAt(WalletTabBar.ACTIVITY_TAB.value))
transaction_list_view = get_obj(TransactionsView.TRANSACTIONS_LISTVIEW.value)
squish.waitFor("transaction_list_view.count > 0", 60*1000)
verify(transaction_list_view.count > 1, "Transactions not retrieved for the account")
transaction_item = transaction_list_view.itemAtIndex(1)
transaction_detail_header = get_obj(TransactionsView.TRANSACTIONS_DETAIL_VIEW_HEADER.value)
click_obj(transaction_item)
verify_equal(transaction_item.item.cryptoValue, transaction_detail_header.cryptoValue)
verify_equal(transaction_item.item.transferStatus, transaction_detail_header.transferStatus)
verify_equal(transaction_item.item.shortTimeStamp, transaction_detail_header.shortTimeStamp)

2
test/ui-test/testSuites/suite_wallet/shared/scripts/wallet_names.py
View File

@ -5,7 +5,7 @@ navBarListView_Wallet_navbar_StatusNavBarTabButton = {"checkable": True, "contai
wallet_navbar_wallet_icon_StatusIcon = {"container": navBarListView_Wallet_navbar_StatusNavBarTabButton, "objectName": "wallet-icon", "type": "StatusIcon", "visible": True}
mainWallet_Account_Name = {"container": statusDesktop_mainWindow, "objectName": "accountName", "type": "StatusBaseText", "visible": True}
mainWallet_Address_Panel = {"container": statusDesktop_mainWindow, "objectName": "addressPanel", "type": "StatusAddressPanel", "visible": True}
mainWallet_Add_Account = {"container": statusDesktop_mainWindow, "text": "Add account", "type": "StatusBaseText", "unnamed": 1, "visible": True}
mainWallet_Add_Account_Button = {"container": statusDesktop_mainWindow, "objectName": "addAccountButton", "type": "StatusRoundButton", "visible": True}
signPhrase_Ok_Button = {"container": statusDesktop_mainWindow, "type": "StatusFlatButton", "objectName": "signPhraseModalOkButton", "visible": True}
mainWallet_Saved_Addresses_Button = {"container": statusDesktop_mainWindow, "objectName": "savedAddressesBtn", "type": "StatusButton"}
mainWallet_Network_Selector_Button = {"container": statusDesktop_mainWindow, "objectName": "networkSelectorButton", "type": "StatusListItem"}

44
ui/StatusQ/src/StatusQ/Controls/StatusBaseButton.qml
View File

@ -33,12 +33,16 @@ Button {
property color textColor
property color disabledTextColor
property color borderColor: "transparent"
property int textAlignment: Qt.AlignVCenter | Qt.AlignHCenter
property bool textFillWidth: false
property int radius: size === StatusBaseButton.Size.Tiny ? 6 : 8
property int size: StatusBaseButton.Size.Large
property int type: StatusBaseButton.Type.Normal
property bool isRoundIcon: false
QtObject {
id: d
readonly property color textColor: root.enabled || root.loading ? root.textColor : root.disabledTextColor
@ -84,14 +88,35 @@ Button {
contentItem: RowLayout {
spacing: root.spacing
StatusIcon {
Layout.preferredWidth: visible ? root.icon.width : 0
Layout.preferredHeight: visible ? root.icon.height : 0
icon: root.icon.name
rotation: root.asset.rotation
opacity: !loading && root.icon.name !== ""
visible: root.icon.name !== ""
color: root.icon.color
Component {
id: baseIcon
StatusIcon {
icon: root.icon.name
rotation: root.asset.rotation
opacity: !root.loading && root.icon.name !== ""
color: root.icon.color
}
}
Component {
id: roundIcon
StatusRoundIcon {
asset.name: root.icon.name
asset.color: root.asset.color
asset.bgColor: root.asset.bgColor
}
}
Loader {
id: iconLoader
Layout.preferredWidth: active ? root.icon.width : 0
Layout.preferredHeight: active ? root.icon.height : 0
active: root.icon.name !== ""
sourceComponent: root.isRoundIcon ? roundIcon : baseIcon
}
StatusEmoji {
Layout.preferredWidth: visible ? root.icon.width : 0
@ -100,7 +125,8 @@ Button {
emojiId: Emoji.iconId(root.asset.emoji, root.asset.emojiSize) || ""
}
StatusBaseText {
Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
Layout.alignment: root.textAlignment
Layout.fillWidth: root.textFillWidth
opacity: !loading
font: root.font
text: root.text

4
ui/StatusQ/src/StatusQ/Core/Theme/StatusColors.qml
View File

@ -14,6 +14,8 @@ QtObject {
'blue4': '#869EFF',
'blue5': '#AAC6FF',
'blue6': '#ECEFFC',
'blue7': '#09101C',
'blue8': '#6B6F76',
'brown': '#8B3131',
'brown2': '#9B832F',
@ -26,7 +28,7 @@ QtObject {
'graphite3': '#2C2C2C',
'graphite4': '#373737',
'graphite5': '#909090',
'green': '#4EBC60',
'green2': '#7CDA00',
'green3': '#60C370',

2
ui/StatusQ/src/StatusQ/Core/Theme/StatusDarkTheme.qml
View File

@ -60,6 +60,8 @@ ThemePalette {
miscColor11: getColor('yellow2')
miscColor12: getColor('green6')
dropShadow2: getColor('blue8', 0.02)
statusFloatingButtonHighlight: getColor('blue4', 0.3)
statusLoadingHighlight: getColor('white', 0.03)

2
ui/StatusQ/src/StatusQ/Core/Theme/StatusLightTheme.qml
View File

@ -58,6 +58,8 @@ ThemePalette {
miscColor11: getColor('brown2')
miscColor12: getColor('green5')
dropShadow2: getColor('blue7', 0.02)
statusFloatingButtonHighlight: getColor('blueHijab')
statusLoadingHighlight: getColor('lightPattensBlue', 0.5)

1
ui/StatusQ/src/StatusQ/Core/Theme/ThemePalette.qml
View File

@ -104,6 +104,7 @@ QtObject {
property color white: getColor('white')
property color dropShadow: getColor('black', 0.12)
property color dropShadow2
property color backdropColor: getColor('black', 0.4)
function hoverColor(normalColor) {

2
ui/app/AppLayouts/Wallet/WalletLayout.qml
View File

@ -88,7 +88,7 @@ Item {
RootStore.switchAccount(newIndex)
}
showSavedAddresses: function(showSavedAddresses) {
onShowSavedAddressesChanged: {
if(showSavedAddresses)
rightPanelStackView.replace(cmpSavedAddresses)
else

154
ui/app/AppLayouts/Wallet/views/LeftTabView.qml
View File

@ -7,6 +7,7 @@ import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Components 0.1
import StatusQ.Controls 0.1
import StatusQ.Popups 0.1
import utils 1.0
import shared 1.0
@ -22,7 +23,11 @@ Rectangle {
id: root
property var changeSelectedAccount: function(){}
property var showSavedAddresses: function(showSavedAddresses){}
property bool showSavedAddresses: false
onShowSavedAddressesChanged: {
walletAccountsListView.footerItem.button.highlighted = showSavedAddresses
}
property var emojiPopup: null
function onAfterAddAccount () {
@ -62,20 +67,41 @@ Rectangle {
ColumnLayout {
anchors.fill: parent
anchors.margins: Style.current.padding
anchors.bottomMargin: Style.current.smallPadding
spacing: Style.current.padding
StyledText {
Item {
Layout.fillWidth: true
text: qsTr("Wallet")
font.weight: Font.Bold
font.pixelSize: 17
Layout.preferredHeight: walletTitleText.height
Layout.leftMargin: Style.current.padding
Layout.rightMargin: Style.current.padding
Layout.topMargin: Style.current.padding
StatusBaseText {
id: walletTitleText
text: qsTr("Wallet")
font.weight: Font.Bold
font.pixelSize: 17
color: Theme.palette.directColor1
}
StatusRoundButton {
objectName: "addAccountButton"
icon.name: "add-circle"
anchors.right: parent.right
anchors.rightMargin: -Style.current.smallPadding
anchors.verticalCenter: parent.verticalCenter
width: height
height: parent.height * 2
color: hovered || highlighted ? Theme.palette.primaryColor3
: "transparent"
onClicked: addAccountModal.open()
}
}
Item {
height: childrenRect.height
Layout.fillWidth: true
Layout.leftMargin: Style.current.padding
StyledTextEdit {
id: walletAmountValue
@ -92,9 +118,9 @@ Rectangle {
font.pixelSize: 22
}
StyledText {
StatusBaseText {
id: totalValue
color: Style.current.secondaryText
color: Theme.palette.baseColor1
text: qsTr("Total value")
width: parent.width
anchors.top: walletAmountValue.bottom
@ -104,6 +130,8 @@ Rectangle {
}
StatusListView {
id: walletAccountsListView
objectName: "walletAccountsListView"
spacing: Style.current.smallPadding
Layout.fillWidth: true
@ -112,15 +140,21 @@ Rectangle {
// ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
readonly property Item firstItem: count > 0 ? itemAtIndex(0) : null
delegate: StatusListItem {
objectName: "walletAccountItem"
width: ListView.view.width
highlighted: RootStore.currentAccount.name === model.name
width: ListView.view.width - Style.current.padding * 2
highlighted: !ListView.view.footerItem.button.highlighted &&
RootStore.currentAccount.name === model.name
anchors.horizontalCenter: parent.horizontalCenter
title: model.name
subTitle: LocaleUtils.currencyAmountToLocaleString(model.currencyBalance)
asset.emoji: !!model.emoji ? model.emoji: ""
asset.color: model.color
asset.name: !model.emoji ? "filled-account": ""
asset.width: 40
asset.height: 40
asset.letterSize: 14
asset.isLetterIdenticon: !!model.emoji ? true : false
asset.bgColor: Theme.palette.primaryColor3
@ -128,41 +162,87 @@ Rectangle {
color: sensor.containsMouse || highlighted ? Theme.palette.baseColor3 : "transparent"
onClicked: {
changeSelectedAccount(index)
showSavedAddresses(false)
showSavedAddresses = false
}
components: [
StatusIcon {
icon: {
if (model.walletType == "watch")
return "show"
else if (model.walletType == "key")
return "keycard"
return ""
}
color: Theme.palette.directColor1
width: 15
height: 15
}
]
}
footer: Item {
width: ListView.view.width
height: addAccountBtn.height + Style.current.xlPadding
StatusButton {
id: addAccountBtn
anchors.top: parent.top
anchors.horizontalCenter: parent.horizontalCenter
anchors.margins: Style.current.bigPadding
font.pixelSize: 15
readonly property bool footerOverlayed: contentHeight > availableHeight
footerPositioning: footerOverlayed ? ListView.OverlayFooter : ListView.InlineFooter
footer: Control {
id: footer
z: 2 // to be on top of delegates when in ListView.OverlayFooter
horizontalPadding: Style.current.padding
verticalPadding: Style.current.padding
property alias button: savedAddressesBtn
background: Rectangle {
color: root.color
implicitWidth: root.width
implicitHeight: parent.ListView.view.firstItem.height + Style.current.xlPadding
layer.enabled: parent.ListView.view.footerOverlayed
layer.effect: DropShadow {
verticalOffset: -10
radius: 20
samples: 41
fast: true
cached: true
color: Theme.palette.dropShadow2
}
StatusMenuSeparator {
id: footerSeparator
width: parent.width
visible: !footer.ListView.view.footerOverlayed
}
}
contentItem: StatusButton {
id: savedAddressesBtn
objectName: "savedAddressesBtn"
size: StatusBaseButton.Size.Large
normalColor: "transparent"
hoverColor: Theme.palette.primaryColor3
asset.color: Theme.palette.primaryColor1
asset.bgColor: Theme.palette.primaryColor3
font.weight: Font.Medium
icon.name: "add"
text: qsTr("Add account")
onClicked: addAccountModal.open()
text: qsTr("Saved addresses")
icon.name: "address"
icon.width: 40
icon.height: 40
isRoundIcon: true
textColor: Theme.palette.directColor1
textAlignment: Qt.AlignVCenter | Qt.AlignLeft
textFillWidth: true
spacing: parent.ListView.view.firstItem.statusListItemTitleArea.anchors.leftMargin
onClicked: {
showSavedAddresses = true
}
}
}
model: RootStore.accounts
// model: RootStore.exampleWalletModel
}
StatusButton {
objectName: "savedAddressesBtn"
size: StatusBaseButton.Size.Small
topPadding: Style.current.halfPadding
bottomPadding: Style.current.halfPadding
normalColor: "transparent"
hoverColor: Theme.palette.primaryColor3
font.weight: Font.Medium
text: qsTr("Saved addresses")
icon.name: "address"
onClicked: showSavedAddresses(true)
}
}
}