feat: [UI - Swap] Create swap switch button

- create a custom circle button component for the Swap popup, with the
needed click event and a border area that can be overlaped with the
background as it looks in the design

Fixes #14782

storybook/pages/SwapExchangeButtonPage.qml

@@ -0,0 +1,37 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+
+import StatusQ.Core 0.1
+
+import AppLayouts.Wallet.controls 1.0
+
+import Storybook 1.0
+
+SplitView {
+    id: root
+
+    Logs { id: logs }
+
+    orientation: Qt.Vertical
+
+    Item {
+        SplitView.fillWidth: true
+        SplitView.fillHeight: true
+        SwapExchangeButton {
+            id: button
+            anchors.centerIn: parent
+            onClicked: logs.logEvent("onClicked", [], arguments)
+        }
+    }
+
+    LogsAndControlsPanel {
+        id: logsAndControlsPanel
+
+        SplitView.minimumHeight: 100
+        SplitView.preferredHeight: 200
+
+        logsView.logText: logs.logText
+    }
+}
+
+// category: Controls

ui/app/AppLayouts/Wallet/controls/SwapExchangeButton.qml

@@ -0,0 +1,21 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+
+import StatusQ.Controls 0.1
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+StatusButton {
+    implicitWidth: 44
+    implicitHeight: 44
+
+    icon.name: hovered ? "arrow-up" : "arrow-down"
+    icon.color: Theme.palette.baseColor1
+
+    isRoundIcon: true
+    radius: height/2
+    normalColor: Theme.palette.indirectColor3
+    hoverColor: Theme.palette.directColor8
+    borderWidth: 1
+    borderColor: hovered ? Theme.palette.directColor7 : Theme.palette.directColor8
+}

ui/app/AppLayouts/Wallet/controls/qmldir

@@ -15,3 +15,4 @@ StatusNetworkListItemTag 1.0 StatusNetworkListItemTag.qml
 CollectibleBalanceTag 1.0 CollectibleBalanceTag.qml
 ConnectedDappsButton 1.0 ConnectedDappsButton.qml
 CollectibleLinksTags 1.0 CollectibleLinksTags.qml
+SwapExchangeButton 1.0 SwapExchangeButton.qml