refactor: replace transaction modal `reset` functionality

The transaction component's `reset` functionality was meant ot reset a form when the modal was closed. It was difficult to manage and added extra overhead for each additional transaction modal created.

Instead of using reset functions, we can use Loaders to load and destroy the modal's as they are opened and closed. We do not need to keep them in memory and then also reset their functions. It creates a smaller memory footprint to destroy the object and reload on open.

feat: load gas prediction prices asynchronously

src/app/wallet/view.nim

@@ -1,4 +1,4 @@
-import NimQml, Tables, strformat, strutils, chronicles, json, std/wrapnils, parseUtils, stint, tables
+import NimQml, Tables, strformat, strutils, chronicles, json, std/wrapnils, parseUtils, stint, tables, json_serialization
 import ../../status/[status, wallet, threads]
 import ../../status/wallet/collectibles as status_collectibles
 import ../../status/libstatus/accounts/constants
@@ -457,11 +457,16 @@ QtObject:
   proc gasPricePredictionsChanged*(self: WalletView) {.signal.}
 
   proc getGasPricePredictions*(self: WalletView) {.slot.} =
-    let prediction = self.status.wallet.getGasPricePredictions()
+    let walletModel = self.status.wallet
-    self.safeLowGasPrice = $prediction.safeLow
+    spawnAndSend(self, "getGasPricePredictionsResult") do:
-    self.standardGasPrice = $prediction.standard
+      $ %walletModel.getGasPricePredictions()
-    self.fastGasPrice = $prediction.fast
+
-    self.fastestGasPrice = $prediction.fastest
+  proc getGasPricePredictionsResult(self: WalletView, gasPricePredictionsJson: string) {.slot.} =
+    let prediction = Json.decode(gasPricePredictionsJson, GasPricePrediction)
+    self.safeLowGasPrice = fmt"{prediction.safeLow:.3f}"
+    self.standardGasPrice = fmt"{prediction.standard:.3f}"
+    self.fastGasPrice = fmt"{prediction.fast:.3f}"
+    self.fastestGasPrice = fmt"{prediction.fastest:.3f}"
     self.gasPricePredictionsChanged()
 
   proc safeLowGasPrice*(self: WalletView): string {.slot.} = result = ?.self.safeLowGasPrice

ui/app/AppLayouts/Browser/BrowserConnectionModal.qml

