status-desktop/storybook/pages/DAppSignRequestModalPage.qml
Alex Jbanca 793aeb15c3 fix(Dapps): Fixing fees in transaction requests
Fixes:
1. Fixing the laggy scrolling on transaction requiests popups. The root cause of this issue was the fees request and also the estimated time request. These periodic requests were blocking. Now we'll call these API async.
2. Fixing the max fees: The fees computation was using 21k as gasLimit. This value was hardcoded in WC. Now we're requesting the gasLimit if it's not provided by the dApp. This call is also async.
3. Fixing the periodicity of the fees computation. The fees were computed by the client only if the tx object didn't already provide the fees. But the tx could fail if when the fees are highly volatile because it was not being overridden. Now Status is computing the fees periodically for all tx requests.
4. Fixing an issue where the loading state of the fees text in the modal was showing text underneath the loading animation. Fixed by updating the AnimatedText to support a custom target property. The text component used for session requests is using `cusomColor` property to set the text color and the `color` for the text must not be overriden.
2024-11-22 11:32:41 +02:00

156 lines
6.1 KiB
QML

// category: Popups
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import shared.popups.walletconnect 1.0
import utils 1.0
import Storybook 1.0
SplitView {
id: root
PopupBackground {
SplitView.fillWidth: true
SplitView.fillHeight: true
Button {
anchors.centerIn: parent
text: "Open"
onClicked: dappSignRequestModal.visible = true
}
DAppSignRequestModal {
id: dappSignRequestModal
loginType: loginType.currentValue
formatBigNumber: (number, symbol, noSymbolOption) => parseFloat(number).toLocaleString(Qt.locale(), 'f', 2)
+ (noSymbolOption ? "" : " " + (symbol || Qt.locale().currencySymbol(Locale.CurrencyIsoCode)))
visible: true
modal: false
dappUrl: "https://example.com"
dappIcon: "https://picsum.photos/200/200"
dappName: "OpenSea"
accountColor: "blue"
accountName: "Account Name"
accountAddress: "0xE2d622C817878dA5143bBE06866ca8E35273Ba8"
networkName: "Ethereum"
networkIconPath: "https://picsum.photos/200/200"
fiatFees: fiatFees.text
cryptoFees: "0.001"
estimatedTime: "3-5 minutes"
feesLoading: feesLoading.checked
estimatedTimeLoading: feesLoading.checked
hasFees: hasFees.checked
enoughFundsForTransaction: enoughFeesForTransaction.checked
enoughFundsForFees: enoughFeesForGas.checked || !feesLoading.checked
// sun emoji
accountEmoji: "\u2600"
requestPayload: controls.contentToSign[contentToSignComboBox.currentIndex]
signingTransaction: signingTransaction.checked
expirationSeconds: !!ctrlExpiration.text && parseInt(ctrlExpiration.text) ? parseInt(ctrlExpiration.text) : 0
onExpirationSecondsChanged: requestTimestamp = new Date()
onAccepted: print ("Accepted")
onRejected: print ("Rejected")
onClosed: print("Closed")
}
}
Pane {
id: controls
SplitView.preferredWidth: 300
SplitView.fillHeight: true
readonly property var contentToSign: ['{
"id": 1714038548266495,
"params": {
"chainld": "eip155:11155111",
"request": {
"expiryTimestamp": 1714038848,
"method": "eth_signTransaction",
"params": [{
"data": "0x",
"from": "0xE2d622C817878dA5143bBE06866ca8E35273Ba8",
"gasLimit": "0x5208",
"gasPrice": "0xa677ef31",
"nonce": "0x27",
"to": "0xE2d622C817878dA5143bBE06866ca8E35273Ba8a",
"value": "0x00"
}]
}
},
"topic": "a0f85b23a1f3a540d85760a523963165fb92169d57320c",
"verifyContext": {
"verified": {
"isScam": false,
"origin": "https://react-app.walletconnect.com/",
"validation": "VALID",
"verifyUrl": "https://verify.walletconnect.com/"
}
}
}',
"
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce nibh. Etiam quis quam. In dapibus augue non sapien. Praesent id justo in neque elementum ultrices. Morbi scelerisque luctus velit. Vivamus ac leo pretium faucibus. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Nullam eget nisl. Aliquam erat volutpat.
Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo. Fusce nibh. Etiam quis quam. In dapibus augue non sapien. Praesent id justo in neque elementum ultrices. Fusce nibh. Etiam quis quam. In dapibus augue non sapien. Praesent id justo in neque elementum ultrices. Fusce nibh. Etiam quis quam. In dapibus augue non sapien. Praesent id justo in neque elementum ultrices. Fusce nibh. Etiam quis quam. In dapibus augue non sapien. Praesent id justo in neque elementum ultrices.
",
'"tx":{"data":"0x","from":"0xE2d622C817878dA5143bBE06866ca8E35273Ba8a","gasLimit":"0x5208","gasPrice":"0x048ddbc5","nonce":"0x2a","to":"0xE2d622C817878dA5143bBE06866ca8E35273Ba8a","value":"0x00"}',
""
]
ColumnLayout {
TextField {
id: fiatFees
text: "1.54"
}
ComboBox {
id: loginType
model: [{name: "Password", value: Constants.LoginType.Password}, {name: "Biometrics", value: Constants.LoginType.Biometrics}, {name: "Keycard", value: Constants.LoginType.Keycard}]
textRole: "name"
valueRole: "value"
currentIndex: 0
}
ComboBox {
id: contentToSignComboBox
model: ["Long content to sign", "Middle content to sign", "Short content to sign", "Empty content to sign"]
currentIndex: 0
}
CheckBox {
id: enoughFeesForTransaction
text: "Enough fees for transaction"
checked: true
}
CheckBox {
id: enoughFeesForGas
text: "Enough fees for gas"
checked: true
}
CheckBox {
id: feesLoading
text: "Fees loading"
checked: true
}
CheckBox {
id: hasFees
text: "Has fees"
checked: true
}
CheckBox {
id: signingTransaction
text: "Signing transaction"
checked: false
}
TextField {
id: ctrlExpiration
placeholderText: "Expiration in seconds"
}
}
}
}