feat(SendModal): add a spinner when resolving an ENS name

- update the SB page with the toggle too Fixes #16355
status-im · Sep 20, 2024 · 894a5f1 · 894a5f1
1 parent 6a2b3fa
commit 894a5f1
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 10 deletions.
diff --git a/storybook/pages/SendModalPage.qml b/storybook/pages/SendModalPage.qml
@@ -96,6 +96,7 @@ SplitView {
         property bool areTestNetworksEnabled: true
 
         function setRouteDisabledChains(chainId, disabled) {}
+        function stopUpdatesForSuggestedRoute() {}
 
         walletAssetStore: root.walletAssetStore
         tokensStore.showCommunityAssetsInSend: showCommunityAssetsCheckBox.checked

diff --git a/storybook/pages/SendRecipientInputPage.qml b/storybook/pages/SendRecipientInputPage.qml
@@ -29,6 +29,7 @@ SplitView {
                 anchors.centerIn: parent
                 interactive: ctrlInteractive.checked
                 checkMarkVisible: ctrlCheckmark.checked
+                loading: ctrlLoading.checked
                 Component.onCompleted: forceActiveFocus()
 
                 onClearClicked: logs.logEvent("SendRecipientInput::clearClicked", [], arguments)
@@ -62,6 +63,11 @@ SplitView {
                     text: "Checkmark visible"
                     checked: false
                 }
+
+                Switch {
+                    id: ctrlLoading
+                    text: "Loading"
+                }
             }
         }
     }

diff --git a/storybook/qmlTests/tests/tst_SendRecipientInput.qml b/storybook/qmlTests/tests/tst_SendRecipientInput.qml
@@ -179,5 +179,15 @@ Item {
             verify(!!checkmarkIcon)
             verify(checkmarkIcon.visible)
         }
+
+        function test_loading() {
+            verify(!!controlUnderTest)
+            compare(controlUnderTest.loading, false)
+            controlUnderTest.loading = true
+            controlUnderTest.text = "replicator.eth" // loadingIndicator visible only with some text
+            const loadingIndicator = findChild(controlUnderTest, "loadingIndicator")
+            verify(!!loadingIndicator)
+            verify(loadingIndicator.visible)
+        }
     }
 }
diff --git a/storybook/stubs/shared/stores/send/TransactionStore.qml b/storybook/stubs/shared/stores/send/TransactionStore.qml
@@ -75,13 +75,18 @@ QtObject {
         }
     }
 
-    function splitAndFormatAddressPrefix(textAddrss, updateInStore) {
-        return textAddrss
+    function splitAndFormatAddressPrefix(textAddress, updateInStore) {
+        return {
+            formattedText: textAddress,
+            address: textAddress
+        }
     }
 
     function resolveENS(value: string) {
         if (!!value && value.endsWith(".eth"))
             root.mainModuleInst.resolvedENS("", "0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc4", "") // return some valid address
+        else
+            root.mainModuleInst.resolvedENS("", "", "") // invalid
     }
 
     function getAsset(assetsList, symbol) {

diff --git a/ui/imports/shared/popups/send/SendModal.qml b/ui/imports/shared/popups/send/SendModal.qml
@@ -667,7 +667,7 @@ StatusDialog {
                 store: popup.store
                 interactive: popup.interactive
                 selectedRecipient: popup.preSelectedRecipient
-                ensAddressOrEmpty: recipientInputLoader.resolvedENSAddress
+                ensAddressOrEmpty: recipientInputLoader.ready ? recipientInputLoader.resolvedENSAddress : ""
                 amountToSend: amountToSend.asNumber
                 minSendCryptoDecimals: amountToSend.minSendCryptoDecimals
                 minReceiveCryptoDecimals: amountToSend.minReceiveCryptoDecimals

diff --git a/ui/imports/shared/popups/send/controls/SendRecipientInput.qml b/ui/imports/shared/popups/send/controls/SendRecipientInput.qml
@@ -4,6 +4,7 @@ import QtQuick.Layouts 1.15
 
 import StatusQ 0.1
 import StatusQ.Controls 0.1
+import StatusQ.Components 0.1
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 
@@ -12,21 +13,28 @@ StatusInput {
 
     property bool interactive: true
     property bool checkMarkVisible
+    property bool loading
 
     signal clearClicked()
     signal validateInputRequested()
 
     placeholderText: qsTr("Enter an ENS name or address")
     input.background.color: Theme.palette.indirectColor1
     input.background.border.width: 0
-    input.implicitHeight: 56
+    input.implicitHeight: 64
     rightPadding: 12
     input.clearable: false // custom button below
     input.edit.readOnly: !root.interactive
     multiline: false
     input.edit.textFormat: TextEdit.RichText
 
     input.rightComponent: RowLayout {
+        StatusLoadingIndicator {
+            objectName: "loadingIndicator"
+            Layout.preferredWidth: 16
+            Layout.preferredHeight: 16
+            visible: root.input.edit.length !== 0 && root.loading
+        }
         StatusButton {
             objectName: "pasteButton"
             font.weight: Font.Normal

diff --git a/ui/imports/shared/popups/send/views/RecipientView.qml b/ui/imports/shared/popups/send/views/RecipientView.qml
@@ -1,5 +1,5 @@
-import QtQuick 2.13
-import QtQuick.Layouts 1.13
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
 
 import StatusQ.Controls 0.1
 import StatusQ.Core 0.1
@@ -15,7 +15,6 @@ import shared.popups.send.panels 1.0
 import shared.popups.send 1.0
 
 import utils 1.0
-import shared.stores.send 1.0
 
 import "../controls"
 
@@ -30,7 +29,7 @@ Loader {
     property var selectedRecipient: null
     property int selectedRecipientType: Helpers.RecipientAddressObjectType.Address
 
-    readonly property bool ready: (d.isAddressValid || !!resolvedENSAddress) && !d.isPending
+    readonly property bool ready: d.isAddressValid && !d.isPending
     property string addressText
     property string resolvedENSAddress
 
@@ -87,7 +86,7 @@ Loader {
 
     QtObject {
         id: d
-        property bool isAddressValid: Utils.isValidAddress(root.addressText)
+        readonly property bool isAddressValid: Utils.isValidAddress(root.addressText)
         readonly property var resolveENS: Backpressure.debounce(root, 1500, function (ensName) {
             store.resolveENS(ensName)
         })
@@ -105,7 +104,7 @@ Loader {
 
         function evaluateAndSetPreferredChains() {
             let address = !!root.item.input && !!root.store.plainText(root.item.input.text) ? root.store.plainText(root.item.input.text): ""
-            let result = store.splitAndFormatAddressPrefix(address, !root.isBridgeTx && !isCollectiblesTransfer)
+            let result = root.store.splitAndFormatAddressPrefix(address, !root.isBridgeTx && !root.isCollectiblesTransfer)
             if(!!result.address) {
                 root.addressText = result.address
                 if(!!root.item.input) {
@@ -198,6 +197,7 @@ Loader {
 
             interactive: root.interactive
             checkMarkVisible: root.ready
+            loading: d.isPending || d.waitTimer.running
             onClearClicked: d.clearValues()
             onValidateInputRequested: validateInput()
         }