status-desktop/ui/app/AppLayouts/Communities/views/EditAirdropView.qml

644 lines
22 KiB
QML

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import StatusQ.Components 0.1
import StatusQ.Controls 0.1
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Core.Utils 0.1
import utils 1.0
import shared.panels 1.0
import AppLayouts.Communities.controls 1.0
import AppLayouts.Communities.helpers 1.0
import AppLayouts.Communities.panels 1.0
import AppLayouts.Communities.popups 1.0
import SortFilterProxyModel 0.2
StatusScrollView {
id: root
// id, name, image, color, owner properties expected
required property var communityDetails
// Token models:
required property var assetsModel
required property var collectiblesModel
// Community members model:
required property var membersModel
// A model containing accounts from which the fee can be paid:
required property var accountsModel
// Text to display as total fee
required property string totalFeeText
// Text to display in case of error
required property string feeErrorText
// Array containing the fees for each token
// [{contractUniqueKey: string, feeText: string}]
required property var feesPerSelectedContract
// Bool property indicating whether the fees are available
required property bool feesAvailable
property string enabledChainIds
property int viewWidth: 560 // by design
readonly property var selectedHoldingsModel: ListModel {}
// Array containing the contract keys and amounts of the tokens to be airdropped
readonly property alias selectedContractKeysAndAmounts: d.selectedContractKeysAndAmounts
// Array containing the addresses to which the tokens will be airdropped
readonly property alias selectedAddressesToAirdrop: d.selectedAddressesToAirdrop
// The address of the account from which the fee will be paid
readonly property alias selectedFeeAccount: d.selectedFeeAccount
// Bool property indicating whether the fees are shown
readonly property bool showingFees: d.showFees
onFeesPerSelectedContractChanged: {
feesModel.clear()
let feeSource = feesPerSelectedContract
if(!feeSource || feeSource.length === 0) // if no fees are available, show the placeholder text based on selection
feeSource = ModelUtils.modelToArray(root.selectedHoldingsModel, ["contractUniqueKey"])
feeSource.forEach(entry => {
feesModel.append({
contractUniqueKey: entry.contractUniqueKey,
title: qsTr("Airdrop %1 on %2")
.arg(ModelUtils.getByKey(root.selectedHoldingsModel, "contractUniqueKey", entry.contractUniqueKey, "symbol"))
.arg(ModelUtils.getByKey(root.selectedHoldingsModel, "contractUniqueKey", entry.contractUniqueKey, "networkText")),
feeText: entry.feeText ?? ""
})
})
}
ModelChangeTracker {
id: holdingsModelTracker
model: selectedHoldingsModel
}
ModelChangeTracker {
id: addressesModelTracker
model: addresses
}
ModelChangeTracker {
id: membersModelTracker
model: selectedMembersModel
}
readonly property bool isFullyFilled: tokensSelector.count > 0 &&
airdropRecipientsSelector.count > 0 &&
airdropRecipientsSelector.valid
signal airdropClicked(var airdropTokens, var addresses, string feeAccountAddress)
signal navigateToMintTokenSettings(bool isAssetType)
signal enableNetwork(int chainId)
function selectToken(key, amount, type) {
if(selectedHoldingsModel)
selectedHoldingsModel.clear()
const entry = d.prepareEntry(key, amount, type)
entry.valid = true
selectedHoldingsModel.append(entry)
}
function addAddresses(_addresses) {
addresses.addAddresses(_addresses)
}
QtObject {
id: d
readonly property int maxAirdropTokens: 5
readonly property int dropdownHorizontalOffset: 4
readonly property int dropdownVerticalOffset: 1
readonly property bool showFees: root.selectedHoldingsModel.count > 0
&& airdropRecipientsSelector.valid
&& airdropRecipientsSelector.count > 0
property string networkThatIsNotActive
property int networkIdThatIsNotActive
readonly property var selectedContractKeysAndAmounts: {
//Depedencies:
root.selectedHoldingsModel
holdingsModelTracker.revision
return ModelUtils.modelToArray(
root.selectedHoldingsModel,
["contractUniqueKey", "amount"])
}
readonly property var selectedAddressesToAirdrop: {
//Dependecies:
addresses
addressesModelTracker.revision
return ModelUtils.modelToArray(
addresses, ["address"]).map(e => e.address)
.concat([...selectedKeysFilter.keys])
}
readonly property string selectedFeeAccount: feesBox.accountsSelector.currentAccountAddress
function prepareEntry(key, amount, type) {
const tokenModel = type === Constants.TokenType.ERC20
? root.assetsModel : root.collectiblesModel
const modelItem = PermissionsHelpers.getTokenByKey(
tokenModel, key)
const multiplierIndex = modelItem.multiplierIndex
const amountNumber = AmountsArithmetic.toNumber(
amount, multiplierIndex)
const amountLocalized = LocaleUtils.numberToLocaleString(
amountNumber, -1)
return {
key, amount, type,
tokenText: amountLocalized + " " + modelItem.name,
tokenImage: modelItem.iconSource,
networkId: modelItem.chainId,
networkText: modelItem.chainName,
networkImage: Style.svg(modelItem.chainIcon),
remainingSupply: modelItem.remainingSupply,
multiplierIndex: modelItem.multiplierIndex,
infiniteSupply: modelItem.infiniteSupply,
contractUniqueKey: modelItem.contractUniqueKey,
accountName: modelItem.accountName,
symbol: modelItem.symbol
}
}
}
ListModel {
id: feesModel
}
Instantiator {
id: recipientsCountInstantiator
model: selectedHoldingsModel
property bool infinity: true
property int maximumRecipientsCount
function findRecipientsCount() {
let min = Number.MAX_SAFE_INTEGER
for (let i = 0; i < count; i++) {
const item = objectAt(i)
if (!item || item.infiniteSupply)
continue
const dividient = AmountsArithmetic.fromString(item.remainingSupply)
const divisor = AmountsArithmetic.fromString(item.amount)
const quotient = AmountsArithmetic.toNumber(
AmountsArithmetic.div(dividient, divisor))
min = Math.min(quotient, min)
}
infinity = min === Number.MAX_SAFE_INTEGER
maximumRecipientsCount = infinity ? 0 : min
}
delegate: QtObject {
readonly property string remainingSupply: model.remainingSupply
readonly property string amount: model.amount
readonly property bool infiniteSupply: model.infiniteSupply
readonly property bool valid: {
if (infiniteSupply)
return true
const recipientsCount = airdropRecipientsSelector.count
const demand = AmountsArithmetic.times(
AmountsArithmetic.fromString(amount),
recipientsCount)
const available = AmountsArithmetic.fromString(remainingSupply)
return AmountsArithmetic.cmp(demand, available) <= 0
}
onRemainingSupplyChanged: recipientsCountInstantiator.findRecipientsCount()
onAmountChanged: recipientsCountInstantiator.findRecipientsCount()
onInfiniteSupplyChanged: recipientsCountInstantiator.findRecipientsCount()
onValidChanged: model.valid = valid
Component.onCompleted: model.valid = valid
}
onCountChanged: findRecipientsCount()
}
SequenceColumnLayout {
id: mainLayout
width: root.viewWidth
spacing: 0
AirdropTokensSelector {
id: tokensSelector
property int editedIndex: -1
Layout.fillWidth: true
icon: Style.svg("token")
title: qsTr("What")
placeholderText: qsTr("Example: 1 SOCK")
addButton.visible: model.count < d.maxAirdropTokens
model: root.selectedHoldingsModel
HoldingsDropdown {
id: dropdown
communityId: communityDetails.id
assetsModel: root.assetsModel
collectiblesModel: root.collectiblesModel
isENSTab: false
noDataTextForAssets: qsTr("First you need to mint or import an asset before you can perform an airdrop")
noDataTextForCollectibles: qsTr("First you need to mint or import a collectible before you can perform an airdrop")
function getHoldingIndex(key) {
return ModelUtils.indexOf(root.selectedHoldingsModel, "key", key)
}
function prepareUpdateIndex(key) {
const itemIndex = tokensSelector.editedIndex
const existingIndex = getHoldingIndex(key)
if (itemIndex !== -1 && existingIndex !== -1 && itemIndex !== existingIndex) {
const previousKey = root.selectedHoldingsModel.get(itemIndex).key
root.selectedHoldingsModel.remove(existingIndex)
return getHoldingIndex(previousKey)
}
if (itemIndex === -1) {
return existingIndex
}
return itemIndex
}
onOpened: {
usedTokens = ModelUtils.modelToArray(
root.selectedHoldingsModel, ["key", "amount"])
}
function isChainEnabled(entry) {
// If the tokens' network is not activated, show a warning to the user
if (!!entry && !root.enabledChainIds.includes(entry.networkId)) {
d.networkThatIsNotActive = entry.networkText
d.networkIdThatIsNotActive = entry.networkId
} else {
d.networkThatIsNotActive = ""
d.networkIdThatIsNotActive = 0
}
}
onAddAsset: {
const entry = d.prepareEntry(key, amount, Constants.TokenType.ERC20)
entry.valid = true
selectedHoldingsModel.append(entry)
dropdown.close()
isChainEnabled(entry)
}
onAddCollectible: {
const entry = d.prepareEntry(key, amount, Constants.TokenType.ERC721)
entry.valid = true
selectedHoldingsModel.append(entry)
dropdown.close()
isChainEnabled(entry)
}
onUpdateAsset: {
const itemIndex = prepareUpdateIndex(key)
const entry = d.prepareEntry(key, amount, Constants.TokenType.ERC20)
root.selectedHoldingsModel.set(itemIndex, entry)
dropdown.close()
}
onUpdateCollectible: {
const itemIndex = prepareUpdateIndex(key)
const entry = d.prepareEntry(key, amount, Constants.TokenType.ERC721)
root.selectedHoldingsModel.set(itemIndex, entry)
dropdown.close()
}
onRemoveClicked: {
root.selectedHoldingsModel.remove(tokensSelector.editedIndex)
dropdown.close()
}
onNavigateToMintTokenSettings: {
root.navigateToMintTokenSettings(isAssetType)
close()
}
}
addButton.onClicked: {
dropdown.parent = tokensSelector.addButton
dropdown.x = tokensSelector.addButton.width + d.dropdownHorizontalOffset
dropdown.y = 0
dropdown.open()
editedIndex = -1
}
onItemClicked: {
if (mouse.button !== Qt.LeftButton)
return
dropdown.parent = item
dropdown.x = mouse.x + d.dropdownHorizontalOffset
dropdown.y = d.dropdownVerticalOffset
const modelItem = selectedHoldingsModel.get(index)
switch(modelItem.type) {
case Constants.TokenType.ERC20:
dropdown.assetKey = modelItem.key
dropdown.assetAmount = modelItem.amount
dropdown.assetMultiplierIndex = modelItem.multiplierIndex
dropdown.setActiveTab(Constants.TokenType.ERC20)
break
case Constants.TokenType.ERC721:
dropdown.collectibleKey = modelItem.key
dropdown.collectibleAmount = modelItem.amount
dropdown.setActiveTab(Constants.TokenType.ERC721)
break
default:
console.warn("Unsupported token type.")
}
dropdown.openUpdateFlow()
editedIndex = index
}
}
SequenceColumnLayout.Separator {}
AirdropRecipientsSelector {
id: airdropRecipientsSelector
addressesModel: addresses
infiniteMaxNumberOfRecipients:
recipientsCountInstantiator.infinity
maxNumberOfRecipients:
recipientsCountInstantiator.maximumRecipientsCount
membersModel: SortFilterProxyModel {
id: selectedMembersModel
sourceModel: membersModel
filters: ExpressionFilter {
id: selectedKeysFilter
property var keys: new Set()
expression: keys.has(model.airdropAddress) && model.airdropAddress !== ""
}
}
onRemoveMemberRequested: {
const airdropAddress = ModelUtils.get(membersModel, index, "airdropAddress")
selectedKeysFilter.keys.delete(airdropAddress)
selectedKeysFilter.keys = new Set([...selectedKeysFilter.keys])
}
onAddAddressesRequested: (addresses_) => {
addresses.addAddressesFromString(addresses_)
airdropRecipientsSelector.clearAddressesInput()
airdropRecipientsSelector.positionAddressesListAtEnd()
}
onRemoveAddressRequested: addresses.remove(index)
ListModel {
id: addresses
function addAddresses(_addresses) {
const existing = new Set()
for (let i = 0; i < count; i++)
existing.add(get(i).address)
_addresses.forEach(address => {
if (existing.has(address))
return
const valid = Utils.isValidAddress(address)
append({ valid, address })
})
}
function addAddressesFromString(addressesString) {
const words = addressesString.trim().split(/[\s+,]/)
const wordsNonEmpty = words.filter(word => !!word)
addAddresses(wordsNonEmpty)
}
}
function openPopup(popup) {
popup.parent = addButton
popup.x = addButton.width + d.dropdownHorizontalOffset
popup.y = 0
popup.open()
}
addButton.onClicked: openPopup(recipientTypeSelectionDropdown)
RecipientTypeSelectionDropdown {
id: recipientTypeSelectionDropdown
onEthAddressesSelected: {
airdropRecipientsSelector.showAddressesInputWhenEmpty = true
airdropRecipientsSelector.forceInputFocus()
recipientTypeSelectionDropdown.close()
}
onCommunityMembersSelected: {
recipientTypeSelectionDropdown.close()
membersDropdown.selectedKeys = selectedKeysFilter.keys
const hasSelection = selectedKeysFilter.keys.size !== 0
membersDropdown.mode = hasSelection
? MembersDropdown.Mode.Update
: MembersDropdown.Mode.Add
airdropRecipientsSelector.openPopup(membersDropdown)
}
}
MembersDropdown {
id: membersDropdown
forceButtonDisabled:
mode === MembersDropdown.Mode.Update &&
[...selectedKeys].sort().join() === [...selectedKeysFilter.keys].sort().join()
model: SortFilterProxyModel {
sourceModel: membersModel
filters: [
ExpressionFilter {
enabled: membersDropdown.searchText !== ""
function matchesAlias(name, filter) {
return name.split(" ").some(p => p.startsWith(filter))
}
expression: {
membersDropdown.searchText
const filter = membersDropdown.searchText.toLowerCase()
return matchesAlias(model.alias.toLowerCase(), filter)
|| model.displayName.toLowerCase().includes(filter)
|| model.ensName.toLowerCase().includes(filter)
|| model.localNickname.toLowerCase().includes(filter)
|| model.pubKey.toLowerCase().includes(filter)
}
},
ExpressionFilter {
expression: !!model.airdropAddress
}
]
}
onBackButtonClicked: {
close()
airdropRecipientsSelector.openPopup(
recipientTypeSelectionDropdown)
}
onAddButtonClicked: {
selectedKeysFilter.keys = selectedKeys
close()
}
}
}
SequenceColumnLayout.Separator {}
FeesBox {
id: feesBox
Layout.fillWidth: true
model: feesModel
accountsSelector.model: root.accountsModel
totalFeeText: root.totalFeeText
placeholderText: qsTr("Add valid “What” and “To” values to see fees")
accountErrorText: root.feeErrorText
}
WarningPanel {
id: notEnoughTokensWarning
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
}
NetworkWarningPanel {
visible: !!d.networkThatIsNotActive
Layout.fillWidth: true
Layout.topMargin: Style.current.padding
networkThatIsNotActive: d.networkThatIsNotActive
onEnableNetwork: {
root.enableNetwork(d.networkIdThatIsNotActive)
d.networkThatIsNotActive = ""
d.networkIdThatIsNotActive = 0
}
}
StatusButton {
Layout.preferredHeight: 44
Layout.alignment: Qt.AlignHCenter
Layout.fillWidth: true
Layout.topMargin: Style.current.bigPadding
text: qsTr("Create airdrop")
enabled: root.isFullyFilled && root.feesAvailable && root.feeErrorText === ""
onClicked: {
feesPopup.accountAddress = feesBox.accountsSelector.currentAccountAddress
feesPopup.accountName = feesBox.accountsSelector.currentAccount.name ?? ""
feesPopup.open()
}
}
SignTransactionsPopup {
id: feesPopup
property string accountAddress
destroyOnClose: false
model: feesModel
totalFeeText: root.totalFeeText
errorText: root.feeErrorText
onOpened: {
const title1 = qsTr("Sign transaction - Airdrop %n token(s)", "",
selectedHoldingsModel.rowCount())
const title2 = qsTr("to %n recipient(s)", "",
addresses.count + airdropRecipientsSelector.membersModel.count)
title = `${title1} ${title2}`
}
onSignTransactionClicked: {
const airdropTokens = ModelUtils.modelToArray(
root.selectedHoldingsModel,
["contractUniqueKey", "amount"])
const addresses_ = ModelUtils.modelToArray(
addresses, ["address"]).map(e => e.address)
const airdropAddresses = [...selectedKeysFilter.keys]
root.airdropClicked(airdropTokens, addresses_.concat(airdropAddresses),
accountAddress)
}
}
}
}