@@ -118,10 +118,6 @@ Popup {
             accounts: walletModel.accounts
             selectedAccount: walletModel.currentAccount
             currency: walletModel.defaultCurrency
-            reset: function() {
-                accounts = Qt.binding(function() { return walletModel.accounts })
-                selectedAccount = Qt.binding(function() { return walletModel.currentAccount })
-            }
             onSelectedAccountChanged: {
                 if (!root.currentAddress) {
                     // We just set the account for the first time. Nothing to do here

ui/app/AppLayouts/Browser/BrowserWalletMenu.qml

@@ -105,10 +105,6 @@ Popup {
             accounts: walletModel.accounts
             selectedAccount: walletModel.currentAccount
             currency: walletModel.defaultCurrency
-            reset: function() {
-                accounts = Qt.binding(function() { return walletModel.accounts })
-                selectedAccount = Qt.binding(function() { return walletModel.currentAccount })
-            }
             onSelectedAccountChanged: {
                 if (!accountSelectorRow.currentAddress) {
                     // We just set the account for the first time. Nothing to do here

ui/app/AppLayouts/Browser/SignMessageModal.qml

@@ -80,9 +80,6 @@ ModalPopup {
             anchors.top: messageToSign.bottom
             anchors.topMargin: Style.current.padding * 3
             signingPhrase: walletModel.signingPhrase
-            reset: function() {
-                signingPhrase = Qt.binding(function() { return walletModel.signingPhrase })
-            }
         }
     }
 

ui/app/AppLayouts/Chat/ChatColumn.qml

@@ -55,7 +55,7 @@ StackLayout {
                                                 address,
                                                 amount,
                                                 tokenAddress)
-        chatCommandModal.close()
+        txModalLoader.close()
     }
     function requestTransaction(address, amount, tokenAddress, tokenDecimals = 18) {
         amount =  utilsModel.eth2Wei(amount.toString(), tokenDecimals)
@@ -63,7 +63,7 @@ StackLayout {
                                         address,
                                         amount,
                                         tokenAddress)
-        chatCommandModal.close()
+        txModalLoader.close()
     }
 
     
@@ -226,7 +226,6 @@ StackLayout {
                 stickerPackList: chatsModel.stickerPacks
                 chatType: chatsModel.activeChannel.chatType
                 onSendTransactionCommandButtonClicked: {
-                    txModalLoader.sourceComponent = undefined
                     if (chatsModel.activeChannel.ensVerified) {
                         txModalLoader.sourceComponent = cmpSendTransactionWithEns
                     } else {
@@ -235,7 +234,6 @@ StackLayout {
                     txModalLoader.item.open()
                 }
                 onReceiveTransactionCommandButtonClicked: {
-                    txModalLoader.sourceComponent = undefined
                     txModalLoader.sourceComponent = cmpReceiveTransaction
                     txModalLoader.item.open()
                 }
@@ -250,11 +248,24 @@ StackLayout {
 
     Loader {
         id: txModalLoader
+        function close() {
+            if (!this.item) {
+                return
+            }
+            this.item.close()
+            this.closed()
+        }
+        function closed() {
+            this.sourceComponent = undefined
+        }
     }
     Component {
         id: cmpSendTransactionNoEns
         ChatCommandModal {
             id: sendTransactionNoEns
+            onClosed: {
+                txModalLoader.closed()
+            }
             sendChatCommand: chatColumnLayout.requestAddressForTransaction
             isRequested: false
             //% "Send"
@@ -273,25 +284,15 @@ StackLayout {
             }
             selectRecipient.selectedType: RecipientSelector.Type.Contact
             selectRecipient.readOnly: true
-            onReset: {
-                selectRecipient.selectedRecipient = Qt.binding(function() {
-                    return {
-                        address: Constants.zeroAddress, // Setting as zero address since we don't have the address yet
-                        alias: chatsModel.activeChannel.alias,
-                        identicon: chatsModel.activeChannel.identicon,
-                        name: chatsModel.activeChannel.name,
-                        type: RecipientSelector.Type.Contact
-                    }
-                })
-                selectRecipient.selectedType = RecipientSelector.Type.Contact
-                selectRecipient.readOnly = true
-            }
         }
     }
     Component {
         id: cmpReceiveTransaction
         ChatCommandModal {
             id: receiveTransaction
+            onClosed: {
+                txModalLoader.closed()
+            }
             sendChatCommand: chatColumnLayout.requestTransaction
             isRequested: true
             //% "Request"
@@ -310,19 +311,6 @@ StackLayout {
             }
             selectRecipient.selectedType: RecipientSelector.Type.Contact
             selectRecipient.readOnly: true
-            onReset: {
-                selectRecipient.selectedRecipient = Qt.binding(function() {
-                    return {
-                        address: Constants.zeroAddress, // Setting as zero address since we don't have the address yet
-                        alias: chatsModel.activeChannel.alias,
-                        identicon: chatsModel.activeChannel.identicon,
-                        name: chatsModel.activeChannel.name,
-                        type: RecipientSelector.Type.Contact
-                    }
-                })
-                selectRecipient.selectedType = RecipientSelector.Type.Contact
-                selectRecipient.readOnly = true
-            }
         }
     }
     Component {
@@ -332,6 +320,9 @@ StackLayout {
             onOpened: {
                 walletModel.getGasPricePredictions()
             }
+            onClosed: {
+                txModalLoader.closed()
+            }
             selectRecipient.readOnly: true
             selectRecipient.selectedRecipient: {
                 return {
@@ -344,20 +335,6 @@ StackLayout {
                 }
             }
             selectRecipient.selectedType: RecipientSelector.Type.Contact
-            onReset: {
-                selectRecipient.readOnly = true
-                selectRecipient.selectedRecipient = Qt.binding(function() {
-                    return {
-                        address: "",
-                        alias: chatsModel.activeChannel.alias,
-                        identicon: chatsModel.activeChannel.identicon,
-                        name: chatsModel.activeChannel.name,
-                        type: RecipientSelector.Type.Contact,
-                        ensVerified: true
-                    }
-                })
-                selectRecipient.selectedType = RecipientSelector.Type.Contact
-            }
         }
     }
 }

ui/app/AppLayouts/Chat/ChatColumn/ChatComponents/ChatCommandModal.qml

@@ -11,7 +11,6 @@ ModalPopup {
     property string finalButtonLabel: "Request address"
     property var sendChatCommand: function () {}
     property bool isRequested: false
-    signal reset
 
     id: root
     title: root.commandTitle
@@ -19,11 +18,6 @@ ModalPopup {
 
     property alias selectRecipient: selectRecipient
 
-    onClosed: {
-        stack.reset()
-        root.reset()
-    }
-
     TransactionStackView {
         id: stack
         anchors.fill: parent
@@ -51,10 +45,6 @@ ModalPopup {
                         //% "From account"
                         qsTrId("from-account")
                 }
-                reset: function() {
-                    accounts = Qt.binding(function() { return walletModel.accounts })
-                    selectedAccount = Qt.binding(function() { return walletModel.currentAccount })
-                }
             }
             SeparatorWithIcon {
                 id: separator
@@ -86,9 +76,6 @@ ModalPopup {
                 onSelectedRecipientChanged: {
                     addressRequiredValidator.address = root.isRequested ? selectFromAccount.selectedAccount.address : selectRecipient.selectedRecipient.address
                 }
-                reset: function() {
-                    isValid = true
-                }
             }
         }
         TransactionFormGroup {
@@ -105,9 +92,6 @@ ModalPopup {
                 getCryptoValue: walletModel.getCryptoValue
                 validateBalance: !root.isRequested
                 width: stack.width
-                reset: function() {
-                    selectedAccount = Qt.binding(function() { return selectFromAccount.selectedAccount })
-                }
             }
         }
         TransactionFormGroup {
@@ -127,20 +111,6 @@ ModalPopup {
                 amount: { "value": txtAmount.selectedAmount, "fiatValue": txtAmount.selectedFiatAmount }
                 toWarn: addressRequiredValidator.isWarn
                 currency: walletModel.defaultCurrency
-                reset: function() {
-                    fromAccount = Qt.binding(function() {
-                      return root.isRequested ?
-                        selectRecipient.selectedRecipient :
-                        selectFromAccount.selectedAccount
-                    })
-                    toAccount = Qt.binding(function() {
-                      return root.isRequested ?
-                        selectFromAccount.selectedAccount :
-                        selectRecipient.selectedRecipient
-                    })
-                    asset = Qt.binding(function() { return txtAmount.selectedAsset })
-                    amount = Qt.binding(function() { return { "value": txtAmount.selectedAmount, "fiatValue": txtAmount.selectedFiatAmount } })
-                }
             }
 
             AddressRequiredValidator {

ui/app/AppLayouts/Chat/ChatColumn/ChatComponents/SignTransactionModal.qml

@@ -50,7 +50,6 @@ ModalPopup {
     }
 
     onClosed: {
-        stack.reset()
         stack.pop(groupPreview, StackView.Immediate)
     }
 
@@ -91,11 +90,6 @@ ModalPopup {
                 label: qsTrId("choose-account")
                 showBalanceForAssetSymbol: root.selectedAsset.symbol
                 minRequiredAssetBalance: parseFloat(root.selectedAmount)
-                reset: function() {
-                    accounts = Qt.binding(function() { return walletModel.accounts })
-                    showBalanceForAssetSymbol = Qt.binding(function() { return root.selectedAsset.symbol })
-                    minRequiredAssetBalance = Qt.binding(function() { return parseFloat(root.selectedAmount) })
-                }
                 onSelectedAccountChanged: if (isValid) { gasSelector.estimateGas() }
             }
             RecipientSelector {
@@ -105,11 +99,6 @@ ModalPopup {
                 contacts: profileModel.addedContacts
                 selectedRecipient: root.selectedRecipient
                 readOnly: true
-                reset: function() {
-                    accounts = Qt.binding(function() { return walletModel.accounts })
-                    contacts = Qt.binding(function() { return profileModel.addedContacts })
-                    selectedRecipient = Qt.binding(function() { return root.selectedRecipient })
-                }
             }
         }
         TransactionFormGroup {
@@ -130,10 +119,6 @@ ModalPopup {
                 getFiatValue: walletModel.getFiatValue
                 defaultCurrency: walletModel.defaultCurrency
                 width: stack.width
-                reset: function() {
-                    slowestGasPrice = Qt.binding(function(){ return parseFloat(walletModel.safeLowGasPrice) })
-                    fastestGasPrice = Qt.binding(function(){ return parseFloat(walletModel.fastestGasPrice) })
-                }
     
                 property var estimateGas: Backpressure.debounce(gasSelector, 600, function() {
                     if (!(selectFromAccount.selectedAccount && selectFromAccount.selectedAccount.address &&
@@ -167,12 +152,6 @@ ModalPopup {
                 selectedAmount: parseFloat(root.selectedAmount)
                 selectedAsset: root.selectedAsset
                 selectedGasEthValue: gasSelector.selectedGasEthValue
-                reset: function() {
-                    selectedAccount = Qt.binding(function() { return selectFromAccount.selectedAccount })
-                    selectedAmount = Qt.binding(function() { return parseFloat(root.selectedAmount) })
-                    selectedAsset = Qt.binding(function() { return root.selectedAsset })
-                    selectedGasEthValue = Qt.binding(function() { return gasSelector.selectedGasEthValue })
-                }
             }
         }
         
@@ -205,21 +184,6 @@ ModalPopup {
                 isGasEditable: true
                 fromValid: balanceValidator.isValid
                 gasValid: gasValidator.isValid
-                reset: function() {
-                    fromAccount =  Qt.binding(function() { return selectFromAccount.selectedAccount })
-                    gas = Qt.binding(function() {
-                        return {
-                            "value": gasSelector.selectedGasEthValue,
-                            "symbol": "ETH",
-                            "fiatValue": gasSelector.selectedGasFiatValue
-                        }
-                    })
-                    toAccount =  Qt.binding(function() { return selectRecipient.selectedRecipient })
-                    asset = Qt.binding(function() { return root.selectedAsset })
-                    amount = Qt.binding(function() { return { "value": root.selectedAmount, "fiatValue": root.selectedFiatAmount } })
-                    fromValid = Qt.binding(function() { return balanceValidator.isValid })
-                    gasValid = Qt.binding(function() { return gasValidator.isValid })
-                }
                 onFromClicked: { stack.push(groupSelectAcct, StackView.Immediate) }
                 onGasClicked: { stack.push(groupSelectGas, StackView.Immediate) }
             }
@@ -230,11 +194,6 @@ ModalPopup {
                 account: selectFromAccount.selectedAccount
                 amount: !!root.selectedAmount ? parseFloat(root.selectedAmount) : 0.0
                 asset: root.selectedAsset
-                reset: function() {
-                    account = Qt.binding(function() { return selectFromAccount.selectedAccount })
-                    amount = Qt.binding(function() { return !!root.selectedAmount ? parseFloat(root.selectedAmount) : 0.0 })
-                    asset = Qt.binding(function() { return root.selectedAsset })
-                }
             }
             GasValidator {
                 id: gasValidator2
@@ -245,12 +204,6 @@ ModalPopup {
                 selectedAmount: parseFloat(root.selectedAmount)
                 selectedAsset: root.selectedAsset
                 selectedGasEthValue: gasSelector.selectedGasEthValue
-                reset: function() {
-                    selectedAccount = Qt.binding(function() { return selectFromAccount.selectedAccount })
-                    selectedAmount = Qt.binding(function() { return parseFloat(root.selectedAmount) })
-                    selectedAsset = Qt.binding(function() { return root.selectedAsset })
-                    selectedGasEthValue = Qt.binding(function() { return gasSelector.selectedGasEthValue })
-                }
             }
         }
         TransactionFormGroup {
@@ -267,9 +220,6 @@ ModalPopup {
                 id: transactionSigner
                 width: stack.width
                 signingPhrase: walletModel.signingPhrase
-                reset: function() {
-                    signingPhrase = Qt.binding(function() { return walletModel.signingPhrase })
-                }
             }
         }
     }

ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/TransactionComponents/AcceptTransaction.qml

@@ -77,24 +77,35 @@ Item {
         }
     }
 
-    SignTransactionModal {
+    Loader {
         id: signTransactionModal
-        onOpened: {
+        function open() {
-          walletModel.getGasPricePredictions()
+            this.active = true
+            this.item.open()
         }
-        selectedAccount: {}
+        function closed() {
-        selectedRecipient: {
+            this.active = false // kill an opened instance
-            return {
+        }
-                address: commandParametersObject.address,
+        sourceComponent: SignTransactionModal {
-                identicon: chatsModel.activeChannel.identicon,
+            onOpened: {
-                name: chatsModel.activeChannel.name,
+                walletModel.getGasPricePredictions()
-                type: RecipientSelector.Type.Contact
             }
+            onClosed: {
+                signTransactionModal.closed()
+            }
+            selectedAccount: {}
+            selectedRecipient: {
+                return {
+                    address: commandParametersObject.address,
+                    identicon: chatsModel.activeChannel.identicon,
+                    name: chatsModel.activeChannel.name,
+                    type: RecipientSelector.Type.Contact
+                }
+            }
+            selectedAsset: token
+            selectedAmount: tokenAmount
+            selectedFiatAmount: fiatValue
         }
-        selectedAsset: token
-        selectedAmount: tokenAmount
-        selectedFiatAmount: fiatValue
-        //outgoing: root.outgoing
     }
 
     SelectAccountModal {

ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/TransactionComponents/SelectAccountModal.qml

@@ -24,9 +24,6 @@ ModalPopup {
           width: parent.width
           //% "Choose account"
           label: qsTr("Select account to share and receive assets")
-          reset: function() {
-              accounts = Qt.binding(function() { return walletModel.accounts })
-          }
       }
     }
 

ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/TransactionComponents/SendTransactionButton.qml

@@ -42,22 +42,34 @@ Item {
         }
     }
 
-    SignTransactionModal {
+    Loader {
         id: signTransactionModal
-        onOpened: {
+        function open() {
-            walletModel.getGasPricePredictions()
+            this.active = true
+            this.item.open()
         }
-        selectedRecipient: {
+        function closed() {
-            return {
+            this.active = false // kill an opened instance
-                address: commandParametersObject.address,
+        }
-                identicon: chatsModel.activeChannel.identicon,
+        sourceComponent: SignTransactionModal {
-                name: chatsModel.activeChannel.name,
+            onOpened: {
-                type: RecipientSelector.Type.Contact
+                walletModel.getGasPricePredictions()
             }
+            onClosed: {
+                signTransactionModal.closed()
+            }
+            selectedRecipient: {
+                return {
+                    address: commandParametersObject.address,
+                    identicon: chatsModel.activeChannel.identicon,
+                    name: chatsModel.activeChannel.name,
+                    type: RecipientSelector.Type.Contact
+                }
+            }
+            selectedAsset: token
+            selectedAmount: tokenAmount
+            selectedFiatAmount: fiatValue
         }
-        selectedAsset: token
-        selectedAmount: tokenAmount
-        selectedFiatAmount: fiatValue
     }
 }
 

ui/app/AppLayouts/Profile/Sections/Ens/RegisterENSModal.qml

@@ -23,10 +23,6 @@ ModalPopup {
         standardButtons: StandardButton.Ok
     }
 
-    onClosed: {
-        stack.reset()
-    }
-
     function sendTransaction() {
         let responseStr = profileModel.ens.registerENS(root.ensUsername,
                                                        selectFromAccount.selectedAccount.address,
@@ -75,12 +71,6 @@ ModalPopup {
                 label: qsTrId("choose-account")
                 showBalanceForAssetSymbol: root.asset.symbol
                 minRequiredAssetBalance: root.ensPrice
-                reset: function() {
-                    accounts = Qt.binding(function() { return walletModel.accounts })
-                    selectedAccount = Qt.binding(function() { return walletModel.currentAccount })
-                    showBalanceForAssetSymbol = Qt.binding(function() { return root.asset.symbol })
-                    minRequiredAssetBalance = Qt.binding(function() { return root.ensPrice })
-                }
                 onSelectedAccountChanged: if (isValid) { gasSelector.estimateGas() }
             }
             RecipientSelector {
@@ -100,10 +90,6 @@ ModalPopup {
                 getGasEthValue: walletModel.getGasEthValue
                 getFiatValue: walletModel.getFiatValue
                 defaultCurrency: walletModel.defaultCurrency
-                reset: function() {
-                    slowestGasPrice = Qt.binding(function(){ return parseFloat(walletModel.safeLowGasPrice) })
-                    fastestGasPrice = Qt.binding(function(){ return parseFloat(walletModel.fastestGasPrice) })
-                }
                 property var estimateGas: Backpressure.debounce(gasSelector, 600, function() {
                     if (!(root.ensUsername !== "" && selectFromAccount.selectedAccount)) {
                         selectedGasLimit = 380000
@@ -120,12 +106,6 @@ ModalPopup {
                 selectedAsset: root.asset
                 selectedAmount: parseFloat(ensPrice)
                 selectedGasEthValue: gasSelector.selectedGasEthValue
-                reset: function() {
-                    selectedAccount = Qt.binding(function() { return selectFromAccount.selectedAccount })
-                    selectedAsset = Qt.binding(function() { return root.asset })
-                    selectedAmount = Qt.binding(function() { return parseFloat(ensPrice) })
-                    selectedGasEthValue = Qt.binding(function() { return gasSelector.selectedGasEthValue })
-                }
             }
         }
         TransactionFormGroup {
@@ -151,19 +131,6 @@ ModalPopup {
                     const fiatValue = walletModel.getFiatValue(root.ensPrice || 0, root.asset.symbol, currency)
                     return { "value": root.ensPrice, "fiatValue": fiatValue }
                 }
-                reset: function() {
-                    fromAccount = Qt.binding(function() { return selectFromAccount.selectedAccount })
-                    toAccount = Qt.binding(function() { return selectRecipient.selectedRecipient })
-                    asset = Qt.binding(function() { return root.asset })
-                    amount = Qt.binding(function() { return { "value": root.ensPrice, "fiatValue": walletModel.getFiatValue(root.ensPrice, root.asset.symbol, currency) } })
-                    gas = Qt.binding(function() {
-                        return {
-                            "value": gasSelector.selectedGasEthValue,
-                            "symbol": "ETH",
-                            "fiatValue": gasSelector.selectedGasFiatValue
-                        }
-                    })
-                }
             }
         }
         TransactionFormGroup {
@@ -177,9 +144,6 @@ ModalPopup {
                 id: transactionSigner
                 width: stack.width
                 signingPhrase: walletModel.signingPhrase
-                reset: function() {
-                    signingPhrase = Qt.binding(function() { return walletModel.signingPhrase })
-                }
             }
         }
     }

ui/app/AppLayouts/Profile/Sections/Ens/Search.qml

@@ -46,11 +46,23 @@ Item {
         Qt.callLater(validateENS, ensUsername, isStatus)
     }
 
-    SetPubKeyModal {
+    Loader {
         id: transactionDialog
-        ensUsername: ensUsername.text
+        function open() {
-        width: 400
+            this.active = true
-        height: 400
+            this.item.open()
+        }
+        function closed() {
+            this.active = false // kill an opened instance
+        }
+        sourceComponent: SetPubKeyModal {
+            onClosed: {
+                transactionDialog.closed()
+            }
+            ensUsername: ensUsername.text
+            width: 400
+            height: 400
+        }
     }
 
     StyledText {

ui/app/AppLayouts/Profile/Sections/Ens/SetPubKeyModal.qml

@@ -21,10 +21,6 @@ ModalPopup {
         standardButtons: StandardButton.Ok
     }
 
-    onClosed: {
-        stack.reset()
-    }
-
     function sendTransaction() {
         try {
             let responseStr = profileModel.ens.setPubKey(root.ensUsername,
@@ -79,12 +75,6 @@ ModalPopup {
                 label: qsTrId("choose-account")
                 showBalanceForAssetSymbol: "ETH"
                 minRequiredAssetBalance: 0
-                reset: function() {
-                    accounts = Qt.binding(function() { return walletModel.accounts })
-                    selectedAccount = Qt.binding(function() { return walletModel.currentAccount })
-                    showBalanceForAssetSymbol = Qt.binding(function() { return "ETH" })
-                    minRequiredAssetBalance = Qt.binding(function() { return 0 })
-                }
                 onSelectedAccountChanged: if (isValid) { gasSelector.estimateGas() }
             }
             RecipientSelector {
@@ -104,10 +94,6 @@ ModalPopup {
                 getGasEthValue: walletModel.getGasEthValue
                 getFiatValue: walletModel.getFiatValue
                 defaultCurrency: walletModel.defaultCurrency
-                reset: function() {
-                    slowestGasPrice = Qt.binding(function(){ return parseFloat(walletModel.safeLowGasPrice) })
-                    fastestGasPrice = Qt.binding(function(){ return parseFloat(walletModel.fastestGasPrice) })
-                }
                 property var estimateGas: Backpressure.debounce(gasSelector, 600, function() {
                     if (!(root.ensUsername !== "" && selectFromAccount.selectedAccount)) {
                         selectedGasLimit = 80000;
@@ -124,12 +110,6 @@ ModalPopup {
                 selectedAsset: root.asset
                 selectedAmount: 0
                 selectedGasEthValue: gasSelector.selectedGasEthValue
-                reset: function() {
-                    selectedAccount = Qt.binding(function() { return selectFromAccount.selectedAccount })
-                    selectedAsset = Qt.binding(function() { return root.asset })
-                    selectedAmount = Qt.binding(function() { return 0 })
-                    selectedGasEthValue = Qt.binding(function() { return gasSelector.selectedGasEthValue })
-                }
             }
         }
         TransactionFormGroup {
@@ -155,19 +135,6 @@ ModalPopup {
                     const fiatValue = walletModel.getFiatValue(0, root.asset.symbol, currency)
                     return { "value": 0, "fiatValue": fiatValue }
                 }
-                reset: function() {
-                    fromAccount = Qt.binding(function() { return selectFromAccount.selectedAccount })
-                    toAccount = Qt.binding(function() { return selectRecipient.selectedRecipient })
-                    asset = Qt.binding(function() { return root.asset })
-                    amount = Qt.binding(function() { return { "value": 0, "fiatValue": walletModel.getFiatValue(0, root.asset.symbol, currency) } })
-                    gas = Qt.binding(function() {
-                        return {
-                            "value": gasSelector.selectedGasEthValue,
-                            "symbol": "ETH",
-                            "fiatValue": gasSelector.selectedGasFiatValue
-                        }
-                    })
-                }
             }
         }
         TransactionFormGroup {
@@ -181,9 +148,6 @@ ModalPopup {
                 id: transactionSigner
                 width: stack.width
                 signingPhrase: walletModel.signingPhrase
-                reset: function() {
-                    signingPhrase = Qt.binding(function() { return walletModel.signingPhrase })
-                }
             }
         }
     }

ui/app/AppLayouts/Profile/Sections/Ens/TermsAndConditions.qml

@@ -23,11 +23,23 @@ Item {
         font.pixelSize: 20
     }
 
-    RegisterENSModal {
+    Loader {
         id: transactionDialog
-        ensUsername: username
+        function open() {
-        width: 400
+            this.active = true
-        height: 400
+            this.item.open()
+        }
+        function closed() {
+            this.active = false // kill an opened instance
+        }
+        sourceComponent: RegisterENSModal {
+            onClosed: {
+                transactionDialog.closed()
+            }
+            ensUsername: username
+            width: 400
+            height: 400
+        }
     }
 
     ModalPopup {

ui/app/AppLayouts/Wallet/SendModal.qml

@@ -12,7 +12,6 @@ ModalPopup {
     property alias selectFromAccount: selectFromAccount
     property alias selectRecipient: selectRecipient
     property alias stack: stack
-    signal reset
 
     //% "Send"
     title: qsTrId("command-button-send")
@@ -26,11 +25,6 @@ ModalPopup {
         standardButtons: StandardButton.Ok
     }
 
-    onClosed: {
-        stack.reset()
-        root.reset()
-    }
-
     function sendTransaction() {
         stack.currentGroup.isPending = true
         walletModel.sendTransaction(selectFromAccount.selectedAccount.address,
@@ -67,10 +61,6 @@ ModalPopup {
                 width: stack.width
                 //% "From account"
                 label: qsTrId("from-account")
-                reset: function() {
-                    accounts = Qt.binding(function() { return walletModel.accounts })
-                    selectedAccount = Qt.binding(function() { return walletModel.currentAccount })
-                }
                 onSelectedAccountChanged: if (isValid) { gasSelector.estimateGas() }
             }
             SeparatorWithIcon {
@@ -87,11 +77,6 @@ ModalPopup {
                 anchors.top: separator.bottom
                 anchors.topMargin: 10
                 width: stack.width
-                reset: function() {
-                    accounts = Qt.binding(function() { return walletModel.accounts })
-                    contacts = Qt.binding(function() { return profileModel.addedContacts })
-                    selectedRecipient = undefined
-                }
                 onSelectedRecipientChanged: if (isValid) { gasSelector.estimateGas() }
             }
         }
@@ -109,9 +94,6 @@ ModalPopup {
                 getFiatValue: walletModel.getFiatValue
                 getCryptoValue: walletModel.getCryptoValue
                 width: stack.width
-                reset: function() {
-                    selectedAccount = Qt.binding(function() { return selectFromAccount.selectedAccount })
-                }
                 onSelectedAssetChanged: if (isValid) { gasSelector.estimateGas() }
                 onSelectedAmountChanged: if (isValid) { gasSelector.estimateGas() }
             }
@@ -125,10 +107,6 @@ ModalPopup {
                 getFiatValue: walletModel.getFiatValue
                 defaultCurrency: walletModel.defaultCurrency
                 width: stack.width
-                reset: function() {
-                    slowestGasPrice = Qt.binding(function(){ return parseFloat(walletModel.safeLowGasPrice) })
-                    fastestGasPrice = Qt.binding(function(){ return parseFloat(walletModel.fastestGasPrice) })
-                }
                 property var estimateGas: Backpressure.debounce(gasSelector, 600, function() {
                     if (!(selectFromAccount.selectedAccount && selectFromAccount.selectedAccount.address &&
                         selectRecipient.selectedRecipient && selectRecipient.selectedRecipient.address &&
@@ -158,12 +136,6 @@ ModalPopup {
                 selectedAmount: parseFloat(txtAmount.selectedAmount)
                 selectedAsset: txtAmount.selectedAsset
                 selectedGasEthValue: gasSelector.selectedGasEthValue
-                reset: function() {
-                    selectedAccount = Qt.binding(function() { return selectFromAccount.selectedAccount })
-                    selectedAmount = Qt.binding(function() { return parseFloat(txtAmount.selectedAmount) })
-                    selectedAsset = Qt.binding(function() { return txtAmount.selectedAsset })
-                    selectedGasEthValue = Qt.binding(function() { return gasSelector.selectedGasEthValue })
-                }
             }
         }
         TransactionFormGroup {
@@ -186,27 +158,11 @@ ModalPopup {
                 asset: txtAmount.selectedAsset
                 amount: { "value": txtAmount.selectedAmount, "fiatValue": txtAmount.selectedFiatAmount }
                 currency: walletModel.defaultCurrency
-                reset: function() {
-                    fromAccount = Qt.binding(function() { return selectFromAccount.selectedAccount })
-                    toAccount = Qt.binding(function() { return selectRecipient.selectedRecipient })
-                    asset = Qt.binding(function() { return txtAmount.selectedAsset })
-                    amount = Qt.binding(function() { return { "value": txtAmount.selectedAmount, "fiatValue": txtAmount.selectedFiatAmount } })
-                    gas = Qt.binding(function() {
-                        return {
-                            "value": gasSelector.selectedGasEthValue,
-                            "symbol": "ETH",
-                            "fiatValue": gasSelector.selectedGasFiatValue
-                        }
-                    })
-                }
             }
             SendToContractWarning {
                 id: sendToContractWarning
                 anchors.top: pvwTransaction.bottom
                 selectedRecipient: selectRecipient.selectedRecipient
-                reset: function() {
-                    selectedRecipient = Qt.binding(function() { return selectRecipient.selectedRecipient })
-                }
             }
         }
         TransactionFormGroup {
@@ -220,9 +176,6 @@ ModalPopup {
                 id: transactionSigner
                 width: stack.width
                 signingPhrase: walletModel.signingPhrase
-                reset: function() {
-                    signingPhrase = Qt.binding(function() { return walletModel.signingPhrase })
-                }
             }
         }
     }

ui/app/AppMain.qml

@@ -18,10 +18,24 @@ RowLayout {
     }
 
     // Add SenmdModal here as it is used by the Wallet as well as the Browser
-    SendModal{
+    Loader {
         id: sendModal
-        onOpened: {
+
-          walletModel.getGasPricePredictions()
+        function open() {
+            this.active = true
+            this.item.open()
+        }
+        function closed() {
+            // this.sourceComponent = undefined // kill an opened instance
+            this.active = false
+        }
+        sourceComponent: SendModal {
+            onOpened: {
+                walletModel.getGasPricePredictions()
+            }
+            onClosed: {
+                sendModal.closed()
+            }
         }
     }
 

ui/shared/AccountSelector.qml

@@ -25,17 +25,6 @@ Item {
     property alias dropdownAlignment: select.menuAlignment
     property bool isValid: true
     property bool readOnly: false
-    property var reset: function() {}
-
-    function resetInternal() {
-        accounts = undefined
-        selectedAccount = undefined
-        showBalanceForAssetSymbol = ""
-        minRequiredAssetBalance = 0
-        assetFound = undefined
-        isValid = true
-        readOnly = false
-    }
 
     function validate() {
         if (showBalanceForAssetSymbol == "" || minRequiredAssetBalance == 0 || !assetFound) {

ui/shared/AddressSourceSelector.qml

@@ -9,14 +9,8 @@ Item {
     property var sources: []
     property var selectedSource: sources.length ? sources[0] : null
     property int dropdownWidth: 220
-    property var reset: function() {}
     height: select.height
 
-    function resetInternal() {
-        sources = []
-        selectedSource = sources.length ? sources[0] : null
-    }
-
     Select {
         id: select
         anchors.left: parent.left

ui/shared/AssetAndAmountInput.qml

@@ -23,17 +23,6 @@ Item {
     property bool isDirty: false
     property bool validateBalance: true
     property bool isValid: false
-    property var reset: function() {}
-
-    function resetInternal() {
-        selectAsset.resetInternal()
-        selectedAccount = undefined
-        txtFiatBalance.text = "0.00"
-        inputAmount.resetInternal()
-        txtBalanceDesc.color = Style.current.secondaryText
-        txtBalance.color = Qt.binding(function() { return txtBalance.hovered ? Style.current.textColor : Style.current.secondaryText })
-        isValid = false
-    }
 
     id: root
 

ui/shared/BalanceValidator.qml

@@ -14,20 +14,12 @@ Column {
     property double amount
     property var asset
     property bool isValid: false
-    property var reset: function() {}
     property alias errorMessage: txtValidationError.text
 
     onAccountChanged: validate()
     onAmountChanged: validate()
     onAssetChanged: validate()
 
-    function resetInternal() {
-        account = undefined
-        amount = 0
-        asset = undefined
-        isValid = false
-    }
-
     function validate() {
         let isValid = true
         if (!(account && account.assets && asset && amount > 0)) {

ui/shared/ContactSelector.qml

@@ -16,22 +16,12 @@ Item {
     property alias validationErrorAlignment: select.validationErrorAlignment
     property bool isValid: false
     property alias isPending: ensResolver.isPending
-    property var reset: function() {}
     property bool readOnly: false
     property bool isResolvedAddress: false
     //% "Select a contact"
     property string selectAContact: qsTrId("select-a-contact")
     property string noEnsAddressMessage: qsTr("Contact does not have an ENS address. Please send a transaction in chat.")
 
-    function resetInternal() {
-        contacts = undefined
-        selectedContact = undefined
-        select.validationError = ""
-        isValid = false
-        readOnly = false
-        isResolvedAddress = false
-    }
-
     function resolveEns() {
         if (selectedContact.ensVerified) {
             root.isResolvedAddress = false
@@ -139,7 +129,7 @@ Item {
         anchors.top: select.bottom
         anchors.right: select.right
         anchors.topMargin: Style.current.halfPadding
-        debounceDelay: root.readOnly ? 0 : 600
+        debounceDelay: 0
         onResolved: {
             root.isResolvedAddress = true
             var selectedContact = root.selectedContact

ui/shared/FormGroup.qml

@@ -22,22 +22,6 @@ Rectangle {
         return { isValid, isPending }
     }
     color: Style.current.background
-    function reset() {
-        for (let i=0; i<children.length; i++) {
-            const component = children[i]
-            try {
-                if (component.hasOwnProperty("resetInternal") && typeof component.resetInternal === "function") {
-                    component.resetInternal()
-                }
-                if (component.hasOwnProperty("reset") && typeof component.reset === "function") {
-                    component.reset()
-                }
-            } catch (e) {
-                console.warn("Error resetting component", i, ":", e.message)
-                continue
-            }
-        }
-    }
     StackView.onActivated: {
         // parent refers to the StackView
         parent.groupActivated(this)

ui/shared/GasSelector.qml

@@ -27,21 +27,11 @@ Item {
     //% "Please enter an amount"
     property string noInputErrorMessage: qsTrId("please-enter-an-amount")
     property bool isValid: true
-    property var reset: function() {}
 
     function defaultGasPrice() {
         return ((50 * (root.fastestGasPrice - root.slowestGasPrice) / 100) + root.slowestGasPrice)
     }
 
-    function resetInternal() {
-        slowestGasPrice = 0
-        fastestGasPrice = 100
-        inputGasLimit.text = "21000"
-        customNetworkFeeDialog.isValid = true
-        inputGasPrice.text = Qt.binding(defaultGasPrice)
-        gasSlider.value = Qt.binding(defaultGasPrice)
-    }
-
     function updateGasEthValue() {
         // causes error on application load without this null check
         if (!inputGasPrice || !inputGasLimit) {

ui/shared/GasValidator.qml

@@ -16,21 +16,12 @@ Column {
     property var selectedAsset
     property double selectedGasEthValue
     property bool isValid: false
-    property var reset: function() {}
 
     onSelectedAccountChanged: validate()
     onSelectedAmountChanged: validate()
     onSelectedAssetChanged: validate()
     onSelectedGasEthValueChanged: validate()
 
-    function resetInternal() {
-        selectedAccount = undefined
-        selectedAmount = 0
-        selectedAsset = undefined
-        selectedGasEthValue = 0
-        isValid = false
-    }
-
     function validate() {
         let isValid = true
         if (!(selectedAccount && selectedAccount.assets && selectedAsset && selectedGasEthValue > 0)) {

ui/shared/RecipientSelector.qml

@@ -28,11 +28,10 @@ Item {
                 return inpAddress.isPending
             case RecipientSelector.Type.Contact:
                 return selContact.isPending
-            default:
+            case RecipientSelector.Type.Account:
-                return false
+                return false // AccountSelector is never pending
         }
     }
-    property var reset: function() {}
     readonly property var sources: [
         //% "Address"
         { text: qsTrId("address"), value: RecipientSelector.Type.Address, visible: true },
@@ -41,34 +40,6 @@ Item {
         { text: qsTr("Contact"), value: RecipientSelector.Type.Contact, visible: true }
     ]
     property var selectedType: RecipientSelector.Type.Address
-
-    function resetInternal() {
-        inpAddress.resetInternal()
-        selContact.resetInternal()
-        selAccount.resetInternal()
-        selAddressSource.resetInternal()
-        isValid = false
-        isPending = Qt.binding(function() {
-            if (!selAddressSource.selectedSource) {
-                return false
-            }
-            switch (selAddressSource.selectedSource.value) {
-                case RecipientSelector.Type.Address:
-                    return inpAddress.isPending
-                case RecipientSelector.Type.Contact:
-                    return selContact.isPending
-                case RecipientSelector.Type.Account:
-                    return selAccount.isPending
-            }
-        })
-        selectedType = RecipientSelector.Type.Address
-        selectedRecipient = undefined
-        accounts = undefined
-        contacts = undefined
-        selContact.reset()
-        selAccount.reset()
-        selAddressSource.reset()
-    }
     
     enum Type {
         Address,
@@ -78,7 +49,10 @@ Item {
 
     function validate() {
         let isValid = true
-        switch (root.selectedType) {
+        if (!selAddressSource.selectedSource) {
+            return root.isValid
+        }
+        switch (selAddressSource.selectedSource.value) {
             case RecipientSelector.Type.Address:
                 isValid = inpAddress.isValid
                 break
@@ -190,10 +164,6 @@ Item {
             Layout.preferredWidth: selAddressSource.visible ? root.inputWidth : parent.width
             Layout.alignment: Qt.AlignTop
             Layout.fillWidth: true
-            reset: function() {
-                contacts = Qt.binding(function() { return root.contacts })
-                readOnly = Qt.binding(function() { return root.readOnly })
-            }
             onSelectedContactChanged: {
                 if (!selectedContact || !selAddressSource.selectedSource || !selectedContact.address || (selAddressSource.selectedSource && selAddressSource.selectedSource.value !== RecipientSelector.Type.Contact)) {
                     return
@@ -214,9 +184,6 @@ Item {
             Layout.preferredWidth: selAddressSource.visible ? root.inputWidth : parent.width
             Layout.alignment: Qt.AlignTop
             Layout.fillWidth: true
-            reset: function() {
-                accounts = Qt.binding(function() { return root.accounts })
-            }
             onSelectedAccountChanged: {
                 if (!selectedAccount || !selAddressSource.selectedSource || (selAddressSource.selectedSource && selAddressSource.selectedSource.value !== RecipientSelector.Type.Account)) {
                     return
@@ -233,10 +200,6 @@ Item {
             width: sourceSelectWidth
             Layout.preferredWidth: root.sourceSelectWidth
             Layout.alignment: Qt.AlignTop
-            reset: function() {
-                sources = Qt.binding(function() { return root.sources.filter(source => source.visible) })
-                selectedSource = root.getSourceByType(root.selectedType)
-            }
 
             onSelectedSourceChanged: {
                 if (root.readOnly || !selectedSource) {

ui/shared/SendToContractWarning.qml

@@ -11,15 +11,9 @@ Item {
     property string sendToContractWarningMessage: qsTr("Tokens will be sent directly to a contract address, which may result in a loss of funds. To transfer ERC-20 tokens, ensure the recipient address is the address of the destination wallet.")
     property var selectedRecipient
     property bool isValid: true
-    property var reset: function() {}
 
     onSelectedRecipientChanged: validate()
 
-    function resetInternal() {
-        selectedRecipient = undefined
-        isValid = true
-    }
-
     function validate() {
         let isValid = true
         if (!(selectedRecipient && selectedRecipient.address)) {

ui/shared/TransactionPreview.qml

@@ -14,7 +14,6 @@ Item {
     property string currency: "USD"
     property var gas
     height: content.height
-    property var reset: function() {}
     signal fromClicked
     signal gasClicked
     // Creates a mouse area around the "from account". When clicked, triggers 
@@ -29,14 +28,6 @@ Item {
     property bool toWarn: false
     property bool gasValid: true
 
-    function resetInternal() {
-        fromAccount = undefined
-        toAccount = undefined
-        asset = undefined
-        amount = undefined
-        gas = undefined
-    }
-
     Column {
         id: content
         anchors.left: parent.left

ui/shared/TransactionSigner.qml

@@ -16,14 +16,6 @@ Item {
     //% "Password needs to be 4 characters or more"
     property string invalidInputErrorMessage: qsTrId("password-needs-to-be-4-characters-or-more")
     property bool isValid: false
-    property var reset: function() {}
-
-    function resetInternal() {
-        signingPhrase.text = ""
-        enteredPassword = ""
-        txtPassword.resetInternal()
-        isValid = false
-    }
 
     function forceActiveFocus(reason) {
         txtPassword.forceActiveFocus(reason)

ui/shared/TransactionStackView.qml

@@ -27,14 +27,6 @@ StackView {
         currentIdx--
     }
 
-    function reset() {
-        for (let i=0; i<groups.length; i++) {
-            groups[i].reset()
-        }
-        this.pop(null)
-        currentIdx = 0
-    }
-
     initialItem: groups[currentIdx]
     anchors.fill: parent
 

ui/shared/status/StatusStickerMarket.qml

@@ -92,13 +92,25 @@ Item {
                     height: 350
                 }
             }
-            StatusStickerPackPurchaseModal {
+            Loader {
                 id: stickerPackPurchaseModal
-                stickerPackId: packId
+                function open() {
-                packPrice: price
+                    this.active = true
-                width: stickerPackDetailsPopup.width
+                    this.item.open()
-                height: stickerPackDetailsPopup.height
+                }
-                showBackBtn: stickerPackDetailsPopup.opened
+                function closed() {
+                    this.active = false // kill an opened instance
+                }
+                sourceComponent: StatusStickerPackPurchaseModal {
+                    onClosed: {
+                        stickerPackPurchaseModal.closed()
+                    }
+                    stickerPackId: packId
+                    packPrice: price
+                    width: stickerPackDetailsPopup.width
+                    height: stickerPackDetailsPopup.height
+                    showBackBtn: stickerPackDetailsPopup.opened
+                }
             }
             StatusStickerPackDetails {
                 id: stickerPackDetails

ui/shared/status/StatusStickerPackPurchaseModal.qml

@@ -23,10 +23,6 @@ ModalPopup {
         standardButtons: StandardButton.Ok
     }
 
-    onClosed: {
-        stack.reset()
-    }
-
     function sendTransaction() {
         let responseStr = chatsModel.buyStickerPack(root.stickerPackId,
                                                     selectFromAccount.selectedAccount.address,
@@ -79,12 +75,6 @@ ModalPopup {
                 label: qsTrId("choose-account")
                 showBalanceForAssetSymbol: root.asset.symbol
                 minRequiredAssetBalance: root.packPrice
-                reset: function() {
-                    accounts = Qt.binding(function() { return walletModel.accounts })
-                    selectedAccount = Qt.binding(function() { return walletModel.currentAccount })
-                    showBalanceForAssetSymbol = Qt.binding(function() { return root.asset.symbol })
-                    minRequiredAssetBalance = Qt.binding(function() { return root.packPrice })
-                }
                 onSelectedAccountChanged: if (isValid) { gasSelector.estimateGas() }
             }
             RecipientSelector {
@@ -104,10 +94,6 @@ ModalPopup {
                 getGasEthValue: walletModel.getGasEthValue
                 getFiatValue: walletModel.getFiatValue
                 defaultCurrency: walletModel.defaultCurrency
-                reset: function() {
-                    slowestGasPrice = Qt.binding(function(){ return parseFloat(walletModel.safeLowGasPrice) })
-                    fastestGasPrice = Qt.binding(function(){ return parseFloat(walletModel.fastestGasPrice) })
-                }
                 property var estimateGas: Backpressure.debounce(gasSelector, 600, function() {
                     if (!(root.stickerPackId > -1 && selectFromAccount.selectedAccount && root.packPrice && parseFloat(root.packPrice) > 0)) {
                         selectedGasLimit = 325000
@@ -124,12 +110,6 @@ ModalPopup {
                 selectedAsset: root.asset
                 selectedAmount: parseFloat(packPrice)
                 selectedGasEthValue: gasSelector.selectedGasEthValue
-                reset: function() {
-                    selectedAccount = Qt.binding(function() { return selectFromAccount.selectedAccount })
-                    selectedAsset = Qt.binding(function() { return root.asset })
-                    selectedAmount = Qt.binding(function() { return parseFloat(packPrice) })
-                    selectedGasEthValue = Qt.binding(function() { return gasSelector.selectedGasEthValue })
-                }
             }
         }
         TransactionFormGroup {
@@ -159,19 +139,6 @@ ModalPopup {
                     const fiatValue = walletModel.getFiatValue(root.packPrice || 0, root.asset.symbol, currency)
                     return { "value": root.packPrice, "fiatValue": fiatValue }
                 }
-                reset: function() {
-                    fromAccount = Qt.binding(function() { return selectFromAccount.selectedAccount })
-                    toAccount = Qt.binding(function() { return selectRecipient.selectedRecipient })
-                    asset = Qt.binding(function() { return root.asset })
-                    amount = Qt.binding(function() { return { "value": root.packPrice, "fiatValue": walletModel.getFiatValue(root.packPrice, root.asset.symbol, currency) } })
-                    gas = Qt.binding(function() {
-                        return {
-                            "value": gasSelector.selectedGasEthValue,
-                            "symbol": "ETH",
-                            "fiatValue": gasSelector.selectedGasFiatValue
-                        }
-                    })
-                }
             }
         }
         TransactionFormGroup {
@@ -185,9 +152,6 @@ ModalPopup {
                 id: transactionSigner
                 width: stack.width
                 signingPhrase: walletModel.signingPhrase
-                reset: function() {
-                    signingPhrase = Qt.binding(function() { return walletModel.signingPhrase })
-                }
             }
         }
     }