fix(liquidity): place balances below amount input

apps/amm/qml/components/liquidity/AmmTokenAccessory.qml

@@ -1,7 +1,6 @@
 pragma ComponentBehavior: Bound
 
 import QtQuick
-import QtQuick.Controls
 import QtQuick.Layouts
 
 ColumnLayout {
@@ -12,44 +11,11 @@ ColumnLayout {
     property string tokenColor: root.theme.colors.noTokenCircle
     property string tokenLetter: ""
     property string tokenText: qsTr("Select token")
-    property string balance: ""
-    property bool balanceUpdating: false
-    readonly property bool showBalanceLoadingIndicator: root.balance.length > 0
-                                                    && root.balanceUpdating
     property string accessibleName: qsTr("Select token")
     property bool invalid: false
 
     signal clicked
 
-    spacing: 2
-
-    RowLayout {
-        Layout.fillWidth: true
-        visible: root.balance.length > 0
-        spacing: 4
-
-        Text {
-            id: balanceText
-
-            objectName: "tokenBalanceText"
-            Layout.fillWidth: true
-            text: qsTr("Balance %1").arg(root.balance)
-            color: root.theme.colors.textSecondary
-            font.pixelSize: 10
-            horizontalAlignment: Text.AlignRight
-            elide: Text.ElideRight
-        }
-
-        BusyIndicator {
-            objectName: "tokenBalanceLoadingIndicator"
-            Layout.preferredWidth: 12
-            Layout.preferredHeight: 12
-            visible: root.showBalanceLoadingIndicator
-            running: visible
-            Accessible.name: qsTr("Updating balance")
-        }
-    }
-
     AmmTokenSelectButton {
         objectName: "tokenSelectButton"
         Layout.fillWidth: true

apps/amm/qml/components/liquidity/AmmTokenAmountSurface.qml

@@ -13,6 +13,8 @@ Rectangle {
     property string supportingText: ""
     property string errorText: ""
     property string supportingActionText: ""
+    property string availableBalance: ""
+    property bool availableBalanceUpdating: false
     property bool readOnly: false
     property bool muted: false
     property bool invalid: root.errorText.length > 0
@@ -22,6 +24,7 @@ Rectangle {
     property Component adjustment
     property real adjustmentWidth: 0
     property real adjustmentHeight: 0
+    readonly property bool showAvailableBalance: root.availableBalance.length > 0
 
     signal amountEdited(string value)
     signal amountEditingFinished(string value)
@@ -165,6 +168,34 @@ Rectangle {
                     }
                 }
 
+                RowLayout {
+                    Layout.maximumWidth: 150
+                    spacing: 4
+                    visible: root.showAvailableBalance
+
+                    Text {
+                        id: availableBalanceText
+
+                        objectName: "availableBalanceText"
+                        Layout.minimumWidth: 0
+                        Layout.preferredWidth: Math.min(implicitWidth, 150)
+                        Layout.maximumWidth: 150
+                        text: qsTr("Balance %1").arg(root.availableBalance)
+                        color: root.theme.colors.textSecondary
+                        font.pixelSize: 11
+                        elide: Text.ElideRight
+                    }
+
+                    BusyIndicator {
+                        objectName: "availableBalanceLoadingIndicator"
+                        Layout.preferredWidth: 12
+                        Layout.preferredHeight: 12
+                        visible: root.availableBalanceUpdating
+                        running: visible
+                        Accessible.name: qsTr("Updating balance")
+                    }
+                }
+
                 Text {
                     Layout.fillWidth: true
                     text: root.supportingText

apps/amm/qml/components/liquidity/TokenAmountInput.qml

@@ -42,10 +42,11 @@ AmmTokenAmountSurface {
     amount: root.text
     supportingText: root.helperText
     supportingActionText: root.showMaxButton ? qsTr("MAX") : ""
+    availableBalance: root.balance
+    availableBalanceUpdating: root.balanceUpdating
     accessory: tokenActions
     accessoryWidth: width < 360 ? 132 : 180
-    accessoryHeight: root.holdings.length > 1 ? 88
-                     : root.balance.length > 0 ? 58 : 40
+    accessoryHeight: root.holdings.length > 1 ? 88 : 40
 
     onAmountEdited: function(value) {
         root.pendingValue = value
@@ -89,8 +90,6 @@ AmmTokenAmountSurface {
                 tokenColor: root.tokenColor(root.tokenData)
                 tokenLetter: root.tokenLetter(root.tokenData)
                 tokenText: root.tokenText(root.tokenData)
-                balance: root.balance
-                balanceUpdating: root.balanceUpdating
                 accessibleName: qsTr("Select %1").arg(root.label)
                 onClicked: tokenModal.open()
             }

apps/amm/tests/qml/tst_TokenAmountInput.qml

@@ -120,16 +120,18 @@ TestCase {
     }
 
     function test_balanceRefreshShowsLoadingIndicatorWithoutClearingBalance() {
+        failOnWarning(/Detected recursive rearrange/)
         var input = createTemporaryObject(inputComponent, testCase, {
             "balance": "12",
             "balanceUpdating": true
         })
         verify(input)
 
-        var accessory = findChild(input, "tokenAccessory")
-        verify(accessory)
-        compare(accessory.balance, "12")
-        compare(accessory.showBalanceLoadingIndicator, true)
+        var balanceText = findChild(input, "availableBalanceText")
+        verify(balanceText)
+        compare(balanceText.text, "Balance 12")
+        compare(input.showAvailableBalance, true)
+        compare(input.accessoryHeight, 40)
     }
 
     function test_disabledTokenIsRejectedByTypedInput() {