import QtQuick 2.13 import QtQuick.Controls 2.13 import QtQuick.Layouts 1.13 import QtGraphicalEffects 1.13 import "../imports" Item { id: root //% "Choose account" property string label: qsTrId("choose-account") property bool showAccountDetails: true property var accounts property var selectedAccount property string currency: "usd" property alias selectField: select height: select.height + (selectedAccountDetails.visible ? selectedAccountDetails.height : 0) // set to asset symbol to display asset's balance top right // NOTE: if this asset is not selected as a wallet token in the UI, then // nothing will be displayed property string showBalanceForAssetSymbol: "" property var assetFound property double minRequiredAssetBalance: 0 property int dropdownWidth: width property alias dropdownAlignment: select.menuAlignment property bool isValid: true property bool readOnly: false function validate() { if (showBalanceForAssetSymbol == "" || minRequiredAssetBalance == 0 || !assetFound) { return root.isValid } root.isValid = assetFound.value >= minRequiredAssetBalance return root.isValid } onSelectedAccountChanged: { if (!selectedAccount) { return } if (selectedAccount.iconColor) { selectedIconImgOverlay.color = selectedAccount.iconColor } if (selectedAccount.name) { selectedTextField.text = selectedAccount.name } if (selectedAccount.address) { textSelectedAddress.text = selectedAccount.address + " • " } if (selectedAccount.fiatBalance) { textSelectedAddressFiatBalance.text = selectedAccount.fiatBalance + " " + currency.toUpperCase() } if (selectedAccount.assets && showBalanceForAssetSymbol) { assetFound = Utils.findAssetBySymbol(selectedAccount.assets, showBalanceForAssetSymbol) if (!assetFound) { //% "Cannot find asset '%1'. Ensure this asset has been added to the token list." console.warn(qsTrId("cannot-find-asset---1---ensure-this-asset-has-been-added-to-the-token-list-").arg(showBalanceForAssetSymbol)) } } if (!selectedAccount.type) { selectedAccount.type = RecipientSelector.Type.Account } validate() } onAssetFoundChanged: { if (!assetFound) { return } txtAssetBalance.text = "Balance: " + (parseFloat(assetFound.value) === 0.0 ? "0" : Utils.stripTrailingZeros(assetFound.value)) + " " + assetFound.symbol } StyledText { id: txtAssetBalance visible: root.assetFound !== undefined anchors.bottom: select.top anchors.bottomMargin: -18 anchors.right: parent.right color: !root.isValid ? Style.current.danger : Style.current.secondaryText font.pixelSize: 13 height: 18 } Select { id: select label: root.label model: root.accounts menuAlignment: Select.MenuAlignment.Left menu.delegate: menuItem menu.onOpened: { selectedAccountDetails.visible = false } menu.onClosed: { selectedAccountDetails.visible = root.showAccountDetails } menu.width: dropdownWidth selectedItemView: Item { anchors.fill: parent SVGImage { id: selectedIconImg sourceSize.height: 12 sourceSize.width: 12 anchors.left: parent.left anchors.leftMargin: Style.current.padding anchors.verticalCenter: parent.verticalCenter fillMode: Image.PreserveAspectFit source: "../app/img/walletIcon.svg" } ColorOverlay { id: selectedIconImgOverlay anchors.fill: selectedIconImg source: selectedIconImg } StyledText { id: selectedTextField elide: Text.ElideRight anchors.left: selectedIconImg.right anchors.leftMargin: 8 anchors.right: parent.right anchors.rightMargin: select.selectedItemRightMargin anchors.verticalCenter: parent.verticalCenter font.pixelSize: 15 verticalAlignment: Text.AlignVCenter height: 22 } } } Row { id: selectedAccountDetails visible: root.showAccountDetails anchors.top: select.bottom anchors.topMargin: 8 anchors.left: parent.left anchors.leftMargin: 2 StyledText { id: textSelectedAddress font.pixelSize: 12 elide: Text.ElideMiddle height: 16 width: 90 color: Style.current.secondaryText } StyledText { id: textSelectedAddressFiatBalance font.pixelSize: 12 height: 16 color: Style.current.secondaryText } } Component { id: menuItem MenuItem { id: itemContainer visible: walletType !== 'watch' property bool isFirstItem: index === 0 property bool isLastItem: index === accounts.rowCount() - 1 Component.onCompleted: { if (!root.selectedAccount && isFirstItem) { root.selectedAccount = { address, name, iconColor, assets, fiatBalance } } } height: walletType === 'watch' ? 0 : (accountName.height + 14 + accountAddress.height + 14) SVGImage { id: iconImg anchors.left: parent.left anchors.leftMargin: Style.current.padding anchors.verticalCenter: parent.verticalCenter width: 12 height: 12 sourceSize.height: height sourceSize.width: width fillMode: Image.PreserveAspectFit source: "../app/img/walletIcon.svg" } ColorOverlay { anchors.fill: iconImg source: iconImg color: iconColor } Column { id: column anchors.left: iconImg.right anchors.leftMargin: 14 anchors.right: txtFiatBalance.left anchors.rightMargin: 8 anchors.verticalCenter: parent.verticalCenter StyledText { id: accountName text: name elide: Text.ElideRight font.pixelSize: 15 anchors.left: parent.left anchors.right: parent.right height: 22 } StyledText { id: accountAddress text: address elide: Text.ElideMiddle width: 80 color: Style.current.secondaryText font.pixelSize: 12 height: 16 } } StyledText { id: txtFiatBalance anchors.right: fiatCurrencySymbol.left anchors.rightMargin: 4 anchors.verticalCenter: parent.verticalCenter font.pixelSize: 15 height: 22 text: fiatBalance } StyledText { id: fiatCurrencySymbol anchors.right: parent.right anchors.rightMargin: Style.current.padding anchors.verticalCenter: parent.verticalCenter font.pixelSize: 15 height: 22 color: Style.current.secondaryText text: root.currency.toUpperCase() } background: Rectangle { color: itemContainer.highlighted ? Style.current.backgroundHover : Style.current.background radius: Style.current.radius // cover bottom left/right corners with square corners Rectangle { visible: !isLastItem anchors.left: parent.left anchors.right: parent.right anchors.bottom: parent.bottom height: parent.radius color: parent.color } // cover top left/right corners with square corners Rectangle { visible: !isFirstItem anchors.left: parent.left anchors.right: parent.right anchors.top: parent.top height: parent.radius color: parent.color } } MouseArea { cursorShape: Qt.PointingHandCursor anchors.fill: itemContainer onClicked: { root.selectedAccount = { address, name, iconColor, assets, fiatBalance } select.menu.close() } } } } }