TransferMenu bug fixes and refactor (#454)

* fix: Watch props.price to update the transfer amount asap

* refactor: remove unused shieldEnabled prop

* refactor: avoid using useWallet

* feat: split balance emits in balance-update and price-update

* test: fix broken test

* refactor: remove unused imports

scripts/composables/use_settings.js

@@ -46,7 +46,7 @@ export function useSettings() {
     getEventEmitter().on('advanced-mode', (fAdvancedMode) => {
         advancedMode.value = fAdvancedMode;
     });
-    getEventEmitter().on('balance-update', async () => {
+    getEventEmitter().on('price-update', async () => {
         displayDecimals.value = nDisplayDecimals;
     });
     getEventEmitter().on('auto-lock-wallet', (fAutoLockWallet) => {

scripts/composables/use_wallet.js

@@ -134,10 +134,12 @@ export const useWallet = defineStore('wallet', () => {
     getEventEmitter().on('balance-update', async () => {
         balance.value = wallet.balance;
         immatureBalance.value = wallet.immatureBalance;
-        currency.value = strCurrency.toUpperCase();
         shieldBalance.value = await wallet.getShieldBalance();
         pendingShieldBalance.value = await wallet.getPendingShieldBalance();
         coldBalance.value = wallet.coldBalance;
+    });
+    getEventEmitter().on('price-update', async () => {
+        currency.value = strCurrency.toUpperCase();
         price.value = cOracle.getCachedPrice(strCurrency);
     });
 

scripts/dashboard/Dashboard.vue

@@ -935,7 +935,6 @@ defineExpose({
             :publicMode="wallet.publicMode"
             :price="price"
             :currency="currency"
-            :shieldEnabled="hasShield"
             v-model:amount="transferAmount"
             :desc="transferDescription"
             v-model:address="transferAddress"

scripts/dashboard/TransferMenu.vue

@@ -1,10 +1,9 @@
 <script setup>
 import { translation } from '../i18n.js';
-import { ref, watch, computed } from 'vue';
+import { ref, watch } from 'vue';
 import { getAddressColor } from '../contacts-book';
 import { promptForContact } from '../contacts-book';
 import { sanitizeHTML } from '../misc';
-import { useWallet } from '../composables/use_wallet.js';
 import BottomPopup from '../BottomPopup.vue';
 import qrIcon from '../../assets/icons/icon-qr-code.svg';
 import addressbookIcon from '../../assets/icons/icon-address-book.svg';
@@ -21,16 +20,13 @@ const emit = defineEmits([
 const amountCurrency = ref('');
 const color = ref('');
 
-const wallet = useWallet();
-
 const props = defineProps({
     show: Boolean,
     price: Number,
     currency: String,
     amount: String,
     desc: String,
     address: String,
-    shieldEnabled: Boolean,
     publicMode: Boolean,
 });
 
@@ -40,6 +36,13 @@ watch(address, (value) =>
     getAddressColor(value).then((c) => (color.value = `${c} !important`))
 );
 
+watch(
+    () => props.price,
+    () => {
+        syncAmountCurrency();
+    }
+);
+
 const amount = defineModel('amount', {
     set(value) {
         return value.toString();
@@ -56,7 +59,7 @@ function send() {
             'send',
             sanitizeHTML(address.value),
             amount.value,
-            !wallet.publicMode
+            !props.publicMode
         );
 }
 

scripts/global.js

@@ -287,7 +287,7 @@ export async function start() {
 
 async function refreshPriceDisplay() {
     await cOracle.getPrice(strCurrency);
-    getEventEmitter().emit('balance-update');
+    getEventEmitter().emit('price-update');
 }
 
 function subscribeToNetworkEvents() {

scripts/prices.js

@@ -125,7 +125,7 @@ export class Oracle {
         // Update any listeners for the full currency list (Settings, etc)
         getEventEmitter().emit('currency-loaded', this.mapCurrencies);
         // Update the balance to render the price instantly
-        getEventEmitter().emit('balance-update');
+        getEventEmitter().emit('price-update');
     }
 }
 

scripts/settings.js

@@ -265,7 +265,7 @@ async function setCurrency(currency) {
     const database = await Database.getInstance();
     database.setSettings({ displayCurrency: strCurrency });
     // Update the UI to reflect the new currency
-    getEventEmitter().emit('balance-update');
+    getEventEmitter().emit('price-update');
 }
 
 /**
@@ -277,7 +277,7 @@ async function setDecimals(decimals) {
     const database = await Database.getInstance();
     database.setSettings({ displayDecimals: nDisplayDecimals });
     // Update the UI to reflect the new decimals
-    getEventEmitter().emit('balance-update');
+    getEventEmitter().emit('price-update');
 }
 
 /**

tests/components/TransferMenu.test.js

@@ -1,6 +1,6 @@
 import 'fake-indexeddb/auto';
 import { mount } from '@vue/test-utils';
-import { nextTick, ref } from 'vue';
+import { nextTick } from 'vue';
 import { expect, describe, vi } from 'vitest';
 import TransferMenu from '../../scripts/dashboard/TransferMenu.vue';
 const price = 0.4;
@@ -14,7 +14,7 @@ const mountTM = (amount = '123', address = '') => {
             address,
 
             'onUpdate:amount': (e) => wrapper.setProps({ amount: e }),
-            shieldEnabled: true,
+            publicMode: true,
         },
     });
     return wrapper;