Update Firefox verification on main page and rlogin feature flags

Author: ronaldsg20

src/common/store/session/actions.ts

@@ -19,7 +19,8 @@ import { toUtf8Bytes } from 'ethers/lib/utils';
 
 export const actions: ActionTree<SessionState, RootState> = {
   [constants.SESSION_CONNECT_WEB3]: ({ commit, state, dispatch }): Promise<void> => {
-    const rLogin = state.rLoginInstance === undefined ? getRloginInstance() : state.rLoginInstance;
+    const rLogin = state.rLoginInstance === undefined
+      ? getRloginInstance(state.features) : state.rLoginInstance;
     return new Promise<void>((resolve, reject) => {
       rLogin.connect()
         .then((rLoginResponse) => {

src/common/utils/rlogin.ts

@@ -3,8 +3,14 @@ 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';
+import {
+  Browser, Feature, FeatureNames, SupportedBrowsers,
+} from '../types';
+import { getBrowserName } from './utils';
 
-export function getRloginInstance(): RLogin {
+export function getRloginInstance(features: Array<Feature>): RLogin {
+  const currentBrowser = getBrowserName() as Browser;
   const rpcUrls = {};
   const customLedgerProviderOptions = ledgerProviderOptions;
   customLedgerProviderOptions.connector = async (ProviderPackage, options) => {
@@ -14,6 +20,16 @@ export function getRloginInstance(): RLogin {
     await provider.connect();
     return provider;
   };
+  const customTrezorProviderOptions = {
+    ...trezorProviderOptions,
+    options: {
+      dPath: "m/44'/37310'/0'/0/0",
+      manifestEmail: EnvironmentAccessorService
+        .getEnvironmentVariables().vueAppManifestEmail,
+      manifestAppUrl: EnvironmentAccessorService
+        .getEnvironmentVariables().vueAppManifestAppUrl,
+    },
+  };
   const { vueAppRskNodeHost, chainId } = EnvironmentAccessorService.getEnvironmentVariables();
   Object
     .defineProperty(rpcUrls, chainId, {
@@ -23,30 +39,34 @@ export function getRloginInstance(): RLogin {
       enumerable: true,
     });
   const supportedChains = Object.keys(rpcUrls).map(Number);
-  const rLoginSetup = new RLogin({
+  const rLoginOptions = {
     cacheProvider: false,
-    defaultTheme: 'dark',
+    defaultTheme: 'dark' as 'dark' | 'light',
     providerOptions: {
       walletconnect: {
         package: WalletConnectProvider,
         options: {
           rpc: rpcUrls,
         },
       },
-      'custom-ledger': customLedgerProviderOptions,
-      'custom-trezor': {
-        ...trezorProviderOptions,
-        options: {
-          dPath: "m/44'/37310'/0'/0/0",
-          manifestEmail: EnvironmentAccessorService
-            .getEnvironmentVariables().vueAppManifestEmail,
-          manifestAppUrl: EnvironmentAccessorService
-            .getEnvironmentVariables().vueAppManifestAppUrl,
-        },
-      },
     },
     rpcUrls,
     supportedChains,
-  });
+  };
+  const ledgerFeature = features.find((feature) => feature.name === FeatureNames.WALLET_LEDGER);
+  if (ledgerFeature?.value === constants.ENABLED
+    && ledgerFeature.supportedBrowsers[currentBrowser.toLowerCase() as keyof SupportedBrowsers]) {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    rLoginOptions.providerOptions['custom-ledger'] = customLedgerProviderOptions;
+  }
+  const trezorFeature = features.find((feature) => feature.name === FeatureNames.WALLET_TREZOR);
+  if (trezorFeature?.value === constants.ENABLED
+    && trezorFeature.supportedBrowsers[currentBrowser.toLowerCase() as keyof SupportedBrowsers]) {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    rLoginOptions.providerOptions['custom-trezor'] = customTrezorProviderOptions;
+  }
+  const rLoginSetup = new RLogin(rLoginOptions);
   return rLoginSetup;
 }

src/common/utils/utils.ts

@@ -127,7 +127,7 @@ export function getBrowserName() {
 }
 
 export function isAllowedCurrentBrowser() {
-  return getBrowserName() === Browser.CHROME || window.navigator.brave;
+  return getBrowserName() === Browser.CHROME || window.navigator.brave || Browser.FIREFOX;
 }
 
 export function isBTCAmountValidRegex(bitcoinAmount: string) {

src/common/views/Home.vue

@@ -1,7 +1,7 @@
 <template>
   <v-container fluid class="home">
     <v-alert v-if="!isAllowedBrowser" variant="outlined" type="warning" prominent>
-      Only Chrome and Brave browsers are allowed
+      Only Chrome, Firefox and Brave browsers are allowed
     </v-alert>
     <v-row v-else no-gutters justify="space-around">
       <v-col lg="4" xl="3" xxl="2">