[refactor]: some refactors in Remove Liquidity

.eslintrc-auto-import.json

@@ -13,6 +13,7 @@
     "computed": true,
     "computedAsync": true,
     "computedEager": true,
+    "computedEagerUsingWatch": true,
     "computedInject": true,
     "computedWithControl": true,
     "controlledComputed": true,

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']>

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
+}

src/modules/ModuleLiquidity/Remove/ModeAmountPicker.vue

@@ -3,9 +3,9 @@ import { storeToRefs } from 'pinia'
 import { Ref } from 'vue'
 
 const store = useLiquidityRmStore()
-const { liquidityRelative, isPairLoaded } = storeToRefs(store)
+const { liquidityRelative, doesPairExist } = storeToRefs(store)
 
-const isNotActive = logicNot(isPairLoaded)
+const isNotActive = logicNot(doesPairExist)
 
 const relativeTo100 = computed({
   get: () => (liquidityRelative.value ?? 0) * 100,

src/modules/ModuleLiquidity/View.vue

@@ -25,7 +25,7 @@ const { loading: isLoading, result, refetch } = useLiquidityPairsQuery(pollInter
 // Refetch if cached
 if (result.value && !isLoading.value) refetch()
 
-const isLoaded = computed(() => !!result.value)
+// const isLoaded = computed(() => !!result.value)
 
 const tradeStore = useTradeStore()
 

src/modules/ModuleLiquidity/store/add.ts

@@ -223,17 +223,9 @@ export const useLiquidityAddStore = defineStore('liquidity-add', () => {
 
   // #region Pair balance & reserves
 
-  const {
-    result: pairBalance,
-    touch: touchPairBalance,
-    pending: isPairBalancePending,
-  } = usePairBalance(addrsReadonly, doesPairExist)
+  const { result: pairBalance, touch: touchPairBalance, pending: isPairBalancePending } = usePairBalance(gotPair)
 
-  const {
-    result: pairReserves,
-    touch: touchPairReserves,
-    pending: isPairReservesPending,
-  } = usePairReserves(addrsReadonly, doesPairExist)
+  const { result: pairReserves, touch: touchPairReserves, pending: isPairReservesPending } = usePairReserves(gotPair)
 
   const { userBalance: pairUserBalance, totalSupply: pairTotalSupply } = toRefs(
     useNullablePairBalanceComponents(pairBalance),

src/modules/ModuleLiquidity/store/remove.ts

@@ -1,6 +1,7 @@
 import { Address, Token, Wei } from '@/core'
 import {
   computeEstimatedPoolShare,
+  PairAddressResult,
   useNullablePairBalanceComponents,
   usePairAddress,
   usePairBalance,
@@ -106,8 +107,7 @@ function usePrepareSupply(props: {
 }
 
 function useRemoveAmounts(
-  tokens: Ref<null | TokensPair<Address>>,
-  pair: Ref<null | Address>,
+  pairResult: Ref<null | PairAddressResult>,
   liquidity: Ref<null | Wei>,
 ): {
   pending: Ref<boolean>
@@ -119,16 +119,15 @@ function useRemoveAmounts(
   const scope = useParamScope(
     computed(() => {
       const activeDex = dexStore.active
-      if (!tokens.value || activeDex.kind !== 'named') return null
-      const pairAddr = pair.value
+      const pair = pairResult.value
       const lpTokenValue = liquidity.value
-      if (!pairAddr || !lpTokenValue || !lpTokenValue.asBigInt) return null
+      if (!(lpTokenValue && activeDex.kind === 'named' && lpTokenValue.asBigInt && pair?.kind === 'exist')) return null
 
-      const key = `dex-${activeDex.wallet}-${pairAddr}-${lpTokenValue.asStr}`
+      const key = `dex-${activeDex.wallet}-${pair.addr}-${lpTokenValue.asStr}`
 
       return {
         key,
-        payload: { pair: pairAddr, lpTokenValue, tokens: tokens.value, dex: activeDex.dex() },
+        payload: { pair: pair.addr, lpTokenValue, tokens: pair.tokens, dex: activeDex.dex() },
       }
     }),
     ({ payload: { pair, lpTokenValue, tokens, dex } }) => {
@@ -197,25 +196,21 @@ export const useLiquidityRmStore = defineStore('liquidity-remove', () => {
 
   // #region Pair
 
-  const { pair: pairResult, pending: isPairPending } = usePairAddress(selectedFiltered)
+  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,
     pending: isPairBalancePending,
     touch: touchPairBalance,
-  } = usePairBalance(selectedFiltered, doesPairExist)
+  } = usePairBalance(pairResult)
 
   const { totalSupply: pairTotalSupply, userBalance: pairUserBalance } = toRefs(
     useNullablePairBalanceComponents(pairBalanceResult),
   )
 
-  const {
-    result: pairReserves,
-    pending: isReservesPending,
-    touch: touchPairReserves,
-  } = usePairReserves(selectedFiltered, doesPairExist)
+  const { result: pairReserves, pending: isReservesPending, touch: touchPairReserves } = usePairReserves(pairResult)
 
   // #endregion
 
@@ -249,6 +244,7 @@ export const useLiquidityRmStore = defineStore('liquidity-remove', () => {
 
   function clear() {
     liquidity.value = null
+    selectedRaw.value = null
   }
 
   // #endregion
@@ -263,15 +259,7 @@ export const useLiquidityRmStore = defineStore('liquidity-remove', () => {
       .otherwise(() => null),
   )
 
-  const {
-    amounts,
-    pending: isAmountsPending,
-    touch: touchAmounts,
-  } = useRemoveAmounts(
-    selectedFiltered,
-    computed(() => existingPair.value?.addr ?? null),
-    liquidity,
-  )
+  const { amounts, pending: isAmountsPending, touch: touchAmounts } = useRemoveAmounts(pairResult, liquidity)
 
   const rates = useRates(amounts)
 
@@ -295,14 +283,16 @@ export const useLiquidityRmStore = defineStore('liquidity-remove', () => {
   })
 
   function closeSupply() {
-    if (supplyState.value?.fulfilled) {
+    const wasFulfilled = !!supplyState.value?.fulfilled
+    clearSupply()
+
+    if (wasFulfilled) {
+      navigateToLiquidity()
+    } else {
       touchAmounts()
       touchPairBalance()
       touchPairReserves()
     }
-
-    clearSupply()
-    navigateToLiquidity()
   }
 
   // #endregion
@@ -322,6 +312,7 @@ export const useLiquidityRmStore = defineStore('liquidity-remove', () => {
   )
 
   const refresh = () => {
+    touchPairAddress()
     touchAmounts()
     touchPairBalance()
     touchPairReserves()
@@ -342,7 +333,8 @@ export const useLiquidityRmStore = defineStore('liquidity-remove', () => {
     isReservesPending,
     isPairBalancePending,
     isPairPending,
-    isPairLoaded: doesPairExist,
+    doesPairExist,
+    pairResult,
 
     liquidity,
     liquidityRelative,

src/modules/ModuleTradeShared/composable.pair-by-tokens.ts

@@ -1,7 +1,6 @@
 import { Address, isEmptyAddress, Percent, Wei } from '@/core'
 import { ActiveDex, AnyDex } from '@/store/dex'
 import { TokensPair } from '@/utils/pair'
-import { MaybeRef } from '@vueuse/core'
 import { Ref } from 'vue'
 
 type NullableReactiveTokens = TokensPair<Address | null> | Ref<null | TokensPair<null | Address>>
@@ -25,19 +24,12 @@ function composeKeyWithAnyDex(tokens: NullableReactiveTokens, anyDex: AnyDex) {
   )
 }
 
-function composeKeyWithNamedDexAndExistingPair(
-  tokens: NullableReactiveTokens,
-  activeDex: ActiveDex,
-  pairExists: MaybeRef<boolean>,
-) {
-  const tokensKey = nullableReactiveTokensToComposedKey(tokens)
-
+function composeKeyWithNamedDexAndExistingPair(pairResult: null | PairAddressResult, dex: ActiveDex) {
   return (
-    unref(pairExists) &&
-    tokensKey &&
-    activeDex.kind === 'named' && {
-      key: `${activeDex.wallet}-${tokensKey.key}`,
-      payload: { dex: activeDex.dex(), tokens: tokensKey.payload },
+    pairResult?.kind === 'exist' &&
+    dex.kind === 'named' && {
+      key: `${dex.wallet}-${pairResult.tokens.tokenA}-${pairResult.tokens.tokenB}`,
+      payload: { dex: dex.dex(), pair: pairResult.addr, tokens: pairResult.tokens },
     }
   )
 }
@@ -96,11 +88,11 @@ export function useSimplifiedResult(result: Ref<null | PairAddressResult>): Ref<
   return computed(() => result.value?.kind ?? null)
 }
 
-export function usePairReserves(tokens: NullableReactiveTokens, pairExists: MaybeRef<boolean>) {
+export function usePairReserves(pairResult: Ref<null | PairAddressResult>) {
   const dexStore = useDexStore()
 
   const scope = useParamScope(
-    () => composeKeyWithNamedDexAndExistingPair(tokens, dexStore.active, pairExists),
+    () => composeKeyWithNamedDexAndExistingPair(pairResult.value, dexStore.active),
     ({ payload: { tokens, dex } }) => {
       const { state, run } = useTask(() => dex.tokens.getPairReserves(tokens), { immediate: true })
       usePromiseLog(state, 'pair-reserves')
@@ -120,18 +112,15 @@ interface PairBalance {
   userBalance: Wei
 }
 
-export function usePairBalance(
-  tokens: NullableReactiveTokens,
-  pairExists: MaybeRef<boolean>,
-): {
+export function usePairBalance(pairResult: Ref<null | PairAddressResult>): {
   pending: Ref<boolean>
   result: Ref<null | PairBalance>
   touch: () => void
 } {
   const dexStore = useDexStore()
 
   const scope = useParamScope(
-    () => composeKeyWithNamedDexAndExistingPair(tokens, dexStore.active, pairExists),
+    () => composeKeyWithNamedDexAndExistingPair(pairResult.value, dexStore.active),
     ({ payload: { tokens, dex } }) => {
       const { state, run } = useTask(
         async () => {