Reset estimate when modal is closed, using a composable

Author: mraveux

src/components/modals/BuyCryptoModal.vue

@@ -255,7 +255,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, computed, watch, onMounted, onUnmounted } from '@vue/composition-api';
+import { defineComponent, ref, computed, watch, onMounted } from '@vue/composition-api';
 import {
     PageHeader,
     PageBody,
@@ -331,7 +331,7 @@ import {
     capDecimals,
     currentLimitCrypto,
     currentLimitFiat,
-    estimate,
+    useSwapEstimate,
     eurPerBtc,
     eurPerNim,
     fetchAssets,
@@ -361,6 +361,7 @@ export default defineComponent({
 
         const { width } = useWindowSize();
         const { limits } = useSwapLimits({ nimAddress: activeAddress.value! });
+        const { estimate } = useSwapEstimate();
 
         const $eurAmountInput = ref<typeof AmountInput & { focus(): void } | null>(null);
 
@@ -911,10 +912,6 @@ export default defineComponent({
             fiatAmount.value = (currentLimitFiat.value || 0) * 1e2;
         }
 
-        onUnmounted(() => {
-            estimate.value = null;
-        });
-
         return {
             $eurAmountInput,
             addressListOpened,

src/components/modals/SellCryptoModal.vue

@@ -285,7 +285,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, computed, watch, onMounted, onUnmounted } from '@vue/composition-api';
+import { defineComponent, ref, computed, watch, onMounted } from '@vue/composition-api';
 import {
     PageHeader,
     PageBody,
@@ -356,7 +356,7 @@ import {
     capDecimals,
     currentLimitCrypto,
     currentLimitFiat,
-    estimate,
+    useSwapEstimate,
     eurPerBtc,
     eurPerNim,
     fetchAssets,
@@ -396,6 +396,7 @@ export default defineComponent({
         const { width } = useWindowSize();
         const { limits } = useSwapLimits({ nimAddress: activeAddress.value! });
         const { trials } = useSettingsStore();
+        const { estimate } = useSwapEstimate();
 
         const $cryptoAmountInput = ref<typeof AmountInput & { focus(): void } | null>(null);
 
@@ -997,10 +998,6 @@ export default defineComponent({
             }
         }
 
-        onUnmounted(() => {
-            estimate.value = null;
-        });
-
         return {
             $cryptoAmountInput,
             addressListOpened,

src/lib/swap/utils/BuyUtils.ts

@@ -12,12 +12,12 @@ import {
     HtlcStatus,
 } from '../../OasisApi';
 import { i18n } from '../../../i18n/i18n-setup';
-import { calculateFees, estimate, getFiatSwapParameters, selectedFiatCurrency } from './CommonUtils';
+import { calculateFees, getFiatSwapParameters, selectedFiatCurrency, useSwapEstimate } from './CommonUtils';
 
 const { activeSwap: swap } = useSwapsStore();
 const { exchangeRates } = useFiatStore();
 const { activeCurrency } = useAccountStore();
-
+const { estimate } = useSwapEstimate();
 /**
  * Buy - Buy crypto related things
  *  - Computeds

src/lib/swap/utils/CommonUtils.ts

@@ -1,6 +1,6 @@
 import { AssetList, Estimate, getAssets, RequestAsset, SwapAsset } from '@nimiq/fastspot-api';
 import { CurrencyInfo } from '@nimiq/utils';
-import { computed, ref } from '@vue/composition-api';
+import { computed, onUnmounted, ref, getCurrentInstance } from '@vue/composition-api';
 import { useSwapLimits } from '../../../composables/useSwapLimits';
 import { useAccountStore } from '../../../stores/Account';
 import { useAddressStore } from '../../../stores/Address';
@@ -277,3 +277,11 @@ export function getFiatSwapParameters({ from, to } : {
 
     return { from: null, to: null };
 }
+
+export function useSwapEstimate() {
+    if (getCurrentInstance()) {
+        onUnmounted(() => estimate.value = null);
+    }
+
+    return { estimate };
+}

src/lib/swap/utils/SellUtils.ts

@@ -14,12 +14,13 @@ import {
 import { estimateFees } from '../../BitcoinTransactionUtils';
 import { useBtcAddressStore } from '../../../stores/BtcAddress';
 import { i18n } from '../../../i18n/i18n-setup';
-import { assets, calculateFees, estimate, getFiatSwapParameters, selectedFiatCurrency } from './CommonUtils';
+import { assets, calculateFees, getFiatSwapParameters, selectedFiatCurrency, useSwapEstimate } from './CommonUtils';
 
 const { activeSwap: swap } = useSwapsStore();
 const { exchangeRates } = useFiatStore();
 const { activeCurrency } = useAccountStore();
 const { accountBalance: accountBtcBalance, accountUtxos } = useBtcAddressStore();
+const { estimate } = useSwapEstimate();
 
 /**
  * Sell - Sell crypto related things