mirror of
https://github.com/logos-blockchain/lez-programs.git
synced 2026-05-18 23:19:30 +00:00
chore(amm-ui): add layout and reorganize swap UI files
This commit is contained in:
Andrea Franz
parent
6eed55d7e4
commit
e831014344
@ -1,24 +1,11 @@
|
|||||||
import QtQuick 2.15
|
import QtQuick 2.15
|
||||||
import QtQuick.Controls 2.15
|
import QtQuick.Controls 2.15
|
||||||
import QtQuick.Layouts 1.15
|
import QtQuick.Layouts 1.15
|
||||||
import "components"
|
|
||||||
import "state"
|
|
||||||
import "pages"
|
import "pages"
|
||||||
|
|
||||||
Item {
|
Item {
|
||||||
id: root
|
id: root
|
||||||
|
|
||||||
property var tokenData: [
|
|
||||||
{ symbol: "TOK1", name: "Token 1", color: "#627eea", letter: "E", address: "0x0000000000000000000000000000000000000000", usdPrice: 2392.70, balance: 4.25, reserve: 850 },
|
|
||||||
{ symbol: "TOK2", name: "Token 2", color: "#2775ca", letter: "$", address: "0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48", usdPrice: 1.00, balance: 12480, reserve: 2400000 },
|
|
||||||
{ symbol: "TOK3", name: "Token 3", color: "#26a17b", letter: "T", address: "0xdac17f958d2ee523a2206206994597c13d831ec7", usdPrice: 1.00, balance: 320, reserve: 1800000 },
|
|
||||||
{ symbol: "TOK4", name: "Token 4", color: "#f7931a", letter: "B", address: "0x2260fac5e5542a773aa44fbcfedf7c193bc2c599", usdPrice: 63500, balance: 0.18, reserve: 42 },
|
|
||||||
{ symbol: "TOK5", name: "Token 5", color: "#627eea", letter: "E", address: "0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2", usdPrice: 2392.70, balance: 0, reserve: 600 },
|
|
||||||
{ symbol: "TOK6", name: "Token 6", color: "#9b59b6", letter: "L", address: "0x1337000000000000000000000000000000000cafe", usdPrice: 0.42, balance: 5400, reserve: 950000 }
|
|
||||||
]
|
|
||||||
|
|
||||||
// ── Navigation bar ────────────────────────────────────────────────────────
|
|
||||||
// Pinned to the top; self-contained styling, unaffected by view themes.
|
|
||||||
NavBar {
|
NavBar {
|
||||||
id: navbar
|
id: navbar
|
||||||
anchors.top: parent.top
|
anchors.top: parent.top
|
||||||
@ -27,165 +14,17 @@ Item {
|
|||||||
z: 100
|
z: 100
|
||||||
}
|
}
|
||||||
|
|
||||||
// ── Content area (below the nav bar) ──────────────────────────────────────
|
|
||||||
Item {
|
Item {
|
||||||
anchors.top: navbar.bottom
|
anchors.top: navbar.bottom
|
||||||
anchors.left: parent.left
|
anchors.left: parent.left
|
||||||
anchors.right: parent.right
|
anchors.right: parent.right
|
||||||
anchors.bottom: parent.bottom
|
anchors.bottom: parent.bottom
|
||||||
|
|
||||||
// ── Trade view ────────────────────────────────────────────────────────
|
SwapPage {
|
||||||
Item {
|
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
visible: navbar.currentIndex === 0
|
visible: navbar.currentIndex === 0
|
||||||
|
|
||||||
// Trade view theme — scoped here, invisible to NavBar and LP view.
|
|
||||||
QtObject {
|
|
||||||
id: theme
|
|
||||||
property bool isDark: true
|
|
||||||
property var colors: isDark ? dark : light
|
|
||||||
|
|
||||||
readonly property var light: ({
|
|
||||||
background: "#f4ede3",
|
|
||||||
cardBg: "#ffffff",
|
|
||||||
inputBg: "#efe7db",
|
|
||||||
panelBg: "#e7e1d8",
|
|
||||||
panelHoverBg: "#d9d0c2",
|
|
||||||
textPrimary: "#151515",
|
|
||||||
textSecondary: "#7d756e",
|
|
||||||
textPlaceholder: "#a9a098",
|
|
||||||
border: Qt.rgba(0,0,0,0.08),
|
|
||||||
borderStrong: Qt.rgba(0,0,0,0.10),
|
|
||||||
divider: Qt.rgba(0,0,0,0.06),
|
|
||||||
ctaBg: "#f26a21",
|
|
||||||
ctaHoverBg: "#d95c1e",
|
|
||||||
selection: "#f2d8c7",
|
|
||||||
noTokenCircle: "#a9a098"
|
|
||||||
})
|
|
||||||
|
|
||||||
readonly property var dark: ({
|
|
||||||
background: "#151515",
|
|
||||||
cardBg: "#1b1b1b",
|
|
||||||
inputBg: "#101010",
|
|
||||||
panelBg: "#181818",
|
|
||||||
panelHoverBg: "#202020",
|
|
||||||
textPrimary: "#e7e1d8",
|
|
||||||
textSecondary: "#a9a098",
|
|
||||||
textPlaceholder: "#8e8780",
|
|
||||||
border: Qt.rgba(1,1,1,0.08),
|
|
||||||
borderStrong: Qt.rgba(1,1,1,0.10),
|
|
||||||
divider: Qt.rgba(1,1,1,0.06),
|
|
||||||
ctaBg: "#f26a21",
|
|
||||||
ctaHoverBg: "#ff8a3d",
|
|
||||||
selection: "#211914",
|
|
||||||
noTokenCircle: "#343434"
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
Rectangle {
|
|
||||||
anchors.fill: parent
|
|
||||||
color: theme.colors.background
|
|
||||||
Behavior on color { ColorAnimation { duration: 300 } }
|
|
||||||
|
|
||||||
// Theme toggle
|
|
||||||
Rectangle {
|
|
||||||
anchors.top: parent.top
|
|
||||||
anchors.right: parent.right
|
|
||||||
anchors.margins: 16
|
|
||||||
width: 44; height: 24; radius: 12
|
|
||||||
color: theme.colors.panelBg
|
|
||||||
border.color: theme.colors.border
|
|
||||||
border.width: 1
|
|
||||||
Text {
|
|
||||||
anchors.centerIn: parent
|
|
||||||
text: theme.isDark ? "☀" : "☾"
|
|
||||||
font.pixelSize: 13
|
|
||||||
color: theme.colors.textSecondary
|
|
||||||
}
|
|
||||||
MouseArea {
|
|
||||||
anchors.fill: parent
|
|
||||||
cursorShape: Qt.PointingHandCursor
|
|
||||||
onClicked: theme.isDark = !theme.isDark
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
ColumnLayout {
|
|
||||||
anchors.centerIn: parent
|
|
||||||
spacing: 28
|
|
||||||
|
|
||||||
SwapCard {
|
|
||||||
id: swapCard
|
|
||||||
Layout.alignment: Qt.AlignHCenter
|
|
||||||
theme: theme
|
|
||||||
tokens: root.tokenData
|
|
||||||
width: Math.min(480, root.width - 32)
|
|
||||||
|
|
||||||
onRequestTokenSelect: function(side) {
|
|
||||||
tokenModal.targetSide = side
|
|
||||||
tokenModal.open()
|
|
||||||
}
|
|
||||||
|
|
||||||
onSubmitRequested: function(snapshot) {
|
|
||||||
swapConfirmationDialog.openWithSnapshot(snapshot)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
Text {
|
|
||||||
Layout.alignment: Qt.AlignHCenter
|
|
||||||
text: "Buy and sell crypto on <font color='" + theme.colors.textPrimary + "'>LEZ</font>."
|
|
||||||
textFormat: Text.RichText
|
|
||||||
color: theme.colors.textSecondary
|
|
||||||
font.pixelSize: 15
|
|
||||||
horizontalAlignment: Text.AlignHCenter
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
TokenSelectorModal {
|
|
||||||
id: tokenModal
|
|
||||||
anchors.fill: parent
|
|
||||||
z: 10
|
|
||||||
theme: theme
|
|
||||||
tokens: root.tokenData
|
|
||||||
|
|
||||||
property string targetSide: "sell"
|
|
||||||
|
|
||||||
onTokenSelected: function(tok) {
|
|
||||||
swapCard.setToken(targetSide, tok)
|
|
||||||
tokenModal.close()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
SuccessToast {
|
|
||||||
id: swapToast
|
|
||||||
|
|
||||||
width: Math.max(0, Math.min(380, parent.width - 32))
|
|
||||||
|
|
||||||
anchors {
|
|
||||||
bottom: parent.bottom
|
|
||||||
bottomMargin: 24
|
|
||||||
horizontalCenter: parent.horizontalCenter
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
SwapConfirmationDialog {
|
|
||||||
id: swapConfirmationDialog
|
|
||||||
anchors.fill: parent
|
|
||||||
theme: theme
|
|
||||||
|
|
||||||
onConfirmed: function(snapshot) {
|
|
||||||
swapCard.resetAmounts()
|
|
||||||
swapToast.show(qsTr("Swap submitted"),
|
|
||||||
qsTr("%1 %2 → %3 %4")
|
|
||||||
.arg(snapshot.sellAmount)
|
|
||||||
.arg(snapshot.sellToken)
|
|
||||||
.arg(snapshot.minReceived)
|
|
||||||
.arg(snapshot.buyToken))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// ── Liquidity view ────────────────────────────────────────────────────
|
|
||||||
LiquidityPage {
|
LiquidityPage {
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
visible: navbar.currentIndex === 1
|
visible: navbar.currentIndex === 1
|
||||||
|
|||||||
@ -1,8 +1,8 @@
|
|||||||
import QtQuick 2.15
|
import QtQuick 2.15
|
||||||
import QtQuick.Controls 2.15
|
import QtQuick.Controls 2.15
|
||||||
import QtQuick.Layouts 1.15
|
import QtQuick.Layouts 1.15
|
||||||
import "components"
|
import ".."
|
||||||
import "state"
|
import "../../state"
|
||||||
|
|
||||||
Rectangle {
|
Rectangle {
|
||||||
id: root
|
id: root
|
||||||
163
amm-ui/qml/pages/SwapPage.qml
Normal file
163
amm-ui/qml/pages/SwapPage.qml
Normal file
@ -0,0 +1,163 @@
|
|||||||
|
import QtQuick 2.15
|
||||||
|
import QtQuick.Controls 2.15
|
||||||
|
import QtQuick.Layouts 1.15
|
||||||
|
import "../components"
|
||||||
|
import "../components/swap"
|
||||||
|
import "../state"
|
||||||
|
|
||||||
|
Item {
|
||||||
|
id: root
|
||||||
|
|
||||||
|
property var tokens: [
|
||||||
|
{ symbol: "TOK1", name: "Token 1", color: "#627eea", letter: "E", address: "0x0000000000000000000000000000000000000000", usdPrice: 2392.70, balance: 4.25, reserve: 850 },
|
||||||
|
{ symbol: "TOK2", name: "Token 2", color: "#2775ca", letter: "$", address: "0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48", usdPrice: 1.00, balance: 12480, reserve: 2400000 },
|
||||||
|
{ symbol: "TOK3", name: "Token 3", color: "#26a17b", letter: "T", address: "0xdac17f958d2ee523a2206206994597c13d831ec7", usdPrice: 1.00, balance: 320, reserve: 1800000 },
|
||||||
|
{ symbol: "TOK4", name: "Token 4", color: "#f7931a", letter: "B", address: "0x2260fac5e5542a773aa44fbcfedf7c193bc2c599", usdPrice: 63500, balance: 0.18, reserve: 42 },
|
||||||
|
{ symbol: "TOK5", name: "Token 5", color: "#627eea", letter: "E", address: "0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2", usdPrice: 2392.70, balance: 0, reserve: 600 },
|
||||||
|
{ symbol: "TOK6", name: "Token 6", color: "#9b59b6", letter: "L", address: "0x1337000000000000000000000000000000000cafe", usdPrice: 0.42, balance: 5400, reserve: 950000 }
|
||||||
|
]
|
||||||
|
|
||||||
|
QtObject {
|
||||||
|
id: theme
|
||||||
|
property bool isDark: true
|
||||||
|
property var colors: isDark ? dark : light
|
||||||
|
|
||||||
|
readonly property var light: ({
|
||||||
|
background: "#f4ede3",
|
||||||
|
cardBg: "#ffffff",
|
||||||
|
inputBg: "#efe7db",
|
||||||
|
panelBg: "#e7e1d8",
|
||||||
|
panelHoverBg: "#d9d0c2",
|
||||||
|
textPrimary: "#151515",
|
||||||
|
textSecondary: "#7d756e",
|
||||||
|
textPlaceholder: "#a9a098",
|
||||||
|
border: Qt.rgba(0,0,0,0.08),
|
||||||
|
borderStrong: Qt.rgba(0,0,0,0.10),
|
||||||
|
divider: Qt.rgba(0,0,0,0.06),
|
||||||
|
ctaBg: "#f26a21",
|
||||||
|
ctaHoverBg: "#d95c1e",
|
||||||
|
selection: "#f2d8c7",
|
||||||
|
noTokenCircle: "#a9a098"
|
||||||
|
})
|
||||||
|
|
||||||
|
readonly property var dark: ({
|
||||||
|
background: "#151515",
|
||||||
|
cardBg: "#1b1b1b",
|
||||||
|
inputBg: "#101010",
|
||||||
|
panelBg: "#181818",
|
||||||
|
panelHoverBg: "#202020",
|
||||||
|
textPrimary: "#e7e1d8",
|
||||||
|
textSecondary: "#a9a098",
|
||||||
|
textPlaceholder: "#8e8780",
|
||||||
|
border: Qt.rgba(1,1,1,0.08),
|
||||||
|
borderStrong: Qt.rgba(1,1,1,0.10),
|
||||||
|
divider: Qt.rgba(1,1,1,0.06),
|
||||||
|
ctaBg: "#f26a21",
|
||||||
|
ctaHoverBg: "#ff8a3d",
|
||||||
|
selection: "#211914",
|
||||||
|
noTokenCircle: "#343434"
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
Rectangle {
|
||||||
|
anchors.fill: parent
|
||||||
|
color: theme.colors.background
|
||||||
|
Behavior on color { ColorAnimation { duration: 300 } }
|
||||||
|
|
||||||
|
// Theme toggle
|
||||||
|
Rectangle {
|
||||||
|
anchors.top: parent.top
|
||||||
|
anchors.right: parent.right
|
||||||
|
anchors.margins: 16
|
||||||
|
width: 44; height: 24; radius: 12
|
||||||
|
color: theme.colors.panelBg
|
||||||
|
border.color: theme.colors.border
|
||||||
|
border.width: 1
|
||||||
|
Text {
|
||||||
|
anchors.centerIn: parent
|
||||||
|
text: theme.isDark ? "☀" : "☾"
|
||||||
|
font.pixelSize: 13
|
||||||
|
color: theme.colors.textSecondary
|
||||||
|
}
|
||||||
|
MouseArea {
|
||||||
|
anchors.fill: parent
|
||||||
|
cursorShape: Qt.PointingHandCursor
|
||||||
|
onClicked: theme.isDark = !theme.isDark
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ColumnLayout {
|
||||||
|
anchors.centerIn: parent
|
||||||
|
spacing: 28
|
||||||
|
|
||||||
|
SwapCard {
|
||||||
|
id: swapCard
|
||||||
|
Layout.alignment: Qt.AlignHCenter
|
||||||
|
theme: theme
|
||||||
|
tokens: root.tokens
|
||||||
|
width: Math.min(480, root.width - 32)
|
||||||
|
|
||||||
|
onRequestTokenSelect: function(side) {
|
||||||
|
tokenModal.targetSide = side
|
||||||
|
tokenModal.open()
|
||||||
|
}
|
||||||
|
|
||||||
|
onSubmitRequested: function(snapshot) {
|
||||||
|
swapConfirmationDialog.openWithSnapshot(snapshot)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Text {
|
||||||
|
Layout.alignment: Qt.AlignHCenter
|
||||||
|
text: "Buy and sell crypto on <font color='" + theme.colors.textPrimary + "'>LEZ</font>."
|
||||||
|
textFormat: Text.RichText
|
||||||
|
color: theme.colors.textSecondary
|
||||||
|
font.pixelSize: 15
|
||||||
|
horizontalAlignment: Text.AlignHCenter
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
TokenSelectorModal {
|
||||||
|
id: tokenModal
|
||||||
|
anchors.fill: parent
|
||||||
|
z: 10
|
||||||
|
theme: theme
|
||||||
|
tokens: root.tokens
|
||||||
|
|
||||||
|
property string targetSide: "sell"
|
||||||
|
|
||||||
|
onTokenSelected: function(tok) {
|
||||||
|
swapCard.setToken(targetSide, tok)
|
||||||
|
tokenModal.close()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
SuccessToast {
|
||||||
|
id: swapToast
|
||||||
|
|
||||||
|
width: Math.max(0, Math.min(380, parent.width - 32))
|
||||||
|
|
||||||
|
anchors {
|
||||||
|
bottom: parent.bottom
|
||||||
|
bottomMargin: 24
|
||||||
|
horizontalCenter: parent.horizontalCenter
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
SwapConfirmationDialog {
|
||||||
|
id: swapConfirmationDialog
|
||||||
|
anchors.fill: parent
|
||||||
|
theme: theme
|
||||||
|
|
||||||
|
onConfirmed: function(snapshot) {
|
||||||
|
swapCard.resetAmounts()
|
||||||
|
swapToast.show(qsTr("Swap submitted"),
|
||||||
|
qsTr("%1 %2 → %3 %4")
|
||||||
|
.arg(snapshot.sellAmount)
|
||||||
|
.arg(snapshot.sellToken)
|
||||||
|
.arg(snapshot.minReceived)
|
||||||
|
.arg(snapshot.buyToken))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user