From b8636c2fc297d85f1e45519f9891bbc7a6b674fc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathe=CC=81o?= <matheo.raveux@gmail.com>
Date: Thu, 15 Apr 2021 12:55:47 +0200
Subject: [PATCH] Reset estimate when modal is closed, using a composable

---
 src/components/modals/BuyCryptoModal.vue  |  9 +++------
 src/components/modals/SellCryptoModal.vue |  9 +++------
 src/lib/swap/utils/BuyUtils.ts            |  4 ++--
 src/lib/swap/utils/CommonUtils.ts         | 10 +++++++++-
 src/lib/swap/utils/SellUtils.ts           |  3 ++-
 5 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/src/components/modals/BuyCryptoModal.vue b/src/components/modals/BuyCryptoModal.vue
index cce248129..c3d89e324 100644
--- a/src/components/modals/BuyCryptoModal.vue
+++ b/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,
diff --git a/src/components/modals/SellCryptoModal.vue b/src/components/modals/SellCryptoModal.vue
index 5299723a5..daaf6f89d 100644
--- a/src/components/modals/SellCryptoModal.vue
+++ b/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,
diff --git a/src/lib/swap/utils/BuyUtils.ts b/src/lib/swap/utils/BuyUtils.ts
index 5b1e5643f..2b7ee7ef7 100644
--- a/src/lib/swap/utils/BuyUtils.ts
+++ b/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
diff --git a/src/lib/swap/utils/CommonUtils.ts b/src/lib/swap/utils/CommonUtils.ts
index 21194d709..130ebbea6 100644
--- a/src/lib/swap/utils/CommonUtils.ts
+++ b/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 };
+}
diff --git a/src/lib/swap/utils/SellUtils.ts b/src/lib/swap/utils/SellUtils.ts
index c62ca9bdb..f6989ba6e 100644
--- a/src/lib/swap/utils/SellUtils.ts
+++ b/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