[PLA-1925] add deposit fee

[zlayine]

PR Type

Enhancement

---

Description

• Added a new section in the SignTransaction.vue component to display the deposit fee.
• Introduced a new reactive variable deposit to handle the deposit fee.
• Updated the signTransaction function to calculate and set the deposit fee.

---

Changes walkthrough 📝

	Relevant files
Enhancement	SignTransaction.vue Add deposit fee display in transaction summary                      resources/js/components/SignTransaction.vue Added a new section to display the deposit fee in the transaction summary. Introduced a new reactive variable deposit to store the deposit fee. Updated the signTransaction function to calculate and set the deposit fee. +8/-0

---

💡 PR-Agent usage:
Comment /help on the PR to get a list of all available PR-Agent tools and their descriptions

[github-actions]

PR Reviewer Guide 🔍

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Key issues to review Missing Validation The new deposit reactive variable should have validation to ensure it does not receive invalid values. This is crucial since it directly affects the UI and transaction integrity. Error Handling The signTransaction function updates the deposit value but lacks error handling specific to the deposit calculation. Consider adding error handling to manage cases where props.transaction.deposit might be undefined or invalid.

[github-actions]

PR Code Suggestions ✨

Category	Suggestion	Score
Error handling	Implement error handling for deposit calculations to enhance robustness Add error handling for the new deposit ref within the signTransaction function to manage cases where the deposit calculation fails. resources/js/components/SignTransaction.vue [110] -deposit.value = formatPriceFromENJ(props.transaction.deposit)?.toFixed(5); +try { + deposit.value = formatPriceFromENJ(props.transaction.deposit)?.toFixed(5); +} catch (error) { + console.error('Error calculating deposit:', error); + deposit.value = null; +} Suggestion importance[1-10]: 10 Why: This suggestion significantly enhances the robustness of the code by adding error handling for the deposit calculation. It ensures that any errors in the calculation process are caught and managed appropriately.	10
Possible bug	Add a conditional check to handle potential null or undefined inputs in props.transaction.deposit Ensure that the formatPriceFromENJ function can handle cases where props.transaction.deposit might be undefined or null to prevent runtime errors. resources/js/components/SignTransaction.vue [110] -deposit.value = formatPriceFromENJ(props.transaction.deposit)?.toFixed(5); +deposit.value = props.transaction.deposit ? formatPriceFromENJ(props.transaction.deposit)?.toFixed(5) : null; Suggestion importance[1-10]: 9 Why: This suggestion prevents runtime errors by ensuring that formatPriceFromENJ is only called when props.transaction.deposit is defined. It addresses a possible bug that could cause the application to crash.	9
Possible issue	Add checks for null or undefined values to ensure the deposit fee is displayed correctly Consider adding a null or undefined check for deposit before rendering the deposit fee section to ensure that the UI does not display misleading or incorrect information if deposit is not properly set. resources/js/components/SignTransaction.vue [30-35] -<div v-if="deposit" class="inline-flex space-x-1 mb-2"> +<div v-if="deposit && deposit !== null && deposit !== undefined" class="inline-flex space-x-1 mb-2"> <span> Deposit fee: </span> <span class="font-bold animate-fade-in"> {{ `${deposit} ${currencySymbolByNetwork(useAppStore().config.network)}` }} </span> </div> Suggestion importance[1-10]: 8 Why: This suggestion adds robustness by ensuring that the UI does not display incorrect information if deposit is not properly set. It addresses a potential issue that could lead to misleading UI behavior.	8
Maintainability	Use a computed property for cleaner and more maintainable code Consider using a computed property for the deposit fee display logic to simplify the template and improve reactivity and maintainability. resources/js/components/SignTransaction.vue [30-35] -<div v-if="deposit" class="inline-flex space-x-1 mb-2"> +<div v-if="displayDepositFee" class="inline-flex space-x-1 mb-2"> <span> Deposit fee: </span> <span class="font-bold animate-fade-in"> - {{ `${deposit} ${currencySymbolByNetwork(useAppStore().config.network)}` }} + {{ displayDepositFee }} </span> </div> Suggestion importance[1-10]: 6 Why: Using a computed property can improve code maintainability and reactivity. However, it is a minor improvement compared to the other suggestions which address potential bugs and issues.	6