feat:[UI - Swap] Create swap approve dialog

- create a new UI component
- add it to StoryBook
- add QML tests
- integration will be done as part of
#15443

Fixes #15442

storybook/pages/SwapApproveCapModalPage.qml

@@ -0,0 +1,181 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+
+import StatusQ 0.1
+
+import Storybook 1.0
+import Models 1.0
+
+import AppLayouts.Wallet 1.0
+import AppLayouts.Wallet.popups.swap 1.0
+
+import utils 1.0
+
+SplitView {
+    id: root
+
+    Logs { id: logs }
+
+    orientation: Qt.Horizontal
+
+    property var dialog
+
+    function createAndOpenDialog() {
+        dialog = dlgComponent.createObject(popupBg)
+        dialog.open()
+    }
+
+    Component.onCompleted: createAndOpenDialog()
+
+    QtObject {
+        id: priv
+
+        readonly property var accountsModel: WalletAccountsModel {}
+        readonly property var selectedAccount: selectedAccountEntry.item
+
+        readonly property var networksModel: NetworksModel.flatNetworks
+        readonly property var selectedNetwork: selectedNetworkEntry.item
+    }
+
+    ModelEntry {
+        id: selectedAccountEntry
+        sourceModel: priv.accountsModel
+        key: "address"
+        value: ctrlAccount.currentValue
+    }
+
+    ModelEntry {
+        id: selectedNetworkEntry
+        sourceModel: priv.networksModel
+        key: "chainId"
+        value: ctrlNetwork.currentValue
+    }
+
+    Item {
+        SplitView.fillWidth: true
+        SplitView.fillHeight: true
+
+        PopupBackground {
+            id: popupBg
+            anchors.fill: parent
+
+            Button {
+                anchors.centerIn: parent
+                text: "Reopen"
+
+                onClicked: createAndOpenDialog()
+            }
+
+            Component {
+                id: dlgComponent
+                SwapApproveCapModal {
+                    anchors.centerIn: parent
+                    destroyOnClose: true
+                    modal: false
+                    closePolicy: Popup.NoAutoClose
+
+                    fromTokenSymbol: ctrlFromSymbol.text
+                    fromTokenAmount: ctrlFromAmount.text
+                    fromTokenContractAddress: "0x6B175474E89094C44Da98b954EedeAC495271d0F"
+
+                    accountName: priv.selectedAccount.name
+                    accountAddress: priv.selectedAccount.address
+                    accountEmoji: priv.selectedAccount.emoji
+                    accountColor: Utils.getColorForId(priv.selectedAccount.colorId)
+                    accountBalanceAmount: "120.55489"
+
+                    networkShortName: priv.selectedNetwork.shortName
+                    networkName: priv.selectedNetwork.chainName
+                    networkIconPath: Style.svg(priv.selectedNetwork.iconUrl)
+                    networkBlockExplorerUrl: priv.selectedNetwork.blockExplorerUrl
+
+                    currentCurrency: "EUR"
+                    fiatFees: "1.54"
+                    cryptoFees: "0.001"
+                    estimatedTime: ctrlEstimatedTime.currentValue
+
+                    loginType: ctrlLoginType.currentIndex
+
+                    feesLoading: ctrlLoading.checked
+                }
+            }
+        }
+    }
+
+    LogsAndControlsPanel {
+        SplitView.minimumWidth: 250
+        SplitView.preferredWidth: 250
+
+        logsView.logText: logs.logText
+
+        ColumnLayout {
+            Layout.fillWidth: true
+            TextField {
+                Layout.fillWidth: true
+                id: ctrlFromSymbol
+                text: "DAI"
+                placeholderText: "From symbol"
+            }
+            TextField {
+                Layout.fillWidth: true
+                id: ctrlFromAmount
+                text: "115.478"
+                placeholderText: "From amount"
+            }
+
+            Text {
+                text: "Selected Account"
+            }
+            ComboBox {
+                id: ctrlAccount
+                textRole: "name"
+                valueRole: "address"
+                model: priv.accountsModel
+                currentIndex: 0
+            }
+
+            Text {
+                text: "Selected Network"
+            }
+            ComboBox {
+                id: ctrlNetwork
+                textRole: "chainName"
+                valueRole: "chainId"
+                model: priv.networksModel
+                currentIndex: 2
+            }
+
+            Switch {
+                id: ctrlLoading
+                text: "Fees loading"
+            }
+
+            Text {
+                text: "Login Type"
+            }
+            ComboBox {
+                id: ctrlLoginType
+                model: Constants.authenticationIconByType
+            }
+
+            Text {
+                text: "Estimated time"
+            }
+            ComboBox {
+                id: ctrlEstimatedTime
+                model: [Constants.TransactionEstimatedTime.Unknown,
+                    Constants.TransactionEstimatedTime.LessThanOneMin,
+                    Constants.TransactionEstimatedTime.LessThanThreeMins,
+                    Constants.TransactionEstimatedTime.LessThanFiveMins,
+                    Constants.TransactionEstimatedTime.MoreThanFiveMins
+                ]
+                displayText: WalletUtils.getLabelForEstimatedTxTime(currentValue)
+            }
+        }
+    }
+}
+
+// category: Popups
+
+// https://www.figma.com/design/TS0eQX9dAZXqZtELiwKIoK/Swap---Milestone-1?node-id=3517-435657&t=sRX8mAj4irR1bOuT-0