Merge pull request KomodoPlatform#1788 from KomodoPlatform/show_protocol

show protocol in order form
cipig · Jun 14, 2022 · ef9e039 · ef9e039
2 parents 6649f29 + ef77407
commit ef9e039
Show file tree

Hide file tree

Showing 4 changed files with 147 additions and 40 deletions.
diff --git a/atomic_defi_design/Dex/Constants/General.qml b/atomic_defi_design/Dex/Constants/General.qml
@@ -102,6 +102,39 @@ QtObject {
         }
     }
 
+
+    function getProtocolText(ticker) {
+        if(ticker === "" || ticker === "All" || ticker===undefined) {
+            return ""
+        } else {
+            let token_platform = coinPlatform(ticker)
+            switch(token_platform) {
+                case "BNB":
+                    return "Binance Smart Chain (BEP20 token)"
+                case "FTM":
+                    return "Fantom (FTM20 token)"
+                case "ONE":
+                    return "Harmony (HRC20 token)"
+                case "ETH":
+                    return "Ethereum (ERC20 token)"
+                case "KCS":
+                    return "KuCoin (KRC20 token)"
+                case "MATIC":
+                    return "Polygon (PLG20 token)"
+                case "AVAX":
+                    return "Avalanche (AVX20 token)"
+                case "HT":
+                    return "Heco Chain (HCO20 token)"
+                case "MOVR":
+                    return "Moonriver (MVR20 token)"
+                case "QTUM":
+                    return "QTUM (QRC20 token)"
+                default:
+                    return ticker + " (" + token_platform + ")"
+            }
+        }
+    }
+
     function isIDO(ticker) {
         let IDO_chains = []
         return IDO_chains.includes(ticker)

diff --git a/atomic_defi_design/Dex/Exchange/ProView/PlaceOrderForm/Main.qml b/atomic_defi_design/Dex/Exchange/ProView/PlaceOrderForm/Main.qml
@@ -12,25 +12,76 @@ import AtomicDEX.MarketMode 1.0
 Widget
 {
     title: qsTr("Place Order")
+    property string protocolIcon: General.platformIcon(General.coinPlatform(left_ticker))
 
-    margins: 20
+    margins: 15
     collapsable: false
 
+
+    // Order selected indicator
+    Item
+    {
+        Layout.topMargin: 5
+        Layout.alignment: Qt.AlignHCenter
+        Layout.preferredWidth: parent.width
+        Layout.preferredHeight: 40
+        visible: API.app.trading_pg.preffered_order.price !== undefined
+
+        RowLayout
+        {
+            id: orderSelection
+            anchors.fill: parent
+            anchors.verticalCenter: parent.verticalCenter
+
+            DefaultText
+            {
+                Layout.leftMargin: 15
+                color: Dex.CurrentTheme.noColor
+                text: qsTr("Order Selected")
+            }
+
+            Item { Layout.fillWidth: true }
+
+            Qaterial.FlatButton
+            {
+                Layout.preferredHeight: parent.height
+                Layout.preferredWidth: 30
+                Layout.rightMargin: 5
+                foregroundColor: Dex.CurrentTheme.noColor
+                onClicked: API.app.trading_pg.reset_order()
+
+                Qaterial.ColorIcon
+                {
+                    anchors.centerIn: parent
+                    iconSize: 16
+                    color: Dex.CurrentTheme.noColor
+                    source: Qaterial.Icons.close
+                }
+            }
+        }
+
+        Rectangle
+        {
+            anchors.fill: parent
+            radius: 8
+            color: 'transparent'
+            border.color: Dex.CurrentTheme.noColor
+        }
+    }
+
     // Market mode selector
     RowLayout
     {
-        Layout.topMargin: 10
+        Layout.topMargin: 5
         Layout.alignment: Qt.AlignHCenter
-        Layout.minimumHeight: 40
-        Layout.maximumHeight: 48
-        Layout.fillWidth: true
+        Layout.preferredWidth: parent.width
         Layout.fillHeight: true
 
         MarketModeSelector
         {
             Layout.alignment: Qt.AlignLeft
             Layout.preferredWidth: (parent.width / 100) * 46
-            Layout.fillHeight: true
+            Layout.preferredHeight: 50
             marketMode: MarketMode.Buy
             ticker: atomic_qt_utilities.retrieve_main_ticker(left_ticker)
         }
@@ -41,47 +92,68 @@ Widget
         {
             Layout.alignment: Qt.AlignRight
             Layout.preferredWidth: (parent.width / 100) * 46
-            Layout.fillHeight: true
+            Layout.preferredHeight: 50
             ticker: atomic_qt_utilities.retrieve_main_ticker(left_ticker)
         }
     }
 
-    // Order selected indicator
-    Rectangle
+    HorizontalLine
     {
-        visible: API.app.trading_pg.preffered_order.price !== undefined
+        Layout.alignment: Qt.AlignHCenter
         Layout.preferredWidth: parent.width
-        Layout.preferredHeight: 40
+        visible: protocolIcon != ""
+        color: Dex.CurrentTheme.backgroundColorDeep
+    }
+
+    ColumnLayout
+    {
+        spacing: 3
         Layout.alignment: Qt.AlignHCenter
-        radius: 8
-        color: 'transparent'
-        border.color: Dex.CurrentTheme.noColor
+        Layout.preferredWidth: parent.width
+        visible: protocolIcon != ""
 
-        DefaultText
+        DexLabel
         {
-            anchors.verticalCenter: parent.verticalCenter
-            leftPadding: 15
-            color: Dex.CurrentTheme.noColor
-            text: qsTr("Order Selected")
+            id: protocolTitle
+            Layout.preferredWidth: parent.width
+            text_value: "Protocol:"
+            font.pixelSize: Style.textSizeSmall1
+            horizontalAlignment: Text.AlignHCenter
+            color: Style.colorText2
         }
 
-        Qaterial.FlatButton
+        RowLayout
         {
-            anchors.right: parent.right
-            anchors.rightMargin: 15
-            anchors.verticalCenter: parent.verticalCenter
-            foregroundColor: Dex.CurrentTheme.noColor
-            icon.source: Qaterial.Icons.close
-            backgroundImplicitWidth: 40
-            backgroundImplicitHeight: 30
+            id: protocol
+            Layout.alignment: Qt.AlignHCenter
+            Layout.preferredWidth: parent.width
 
-            onClicked: API.app.trading_pg.reset_order()
+            Item { Layout.fillWidth: true }
+
+            DefaultImage
+            {
+                id: protocolImg
+                source: protocolIcon
+                Layout.preferredHeight: 16
+                Layout.preferredWidth: Layout.preferredHeight
+            }
+
+            DexLabel
+            {
+                id: protocolText
+                text_value: General.getProtocolText(left_ticker)
+                wrapMode: DexLabel.NoWrap
+                font.pixelSize: Style.textSizeSmall1
+                color: Style.colorText2
+            }
+
+            Item { Layout.fillWidth: true }
         }
     }
 
     OrderForm
     {
-        id: form_base
+        id: formBase
         Layout.preferredWidth: parent.width
         Layout.alignment: Qt.AlignHCenter
     }
@@ -97,11 +169,11 @@ Widget
         Layout.preferredHeight: 40
         Layout.preferredWidth: parent.width - 20
         Layout.alignment: Qt.AlignHCenter
-        radius: 18
 
+        radius: 18
         text: qsTr("START SWAP")
         font.weight: Font.Medium
-        enabled: form_base.can_submit_trade
+        enabled: formBase.can_submit_trade
         onClicked: confirm_trade_modal.open()
     }
 

diff --git a/atomic_defi_design/Dex/Exchange/ProView/PlaceOrderForm/OrderForm.qml b/atomic_defi_design/Dex/Exchange/ProView/PlaceOrderForm/OrderForm.qml
@@ -63,7 +63,7 @@ ColumnLayout
             id: input_price
 
             left_text: qsTr("Price")
-            right_text: atomic_qt_utilities.retrieve_main_ticker(right_ticker)
+            right_text: right_ticker
             enabled: !(API.app.trading_pg.preffered_order.price !== undefined)
             text: backend_price
             width: parent.width
@@ -102,7 +102,7 @@ ColumnLayout
             height: 41
             radius: 18
             left_text: qsTr("Volume")
-            right_text: atomic_qt_utilities.retrieve_main_ticker(left_ticker)
+            right_text: left_ticker
             placeholderText: sell_mode ? qsTr("Amount to sell") : qsTr("Amount to receive")
             text: API.app.trading_pg.volume
             onTextChanged: setVolume(text)

diff --git a/atomic_defi_design/Dex/Exchange/ProView/PlaceOrderForm/TotalView.qml b/atomic_defi_design/Dex/Exchange/ProView/PlaceOrderForm/TotalView.qml
@@ -21,6 +21,7 @@ ColumnLayout
 
         DefaultText
         {
+            Layout.fillWidth: true
             Layout.alignment: Qt.AlignLeft
             color: Dex.CurrentTheme.foregroundColor3
             text: "Total " + API.app.settings_pg.current_fiat + " " + General.cex_icon
@@ -30,11 +31,10 @@ ColumnLayout
             CexInfoTrigger {}
         }
 
-        Item { Layout.fillWidth: true }
-
         DefaultText
         {
-            Layout.alignment: Qt.AlignRight
+            Layout.fillWidth: true
+            horizontalAlignment: Text.AlignRight
             font.weight: Font.DemiBold
             font.pixelSize: 16
             font.family: 'lato'
@@ -55,19 +55,21 @@ ColumnLayout
         Layout.preferredWidth: parent.width
         Layout.preferredHeight: 30
 
-        DexLabel
+        DefaultText
         {
+            Layout.fillWidth: true
             color: Dex.CurrentTheme.foregroundColor3
-            text:  "Total " + atomic_qt_utilities.retrieve_main_ticker(right_ticker)
+            Layout.preferredWidth: parent.width * 0.3
+            text:  "Total " + right_ticker
             font.pixelSize:  14
             opacity: .6
             font.weight: Font.Normal
         }
 
-        Item { Layout.fillWidth: true }
-
         DefaultText
         {
+            Layout.fillWidth: true
+            horizontalAlignment: Text.AlignRight
             font.weight: Font.DemiBold
             font.pixelSize: 16
             font.family: 'lato'