Show fast mode unavailable when there is no liquidity (pegout)

Creates analogous action to the one used for pegin and updates the pegout form for its usage. A refactor of the stores is required to better handle this behavior and avoid duplication.
rsksmart · Dec 9, 2024 · c32e871 · c32e871
1 parent 2873191
commit c32e871
Show file tree

Hide file tree

Showing 6 changed files with 100 additions and 23 deletions.
diff --git a/src/common/store/constants.ts b/src/common/store/constants.ts
@@ -80,6 +80,7 @@ export const FLYOVER_PEGOUT_GET_FINAL_QUOTE = 'FLYOVER_PEGOUT_GET_FINAL_QUOTE';
 export const FLYOVER_PEGOUT_CLEAR_QUOTES = 'FLYOVER_PEGOUT_CLEAR_QUOTES';
 export const FLYOVER_PEGOUT_SET_SELECTED_QUOTE_HASH = 'FLYOVER_PEGOUT_SET_SELECTED_QUOTE_HASH';
 export const FLYOVER_PEGOUT_CLEAR_QUOTE_DIFFERENCES = 'FLYOVER_PEGOUT_CLEAR_QUOTE_DIFFERENCES';
+export const FLYOVER_PEGOUT_GET_AVAILABLE_LIQUIDITY = 'FLYOVER_PEGOUT_GET_AVAILABLE_LIQUIDITY';
 
 // Flyover PegIn actions
 export const FLYOVER_PEGIN_INIT = 'FLYOVER_PEGIN_INIT';
@@ -163,6 +164,7 @@ export const FLYOVER_PEGOUT_SET_BTC_ADDRESS = 'FLYOVER_PEGOUT_SET_BTC_ADDRESS';
 export const FLYOVER_PEGOUT_SET_TX_HASH = 'FLYOVER_PEGOUT_SET_TX_HASH';
 export const FLYOVER_PEGOUT_SET_SELECTED_QUOTE = 'FLYOVER_PEGOUT_SET_SELECTED_QUOTE';
 export const FLYOVER_PEGOUT_SET_QUOTES_DIFFERENCE = 'FLYOVER_PEGOUT_SET_QUOTES_DIFFERENCE';
+export const FLYOVER_PEGOUT_PROVIDERS_SET_AVAILABLE_LIQUIDITY = 'FLYOVER_PEGOUT_PROVIDERS_SET_AVAILABLE_LIQUIDITY';
 
 // Flyover PegIn mutations
 export const FLYOVER_PEGIN_SET_PROVIDERS = 'FLYOVER_PEGIN_SET_PROVIDERS';

diff --git a/src/pegin/components/create/PegInForm.vue b/src/pegin/components/create/PegInForm.vue
@@ -314,7 +314,9 @@ export default defineComponent({
       }
     });
 
