status-desktop/ui/imports/shared/popups/send/SendModal.qml

520 lines
24 KiB
QML

import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13
import QtQuick.Dialogs 1.3
import QtGraphicalEffects 1.0
import SortFilterProxyModel 0.2
import utils 1.0
import shared.stores 1.0
import StatusQ.Components 0.1
import StatusQ.Controls 0.1
import StatusQ.Controls.Validators 0.1
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Core.Utils 0.1
import StatusQ.Popups.Dialog 0.1
import "./panels"
import "./controls"
import "./views"
import "./stores"
StatusDialog {
id: popup
property string preSelectedRecipient
property string preDefinedAmountToSend
property var preSelectedHolding
property string preSelectedHoldingID
property int preSelectedHoldingType
property bool interactive: true
property alias onlyAssets: holdingSelector.onlyAssets
property alias modalHeader: modalHeader.text
property var store: TransactionStore{}
property var currencyStore: store.currencyStore
property var selectedAccount: store.selectedSenderAccount
property var collectiblesModel: store.collectiblesModel
property var nestedCollectiblesModel: store.nestedCollectiblesModel
property var bestRoutes
property alias addressText: recipientLoader.addressText
property bool isLoading: false
property int sendType: Constants.SendType.Transfer
property MessageDialog sendingError: MessageDialog {
id: sendingError
title: qsTr("Error sending the transaction")
icon: StandardIcon.Critical
standardButtons: StandardButton.Ok
}
property var sendTransaction: function() {
let recipientAddress = Utils.isValidAddress(popup.addressText) ? popup.addressText : recipientLoader.resolvedENSAddress
d.isPendingTx = true
popup.store.authenticateAndTransfer(
popup.selectedAccount.address,
recipientAddress,
d.selectedSymbol,
amountToSendInput.cryptoValueToSend,
d.uuid,
sendType)
}
property var recalculateRoutesAndFees: Backpressure.debounce(popup, 600, function() {
if(!!popup.selectedAccount && !!d.selectedHolding && recipientLoader.ready && amountToSendInput.inputNumberValid) {
popup.isLoading = true
let amount = d.isERC721Transfer ? 1: Math.round(amountToSendInput.cryptoValueToSend * Math.pow(10, d.selectedHolding.decimals))
popup.store.suggestedRoutes(amount.toString(16), popup.sendType)
}
})
QtObject {
id: d
readonly property int errorType: !amountToSendInput.input.valid && !isERC721Transfer ? Constants.SendAmountExceedsBalance :
(popup.bestRoutes && popup.bestRoutes.count === 0 &&
!!amountToSendInput.input.text && recipientLoader.ready && !popup.isLoading) ?
Constants.NoRoute : Constants.NoError
readonly property double maxFiatBalance: isSelectedHoldingValidAsset ? selectedHolding.totalCurrencyBalance.amount : 0
readonly property double maxCryptoBalance: isSelectedHoldingValidAsset ? selectedHolding.totalBalance.amount : 0
readonly property double maxInputBalance: amountToSendInput.inputIsFiat ? maxFiatBalance : maxCryptoBalance
readonly property string selectedSymbol: store.selectedAssetSymbol
readonly property string inputSymbol: amountToSendInput.inputIsFiat ? popup.currencyStore.currentCurrency : selectedSymbol
readonly property bool errorMode: popup.isLoading || !recipientLoader.ready ? false : errorType !== Constants.NoError || networkSelector.errorMode || !amountToSendInput.inputNumberValid
readonly property string uuid: Utils.uuid()
property bool isPendingTx: false
property string totalTimeEstimate
property double totalFeesInFiat
property double totalAmountToReceive
readonly property bool isBridgeTx: popup.sendType === Constants.SendType.Bridge
readonly property bool isERC721Transfer: popup.sendType === Constants.SendType.ERC721Transfer
property var selectedHolding: null
property var selectedHoldingType: Constants.HoldingType.Unknown
readonly property bool isSelectedHoldingValidAsset: !!selectedHolding && selectedHoldingType === Constants.HoldingType.Asset
property var hoveredHolding: null
property var hoveredHoldingType: Constants.HoldingType.Unknown
readonly property bool isHoveredHoldingValidAsset: !!hoveredHolding && hoveredHoldingType === Constants.HoldingType.Asset
function setSelectedHoldingId(holdingId, holdingType) {
let holding = store.getHolding(holdingId, holdingType)
setSelectedHolding(holding, holdingType)
}
function setSelectedHolding(holding, holdingType) {
d.selectedHoldingType = holdingType
d.selectedHolding = holding
let selectorHolding = store.holdingToSelectorHolding(holding, holdingType)
holdingSelector.setSelectedItem(selectorHolding, holdingType)
}
function setHoveredHoldingId(holdingId, holdingType) {
let holding = store.getHolding(holdingId, holdingType)
setHoveredHolding(holding, holdingType)
}
function setHoveredHolding(holding, holdingType) {
d.hoveredHoldingType = holdingType
d.hoveredHolding = holding
let selectorHolding = store.holdingToSelectorHolding(holding, holdingType)
holdingSelector.setHoveredItem(selectorHolding, holdingType)
}
onSelectedHoldingChanged: {
if (d.selectedHoldingType === Constants.HoldingType.Asset) {
if(popup.sendType !== Constants.SendType.Bridge)
popup.sendType = Constants.SendType.Transfer
store.setSelectedAssetSymbol(selectedHolding.symbol)
} else if (d.selectedHoldingType === Constants.HoldingType.Collectible) {
popup.sendType = Constants.SendType.ERC721Transfer
amountToSendInput.input.text = 1
store.setSelectedAssetSymbol(selectedHolding.contractAddress+":"+selectedHolding.tokenId)
store.setRouteEnabledFromChains(selectedHolding.chainId)
store.updateRoutePreferredChains(selectedHolding.chainId)
}
recalculateRoutesAndFees()
}
}
width: 556
topMargin: 64 + header.height
bottomPadding: footer.visible ? footer.height : 32
padding: 0
background: StatusDialogBackground {
color: Theme.palette.baseColor3
}
onSelectedAccountChanged: popup.recalculateRoutesAndFees()
onOpened: {
amountToSendInput.input.input.edit.forceActiveFocus()
if (popup.preSelectedHoldingType !== Constants.HoldingType.Unknown) {
tokenListRect.browsingHoldingType = popup.preSelectedHoldingType
if(!!popup.preSelectedHolding) {
d.setSelectedHolding(popup.preSelectedHolding, popup.preSelectedHoldingType)
} else if (!!popup.preSelectedHoldingID) {
d.setSelectedHoldingId(popup.preSelectedHoldingID, popup.preSelectedHoldingType)
}
}
if(!!popup.preDefinedAmountToSend) {
amountToSendInput.input.text = popup.preDefinedAmountToSend
}
if(!!popup.preSelectedRecipient) {
recipientLoader.selectedRecipientType = TabAddressSelectorView.Type.Address
recipientLoader.selectedRecipient = {address: popup.preSelectedRecipient}
}
if(d.isBridgeTx) {
recipientLoader.selectedRecipientType = TabAddressSelectorView.Type.Address
recipientLoader.selectedRecipient = {address: popup.selectedAccount.address}
}
}
onClosed: popup.store.resetStoredProperties()
header: AccountsModalHeader {
anchors.top: parent.top
anchors.topMargin: -height - 18
model: SortFilterProxyModel {
sourceModel: popup.store.senderAccounts
sorters: RoleSorter { roleName: "position"; sortOrder: Qt.AscendingOrder }
}
selectedAccount: !!popup.selectedAccount ? popup.selectedAccount: {}
getNetworkShortNames: function(chainIds) {return store.getNetworkShortNames(chainIds)}
onSelectedIndexChanged: store.switchSenderAccount(selectedIndex)
}
ColumnLayout {
id: group1
anchors.fill: parent
ClippingWrapper {
Layout.fillWidth: true
Layout.preferredHeight: assetAndAmountSelector.implicitHeight
+ Style.current.halfPadding
z: 100
clipBottomMargin: 20
Rectangle {
anchors.fill: parent
color: Theme.palette.baseColor3
layer.enabled: scrollView.contentY > 0
layer.effect: DropShadow {
verticalOffset: 0
radius: 8
samples: 17
color: Theme.palette.dropShadow
}
ColumnLayout {
id: assetAndAmountSelector
anchors.fill: parent
anchors.leftMargin: Style.current.xlPadding
anchors.rightMargin: Style.current.xlPadding
z: 1
spacing: 16
RowLayout {
spacing: 8
Layout.preferredHeight: 44
StatusBaseText {
id: modalHeader
Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
verticalAlignment: Text.AlignVCenter
text: d.isBridgeTx ? qsTr("Bridge") : qsTr("Send")
font.pixelSize: 28
lineHeight: 38
lineHeightMode: Text.FixedHeight
font.letterSpacing: -0.4
color: Theme.palette.directColor1
Layout.maximumWidth: contentWidth
}
HoldingSelector {
id: holdingSelector
Layout.fillWidth: true
Layout.fillHeight: true
assetsModel: popup.selectedAccount && popup.selectedAccount.assets ? popup.selectedAccount.assets : null
collectiblesModel: popup.selectedAccount ? popup.nestedCollectiblesModel : null
currentCurrencySymbol: RootStore.currencyStore.currentCurrencySymbol
visible: (!!d.selectedHolding && d.selectedHoldingType !== Constants.HoldingType.Unknown) ||
(!!d.hoveredHolding && d.hoveredHoldingType !== Constants.HoldingType.Unknown)
getNetworkIcon: function(chainId){
return RootStore.getNetworkIcon(chainId)
}
onItemSelected: {
d.setSelectedHoldingId(holdingId, holdingType)
}
}
StatusListItemTag {
Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
Layout.preferredHeight: 22
visible: d.isSelectedHoldingValidAsset || d.isHoveredHoldingValidAsset && !d.isERC721Transfer
title: {
if(d.isHoveredHoldingValidAsset && !!d.hoveredHolding.symbol) {
const balance = popup.currencyStore.formatCurrencyAmount((amountToSendInput.inputIsFiat ? d.hoveredHolding.totalCurrencyBalance.amount : d.hoveredHolding.totalBalance.amount) , d.hoveredHolding.symbol)
return qsTr("Max: %1").arg(balance)
}
if (d.maxInputBalance <= 0)
return qsTr("No balances active")
const balance = popup.currencyStore.formatCurrencyAmount(d.maxInputBalance, d.inputSymbol)
return qsTr("Max: %1").arg(balance)
}
tagClickable: true
closeButtonVisible: false
titleText.font.pixelSize: 12
bgColor: amountToSendInput.input.valid || !amountToSendInput.input.text ? Theme.palette.primaryColor3 : Theme.palette.dangerColor2
titleText.color: amountToSendInput.input.valid || !amountToSendInput.input.text ? Theme.palette.primaryColor1 : Theme.palette.dangerColor1
onTagClicked: {
amountToSendInput.input.text = popup.currencyStore.formatCurrencyAmount(d.maxInputBalance, d.inputSymbol, {noSymbol: true, rawAmount: true}, LocaleUtils.userInputLocale)
}
}
}
RowLayout {
visible: d.isSelectedHoldingValidAsset && !d.isERC721Transfer
AmountToSend {
id: amountToSendInput
Layout.fillWidth:true
isBridgeTx: d.isBridgeTx
interactive: popup.interactive
selectedSymbol: d.selectedSymbol
maxInputBalance: d.maxInputBalance
currentCurrency: popup.currencyStore.currentCurrency
getFiatValue: function(cryptoValue) {
return selectedSymbol ? popup.currencyStore.getFiatValue(cryptoValue, selectedSymbol, currentCurrency) : 0.0
}
getCryptoValue: function(fiatValue) {
return selectedSymbol ? popup.currencyStore.getCryptoValue(fiatValue, selectedSymbol, currentCurrency) : 0.0
}
formatCurrencyAmount: popup.currencyStore.formatCurrencyAmount
onReCalculateSuggestedRoute: popup.recalculateRoutesAndFees()
}
// Horizontal spacer
RowLayout {}
AmountToReceive {
id: amountToReceive
Layout.alignment: Qt.AlignRight
Layout.fillWidth:true
visible: !!popup.bestRoutes && popup.bestRoutes !== undefined &&
popup.bestRoutes.count > 0 && amountToSendInput.inputNumberValid
isLoading: popup.isLoading
selectedSymbol: d.selectedSymbol
isBridgeTx: d.isBridgeTx
cryptoValueToReceive: d.totalAmountToReceive
inputIsFiat: amountToSendInput.inputIsFiat
minCryptoDecimals: amountToSendInput.minReceiveCryptoDecimals
minFiatDecimals: amountToSendInput.minReceiveFiatDecimals
currentCurrency: popup.currencyStore.currentCurrency
getFiatValue: function(cryptoValue) {
return popup.currencyStore.getFiatValue(cryptoValue, selectedSymbol, currentCurrency)
}
formatCurrencyAmount: popup.currencyStore.formatCurrencyAmount
}
}
}
}
}
ClippingWrapper {
Layout.fillWidth: true
Layout.fillHeight: true
implicitWidth: scrollView.implicitWidth
implicitHeight: scrollView.implicitHeight
clipTopMargin: 40
clipBottomMargin: popup.bottomPadding
StatusScrollView {
id: scrollView
topPadding: 12
anchors.fill: parent
contentWidth: availableWidth
clip: false
objectName: "sendModalScroll"
Column {
id: layout
width: scrollView.availableWidth
spacing: Style.current.bigPadding
anchors.left: parent.left
TokenListView {
id: tokenListRect
anchors.left: parent.left
anchors.right: parent.right
anchors.leftMargin: Style.current.bigPadding
anchors.rightMargin: Style.current.bigPadding
visible: !d.selectedHolding
assets: popup.selectedAccount && popup.selectedAccount.assets ? popup.selectedAccount.assets : null
collectibles: popup.selectedAccount ? popup.nestedCollectiblesModel : null
onlyAssets: holdingSelector.onlyAssets
searchTokenSymbolByAddressFn: function (address) {
return store.findTokenSymbolByAddress(address)
}
getNetworkIcon: function(chainId){
return RootStore.getNetworkIcon(chainId)
}
onTokenSelected: {
d.setSelectedHoldingId(symbol, holdingType)
}
onTokenHovered: {
if(hovered) {
d.setHoveredHoldingId(symbol, holdingType)
} else {
d.setHoveredHoldingId("", Constants.HoldingType.Unknown)
}
}
}
ColumnLayout {
spacing: 8
width: parent.width
anchors.left: parent.left
anchors.right: parent.right
anchors.leftMargin: Style.current.bigPadding
anchors.rightMargin: Style.current.bigPadding
visible: !d.isBridgeTx && !!d.selectedHolding
StatusBaseText {
id: label
elide: Text.ElideRight
text: qsTr("To")
font.pixelSize: 15
color: Theme.palette.directColor1
}
RecipientView {
id: recipientLoader
Layout.fillWidth: true
store: popup.store
isERC721Transfer: d.isERC721Transfer
isBridgeTx: d.isBridgeTx
interactive: popup.interactive
selectedAsset: d.selectedHolding
onIsLoading: popup.isLoading = true
onRecalculateRoutesAndFees: popup.recalculateRoutesAndFees()
}
}
TabAddressSelectorView {
id: addressSelector
anchors.left: parent.left
anchors.right: parent.right
anchors.leftMargin: Style.current.bigPadding
anchors.rightMargin: Style.current.bigPadding
store: popup.store
selectedAccount: popup.selectedAccount
onRecipientSelected: {
recipientLoader.selectedRecipientType = type
recipientLoader.selectedRecipient = recipient
}
visible: !recipientLoader.ready && !d.isBridgeTx && !!d.selectedHolding
}
NetworkSelector {
id: networkSelector
anchors.left: parent.left
anchors.right: parent.right
anchors.leftMargin: Style.current.bigPadding
anchors.rightMargin: Style.current.bigPadding
store: popup.store
interactive: popup.interactive
selectedAccount: popup.selectedAccount
ensAddressOrEmpty: recipientLoader.isENSValid ? recipientLoader.resolvedENSAddress : ""
amountToSend: amountToSendInput.cryptoValueToSend
minSendCryptoDecimals: amountToSendInput.minSendCryptoDecimals
minReceiveCryptoDecimals: amountToSendInput.minReceiveCryptoDecimals
selectedAsset: d.selectedHolding
onReCalculateSuggestedRoute: popup.recalculateRoutesAndFees()
visible: recipientLoader.ready && !!d.selectedHolding && amountToSendInput.inputNumberValid
errorType: d.errorType
isLoading: popup.isLoading
isBridgeTx: d.isBridgeTx
isERC721Transfer: d.isERC721Transfer
}
FeesView {
id: fees
anchors.left: parent.left
anchors.right: parent.right
anchors.leftMargin: Style.current.bigPadding
anchors.rightMargin: Style.current.bigPadding
visible: recipientLoader.ready && !!d.selectedHolding && networkSelector.advancedOrCustomMode && amountToSendInput.inputNumberValid
selectedTokenSymbol: d.selectedSymbol
isLoading: popup.isLoading
bestRoutes: popup.bestRoutes
store: popup.store
gasFiatAmount: d.totalFeesInFiat
errorType: d.errorType
}
}
}
}
}
footer: SendModalFooter {
nextButtonText: d.isBridgeTx ? qsTr("Bridge") : qsTr("Send")
maxFiatFees: popup.isLoading ? "..." : popup.currencyStore.formatCurrencyAmount(d.totalFeesInFiat, popup.currencyStore.currentCurrency)
totalTimeEstimate: popup.isLoading? "..." : d.totalTimeEstimate
pending: d.isPendingTx || popup.isLoading
visible: recipientLoader.ready && amountToSendInput.inputNumberValid && !d.errorMode
onNextButtonClicked: popup.sendTransaction()
}
Connections {
target: popup.store.walletSectionSendInst
function onSuggestedRoutesReady(txRoutes) {
popup.bestRoutes = txRoutes.suggestedRoutes
let gasTimeEstimate = txRoutes.gasTimeEstimate
d.totalTimeEstimate = popup.store.getLabelForEstimatedTxTime(gasTimeEstimate.totalTime)
d.totalFeesInFiat = popup.currencyStore.getFiatValue( gasTimeEstimate.totalFeesInEth, "ETH", popup.currencyStore.currentCurrency) +
popup.currencyStore.getFiatValue(gasTimeEstimate.totalTokenFees, fees.selectedTokenSymbol, popup.currencyStore.currentCurrency)
d.totalAmountToReceive = popup.store.getWei2Eth(txRoutes.amountToReceive, d.selectedHolding.decimals)
networkSelector.toNetworksList = txRoutes.toNetworksModel
popup.isLoading = false
}
}
Connections {
target: popup.store.walletSectionSendInst
function onTransactionSent(chainId: int, txHash: string, uuid: string, error: string) {
d.isPendingTx = false
if (uuid !== d.uuid) return
if (!!error) {
if (error.includes(Constants.walletSection.cancelledMessage)) {
return
}
sendingError.text = error
return sendingError.open()
}
let url = "%1/%2".arg(popup.store.getEtherscanLink(chainId)).arg(txHash)
Global.displayToastMessage(qsTr("Transaction pending..."),
qsTr("View on etherscan"),
"",
true,
Constants.ephemeralNotificationType.normal,
url)
popup.close()
}
}
}