status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix(@desktop/wallet): Token selector in the send modal doesn't look like design and overflows window 

fixes #6499
This commit is contained in:
Khushboo Mehta 2022-07-21 10:40:49 +02:00 committed by Khushboo-dev-cpp
parent 43de90e80e
commit 39cf2f3fac
9 changed files with 192 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/app_service/common/network_constants.nim
View File

@ -48,7 +48,7 @@ let NETWORKS* = %* [
"chainName": "Ropsten",
"rpcUrl": "https://ropsten.infura.io/v3/" & INFURA_TOKEN_RESOLVED,
"blockExplorerUrl": "https://ropsten.etherscan.io/",
"iconUrl": "network/Network=Tetnet",
"iconUrl": "network/Network=Testnet",
"chainColor": "#939BA1",
"shortName": "ropEth",
"nativeCurrencyName": "Ether",
@ -63,7 +63,7 @@ let NETWORKS* = %* [
"chainName": "Rinkeby",
"rpcUrl": "https://rinkeby.infura.io/v3/" & INFURA_TOKEN_RESOLVED,
"blockExplorerUrl": "https://rinkeby.etherscan.io/",
"iconUrl": "network/Network=Tetnet",
"iconUrl": "network/Network=Testnet",
"chainColor": "#939BA1",
"shortName": "rinEth",
"nativeCurrencyName": "Ether",
@ -78,7 +78,7 @@ let NETWORKS* = %* [
"chainName": "Goerli",
"rpcUrl": "https://goerli.infura.io/v3/" & INFURA_TOKEN_RESOLVED,
"blockExplorerUrl": "https://goerli.etherscan.io/",
"iconUrl": "network/Network=Tetnet",
"iconUrl": "network/Network=Testnet",
"chainColor": "#939BA1",
"shortName": "goeEth",
"nativeCurrencyName": "Ether",
@ -108,7 +108,7 @@ let NETWORKS* = %* [
"chainName": "Optimism Kovan",
"rpcUrl": "https://optimism-kovan.infura.io/v3/" & INFURA_TOKEN_RESOLVED,
"blockExplorerUrl": "https://kovan-optimistic.etherscan.io",
"iconUrl": "network/Network=Tetnet",
"iconUrl": "network/Network=Testnet",
"chainColor": "#939BA1",
"shortName": "kovOpt",
"nativeCurrencyName": "Ether",
@ -138,7 +138,7 @@ let NETWORKS* = %* [
"chainName": "Arbitrum Rinkeby",
"rpcUrl": "https://arbitrum-rinkeby.infura.io/v3/" & INFURA_TOKEN_RESOLVED,
"blockExplorerUrl": " https://testnet.arbiscan.io",
"iconUrl": "network/Network=Tetnet",
"iconUrl": "network/Network=Testnet",
"chainColor": "#939BA1",
"shortName": "rinArb",
"nativeCurrencyName": "Ether",
@ -240,4 +240,4 @@ var NODE_CONFIG* = %* {
"DataDir": DEFAULT_TORRENT_CONFIG_DATADIR,
"TorrentDir": DEFAULT_TORRENT_CONFIG_TORRENTDIR
}
}
}

2
ui/StatusQ

@ -1 +1 @@
Subproject commit 26eaeb3ad5d538e3d2601ef5d5b6062094e9db3b
Subproject commit dbc0c1960a478bb740167275e76f56d2bef41d15

5
ui/app/AppLayouts/Wallet/popups/ReceiveModal.qml
View File

@ -127,8 +127,9 @@ StatusModal {
id: multiChainList
property bool need2Columns: RootStore.enabledNetworks.count >= 9
anchors.centerIn: parent
anchors.horizontalCenterOffset: need2Columns ? 0 : qrCodeBox.width/2 + Style.current.xlPadding + Style.current.halfPadding
anchors.left: need2Columns ? undefined: qrCodeBox.right
anchors.leftMargin: need2Columns ?undefined : Style.current.halfPadding
anchors.centerIn: need2Columns ? parent : undefined
height: qrCodeBox.height
columnSpacing: need2Columns ? qrCodeBox.width + Style.current.bigPadding : 0

0
ui/imports/assets/icons/network/Network=Unknown.svg → ui/imports/assets/icons/network/Network=Testnet.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.8 KiB

After

Width:  |  Height:  |  Size: 2.8 KiB

0
ui/imports/assets/icons/tiny/network/Network=Unknown.svg → ui/imports/assets/icons/tiny/network/Network=Testnet.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 2.7 KiB

5
ui/imports/shared/controls/AssetAndAmountInput.qml
View File

@ -5,8 +5,8 @@ import QtGraphicalEffects 1.13
import utils 1.0
import shared.stores 1.0
import shared.panels 1.0
import StatusQ.Controls 0.1
import "../"
import "../panels"
@ -161,9 +161,8 @@ Item {
StatusAssetSelector {
id: selectAsset
height: 28
anchors.top: inputAmount.top
anchors.topMargin: Style.current.bigPadding + 14
anchors.topMargin: 28
anchors.right: parent.right
anchors.rightMargin: Style.current.smallPadding
defaultToken: Style.png("tokens/DEFAULT-TOKEN@3x")

171
ui/imports/shared/panels/StatusAssetSelector.qml Normal file
View File

@ -0,0 +1,171 @@
import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13
import utils 1.0
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Core.Utils 0.1
import StatusQ.Controls 0.1
import StatusQ.Components 0.1
Item {
id: root
property var assets
property var selectedAsset
property string defaultToken
property string userSelectedToken
property var tokenAssetSourceFn: function (symbol) {
return ""
}
// Define this in the usage to get balance in currency selected by user
property var getCurrencyBalanceString: function (currencyBalance) { return "" }
implicitWidth: select.width
implicitHeight: 48
function resetInternal() {
assets = null
selectedAsset = null
}
onSelectedAssetChanged: {
if (selectedAsset && selectedAsset.symbol) {
iconImg.image.source = tokenAssetSourceFn(selectedAsset.symbol.toUpperCase())
selectedTextField.text = selectedAsset.symbol.toUpperCase()
}
}
StatusSelect {
id: select
width: visualRect.width
model: root.assets
caretVisible: false
caretRightMargin: 0
bgColor: Style.current.transparent
bgColorHover: Theme.palette.directColor8
select.radius: 16
select.height: root.height
selectMenu.width: 342
selectMenu.height: 416
selectedItemComponent: Rectangle {
id: visualRect
width: row.width + Style.current.padding
height: parent.height
color: Style.current.transparent
border.width: 1
border.color: Theme.palette.directColor8
radius: 16
Row {
id: row
anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter
anchors.margins: Style.current.halfPadding
spacing: Style.current.halfPadding
StatusBaseText {
id: selectedTextField
anchors.verticalCenter: parent.verticalCenter
font.pixelSize: 15
width: Math.min(50, implicitWidth)
elide: Text.ElideRight
verticalAlignment: Text.AlignVCenter
color: Theme.palette.directColor1
font.weight: Font.Medium
}
StatusRoundedImage {
id: iconImg
width: 40
height: 40
image.onStatusChanged: {
if (iconImg.image.status === Image.Error) {
iconImg.image.source = defaultToken
}
}
}
}
}
selectMenu.delegate: menuItem
}
Component {
id: menuItem
MenuItem {
id: itemContainer
property bool isFirstItem: index === 0
property bool isLastItem: index === assets.rowCount() - 1
width: parent.width
height: 72
contentItem: Item {
anchors.fill: parent
StatusRoundedImage {
id: iconImg
anchors.left: parent.left
anchors.leftMargin: 16
anchors.verticalCenter: parent.verticalCenter
image.source: root.tokenAssetSourceFn(symbol.toUpperCase())
image.onStatusChanged: {
if (iconImg.image.status === Image.Error) {
iconImg.image.source = defaultToken
}
}
}
Column {
anchors.left: iconImg.right
anchors.leftMargin: 12
anchors.verticalCenter: parent.verticalCenter
StatusBaseText {
text: symbol.toUpperCase()
font.pixelSize: 15
color: Theme.palette.directColor1
}
StatusBaseText {
text: name
color: Theme.palette.baseColor1
font.pixelSize: 15
}
}
Column {
anchors.right: parent.right
anchors.rightMargin: 16
anchors.verticalCenter: parent.verticalCenter
StatusBaseText {
font.pixelSize: 15
text: parseFloat(totalBalance).toFixed(4) + " " + symbol
}
StatusBaseText {
font.pixelSize: 15
anchors.right: parent.right
text: getCurrencyBalanceString(totalCurrencyBalance)
color: Theme.palette.baseColor1
}
}
}
background: Rectangle {
color: itemContainer.highlighted ? Theme.palette.statusSelect.menuItemHoverBackgroundColor : Theme.palette.statusSelect.menuItemBackgroundColor
}
Component.onCompleted: {
if(userSelectedToken === "") {
if(index === 0) {
selectedAsset = model
}
} else {
if(symbol === userSelectedToken) {
selectedAsset = model
}
}
}
MouseArea {
cursorShape: Qt.PointingHandCursor
anchors.fill: itemContainer
onClicked: {
userSelectedToken = symbol
selectedAsset = model
select.selectMenu.close()
}
}
}
}
}

3
ui/imports/shared/panels/qmldir
View File

@ -17,4 +17,5 @@ StyledText 1.0 StyledText.qml
SVGImage 1.0 SVGImage.qml
TextWithLabel 1.0 TextWithLabel.qml
EditCroppedImagePanel 1.0 EditCroppedImagePanel.qml
NoImageUploadedPanel 1.0 NoImageUploadedPanel.qml
NoImageUploadedPanel 1.0 NoImageUploadedPanel.qml
StatusAssetSelector 1.0 StatusAssetSelector.qml

10
ui/imports/shared/popups/SendModal.qml
View File

@ -7,8 +7,8 @@ import StatusQ.Controls.Validators 0.1
import utils 1.0
import shared.stores 1.0
import shared.panels 1.0
import StatusQ.Controls 0.1
import StatusQ.Popups 0.1
import StatusQ.Components 0.1
import StatusQ.Core 0.1
@ -130,6 +130,7 @@ StatusModal {
anchors.left: parent.left
anchors.leftMargin: Style.current.xlPadding
anchors.rightMargin: Style.current.xlPadding
z: 1
RowLayout {
spacing: 16
@ -270,6 +271,7 @@ StatusModal {
anchors.top: border.bottom
anchors.topMargin: Style.current.halfPadding
anchors.left: parent.left
z: 0
ColumnLayout {
width: scrollView.availableWidth
@ -418,8 +420,10 @@ StatusModal {
TransactionSigner {
id: transactionSigner
Layout.topMargin: Style.current.smallPadding
width: stack.width
anchors.left: parent.left
anchors.right: parent.right
anchors.topMargin: Style.current.smallPadding
anchors.margins: 32
signingPhrase: popup.store.signingPhrase
}
}