fix(SendModal): Bridge modal Simple mode's scroll is very clunky

- remove the nested unneeded ScrollView - cleanups and fixes in mocked models and stores to unbreak showing the networks/routing in storybook Fixes #15902
status-im · Aug 2, 2024 · b67ea66 · b67ea66
1 parent b8bc0a9
commit b67ea66
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 85 deletions.
diff --git a/storybook/pages/SendModalPage.qml b/storybook/pages/SendModalPage.qml
@@ -92,6 +92,11 @@ SplitView {
 
     TransactionStore {
         id: txStore
+
+        property bool areTestNetworksEnabled: true
+
+        function setRouteDisabledChains(chainId, disabled) {}
+
         walletAssetStore: root.walletAssetStore
         tokensStore.showCommunityAssetsInSend: showCommunityAssetsCheckBox.checked
         tokensStore.displayAssetsBelowBalance: balanceThresholdCheckbox.checked
@@ -104,10 +109,12 @@ SplitView {
         property ListModel toModel: ListModel {
             ListElement {
                 chainId: 420
-                chainName: "Optimism"
-                iconUrl: "network/Network=Optimism"
                 amountOut: "3003845308235848343"
             }
+            ListElement {
+                chainId: 1
+                amountOut: "30038453082358483445"
+            }
         }
         property var suggestesRoutes: [{
                 bridgeName:"Hop",

diff --git a/storybook/src/Models/NetworksModel.qml b/storybook/src/Models/NetworksModel.qml
@@ -166,15 +166,6 @@ QtObject {
         Component.onCompleted: append([
                    {
                        chainId: 1,
-                       chainName: "Ethereum Mainnet",
-                       iconUrl: ModelsData.networks.ethereum,
-                       chainColor: "blue",
-                       shortName: "ETH",
-                       layer: 1,
-                       nativeCurrencyDecimals: 18,
-                       nativeCurrencyName: "Ether",
-                       nativeCurrencySymbol: "ETH",
-                       isRouteEnabled: true,
                        isRoutePreferred: true,
                        hasGas: true,
                        tokenBalance: ({
@@ -190,15 +181,6 @@ QtObject {
                     },
                    {
                         chainId: 10,
-                        chainName: "Optimism",
-                        iconUrl: ModelsData.networks.optimism,
-                        chainColor: "red",
-                        shortName: "OPT",
-                        layer: 2,
-                        nativeCurrencyDecimals: 18,
-                        nativeCurrencyName: "Ether",
-                        nativeCurrencySymbol: "ETH",
-                        isRouteEnabled: true,
                         isRoutePreferred: true,
                         hasGas: true,
                         tokenBalance: ({
@@ -214,16 +196,6 @@ QtObject {
                    },
                    {
                         chainId: 42161,
-                        chainName: "Arbitrum",
-                        iconUrl: ModelsData.networks.arbitrum,
-                        isActive: false,
-                        shortName: "ARB",
-                        chainColor: "purple",
-                        layer: 2,
-                        nativeCurrencyDecimals: 18,
-                        nativeCurrencyName: "Ether",
-                        nativeCurrencySymbol: "ETH",
-                        isRouteEnabled: true,
                         isRoutePreferred: true,
                         hasGas: true,
                         tokenBalance: ({
@@ -285,15 +257,6 @@ QtObject {
         Component.onCompleted: append([
                    {
                        chainId: 1,
-                       chainName: "Ethereum Mainnet",
-                       iconUrl: ModelsData.networks.ethereum,
-                       chainColor: "blue",
-                       shortName: "ETH",
-                       layer: 1,
-                       nativeCurrencyDecimals: 18,
-                       nativeCurrencyName: "Ether",
-                       nativeCurrencySymbol: "ETH",
-                       isRouteEnabled: true,
                        isRoutePreferred: true,
                        hasGas: true,
                        tokenBalance: ({
@@ -309,16 +272,6 @@ QtObject {
                     },
                    {
                         chainId: 10,
-                        chainName: "Optimism",
-                        iconUrl: ModelsData.networks.optimism,
-                        chainColor: "red",
-                        shortName: "OPT",
-                        layer: 2,
-                        nativeCurrencyDecimals: 18,
-                        nativeCurrencyName: "Ether",
-                        nativeCurrencySymbol: "ETH",
-                        isRouteEnabled: true,
-                        isRoutePreferred: true,
                         hasGas: true,
                         tokenBalance: ({
                             displayDecimals: true,
@@ -333,17 +286,6 @@ QtObject {
                    },
                    {
                         chainId: 42161,
-                        chainName: "Arbitrum",
-                        iconUrl: ModelsData.networks.arbitrum,
-                        isActive: false,
-                        isEnabled: true,
-                        shortName: "ARB",
-                        chainColor: "purple",
-                        layer: 2,
-                        nativeCurrencyDecimals: 18,
-                        nativeCurrencyName: "Ether",
-                        nativeCurrencySymbol: "ETH",
-                        isRouteEnabled: true,
                         isRoutePreferred: true,
                         hasGas: true,
                         tokenBalance: ({

diff --git a/ui/imports/shared/popups/send/SendModal.qml b/ui/imports/shared/popups/send/SendModal.qml
@@ -143,7 +143,7 @@ StatusDialog {
         readonly property bool isCollectiblesTransfer: store.sendType === Constants.SendType.ERC721Transfer ||
                                                        store.sendType === Constants.SendType.ERC1155Transfer
         property var selectedHolding: null
-        property var selectedHoldingType: Constants.TokenType.Unknown
+        property int selectedHoldingType: Constants.TokenType.Unknown
         readonly property bool isSelectedHoldingValidAsset: !!selectedHolding && selectedHoldingType === Constants.TokenType.ERC20
 
         onSelectedHoldingChanged: {

diff --git a/ui/imports/shared/popups/send/views/NetworksSimpleRoutingView.qml b/ui/imports/shared/popups/send/views/NetworksSimpleRoutingView.qml
@@ -65,41 +65,34 @@ RowLayout {
             font.pixelSize: 15
             color: Theme.palette.baseColor1
             text: isBridgeTx ? qsTr("Routes will be automatically calculated to give you the lowest cost.") :
-                              qsTr("The networks where the recipient will receive tokens. Amounts calculated automatically for the lowest cost.")
+                               qsTr("The networks where the recipient will receive tokens. Amounts calculated automatically for the lowest cost.")
             wrapMode: Text.WordWrap
         }
 
-        ScrollView {
+        Column {
             Layout.fillWidth: true
-            Layout.preferredHeight: visible ? row.height + 10 : 0
             Layout.topMargin: Style.current.smallPadding
-            contentWidth: row.width
-            contentHeight: row.height + 10
-            ScrollBar.vertical.policy: ScrollBar.AlwaysOff
-            ScrollBar.horizontal.policy: ScrollBar.AsNeeded
-            clip: true
+            Layout.bottomMargin: Style.current.smallPadding
+            spacing: Style.current.halfPadding
             visible: root.isBridgeTx ? true : !root.isLoading ? root.errorType === Constants.NoError : false
-            Column {
-                id: row
-                spacing: Style.current.padding
 
-                // TODO: This transformation should come from an adaptor outside this component
-                LeftJoinModel {
-                    id: toNetworksListLeftJoinModel
+            // TODO: This transformation should come from an adaptor outside this component
+            LeftJoinModel {
+                id: toNetworksListLeftJoinModel
 
-                    leftModel: root.suggestedToNetworksList
-                    rightModel: root.store.flatNetworksModel
-                    joinRole: "chainId"
-                }
+                leftModel: root.suggestedToNetworksList
+                rightModel: root.store.flatNetworksModel
+                joinRole: "chainId"
+            }
 
-                Repeater {
-                    id: repeater
-                    objectName: "networksList"
-                    model: isBridgeTx ? root.fromNetworksList : toNetworksListLeftJoinModel
-                    delegate: isBridgeTx ? networkItem : routeItem
-                }
+            Repeater {
+                id: repeater
+                objectName: "networksList"
+                model: isBridgeTx ? root.fromNetworksList : toNetworksListLeftJoinModel
+                delegate: isBridgeTx ? networkItem : routeItem
             }
         }
+
         BalanceExceeded {
             Layout.fillWidth: true
             Layout.alignment: Qt.AlignHCenter