fix: catch error on getPegStatus to show it, and not load eternally

Author: annipi

.github/workflows/deploy_MainNet_UI.yml

@@ -57,6 +57,7 @@ jobs:
           VUE_APP_RECAPTCHA_NEW_TOKEN_TIME=30
           VUE_APP_FLYOVER_PROVIDER_ID=2
           VUE_APP_CSP=https://lps.tekscapital.com
+          VUE_APP_API_RESPONSE_TIMEOUT=10000
           npm run-script build
 
       - name: Configure AWS credentials

.github/workflows/deploy_TestNet_UI.yml

@@ -57,6 +57,7 @@ jobs:
           VUE_APP_RECAPTCHA_NEW_TOKEN_TIME=30
           VUE_APP_FLYOVER_PROVIDER_ID=2
           VUE_APP_CSP=https://staging.lps.tekscapital.com
+          VUE_APP_API_RESPONSE_TIMEOUT=10000
           npm run-script build
 
       - name: Configure AWS credentials

.github/workflows/deploy_staging_MainNet_UI.yml

@@ -57,6 +57,7 @@ jobs:
           VUE_APP_RECAPTCHA_NEW_TOKEN_TIME=30
           VUE_APP_FLYOVER_PROVIDER_ID=2
           VUE_APP_CSP=https://lps.tekscapital.com
+          VUE_APP_API_RESPONSE_TIMEOUT=10000
           npm run-script build
 
       - name: Configure AWS credentials

.github/workflows/deploy_staging_TestNet_UI.yml

@@ -57,6 +57,7 @@ jobs:
           VUE_APP_RECAPTCHA_NEW_TOKEN_TIME=30
           VUE_APP_FLYOVER_PROVIDER_ID=2
           VUE_APP_CSP=https://staging.lps.tekscapital.com
+          VUE_APP_API_RESPONSE_TIMEOUT=10000
           npm run-script build
 
       - name: Configure AWS credentials

ENV_VARIABLES.md

@@ -24,6 +24,8 @@ The value of these variables are used in **environment-variables.ts** file.
 |VUE_APP_FLYOVER_PEGOUT_QUOTE_DIFF_PERCENTAGE   | `2`                                      | Defines quote difference percentage to 2% so it requieres the user to review condition only for a difference bigger that this percentage                                                                   |
 |VUE_APP_RECAPTCHA_NEW_TOKEN_TIME   | `30`                                      |  Specifies the time (in seconds) to temporarily disable the flyover between new transactions. This accounts for the time required by Google reCAPTCHA to regenerate a challenge token |
 |VUE_APP_FLYOVER_PROVIDER_ID   | `1`                                      | Sets up the provider id to be use for flyover status search. |
+|VUE_APP_FLYOVER_GET_PROVIDERS_TIMEOUT   | `5000`                                      | Sets a timeout for calls made to get liquidity providers. |
+|VUE_APP_API_RESPONSE_TIMEOUT   | `10000`                                      | Sets a timeout for calls made to API on search transaction. |
 
 ## Example for .env.local.test file
 
@@ -46,4 +48,6 @@ VUE_APP_MIN_FEE_SAT_PER_BYTE_SLOW=1
 VUE_APP_LBC_ADDRESS='0xc2A630c053D12D63d32b025082f6Ba268db18300'
 VUE_APP_DEBUG_MODE='false'
 VUE_APP_FLYOVER_PEGOUT_QUOTE_DIFF_PERCENTAGE=2
+VUE_APP_API_RESPONSE_TIMEOUT=10000
+VUE_APP_FLYOVER_GET_PROVIDERS_TIMEOUT=5000
 ```

src/common/types/environment-variables.ts

@@ -44,6 +44,8 @@ export class EnvironmentVariables {
 
   public cspConfiguration: string;
 
+  public apiResponseTimeout: number;
+
   public minFeeSatPerByte: {
     fast: number;
     average: number;
@@ -107,6 +109,8 @@ export class EnvironmentVariables {
     this.flyoverProviderId = Number(process.env.VUE_APP_FLYOVER_PROVIDER_ID)
       || defaultValues.flyoverProviderId;
     this.cspConfiguration = process.env.VUE_APP_CSP || defaultValues.cspConfiguration;
+    this.apiResponseTimeout = Number(process.env.VUE_APP_API_RESPONSE_TIMEOUT)
+      || defaultValues.apiResponseTimeout;
   }
 
   public get chainId(): number {

src/main.ts

@@ -35,6 +35,7 @@ const defaultEnvironmentVariables = {
   flyoverProviderId: 2,
   grecaptchaTime: constants.RECAPTCHA_NEW_TOKEN_TIME,
   cspConfiguration: 'https://testnet.lps.tekscapital.com https://staging.lps.tekscapital.com',
+  apiResponseTimeout: 5000,
 };
 
 EnvironmentAccessorService.initializeEnvironmentVariables(defaultEnvironmentVariables);

src/status/store/actions.ts

@@ -10,7 +10,7 @@ import { EnvironmentAccessorService } from '@/common/services/enviroment-accesso
 import * as constants from '@/common/store/constants';
 import { ApiService } from '@/common/services';
 import { BridgeService } from '@/common/services/BridgeService';
-import { getEstimatedFee } from '@/common/utils';
+import { getEstimatedFee, promiseWithTimeout } from '@/common/utils';
 
 export const actions: ActionTree<TxStatus, RootState> = {
   [constants.STATUS_CLEAR]: ({ commit }) => {
@@ -19,8 +19,14 @@ export const actions: ActionTree<TxStatus, RootState> = {
   [constants.STATUS_GET_TX_STATUS]:
     ({ commit, dispatch }, txId: string) => new Promise((resolve, reject) => {
       Promise.all([
-        ApiService.getTxStatus(txId),
-        dispatch(constants.STATUS_GET_ESTIMATED_FEE),
+        promiseWithTimeout(
+          ApiService.getTxStatus(txId),
+          EnvironmentAccessorService.getEnvironmentVariables().apiResponseTimeout,
+        ),
+        promiseWithTimeout(
+          dispatch(constants.STATUS_GET_ESTIMATED_FEE),
+          EnvironmentAccessorService.getEnvironmentVariables().apiResponseTimeout,
+        ),
       ])
         .then(([status]) => {
           commit(constants.STATUS_SET_TX_DETAILS, status.txDetails);

src/status/views/Status.vue

@@ -225,6 +225,9 @@ export default defineComponent({
         setTxStatus(txId.value)
           .then(() => {
             loading.value = false;
+          })
+          .catch(() => {
+            loading.value = false;
           });
       }
     }