Validate allowed values for flyover

Use min and max values from default provider.

src/common/store/constants.ts

@@ -200,6 +200,7 @@ export const SESSION_IS_RLOGIN_DEFINED = 'SESSION_IS_RLOGIN_DEFINED';
 // Flyover PegOut getters
 export const FLYOVER_PEGOUT_GET_PROVIDER_ID = 'FLYOVER_PEGOUT_GET_PROVIDER_ID';
 export const FLYOVER_PEGOUT_GET_SELECTED_QUOTE = 'FLYOVER_PEGOUT_GET_SELECTED_QUOTE';
+export const FLYOVER_PEGOUT_GET_MIN_MAX_VALUES = 'FLYOVER_PEGOUT_GET_MIN_MAX_VALUES';
 
 // environment
 export const BTC_NETWORK_MAINNET = 'main';

src/pegout/components/FlyoverRbtcInputAmount.vue

@@ -82,10 +82,8 @@ import { mdiArrowRight } from '@mdi/js';
 import EnvironmentContextProviderService from '@/common/providers/EnvironmentContextProvider';
 import * as constants from '@/common/store/constants';
 import { isRBTCAmountValidRegex } from '@/common/utils';
-import {
-  PegOutTxState, SessionState, WeiBig,
-} from '@/common/types';
-import { useAction, useState } from '@/common/store/helper';
+import { SessionState, WeiBig } from '@/common/types';
+import { useAction, useGetter, useState } from '@/common/store/helper';
 
 export default defineComponent({
   name: 'FlyoverRbtcInputAmount',
@@ -101,7 +99,7 @@ export default defineComponent({
     const stepState = ref<'unset' | 'valid' |'error'>('unset');
 
     const web3SessionState = useState<SessionState>('web3Session');
-    const pegOutTxState = useState<PegOutTxState>('pegOutTx');
+    const minMaxValues = useGetter<{minValue: WeiBig; maxValue: WeiBig}>('flyoverPegout', constants.FLYOVER_PEGOUT_GET_MIN_MAX_VALUES);
     const setRbtcAmount = useAction('flyoverPegout', constants.FLYOVER_PEGOUT_ADD_AMOUNT);
     const addAmount = useAction('pegOutTx', constants.PEGOUT_TX_ADD_AMOUNT);
     const calculateFee = useAction('pegOutTx', constants.PEGOUT_TX_CALCULATE_FEE);
@@ -113,7 +111,7 @@ export default defineComponent({
     const btcAmount = computed(() => rbtcAmount.value);
 
     const amountErrorMessage = computed(() => {
-      const { minValue, maxValue } = pegOutTxState.value.pegoutConfiguration;
+      const { minValue, maxValue } = minMaxValues.value;
       const { balance } = web3SessionState.value;
       if (rbtcAmount.value.toString() === '') {
         return 'Please, enter an amount';
@@ -140,12 +138,12 @@ export default defineComponent({
     });
 
     const insufficientAmount = computed(() => {
-      const { pegoutConfiguration } = pegOutTxState.value;
+      const { minValue, maxValue } = minMaxValues.value;
       const { balance } = web3SessionState.value;
       return safeAmount.value.lte('0')
           || safeAmount.value.gt(balance)
-          || safeAmount.value.lt(pegoutConfiguration.minValue)
-          || safeAmount.value.gt(pegoutConfiguration.maxValue);
+          || safeAmount.value.lt(minValue)
+          || safeAmount.value.gt(maxValue);
     });
 
     const isWalletConnected = computed((): boolean => web3SessionState.value.account !== undefined);
@@ -181,6 +179,8 @@ export default defineComponent({
     function clearStateWhenWalletIsDisconnected() {
       if (!isWalletConnected.value) {
         rbtcAmount.value = '';
+        amountStyle.value = '';
+        stepState.value = 'unset';
         isMaxValueZero.value = false;
         context.emit('walletDisconnected');
       }

src/pegout/store/FlyoverPegout/getters.ts

@@ -1,6 +1,7 @@
-import { FlyoverPegoutState, RootState } from '@/common/types';
+import { FlyoverPegoutState, RootState, WeiBig } from '@/common/types';
 import { GetterTree } from 'vuex';
 import * as constants from '@/common/store/constants';
+import { EnvironmentAccessorService } from '@/common/services/enviroment-accessor.service';
 
 export const getters: GetterTree<FlyoverPegoutState, RootState> = {
   [constants.FLYOVER_PEGOUT_GET_PROVIDER_ID]: (state) => (quoteHash: string): number => {
@@ -23,4 +24,15 @@ export const getters: GetterTree<FlyoverPegoutState, RootState> = {
     });
     return quoteFound;
   },
+  [constants.FLYOVER_PEGOUT_GET_MIN_MAX_VALUES]: (state) => {
+    if (state.liquidityProviders.length === 0) {
+      return {
+        minValue: new WeiBig(EnvironmentAccessorService.getEnvironmentVariables().pegoutMinValue, 'rbtc'),
+        maxValue: new WeiBig(EnvironmentAccessorService.getEnvironmentVariables().pegoutMaxValue, 'rbtc'),
+      };
+    }
+    const { pegout } = state.liquidityProviders[0];
+    const { minTransactionValue, maxTransactionValue } = pegout;
+    return { minValue: minTransactionValue, maxValue: maxTransactionValue };
+  },
 };