-    getAvailableLiquidity();
+    if (props.isFlyoverAvailable) {
+      getAvailableLiquidity();
+    }
 
     return {
       pegInFormState,

diff --git a/src/pegout/components/PegoutForm.vue b/src/pegout/components/PegoutForm.vue
@@ -11,11 +11,11 @@
     <v-row>
       <v-col>
         <rbtc-input-amount
-          @getQuotes="getQuotes"
+          @valid-amount="checkValidAmount"
           :clear="clearAmount" />
       </v-col>
     </v-row>
-    <template v-if="showStep && !loadingQuotes">
+    <template v-if="showStep">
       <v-row>
         <span class="font-weight-bold ma-4 mb-2
         ">Select Mode</span>
@@ -135,7 +135,7 @@ import {
 } from '@/common/store/helper';
 import { mdiArrowLeft, mdiArrowRight } from '@mdi/js';
 import {
-  FlyoverPegoutState, PegoutQuoteDbModel, PegOutTxState, QuotePegOut2WP,
+  FlyoverPegoutState, LiquidityProvider2WP, PegoutQuoteDbModel, PegOutTxState, QuotePegOut2WP,
   SatoshiBig, TxInfo, TxStatusType, WeiBig,
 } from '@/common/types';
 import {
@@ -171,7 +171,6 @@ export default defineComponent({
     const pegOutFormState = ref<Machine<'loading' | 'goingHome' | 'fill'>>(new Machine('fill'));
     const showAddressDialog = ref(false);
     const loadingQuotes = ref(false);
-    const showStep = ref(false);
     const isWalletAuthorizedToSign = ref(true);
     const diffShown = ref(false);
     const clearAmount = ref(false);
@@ -204,6 +203,10 @@ export default defineComponent({
       .flyoverPegoutDiffPercentage;
     const clearStore = useAction('pegInTx', constants.PEGOUT_TX_CLEAR_STATE);
     const clearSessionState = useAction('web3Session', constants.WEB3_SESSION_CLEAR_ACCOUNT);
+    const getAvailableLiquidity = useAction('flyoverPegout', constants.FLYOVER_PEGOUT_GET_AVAILABLE_LIQUIDITY);
+    const clearQuotes = useAction('flyoverPegout', constants.FLYOVER_PEGOUT_CLEAR_QUOTES);
+    const amountToTransfer = useStateAttribute<WeiBig>('flyoverPegout', 'amountToTransfer');
+    const liquidityProviders = useStateAttribute<LiquidityProvider2WP[]>('flyoverPegout', 'liquidityProviders');
 
     const pegoutQuotes = computed(() => {
       const quoteList: QuotePegOut2WP[] = [];
@@ -297,7 +300,7 @@ export default defineComponent({
       return !loadingQuotes.value && isFlyoverReady.value;
     });
 
-    const flyoverResponded = computed(() => pegoutQuotes.value.length > 0 || props.flyoverEnabled);
+    const flyoverResponded = computed(() => pegoutQuotes.value.length > 0 && props.flyoverEnabled);
 
     function handlePegoutError(error: ServiceError) {
       txError.value = error;
@@ -426,7 +429,6 @@ export default defineComponent({
       initFlyoverTx(ethersProvider.value);
       initPegoutTx();
       selectedOption.value = '';
-      showStep.value = false;
       diffShown.value = false;
       showTxErrorDialog.value = false;
       showAddressDialog.value = false;
@@ -439,16 +441,47 @@ export default defineComponent({
       router.push({ name: 'Home' });
     }
 
+    function enoughLiquidityForThisAmount(amount: SatoshiBig) {
+      return liquidityProviders.value.some((provider) => {
+        const { liquidityCheckEnabled, pegout: { availableLiquidity } } = provider;
+        return liquidityCheckEnabled && availableLiquidity?.gt(amount);
+      });
+    }
+
     function getQuotes() {
       loadingQuotes.value = true;
       getPegoutQuotes(account.value)
-        .catch(handlePegoutError)
+        .catch((e) => {
+          handlePegoutError(e);
+          clearQuotes();
+        })
         .finally(() => {
           loadingQuotes.value = false;
-          showStep.value = true;
         });
     }
 
+    const validAmount = ref(false);
+    const amount = ref();
+
+    function checkValidAmount(isValidAmount: boolean, amountInformed: string) {
+      validAmount.value = isValidAmount;
+      if (isValidAmount && amountInformed !== amount.value) {
+        amount.value = amountInformed;
+      }
+    }
+
+    watch([amount, validAmount], async () => {
+      if (!validAmount.value) return;
+      if (!enoughLiquidityForThisAmount(SatoshiBig.fromWeiBig(amountToTransfer.value))) {
+        await clearQuotes();
+        return;
+      }
+      getQuotes();
+    });
+
+    const showStep = computed(() => (!loadingQuotes.value && validAmount.value)
+      || !props.flyoverEnabled);
+
     function changeSelectedOption(quoteHash: string) {
       setSelectedQuoteHash(quoteHash);
       selectedOption.value = quoteHash;
@@ -462,10 +495,6 @@ export default defineComponent({
       }
     }
 
-    if (!props.flyoverEnabled) {
-      showStep.value = true;
-    }
-
     function continueHandler() {
       setSelectedQuoteHash('');
       selectedOption.value = '';
@@ -475,7 +504,6 @@ export default defineComponent({
     function clearForError() {
       showTxErrorDialog.value = false;
       clearAmount.value = true;
-      showStep.value = false;
     }
 
     onBeforeMount(() => {
@@ -492,6 +520,10 @@ export default defineComponent({
 
     watch(account, clearState);
 
+    if (props.flyoverEnabled) {
+      getAvailableLiquidity();
+    }
+
     return {
       environmentContext,
       showAddressDialog,
@@ -525,6 +557,7 @@ export default defineComponent({
       flyoverResponded,
       clearForError,
       clearAmount,
+      checkValidAmount,
     };
   },
 });

diff --git a/src/pegout/components/RbtcInputAmount.vue b/src/pegout/components/RbtcInputAmount.vue
@@ -66,7 +66,7 @@ import {
 
 export default defineComponent({
   name: 'RbtcInputAmount',
-  emits: ['get-quotes'],
+  emits: ['valid-amount'],
   props: {
     clear: {
       type: Boolean,
@@ -97,19 +97,23 @@ export default defineComponent({
         && amount.lte(balance);
     };
 
+    function emitGetQuotes() {
+      const weiBigAmount = new WeiBig(rbtcAmount.value, 'rbtc');
+      setRbtcAmount(weiBigAmount);
+      addAmount(weiBigAmount)
+        .then(() => calculateFee());
+      context.emit('valid-amount', isValidAmount(weiBigAmount), rbtcAmount.value);
+    }
+
+    const timeOutId = ref(0);
     const rbtcAmountModel = computed({
       get() {
         return rbtcAmount.value;
       },
       set(amount: string) {
+        window.clearTimeout(timeOutId.value);
         rbtcAmount.value = amount;
-        const weiBigAmount = new WeiBig(amount, 'rbtc');
-        if (isValidAmount(weiBigAmount) && weiBigAmount.gt('0')) {
-          setRbtcAmount(weiBigAmount);
-          addAmount(weiBigAmount)
-            .then(() => calculateFee());
-          context.emit('get-quotes');
-        }
+        timeOutId.value = window.setTimeout(emitGetQuotes, 300);
       },
     });
 

diff --git a/src/pegout/store/FlyoverPegout/actions.ts b/src/pegout/store/FlyoverPegout/actions.ts
@@ -1,6 +1,6 @@
 import {
   FlyoverPegoutState, QuotePegOut2WP, RootState, WeiBig,
-  FlyoverCall, LiquidityProvider2WP, TxStatusType,
+  FlyoverCall, LiquidityProvider2WP, TxStatusType, SatoshiBig,
 } from '@/common/types';
 import { ActionTree } from 'vuex';
 import * as constants from '@/common/store/constants';
@@ -194,4 +194,31 @@ export const actions: ActionTree<FlyoverPegoutState, RootState> = {
   [constants.FLYOVER_PEGOUT_CLEAR_QUOTE_DIFFERENCES]: ({ commit }) => {
     commit(constants.FLYOVER_PEGOUT_SET_QUOTES_DIFFERENCE, 0);
   },
+  [constants.FLYOVER_PEGOUT_GET_AVAILABLE_LIQUIDITY]:
+  ({ state, dispatch, commit }) => new Promise((resolve, reject) => {
+    const providersPromises:
+      Promise<number | {
+        providerId: number,
+        peginLiquidity: WeiBig,
+        pegoutLiquidity: SatoshiBig
+      }>[] = [];
+    state.liquidityProviders.forEach((provider) => {
+      dispatch(constants.FLYOVER_PEGOUT_USE_LIQUIDITY_PROVIDER, provider.id);
+      providersPromises.push(state.flyoverService.getAvailableLiquidity());
+    });
+    Promise.allSettled(providersPromises)
+      .then((responses) => responses.forEach((response) => {
+        if (response.status === constants.FULFILLED) {
+          if (response.value instanceof Object) {
+            const { providerId, pegoutLiquidity } = response.value;
+            commit(
+              constants.FLYOVER_PEGOUT_PROVIDERS_SET_AVAILABLE_LIQUIDITY,
+              { providerId, pegoutLiquidity },
+            );
+          }
+        }
+      }))
+      .then(resolve)
+      .catch(reject);
+  }),
 };
diff --git a/src/pegout/store/FlyoverPegout/mutations.ts b/src/pegout/store/FlyoverPegout/mutations.ts
@@ -32,4 +32,13 @@ export const mutations: MutationTree<FlyoverPegoutState> = {
   [constants.FLYOVER_PEGOUT_SET_QUOTES_DIFFERENCE]: (state, difference) => {
     state.difference = difference;
   },
+  [constants.FLYOVER_PEGOUT_PROVIDERS_SET_AVAILABLE_LIQUIDITY]: (state, payload) => {
+    const { providerId, pegoutLiquidity } = payload;
+    const providers = state.liquidityProviders;
+    providers.forEach((provider, idx) => {
+      if (provider.id === providerId) {
+        state.liquidityProviders[idx].pegout.availableLiquidity = pegoutLiquidity;
+      }
+    });
+  },
 };