feat(CommunityNewPermissionView): red highlight for tokens with inssu…

…ficient balance and warning msg panel
status-im · May 8, 2023 · 1f3ae97 · 1f3ae97
1 parent 45aaa5a
commit 1f3ae97
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 10 deletions.
diff --git a/storybook/pages/AirdropTokensSelectorPage.qml b/storybook/pages/AirdropTokensSelectorPage.qml
@@ -12,19 +12,22 @@ ColumnLayout {
             tokenText: "2 MCT",
             networkText: "Ethereum",
             tokenImage: Style.png("tokens/SNT"),
-            networkImage: Style.svg("network/Network=Ethereum")
+            networkImage: Style.svg("network/Network=Ethereum"),
+            valid: true
         },
         {
             tokenText: "64 DAI",
             networkText: "Optimism",
             tokenImage: Style.png("tokens/DAI"),
-            networkImage: Style.svg("network/Network=Optimism")
+            networkImage: Style.svg("network/Network=Optimism"),
+            valid: false
         },
         {
             tokenText: "0.125 ETH",
             networkText: "Arbitrum",
             tokenImage: Style.png("tokens/ETH"),
-            networkImage: Style.svg("network/Network=Arbitrum")
+            networkImage: Style.svg("network/Network=Arbitrum"),
+            valid: true
         }
     ]
 

diff --git a/storybook/pages/TokenPanelPage.qml b/storybook/pages/TokenPanelPage.qml
@@ -20,17 +20,20 @@ SplitView {
             {
                 name: "Optimism",
                 icon: Style.svg(ModelsData.networks.optimism),
-                amount: "300"
+                amount: 300,
+                infiniteAmount: false
             },
             {
                 name: "Arbitrum",
                 icon: Style.svg(ModelsData.networks.arbitrum),
-                amount: "400"
+                amount: 400,
+                infiniteAmount: false
             },
             {
                 name: "Hermez",
                 icon: Style.svg(ModelsData.networks.hermez),
-                amount: "500"
+                amount: 500,
+                infiniteAmount: true
             }
         ]
 

diff --git a/ui/app/AppLayouts/Chat/controls/community/AirdropTokensSelector.qml b/ui/app/AppLayouts/Chat/controls/community/AirdropTokensSelector.qml
@@ -45,7 +45,9 @@ StatusFlowSelector {
             component Text: StatusBaseText {
                 Layout.fillWidth: true
 
-                color: Theme.palette.primaryColor1
+                font.weight: Font.Medium
+                color: model.valid ? Theme.palette.primaryColor1
+                                   : Theme.palette.dangerColor1
                 elide: Text.ElideRight
             }
 
@@ -54,7 +56,8 @@ StatusFlowSelector {
             rightPadding: d.commonMargin * 2
 
             background: Rectangle {
-                color: Theme.palette.primaryColor3
+                color: model.valid ? Theme.palette.primaryColor3
+                                   : Theme.palette.dangerColor3
                 radius: root.placeholderItemHeight / 2
 
                 MouseArea {

diff --git a/...ls/communities/PermissionWarningPanel.qml → .../Chat/panels/communities/WarningPanel.qml b/...ls/communities/PermissionWarningPanel.qml → .../Chat/panels/communities/WarningPanel.qml
diff --git a/ui/app/AppLayouts/Chat/panels/communities/qmldir b/ui/app/AppLayouts/Chat/panels/communities/qmldir
@@ -8,6 +8,6 @@ HidePermissionPanel 1.0 HidePermissionPanel.qml
 JoinPermissionsOverlayPanel 1.0 JoinPermissionsOverlayPanel.qml
 MintTokensFooterPanel 1.0 MintTokensFooterPanel.qml
 PermissionConflictWarningPanel 1.0 PermissionConflictWarningPanel.qml
-PermissionWarningPanel 1.0 PermissionWarningPanel.qml
 PermissionQualificationPanel 1.0 PermissionQualificationPanel.qml
 TokenHoldersPanel 1.0 TokenHoldersPanel.qml
+WarningPanel 1.0 WarningPanel.qml
diff --git a/ui/app/AppLayouts/Chat/views/communities/CommunityNewAirdropView.qml b/ui/app/AppLayouts/Chat/views/communities/CommunityNewAirdropView.qml
@@ -98,9 +98,15 @@ StatusScrollView {
             readonly property real amount: model.amount
             readonly property bool infiniteSupply: model.infiniteSupply
 
+            readonly property bool valid:
+                infiniteSupply || amount * airdropRecipientsSelector.count <= supply
+
             onSupplyChanged: recipientsCountInstantiator.findRecipientsCount()
             onAmountChanged: recipientsCountInstantiator.findRecipientsCount()
             onInfiniteSupplyChanged: recipientsCountInstantiator.findRecipientsCount()
+
+            onValidChanged: model.valid = valid
+            Component.onCompleted: model.valid = valid
         }
 
         onCountChanged: findRecipientsCount()
@@ -164,6 +170,7 @@ StatusScrollView {
 
                 onAddCollectible: {
                     const entry = d.prepareEntry(key, amount)
+                    entry.valid = true
 
                     selectedHoldingsModel.append(entry)
                     dropdown.close()
@@ -350,6 +357,16 @@ StatusScrollView {
             }
         }
 
+        WarningPanel {
+            Layout.fillWidth: true
+            Layout.topMargin: Style.current.padding
+
+            text: qsTr("Not enough tokens to send to all recipients. Reduce the number of recipients or change the number of tokens sent to each recipient.")
+
+            visible: !recipientsCountInstantiator.infinity &&
+                     recipientsCountInstantiator.maximumRecipientsCount < airdropRecipientsSelector.count
+        }
+
         StatusButton {
             Layout.preferredHeight: 44
             Layout.alignment: Qt.AlignHCenter

diff --git a/ui/app/AppLayouts/Chat/views/communities/CommunityNewPermissionView.qml b/ui/app/AppLayouts/Chat/views/communities/CommunityNewPermissionView.qml
@@ -581,7 +581,7 @@ StatusScrollView {
             onToggled: d.dirtyValues.isPrivate = checked
         }
 
-        PermissionWarningPanel {
+        WarningPanel {
             id: duplicationPanel
 
             Layout.fillWidth: true