mirror of
https://github.com/logos-blockchain/lez-programs.git
synced 2026-05-18 23:19:30 +00:00
chore(amm-ui): add basic swap UI for Token Pair Selector & Swap Direction
closes #55
This commit is contained in:
Andrea Franz
parent
29d949d75a
commit
ee2ecfb80a
@ -1,30 +0,0 @@
|
||||
import QtQuick 2.15
|
||||
import QtQuick.Controls 2.15
|
||||
import QtQuick.Layouts 1.15
|
||||
|
||||
Item {
|
||||
width: 400
|
||||
height: 300
|
||||
|
||||
ColumnLayout {
|
||||
anchors.centerIn: parent
|
||||
spacing: 12
|
||||
|
||||
Text {
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
text: "Hello from ui_qml_example!"
|
||||
font.pixelSize: 18
|
||||
}
|
||||
|
||||
Button {
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
text: "Call Core Module"
|
||||
onClicked: {
|
||||
// The logos bridge is injected by the host application.
|
||||
// Uncomment to call a backend module:
|
||||
// var result = logos.callModule("my_module", "myMethod", ["arg"])
|
||||
console.log("Button clicked")
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -4,7 +4,7 @@
|
||||
"type": "ui_qml",
|
||||
"category": "amm",
|
||||
"description": "UI module for the AMM program",
|
||||
"view": "Main.qml",
|
||||
"view": "qml/Main.qml",
|
||||
"icon": "icons/amm.png",
|
||||
"dependencies": [],
|
||||
|
||||
|
||||
152
amm-ui/qml/Main.qml
Normal file
152
amm-ui/qml/Main.qml
Normal file
@ -0,0 +1,152 @@
|
||||
import QtQuick 2.15
|
||||
import QtQuick.Controls 2.15
|
||||
import QtQuick.Layouts 1.15
|
||||
|
||||
Item {
|
||||
id: root
|
||||
|
||||
property var tokenData: [
|
||||
{ symbol: "TOK1", name: "Token 1", color: "#627eea", letter: "E", address: "0x0000000000000000000000000000000000000000", usdPrice: 2392.70 },
|
||||
{ symbol: "TOK2", name: "Token 2", color: "#2775ca", letter: "$", address: "0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48", usdPrice: 1.00 },
|
||||
{ symbol: "TOK3", name: "Token 3", color: "#26a17b", letter: "T", address: "0xdac17f958d2ee523a2206206994597c13d831ec7", usdPrice: 1.00 },
|
||||
{ symbol: "TOK4", name: "Token 4", color: "#f7931a", letter: "B", address: "0x2260fac5e5542a773aa44fbcfedf7c193bc2c599", usdPrice: 63500 },
|
||||
{ symbol: "TOK5", name: "Token 5", color: "#627eea", letter: "E", address: "0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2", usdPrice: 2392.70 },
|
||||
{ symbol: "TOK6", name: "Token 6", color: "#9b59b6", letter: "L", address: "0x1337000000000000000000000000000000000cafe", usdPrice: 0.42 }
|
||||
]
|
||||
|
||||
// ── Theme ─────────────────────────────────────────────────────────────────
|
||||
QtObject {
|
||||
id: theme
|
||||
property bool isDark: false
|
||||
property var colors: isDark ? dark : light
|
||||
|
||||
readonly property var light: ({
|
||||
background: "#f7f7f5",
|
||||
cardBg: "#ffffff",
|
||||
inputBg: "#f0f0ee",
|
||||
panelBg: "#e8e8e4",
|
||||
panelHoverBg: "#ddddd8",
|
||||
textPrimary: "#111111",
|
||||
textSecondary: "#777770",
|
||||
textPlaceholder: "#bbbbb5",
|
||||
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: "#111111",
|
||||
ctaHoverBg: "#2a2a28",
|
||||
selection: "#b5c4a5",
|
||||
noTokenCircle: "#c8c8c4",
|
||||
orb1: "#7a8c6a",
|
||||
orb2: "#b5c4a5",
|
||||
orb3: "#7a8c6a",
|
||||
orb4: "#c8d4b8"
|
||||
})
|
||||
|
||||
readonly property var dark: ({
|
||||
background: "#0d0d12",
|
||||
cardBg: "#1a1a22",
|
||||
inputBg: "#222230",
|
||||
panelBg: "#2a2a38",
|
||||
panelHoverBg: "#363650",
|
||||
textPrimary: "#ffffff",
|
||||
textSecondary: "#888899",
|
||||
textPlaceholder: "#444455",
|
||||
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: "#2d1530",
|
||||
ctaHoverBg: "#3d1f40",
|
||||
selection: "#4c1d4b",
|
||||
noTokenCircle: "#444455",
|
||||
orb1: "#627eea",
|
||||
orb2: "#9b59b6",
|
||||
orb3: "#fc72ff",
|
||||
orb4: "#26a17b"
|
||||
})
|
||||
}
|
||||
|
||||
// ── Root background ───────────────────────────────────────────────────────
|
||||
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
|
||||
}
|
||||
}
|
||||
|
||||
// Decorative orbs
|
||||
Rectangle { x: -180; y: -120; width: 560; height: 560; radius: 280; color: theme.colors.orb1; opacity: 0.07 }
|
||||
Rectangle { x: parent.width - 280; y: parent.height - 320; width: 480; height: 480; radius: 240; color: theme.colors.orb2; opacity: 0.09 }
|
||||
Rectangle { x: parent.width - 200; y: -80; width: 380; height: 380; radius: 190; color: theme.colors.orb3; opacity: 0.05 }
|
||||
Rectangle { x: 40; y: parent.height - 260; width: 320; height: 320; radius: 160; color: theme.colors.orb4; opacity: 0.08 }
|
||||
|
||||
ColumnLayout {
|
||||
anchors.centerIn: parent
|
||||
spacing: 28
|
||||
|
||||
Text {
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
text: "Logos AMM"
|
||||
color: theme.colors.textPrimary
|
||||
font.pixelSize: 48
|
||||
font.weight: Font.Bold
|
||||
}
|
||||
|
||||
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()
|
||||
}
|
||||
}
|
||||
|
||||
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()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
153
amm-ui/qml/SwapCard.qml
Normal file
153
amm-ui/qml/SwapCard.qml
Normal file
@ -0,0 +1,153 @@
|
||||
import QtQuick 2.15
|
||||
import QtQuick.Controls 2.15
|
||||
import QtQuick.Layouts 1.15
|
||||
|
||||
Rectangle {
|
||||
id: root
|
||||
|
||||
property var theme
|
||||
property var tokens: []
|
||||
property var sellToken: null
|
||||
property var buyToken: null
|
||||
property string sellAmount: ""
|
||||
|
||||
signal requestTokenSelect(string side)
|
||||
|
||||
function setToken(side, token) {
|
||||
if (side === "sell") root.sellToken = token
|
||||
else root.buyToken = token
|
||||
}
|
||||
|
||||
readonly property string buyAmount: {
|
||||
if (!sellToken || !buyToken || sellAmount === "") return ""
|
||||
var amt = parseFloat(sellAmount)
|
||||
if (isNaN(amt) || amt <= 0) return ""
|
||||
var result = amt * sellToken.usdPrice / buyToken.usdPrice
|
||||
return result >= 1 ? result.toFixed(2) : result.toFixed(6)
|
||||
}
|
||||
|
||||
readonly property string sellUsd: {
|
||||
if (!sellToken || sellAmount === "") return ""
|
||||
var amt = parseFloat(sellAmount)
|
||||
if (isNaN(amt)) return ""
|
||||
var val = amt * sellToken.usdPrice
|
||||
return "~$" + val.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",")
|
||||
}
|
||||
|
||||
readonly property string buyUsd: {
|
||||
if (!buyToken || buyAmount === "") return ""
|
||||
var amt = parseFloat(buyAmount)
|
||||
if (isNaN(amt)) return ""
|
||||
var val = amt * buyToken.usdPrice
|
||||
return "~$" + val.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",")
|
||||
}
|
||||
|
||||
radius: 24
|
||||
color: theme.colors.cardBg
|
||||
border.color: theme.colors.border
|
||||
border.width: 1
|
||||
implicitWidth: 480
|
||||
implicitHeight: cardLayout.implicitHeight + 16
|
||||
|
||||
Behavior on color { ColorAnimation { duration: 300 } }
|
||||
|
||||
ColumnLayout {
|
||||
id: cardLayout
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.top: parent.top
|
||||
anchors.margins: 8
|
||||
spacing: 0
|
||||
|
||||
TokenInput {
|
||||
Layout.fillWidth: true
|
||||
theme: root.theme
|
||||
label: "Sell"
|
||||
amount: root.sellAmount
|
||||
usdValue: root.sellUsd
|
||||
token: root.sellToken
|
||||
readOnly: false
|
||||
onInputEdited: function(v) { root.sellAmount = v }
|
||||
onTokenClicked: root.requestTokenSelect("sell")
|
||||
}
|
||||
|
||||
Item {
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: 40
|
||||
|
||||
Rectangle {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
height: 1
|
||||
color: theme.colors.divider
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
anchors.centerIn: parent
|
||||
width: 36; height: 36; radius: 18
|
||||
color: swapHover.containsMouse ? theme.colors.panelHoverBg : theme.colors.panelBg
|
||||
border.color: theme.colors.borderStrong
|
||||
border.width: 1
|
||||
Behavior on color { ColorAnimation { duration: 120 } }
|
||||
|
||||
Text {
|
||||
anchors.centerIn: parent
|
||||
text: "↓"
|
||||
color: theme.colors.textPrimary
|
||||
font.pixelSize: 16
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
id: swapHover
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onClicked: {
|
||||
var tmp = root.sellToken
|
||||
root.sellToken = root.buyToken
|
||||
root.buyToken = tmp
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
TokenInput {
|
||||
Layout.fillWidth: true
|
||||
theme: root.theme
|
||||
label: "Buy"
|
||||
amount: root.buyAmount
|
||||
usdValue: root.buyUsd
|
||||
token: root.buyToken
|
||||
readOnly: true
|
||||
onTokenClicked: root.requestTokenSelect("buy")
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 8
|
||||
Layout.bottomMargin: 8
|
||||
Layout.leftMargin: 8
|
||||
Layout.rightMargin: 8
|
||||
Layout.preferredHeight: 56
|
||||
radius: 20
|
||||
color: ctaHover.containsMouse ? theme.colors.ctaHoverBg : theme.colors.ctaBg
|
||||
Behavior on color { ColorAnimation { duration: 120 } }
|
||||
|
||||
Text {
|
||||
anchors.centerIn: parent
|
||||
text: "Swap"
|
||||
color: "#ffffff"
|
||||
font.pixelSize: 17
|
||||
font.weight: Font.Medium
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
id: ctaHover
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
133
amm-ui/qml/TokenInput.qml
Normal file
133
amm-ui/qml/TokenInput.qml
Normal file
@ -0,0 +1,133 @@
|
||||
import QtQuick 2.15
|
||||
import QtQuick.Layouts 1.15
|
||||
|
||||
Rectangle {
|
||||
id: root
|
||||
|
||||
property var theme
|
||||
property string label: ""
|
||||
property string amount: ""
|
||||
property string usdValue: ""
|
||||
property var token: null
|
||||
property bool readOnly: false
|
||||
|
||||
signal tokenClicked()
|
||||
signal inputEdited(string newValue)
|
||||
|
||||
Binding {
|
||||
target: tiInput
|
||||
property: "text"
|
||||
value: root.amount
|
||||
when: root.readOnly
|
||||
}
|
||||
|
||||
radius: 16
|
||||
color: theme.colors.inputBg
|
||||
implicitHeight: 110
|
||||
|
||||
Behavior on color { ColorAnimation { duration: 300 } }
|
||||
|
||||
RowLayout {
|
||||
anchors.fill: parent
|
||||
anchors.leftMargin: 16
|
||||
anchors.rightMargin: 16
|
||||
anchors.topMargin: 14
|
||||
anchors.bottomMargin: 14
|
||||
spacing: 8
|
||||
|
||||
ColumnLayout {
|
||||
Layout.fillWidth: true
|
||||
spacing: 4
|
||||
|
||||
Text {
|
||||
text: root.label
|
||||
color: theme.colors.textSecondary
|
||||
font.pixelSize: 14
|
||||
}
|
||||
|
||||
Item {
|
||||
Layout.fillWidth: true
|
||||
height: 44
|
||||
|
||||
TextInput {
|
||||
id: tiInput
|
||||
anchors.fill: parent
|
||||
color: theme.colors.textPrimary
|
||||
font.pixelSize: 36
|
||||
font.weight: Font.Bold
|
||||
readOnly: root.readOnly
|
||||
selectionColor: theme.colors.selection
|
||||
clip: true
|
||||
onTextChanged: { if (!root.readOnly) root.inputEdited(text) }
|
||||
validator: RegularExpressionValidator {
|
||||
regularExpression: /^[0-9]*\.?[0-9]*$/
|
||||
}
|
||||
}
|
||||
|
||||
Text {
|
||||
anchors.fill: parent
|
||||
text: "0"
|
||||
color: theme.colors.textPlaceholder
|
||||
font: tiInput.font
|
||||
visible: tiInput.text === "" && !tiInput.activeFocus
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
}
|
||||
}
|
||||
|
||||
Text {
|
||||
text: root.usdValue
|
||||
color: theme.colors.textSecondary
|
||||
font.pixelSize: 13
|
||||
visible: root.usdValue !== ""
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
height: 40
|
||||
radius: 20
|
||||
color: tokenBtnHover.containsMouse ? theme.colors.panelHoverBg : theme.colors.panelBg
|
||||
implicitWidth: tokenBtnRow.implicitWidth + 24
|
||||
Behavior on color { ColorAnimation { duration: 120 } }
|
||||
|
||||
RowLayout {
|
||||
id: tokenBtnRow
|
||||
anchors.centerIn: parent
|
||||
spacing: 6
|
||||
|
||||
Rectangle {
|
||||
width: 24; height: 24; radius: 12
|
||||
color: root.token ? root.token.color : theme.colors.noTokenCircle
|
||||
visible: root.token !== null
|
||||
Text {
|
||||
anchors.centerIn: parent
|
||||
text: root.token ? root.token.letter : ""
|
||||
color: "#ffffff"
|
||||
font.pixelSize: 10
|
||||
font.weight: Font.Bold
|
||||
}
|
||||
}
|
||||
|
||||
Text {
|
||||
text: root.token ? root.token.symbol : "Select token"
|
||||
color: theme.colors.textPrimary
|
||||
font.pixelSize: 15
|
||||
font.weight: root.token ? Font.Medium : Font.Normal
|
||||
}
|
||||
|
||||
Text {
|
||||
text: "▼"
|
||||
color: theme.colors.textSecondary
|
||||
font.pixelSize: 10
|
||||
}
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
id: tokenBtnHover
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onClicked: root.tokenClicked()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
76
amm-ui/qml/TokenListItem.qml
Normal file
76
amm-ui/qml/TokenListItem.qml
Normal file
@ -0,0 +1,76 @@
|
||||
import QtQuick 2.15
|
||||
import QtQuick.Layouts 1.15
|
||||
|
||||
Item {
|
||||
id: root
|
||||
|
||||
property var theme
|
||||
property string tokenName: ""
|
||||
property string tokenSymbol: ""
|
||||
property string tokenAddress: ""
|
||||
property string tokenColor: "#627eea"
|
||||
property string tokenLetter: ""
|
||||
|
||||
signal clicked()
|
||||
|
||||
implicitHeight: 56
|
||||
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
radius: 12
|
||||
color: hoverArea.containsMouse ? theme.colors.panelBg : "transparent"
|
||||
Behavior on color { ColorAnimation { duration: 120 } }
|
||||
|
||||
RowLayout {
|
||||
anchors.fill: parent
|
||||
anchors.leftMargin: 8
|
||||
anchors.rightMargin: 8
|
||||
spacing: 12
|
||||
|
||||
Rectangle {
|
||||
width: 36; height: 36; radius: 18
|
||||
color: root.tokenColor
|
||||
Text {
|
||||
anchors.centerIn: parent
|
||||
text: root.tokenLetter
|
||||
color: "#ffffff"
|
||||
font.pixelSize: 14
|
||||
font.weight: Font.Bold
|
||||
}
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
Layout.fillWidth: true
|
||||
spacing: 2
|
||||
|
||||
Text {
|
||||
text: root.tokenName
|
||||
color: theme.colors.textPrimary
|
||||
font.pixelSize: 15
|
||||
elide: Text.ElideRight
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
spacing: 6
|
||||
Text { text: root.tokenSymbol; color: theme.colors.textSecondary; font.pixelSize: 12 }
|
||||
Text {
|
||||
text: root.tokenAddress !== ""
|
||||
? root.tokenAddress.substring(0, 6) + "..." + root.tokenAddress.slice(-4)
|
||||
: ""
|
||||
color: theme.colors.textPlaceholder
|
||||
font.pixelSize: 12
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
id: hoverArea
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onClicked: root.clicked()
|
||||
}
|
||||
}
|
||||
}
|
||||
173
amm-ui/qml/TokenSelectorModal.qml
Normal file
173
amm-ui/qml/TokenSelectorModal.qml
Normal file
@ -0,0 +1,173 @@
|
||||
import QtQuick 2.15
|
||||
import QtQuick.Controls 2.15
|
||||
import QtQuick.Layouts 1.15
|
||||
|
||||
Item {
|
||||
id: root
|
||||
|
||||
property var theme
|
||||
property var tokens: []
|
||||
property string searchText: ""
|
||||
|
||||
signal tokenSelected(var token)
|
||||
|
||||
visible: false
|
||||
|
||||
function open() {
|
||||
root.visible = true
|
||||
searchText = ""
|
||||
searchField.text = ""
|
||||
searchField.forceActiveFocus()
|
||||
}
|
||||
|
||||
function close() {
|
||||
root.visible = false
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
color: Qt.rgba(0, 0, 0, 0.4)
|
||||
MouseArea { anchors.fill: parent; onClicked: root.close() }
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
anchors.centerIn: parent
|
||||
width: Math.min(480, root.width - 32)
|
||||
height: Math.min(600, root.height - 64)
|
||||
radius: 24
|
||||
color: theme.colors.cardBg
|
||||
border.color: theme.colors.border
|
||||
border.width: 1
|
||||
|
||||
Behavior on color { ColorAnimation { duration: 300 } }
|
||||
|
||||
MouseArea { anchors.fill: parent; onClicked: {} }
|
||||
|
||||
ColumnLayout {
|
||||
anchors.fill: parent
|
||||
anchors.margins: 20
|
||||
spacing: 16
|
||||
|
||||
RowLayout {
|
||||
Layout.fillWidth: true
|
||||
Text {
|
||||
Layout.fillWidth: true
|
||||
text: "Select a token"
|
||||
color: theme.colors.textPrimary
|
||||
font.pixelSize: 18
|
||||
font.weight: Font.Bold
|
||||
}
|
||||
Rectangle {
|
||||
width: 32; height: 32; radius: 16
|
||||
color: closeHover.containsMouse ? theme.colors.panelHoverBg : theme.colors.panelBg
|
||||
Behavior on color { ColorAnimation { duration: 120 } }
|
||||
Text { anchors.centerIn: parent; text: "✕"; color: theme.colors.textSecondary; font.pixelSize: 14 }
|
||||
MouseArea {
|
||||
id: closeHover
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onClicked: root.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
Layout.fillWidth: true
|
||||
height: 48
|
||||
radius: 16
|
||||
color: theme.colors.inputBg
|
||||
border.color: searchField.activeFocus ? theme.colors.borderStrong : theme.colors.border
|
||||
border.width: 1
|
||||
Behavior on border.color { ColorAnimation { duration: 150 } }
|
||||
|
||||
RowLayout {
|
||||
anchors.fill: parent
|
||||
anchors.leftMargin: 14
|
||||
anchors.rightMargin: 14
|
||||
spacing: 8
|
||||
Text { text: "⌕"; color: theme.colors.textSecondary; font.pixelSize: 20 }
|
||||
TextInput {
|
||||
id: searchField
|
||||
Layout.fillWidth: true
|
||||
color: theme.colors.textPrimary
|
||||
font.pixelSize: 15
|
||||
selectionColor: theme.colors.selection
|
||||
onTextChanged: root.searchText = text
|
||||
Text {
|
||||
anchors.fill: parent
|
||||
text: "Search tokens"
|
||||
color: theme.colors.textPlaceholder
|
||||
font: searchField.font
|
||||
visible: searchField.text === "" && !searchField.activeFocus
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Text { text: "Popular tokens"; color: theme.colors.textSecondary; font.pixelSize: 13 }
|
||||
|
||||
Flow {
|
||||
Layout.fillWidth: true
|
||||
spacing: 8
|
||||
Repeater {
|
||||
model: root.tokens.slice(0, 5)
|
||||
delegate: Rectangle {
|
||||
height: 40
|
||||
radius: 20
|
||||
color: pillHover.containsMouse ? theme.colors.panelHoverBg : theme.colors.panelBg
|
||||
border.color: theme.colors.border
|
||||
border.width: 1
|
||||
width: pillRow.implicitWidth + 24
|
||||
Behavior on color { ColorAnimation { duration: 120 } }
|
||||
RowLayout {
|
||||
id: pillRow
|
||||
anchors.centerIn: parent
|
||||
spacing: 6
|
||||
Rectangle {
|
||||
width: 22; height: 22; radius: 11
|
||||
color: modelData.color
|
||||
Text { anchors.centerIn: parent; text: modelData.letter; color: "#ffffff"; font.pixelSize: 10; font.weight: Font.Bold }
|
||||
}
|
||||
Text { text: modelData.symbol; color: theme.colors.textPrimary; font.pixelSize: 13; font.weight: Font.Medium }
|
||||
}
|
||||
MouseArea {
|
||||
id: pillHover
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onClicked: root.tokenSelected(modelData)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Text { text: "Tokens by 24H volume"; color: theme.colors.textSecondary; font.pixelSize: 13 }
|
||||
|
||||
ListView {
|
||||
id: tokenList
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
clip: true
|
||||
spacing: 2
|
||||
model: root.tokens.filter(function(t) {
|
||||
if (root.searchText === "") return true
|
||||
var q = root.searchText.toLowerCase()
|
||||
return t.symbol.toLowerCase().indexOf(q) !== -1 ||
|
||||
t.name.toLowerCase().indexOf(q) !== -1
|
||||
})
|
||||
delegate: TokenListItem {
|
||||
width: tokenList.width
|
||||
theme: root.theme
|
||||
tokenName: modelData.name
|
||||
tokenSymbol: modelData.symbol
|
||||
tokenAddress: modelData.address
|
||||
tokenColor: modelData.color
|
||||
tokenLetter: modelData.letter
|
||||
onClicked: root.tokenSelected(modelData)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user