fix: do not show options until amount is inputed

rsksmart · Nov 4, 2024 · 4a545ec · 4a545ec
1 parent 5ea3248
commit 4a545ec
Show file tree

Hide file tree

Showing 7 changed files with 9 additions and 20 deletions.
diff --git a/src/common/store/constants.ts b/src/common/store/constants.ts
@@ -160,7 +160,6 @@ 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_DIFFERENCES = 'FLYOVER_PEGOUT_SET_QUOTES_DIFFERENCES';
-export const FLYOVER_PEGOUT_SET_RESPONDING = 'FLYOVER_PEGOUT_SET_RESPONDING';
 
 // Flyover PegIn mutations
 export const FLYOVER_PEGIN_SET_PROVIDERS = 'FLYOVER_PEGIN_SET_PROVIDERS';

diff --git a/src/common/types/Flyover/FlyoverPegout.ts b/src/common/types/Flyover/FlyoverPegout.ts
@@ -14,5 +14,4 @@ export interface FlyoverPegoutState {
     flyoverService: FlyoverService;
     txHash?: string;
     selectedQuoteHash: string;
-    isResponding: boolean;
 }
diff --git a/src/common/utils/common.ts b/src/common/utils/common.ts
@@ -108,7 +108,6 @@ export const getClearFlyoverPegoutState = (): FlyoverPegoutState => ({
   flyoverService: markRaw(new FlyoverService()),
   selectedQuoteHash: '',
   differences: [],
-  isResponding: false,
 });
 
 export const getClearFlyoverPeginState = (): FlyoverPeginState => ({

diff --git a/src/common/views/Home.vue b/src/common/views/Home.vue
@@ -69,9 +69,11 @@
           </v-btn>
         </div>
         <div class="d-flex justify-start align-baseline flex-wrap ml-6">
-          <span class="text-body-1">To learn about the various RBTC access methods, visit </span>
-          <v-btn variant="text" color="orange" density="compact" class="pa-0 text-body-1 mr-2"
-             href="https://rootstock.io/rbtc/" target="_blank">
+          <span class="text-body-1 mr-2 mt-4">
+            To learn about the various RBTC access methods, visit
+          </span>
+          <v-btn variant="text" color="orange" density="compact" class="pa-0 text-body-1"
+            href="https://rootstock.io/rbtc/" target="_blank">
               RBTC Webpage
           </v-btn>
         </div>

diff --git a/src/pegout/components/PegoutForm.vue b/src/pegout/components/PegoutForm.vue
@@ -21,7 +21,7 @@
         ">Select Mode</span>
       </v-row>
       <v-row>
-        <v-col cols="6" v-if="pegoutQuotes.length === 0" >
+        <v-col cols="6" v-if="!flyoverResponded" >
         <pegout-option class="mr-2" flyover-not-available
           :option-type="pegoutType.FLYOVER">
         <template v-slot>
@@ -189,7 +189,6 @@ export default defineComponent({
     const getFlyoverProviders = useAction('flyoverPegout', constants.FLYOVER_PEGOUT_GET_PROVIDERS);
     const quotes = useStateAttribute<Record<number, QuotePegOut2WP[]>>('flyoverPegout', 'quotes');
     const quoteDifferences = useStateAttribute<Array<ObjectDifference>>('flyoverPegout', 'differences');
-    const isFlyoverResponding = useStateAttribute<boolean>('flyoverPegout', 'isResponding');
     const selectedQuote = useGetter<QuotePegOut2WP>('flyoverPegout', constants.FLYOVER_PEGOUT_GET_SELECTED_QUOTE);
     const estimatedBtcToReceive = useGetter<SatoshiBig>('pegOutTx', constants.PEGOUT_TX_GET_ESTIMATED_BTC_TO_RECEIVE);
     const isEnoughBalance = useGetter<boolean>('pegOutTx', constants.PEGOUT_TX_IS_ENOUGH_BALANCE);
@@ -285,6 +284,8 @@ export default defineComponent({
       return isFlyoverReady.value;
     });
 
+    const flyoverResponded = computed(() => pegoutQuotes.value.length > 0 || props.flyoverEnabled);
+
     function handlePegoutError(error: ServiceError) {
       txError.value = error;
       showTxErrorDialog.value = true;
@@ -402,10 +403,6 @@ export default defineComponent({
       }
     }
 
-    if (!props.flyoverEnabled) {
-      showStep.value = true;
-    }
-
     const amountToReceive = computed(() => {
       let finalAmount = '';
       if (selectedOption.value) {
@@ -464,9 +461,9 @@ export default defineComponent({
       flyoverService,
       executeRecaptcha,
       nativeQuote,
-      isFlyoverResponding,
       pegoutType: constants.pegoutType,
       isValid,
+      flyoverResponded,
     };
   },
 });

diff --git a/src/pegout/store/FlyoverPegout/actions.ts b/src/pegout/store/FlyoverPegout/actions.ts
@@ -23,10 +23,8 @@ export const actions: ActionTree<FlyoverPegoutState, RootState> = {
       const providers: LiquidityProvider2WP[] = await state.flyoverService.getProviders();
       commit(constants.FLYOVER_PEGOUT_SET_PROVIDERS, providers);
       result = constants.FlyoverCallResult.SUCCESS;
-      commit(constants.FLYOVER_PEGOUT_SET_RESPONDING, true);
     } catch (e) {
       console.error(`Error getting flyover providers: ${e}`);
-      commit(constants.FLYOVER_PEGOUT_SET_RESPONDING, false);
     } finally {
       try {
         await ApiService.registerFlyoverCall({ ...flyoverCallPayload, result } as FlyoverCall);
@@ -81,10 +79,8 @@ export const actions: ActionTree<FlyoverPegoutState, RootState> = {
           });
           result = constants.FlyoverCallResult.SUCCESS;
           commit(constants.FLYOVER_PEGOUT_SET_QUOTES, quotesByProvider);
-          commit(constants.FLYOVER_PEGOUT_SET_RESPONDING, true);
           resolve();
         } catch (e) {
-          commit(constants.FLYOVER_PEGOUT_SET_RESPONDING, false);
           reject();
         } finally {
           try {

diff --git a/src/pegout/store/FlyoverPegout/mutations.ts b/src/pegout/store/FlyoverPegout/mutations.ts
@@ -32,7 +32,4 @@ export const mutations: MutationTree<FlyoverPegoutState> = {
   [constants.FLYOVER_PEGOUT_SET_QUOTES_DIFFERENCES]: (state, differences) => {
     state.differences = differences;
   },
-  [constants.FLYOVER_PEGOUT_SET_RESPONDING]: (state, isResponding) => {
-    state.isResponding = isResponding;
-  },
 };