diff --git a/storybook/pages/SavedAddressPopupPage.qml b/storybook/pages/SavedAddressPopupPage.qml new file mode 100644 index 00000000000..4a4ff4f5933 --- /dev/null +++ b/storybook/pages/SavedAddressPopupPage.qml @@ -0,0 +1,64 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import QtQuick.Layouts 1.15 + +import Storybook 1.0 +import Models 1.0 +import AppLayouts.Wallet.popups 1.0 + +import utils 1.0 + +SplitView { + orientation: Qt.Horizontal + + PopupBackground { + id: popupBg + + property var popupIntance: null + + SplitView.fillWidth: true + SplitView.fillHeight: true + + Button { + id: reopenButton + anchors.centerIn: parent + text: "Reopen" + enabled: !dialog.visible + + onClicked: dialog.open() + } + + AddEditSavedAddressPopup { + id: dialog + + visible: true + + // Emulate resoling ENS by simple validation + QtObject { + id: mainModule + + function resolveENS(name, uuid) { + if (Utils.isValidEns(name)) { + resolvedENS("", "0x1234567890123456789012345678901234567890", uuid) + } + else { + resolvedENS("", "", uuid) + } + } + + signal resolvedENS(string pubkey, string address, string uuid) + } + + Component.onCompleted: initWithParams() + } + } + + Pane { + SplitView.minimumWidth: 300 + SplitView.preferredWidth: 300 + } +} + +// category: Popups + +// https://www.figma.com/file/idUoxN7OIW2Jpp3PMJ1Rl8/%E2%9A%99%EF%B8%8F-Settings-%7C-Desktop?type=design&node-id=23256-263282&mode=design&t=0DRwQJKDGYJPHkq1-4 diff --git a/ui/app/AppLayouts/Wallet/popups/AddEditSavedAddressPopup.qml b/ui/app/AppLayouts/Wallet/popups/AddEditSavedAddressPopup.qml index 64d3dfa8d8c..41bb6300549 100644 --- a/ui/app/AppLayouts/Wallet/popups/AddEditSavedAddressPopup.qml +++ b/ui/app/AppLayouts/Wallet/popups/AddEditSavedAddressPopup.qml @@ -1,7 +1,8 @@ -import QtQuick 2.13 -import QtQuick.Controls 2.13 -import QtQml.Models 2.14 -import QtQuick.Layouts 1.14 +import QtQuick 2.15 +import QtQml 2.15 +import QtQuick.Controls 2.15 +import QtQml.Models 2.15 +import QtQuick.Layouts 1.15 import utils 1.0 import shared.controls 1.0 @@ -115,6 +116,7 @@ StatusModal { readonly property bool addressInputIsAddress: !!d.address && d.address != Constants.zeroAddress && (Utils.isAddress(d.address) || Utils.isValidAddressWithChainPrefix(d.address)) + readonly property bool addressInputHasError: !!addressInput.errorMessageCmp.text property ListModel cardsModel: ListModel {} @@ -244,6 +246,7 @@ StatusModal { return } + networkSelector.state = "" if (d.addressInputIsAddress) { d.checkForAddressInputOwningErrorsWarnings() return @@ -273,7 +276,16 @@ StatusModal { d.resolvingEnsNameInProgress = false d.address = resolvedAddress - d.checkForAddressInputOwningErrorsWarnings() + try { // allows to avoid issues in storybook without much refactoring + d.checkForAddressInputOwningErrorsWarnings() + } + catch (e) { + } + + if (!d.addressInputHasError) + networkSelector.state = "networksHidden" + else + networkSelector.state = "" } } @@ -322,8 +334,11 @@ StatusModal { contentWidth: availableWidth Column { + id: column + width: scrollView.availableWidth height: childrenRect.height + topPadding: 24 // (16 + 8 for Name, until we add it to the StatusInput component) bottomPadding: 28 @@ -424,6 +439,7 @@ StatusModal { // Update root values if (Utils.isLikelyEnsName(plainText)) { d.ens = plainText + d.address = "" d.chainShortNames = "" } else { @@ -612,6 +628,27 @@ StatusModal { item.modelRef.isEnabled = !item.modelRef.isEnabled d.chainShortNamesDirty = true } + + states: [ + // As when networks seclector becomes invisible, spacing before it disappears as well, we see jumping height + // To overcome this, we animate bottom padding to 0 and when spacing disappears, reset bottom padding back to compensate it + State { + name: "networksHidden" + PropertyChanges { target: networkSelector; height: 0 } + PropertyChanges { target: networkSelector; opacity: 0 } + PropertyChanges { target: column; bottomPadding: 0 } + } + ] + transitions: [ + Transition { + PropertyAnimation { property: "height"; duration: 250 } + PropertyAnimation { property: "opacity"; duration: 250 } + SequentialAnimation { + PropertyAnimation { property: "bottomPadding"; duration: 250 } + PropertyAction { target: column; property: "bottomPadding"; value: 28 } + } + } + ] } } } diff --git a/ui/imports/shared/popups/send/views/RecipientView.qml b/ui/imports/shared/popups/send/views/RecipientView.qml index 8c64cad1b9e..b9123e7b384 100644 --- a/ui/imports/shared/popups/send/views/RecipientView.qml +++ b/ui/imports/shared/popups/send/views/RecipientView.qml @@ -44,8 +44,11 @@ Loader { } case TabAddressSelectorView.Type.SavedAddress: { root.addressText = root.selectedRecipient.address + + // Resolve before using if (!!root.selectedRecipient.ens && root.selectedRecipient.ens.length > 0) { - root.resolvedENSAddress = root.selectedRecipient.ens + d.isPending = true + d.resolveENS(root.selectedRecipient.ens) } preferredChainIds = store.getShortChainIds(root.selectedRecipient.chainShortNames) break