From d4c91bd09c09d96ab55a80a3f73a6f7203a5753b Mon Sep 17 00:00:00 2001
From: Dmitry Balashov <a.marcius26@gmail.com>
Date: Sun, 11 Dec 2022 14:16:40 +0800
Subject: [PATCH] [fix][klaytn/klaytn-dex-frontend#174]: avoid underlying
 `watchEffect` in `rm-store`

---
 .eslintrc-auto-import.json                    |  1 +
 src/auto-imports.d.ts                         |  2 ++
 src/composables/computed-eager-using-watch.ts | 15 +++++++++++++++
 src/modules/ModuleLiquidity/store/remove.ts   |  2 +-
 4 files changed, 19 insertions(+), 1 deletion(-)
 create mode 100644 src/composables/computed-eager-using-watch.ts

diff --git a/.eslintrc-auto-import.json b/.eslintrc-auto-import.json
index a74593f6..feafdd8b 100644
--- a/.eslintrc-auto-import.json
+++ b/.eslintrc-auto-import.json
@@ -13,6 +13,7 @@
     "computed": true,
     "computedAsync": true,
     "computedEager": true,
+    "computedEagerUsingWatch": true,
     "computedInject": true,
     "computedWithControl": true,
     "controlledComputed": true,
diff --git a/src/auto-imports.d.ts b/src/auto-imports.d.ts
index e95fd2d4..c41a5348 100644
--- a/src/auto-imports.d.ts
+++ b/src/auto-imports.d.ts
@@ -14,6 +14,7 @@ declare global {
   const computed: typeof import('vue')['computed']
   const computedAsync: typeof import('@vueuse/core')['computedAsync']
   const computedEager: typeof import('@vueuse/core')['computedEager']
+  const computedEagerUsingWatch: typeof import('./composables/computed-eager-using-watch')['computedEagerUsingWatch']
   const computedInject: typeof import('@vueuse/core')['computedInject']
   const computedWithControl: typeof import('@vueuse/core')['computedWithControl']
   const controlledComputed: typeof import('@vueuse/core')['controlledComputed']
@@ -333,6 +334,7 @@ declare module '@vue/runtime-core' {
     readonly computed: UnwrapRef<typeof import('vue')['computed']>
     readonly computedAsync: UnwrapRef<typeof import('@vueuse/core')['computedAsync']>
     readonly computedEager: UnwrapRef<typeof import('@vueuse/core')['computedEager']>
+    readonly computedEagerUsingWatch: UnwrapRef<typeof import('./composables/computed-eager-using-watch')['computedEagerUsingWatch']>
     readonly computedInject: UnwrapRef<typeof import('@vueuse/core')['computedInject']>
     readonly computedWithControl: UnwrapRef<typeof import('@vueuse/core')['computedWithControl']>
     readonly controlledComputed: UnwrapRef<typeof import('@vueuse/core')['controlledComputed']>
diff --git a/src/composables/computed-eager-using-watch.ts b/src/composables/computed-eager-using-watch.ts
new file mode 100644
index 00000000..1442061c
--- /dev/null
+++ b/src/composables/computed-eager-using-watch.ts
@@ -0,0 +1,15 @@
+import { ShallowRef } from 'vue'
+
+export function computedEagerUsingWatch<T>(fn: () => T): ShallowRef<T> {
+  const result = shallowRef()
+
+  watch(
+    fn,
+    (value) => {
+      result.value = value
+    },
+    { flush: 'sync' },
+  )
+
+  return result
+}
diff --git a/src/modules/ModuleLiquidity/store/remove.ts b/src/modules/ModuleLiquidity/store/remove.ts
index d4cdddcc..01a2cfba 100644
--- a/src/modules/ModuleLiquidity/store/remove.ts
+++ b/src/modules/ModuleLiquidity/store/remove.ts
@@ -198,7 +198,7 @@ export const useLiquidityRmStore = defineStore('liquidity-remove', () => {
 
   const { pair: pairResult, pending: isPairPending, touch: touchPairAddress } = usePairAddress(selectedFiltered)
   const existingPair = computed(() => (pairResult.value?.kind === 'exist' ? pairResult.value : null))
-  const doesPairExist = eagerComputed(() => !!existingPair.value)
+  const doesPairExist = computedEagerUsingWatch(() => !!existingPair.value)
 
   const {
     result: pairBalanceResult,