Skip to content

Commit

Permalink
feat(@desktop/wallet): Move the Account Selector logic to show select…
Browse files Browse the repository at this point in the history 
…ed token balance on a sepcific network to a dedicated WalletAccountsSelectorAdaptor

fixes #16705
  • Loading branch information
@Khushboo-dev-cpp
Khushboo-dev-cpp committed Jan 6, 2025
1 parent 751f274 commit 7f5fe66
Show file tree
Hide file tree
Showing 12 changed files with 905 additions and 201 deletions.
213 changes: 185 additions & 28 deletions storybook/pages/AccountSelectorPage.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,48 +7,205 @@ import Models 1.0
import SortFilterProxyModel 0.2

import shared.controls 1.0
import shared.stores 1.0

Item {
import AppLayouts.Wallet.stores 1.0
import AppLayouts.Wallet.adaptors 1.0

import utils 1.0

SplitView {
id: root

ColumnLayout {
spacing: 16
anchors.centerIn: parent
implicitWidth: 150
orientation: Qt.Vertical

QtObject {
id: d

WalletAccountsModel {
id: accountsModel
readonly property var flatNetworks: NetworksModel.flatNetworks
readonly property var assetsStore: WalletAssetsStore {
id: thisWalletAssetStore
walletTokensStore: TokensStore {
plainTokensBySymbolModel: TokensBySymbolModel {}
}
readonly property var baseGroupedAccountAssetModel: GroupedAccountsAssetsModel {}
assetsWithFilteredBalances: thisWalletAssetStore.groupedAccountsAssetsModel
}

Label {
text: "Default style"
font.bold: true
Layout.fillWidth: true
readonly property var currencyStore: CurrenciesStore{}
readonly property var nonWatchWalletAcounts: SortFilterProxyModel {
sourceModel: walletAccountsModel
filters: ValueFilter { roleName: "canSend"; value: true }
}
AccountSelector {
id: accountSelector
Layout.fillWidth: true
model: WalletAccountsModel {}
onCurrentAccountAddressChanged: {
accountSelector2.selectedAddress = currentAccountAddress

readonly property var filteredFlatNetworksModel: SortFilterProxyModel {
sourceModel: d.flatNetworks
filters: ValueFilter { roleName: "isTest"; value: true }
}
}

ListModel {
id: walletAccountsModel
readonly property var data: [
{
name: "helloworld",
address: "0x7F47C2e18a4BBf5487E6fb082eC2D9Ab0E6d7240",
emoji: "😋",
colorId: Constants.walletAccountColors.primary,
walletType: "",
canSend: true,
position: 0,
currencyBalance: ({amount: 1.25,
symbol: "USD",
displayDecimals: 2,
stripTrailingZeroes: false}),
migratedToKeycard: true
},
{
name: "Hot wallet (generated)",
emoji: "🚗",
colorId: Constants.walletAccountColors.army,
address: "0x7F47C2e98a4BBf5487E6fb082eC2D9Ab0E6d8881",
walletType: Constants.generatedWalletType,
canSend: true,
position: 3,
currencyBalance: ({amount: 10,
symbol: "USD",
displayDecimals: 2,
stripTrailingZeroes: false}),
migratedToKeycard: false
},
{
name: "Family (seed)",
emoji: "🎨",
colorId: Constants.walletAccountColors.magenta,
address: "0x7F47C2e98a4BBf5487E6fb082eC2D9Ab0E6d8882",
walletType: Constants.seedWalletType,
canSend: true,
position: 1,
currencyBalance: ({amount: 110.05,
symbol: "USD",
displayDecimals: 2,
stripTrailingZeroes: false}),
migratedToKeycard: false
},
{
name: "Tag Heuer (watch)",
emoji: "⌚",
colorId: Constants.walletAccountColors.copper,
color: "#CB6256",
address: "0x7F47C2e98a4BBf5487E6fb082eC2D9Ab0E6d8883",
walletType: Constants.watchWalletType,
canSend: false,
position: 2,
currencyBalance: ({amount: 3,
symbol: "USD",
displayDecimals: 2,
stripTrailingZeroes: false}),
migratedToKeycard: false
},
{
name: "Fab (key)",
emoji: "🔑",
colorId: Constants.walletAccountColors.camel,
color: "#C78F67",
address: "0x7F47C2e98a4BBf5487E6fb082eC2D9Ab0E6d8884",
walletType: Constants.keyWalletType,
canSend: true,
position: 4,
currencyBalance: ({amount: 999,
symbol: "USD",
displayDecimals: 2,
stripTrailingZeroes: false}),
migratedToKeycard: false
}
]

Component.onCompleted: append(data)
}

WalletAccountsSelectorAdaptor {
id: walletAccountsSelectorAdaptor

accounts: walletAccountsModel
assetsModel: d.assetsStore.groupedAccountAssetsModel
tokensBySymbolModel: d.assetsStore.walletTokensStore.plainTokensBySymbolModel
filteredFlatNetworksModel: d.filteredFlatNetworksModel

selectedTokenKey: selectedTokenComboBox.currentValue
selectedNetworkChainId: networksComboBox.currentValue

fnFormatCurrencyAmountFromBigInt: function(balance, symbol, decimals, options = null) {
return d.currencyStore.formatCurrencyAmountFromBigInt(balance, symbol, decimals, options)
}
}

Item {
SplitView.preferredWidth: 150
SplitView.fillHeight: true
ColumnLayout {
spacing: 16
width: 150

Label {
text: "Header style"
font.bold: true
Layout.fillWidth: true
WalletAccountsModel {
id: accountsModel
}

Label {
text: "Default style"
font.bold: true
Layout.fillWidth: true
}
AccountSelector {
id: accountSelector
Layout.fillWidth: true
model: WalletAccountsModel {}
onCurrentAccountAddressChanged: {
accountSelector2.selectedAddress = currentAccountAddress
}
}

Label {
text: "Header style"
font.bold: true
Layout.fillWidth: true
}
AccountSelectorHeader {
id: accountSelector2
model: walletAccountsSelectorAdaptor.processedWalletAccounts
onCurrentAccountAddressChanged: {
accountSelector.selectedAddress = currentAccountAddress
}
}
}
AccountSelectorHeader {
id: accountSelector2
model: accountSelector.model
onCurrentAccountAddressChanged: {
accountSelector.selectedAddress = currentAccountAddress

}

Item {
SplitView.preferredWidth: 300
SplitView.preferredHeight: childrenRect.height

ColumnLayout {

Label { text: "Selected Token" }
ComboBox {
id: selectedTokenComboBox
textRole: "name"
valueRole: "key"
model: d.assetsStore.walletTokensStore.plainTokensBySymbolModel
currentIndex: -1
}

Label { text: "Selected Network" }
ComboBox {
id: networksComboBox
textRole: "chainName"
valueRole: "chainId"
model: d.filteredFlatNetworksModel
currentIndex: -1
}
}

}
}
}

// category: Components
43 changes: 34 additions & 9 deletions storybook/pages/SimpleSendModalPage.qml
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

import SortFilterProxyModel 0.2

import StatusQ 0.1
import StatusQ.Core 0.1
import StatusQ.Core.Utils 0.1
import StatusQ.Core.Backpressure 0.1

import Models 1.0
Expand All @@ -32,6 +33,10 @@ SplitView {

readonly property WalletAssetsStore walletAssetStore: WalletAssetsStore {
assetsWithFilteredBalances: groupedAccountsAssetsModel
walletTokensStore: TokensStore {
plainTokensBySymbolModel: TokensBySymbolModel{}
getDisplayAssetsBelowBalanceThresholdDisplayAmount: () => 0
}
}

readonly property var walletAccountsModel: WalletAccountsModel{}
Expand Down Expand Up @@ -66,6 +71,14 @@ SplitView {
simpleSend.estimatedFiatFees = "1.45 EUR"
simpleSend.estimatedCryptoFees = "0.0007 ETH"
})

function formatCurrencyAmount(amount, symbol, options = null, locale = null) {
if (isNaN(amount)) {
return "N/A"
}
var currencyAmount = d.getCurrencyAmount(amount, symbol)
return LocaleUtils.currencyAmountToLocaleString(currencyAmount, options, locale)
}
}

PopupBackground {
Expand Down Expand Up @@ -95,7 +108,7 @@ SplitView {

interactive: interactiveCheckbox.checked

accountsModel: d.walletAccountsModel
accountsModel: accountsSelectorAdaptor.processedWalletAccounts
assetsModel: assetsSelectorViewAdaptor.outputAssetsModel
collectiblesModel: collectiblesSelectionAdaptor.model
networksModel: d.filteredNetworksModel
Expand All @@ -104,13 +117,7 @@ SplitView {
recentRecipientsModel: WalletTransactionsModel{}

currentCurrency: "USD"
fnFormatCurrencyAmount: function(amount, symbol, options = null, locale = null) {
if (isNaN(amount)) {
return "N/A"
}
var currencyAmount = d.getCurrencyAmount(amount, symbol)
return LocaleUtils.currencyAmountToLocaleString(currencyAmount, options, locale)
}
fnFormatCurrencyAmount: d.formatCurrencyAmount

fnResolveENS: Backpressure.debounce(root, 500, function (ensName, uuid) {
if (!!ensName && ensName.endsWith(".eth")) {
Expand Down Expand Up @@ -144,6 +151,24 @@ SplitView {
}
}

WalletAccountsSelectorAdaptor {
id: accountsSelectorAdaptor

accounts: d.walletAccountsModel
assetsModel: GroupedAccountsAssetsModel {}
tokensBySymbolModel: d.walletAssetStore.walletTokensStore.plainTokensBySymbolModel
filteredFlatNetworksModel: d.filteredNetworksModel

selectedTokenKey: simpleSend.selectedTokenKey
selectedNetworkChainId: simpleSend.selectedChainId

fnFormatCurrencyAmountFromBigInt: function(balance, symbol, decimals, options = null) {
let bigIntBalance = AmountsArithmetic.fromString(balance)
let decimalBalance = AmountsArithmetic.toNumber(bigIntBalance, decimals)
return d.formatCurrencyAmount(decimalBalance, symbol, options)
}
}

TokenSelectorViewAdaptor {
id: assetsSelectorViewAdaptor

Expand Down
Loading

0 comments on commit 7f5fe66

Please sign in to comment.