Bugfix/ provider error on flyover instance

src/App.vue

@@ -13,7 +13,9 @@
 </template>
 
 <script lang="ts">
-import { computed, onBeforeMount, ref } from 'vue';
+import {
+  computed, onBeforeMount, ref,
+} from 'vue';
 import Top from '@/common/components/layouts/Top.vue';
 import FooterRsk from '@/common/components/layouts/Footer.vue';
 import Mobile from '@/common/views/Mobile.vue';
@@ -96,6 +98,7 @@ export default {
       getFeatures();
       getBtcPrice();
     });
+
     appendHotjar();
     appendClarity();
     appendCSP();

src/common/services/FlyoverService.ts

@@ -10,7 +10,7 @@ import {
   LiquidityProvider2WP, PeginQuote, QuotePegOut2WP,
   SatoshiBig, WeiBig,
 } from '@/common/types';
-import { providers } from 'ethers';
+import { Wallet, providers } from 'ethers';
 import { EnvironmentAccessorService } from './enviroment-accessor.service';
 import { isValidSiteKey, ServiceError } from '../utils';
 
@@ -25,7 +25,7 @@ export default class FlyoverService {
 
   private pegoutQuotes: PegoutQuote[] = [];
 
-  private providerUrl?: string;
+  private providerUrl: string;
 
   private peginQuotes: Quote[] = [];
 
@@ -36,7 +36,8 @@ export default class FlyoverService {
   private liquidityProviderIdUsed = -1;
 
   constructor(providerUrl?: string) {
-    this.providerUrl = providerUrl;
+    this.providerUrl = providerUrl
+    ?? EnvironmentAccessorService.getEnvironmentVariables().vueAppRskNodeHost;
     const appNetwork = EnvironmentAccessorService.getEnvironmentVariables().vueAppCoin;
     switch (appNetwork) {
       case constants.BTC_NETWORK_MAINNET:
@@ -51,15 +52,19 @@ export default class FlyoverService {
     }
   }
 
-  initialize(): Promise<void> {
+  initialize(web3Provider?: providers.ExternalProvider): Promise<void> {
     return new Promise<void>((resolve, reject) => {
-      const provider = this.providerUrl
-        ? new providers.JsonRpcProvider(this.providerUrl) : window.ethereum;
-      BlockchainConnection.createUsingStandard(provider)
-        .then((connection: BlockchainConnection) => {
+      const connectionPromise = web3Provider
+        ? BlockchainConnection.createUsingStandard(web3Provider)
+        : BlockchainConnection.createUsingPassphrase(
+          Wallet.createRandom().mnemonic.phrase,
+          this.providerUrl,
+        );
+      connectionPromise
+        .then((connection) => {
           this.flyover = new Flyover({
             network: this.flyoverNetwork,
-            rskConnection: connection,
+            rskConnection: connection as BlockchainConnection,
             captchaTokenResolver: this.tokenResolver.bind(this),
             disableChecksum: true,
           });

src/common/types/environment-variables.ts

@@ -1,4 +1,5 @@
 import { AppNetwork } from '@/common/types';
+import * as constants from '@/common/store/constants';
 
 export class EnvironmentVariables {
   public vueAppCoin: AppNetwork;
@@ -96,4 +97,10 @@ export class EnvironmentVariables {
     this.flyoverPegoutDiffPercentage = Number(process.env
       .VUE_APP_FLYOVER_PEGOUT_QUOTE_DIFF_PERCENTAGE) || defaultValues.flyoverPegoutDiffPercentage;
   }
+
+  public get chainId(): number {
+    return this.vueAppCoin === constants.BTC_NETWORK_MAINNET
+      ? constants.SUPPORTED_NETWORKS.RSK_MAINNET.chainId
+      : constants.SUPPORTED_NETWORKS.RSK_TESTNET.chainId;
+  }
 }

src/common/utils/rlogin.ts

@@ -3,7 +3,6 @@ import { EnvironmentAccessorService } from '@/common/services/enviroment-accesso
 import WalletConnectProvider from '@walletconnect/web3-provider';
 import { trezorProviderOptions } from '@rsksmart/rlogin-trezor-provider';
 import { ledgerProviderOptions } from '@rsksmart/rlogin-ledger-provider';
-import * as constants from '@/common/store/constants';
 
 export function getRloginInstance(): RLogin {
   const rpcUrls = {};
@@ -15,24 +14,14 @@ export function getRloginInstance(): RLogin {
     await provider.connect();
     return provider;
   };
-  const network = EnvironmentAccessorService.getEnvironmentVariables().vueAppCoin;
-  if (network === constants.BTC_NETWORK_MAINNET) {
-    Object
-      .defineProperty(rpcUrls, constants.SUPPORTED_NETWORKS.RSK_MAINNET.chainId, {
-        value: constants.SUPPORTED_NETWORKS.RSK_MAINNET.rpcUrl,
-        writable: false,
-        configurable: true,
-        enumerable: true,
-      });
-  } else {
-    Object
-      .defineProperty(rpcUrls, constants.SUPPORTED_NETWORKS.RSK_TESTNET.chainId, {
-        value: constants.SUPPORTED_NETWORKS.RSK_TESTNET.rpcUrl,
-        writable: false,
-        configurable: true,
-        enumerable: true,
-      });
-  }
+  const { vueAppRskNodeHost, chainId } = EnvironmentAccessorService.getEnvironmentVariables();
+  Object
+    .defineProperty(rpcUrls, chainId, {
+      value: vueAppRskNodeHost,
+      writable: false,
+      configurable: true,
+      enumerable: true,
+    });
   const supportedChains = Object.keys(rpcUrls).map(Number);
   const rLoginSetup = new RLogin({
     cacheProvider: false,

src/pegout/components/PegoutForm.vue

@@ -146,6 +146,7 @@ import ApiService from '@/common/services/ApiService';
 import { FlyoverService } from '@/common/services';
 import FullTxErrorDialog from '@/common/components/exchange/FullTxErrorDialog.vue';
 import { EnvironmentAccessorService } from '@/common/services/enviroment-accessor.service';
+import { providers } from 'ethers';
 import PegoutOption from './PegoutOption.vue';
 
 export default defineComponent({
@@ -187,6 +188,7 @@ export default defineComponent({
     const clearFlyoverState = useAction('flyoverPegout', constants.FLYOVER_PEGOUT_CLEAR_STATE);
     const clearPegoutTx = useAction('pegOutTx', constants.PEGOUT_TX_CLEAR);
     const getPegoutQuotes = useAction('flyoverPegout', constants.FLYOVER_PEGOUT_GET_QUOTES);
+    const ethersProvider = useStateAttribute<providers.Web3Provider>('web3Session', 'ethersProvider');
     const quotes = useStateAttribute<Record<number, QuotePegOut2WP[]>>('flyoverPegout', 'quotes');
     const quoteDifference = useStateAttribute<number>('flyoverPegout', 'difference');
     const selectedQuote = useGetter<QuotePegOut2WP>('flyoverPegout', constants.FLYOVER_PEGOUT_GET_SELECTED_QUOTE);
@@ -373,7 +375,7 @@ export default defineComponent({
     function clearState() {
       clearFlyoverState();
       clearPegoutTx();
-      initFlyoverTx();
+      initFlyoverTx(ethersProvider.value);
       initPegoutTx();
       selectedOption.value = '';
       showStep.value = false;

src/pegout/views/PegOut.vue

@@ -19,8 +19,9 @@ import {
 } from 'vue';
 import * as constants from '@/common/store/constants';
 import PegoutForm from '@/pegout/components/PegoutForm.vue';
-import { useAction, useGetter } from '@/common/store/helper';
+import { useAction, useGetter, useStateAttribute } from '@/common/store/helper';
 import { Feature, FeatureNames } from '@/common/types';
+import { providers } from 'ethers';
 
 export default defineComponent({
   name: 'PegOut',
@@ -31,13 +32,14 @@ export default defineComponent({
     const init = useAction('pegOutTx', constants.PEGOUT_TX_INIT);
     const initFlyover = useAction('flyoverPegout', constants.FLYOVER_PEGOUT_INIT);
     const flyoverFeature = useGetter<(name: FeatureNames) => Feature>('web3Session', constants.SESSION_GET_FEATURE);
+    const ethersProvider = useStateAttribute<providers.Web3Provider>('web3Session', 'ethersProvider');
     const flyoverEnabled = ref(false);
     const loadingProviders = ref(true);
 
     onBeforeMount(() => {
       const feature = flyoverFeature.value(FeatureNames.FLYOVER_PEG_OUT);
       if (feature?.value === constants.ENABLED) {
-        initFlyover()
+        initFlyover(ethersProvider.value)
           .then(() => {
             flyoverEnabled.value = true;
             loadingProviders.value = false;