diff --git a/src/common/store/session/actions.ts b/src/common/store/session/actions.ts index 73c992bc..f16d9f9b 100644 --- a/src/common/store/session/actions.ts +++ b/src/common/store/session/actions.ts @@ -19,7 +19,8 @@ import { toUtf8Bytes } from 'ethers/lib/utils'; export const actions: ActionTree = { [constants.SESSION_CONNECT_WEB3]: ({ commit, state, dispatch }): Promise => { - const rLogin = state.rLoginInstance === undefined ? getRloginInstance() : state.rLoginInstance; + const rLogin = state.rLoginInstance === undefined + ? getRloginInstance(state.features) : state.rLoginInstance; return new Promise((resolve, reject) => { rLogin.connect() .then((rLoginResponse) => { diff --git a/src/common/utils/rlogin.ts b/src/common/utils/rlogin.ts index 5fd9b4f7..2395d7f6 100644 --- a/src/common/utils/rlogin.ts +++ b/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): 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,9 +39,9 @@ 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, @@ -33,20 +49,24 @@ export function getRloginInstance(): RLogin { 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; } diff --git a/src/common/utils/utils.ts b/src/common/utils/utils.ts index 23e819cf..fa6a7dc9 100644 --- a/src/common/utils/utils.ts +++ b/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) { diff --git a/src/common/views/Home.vue b/src/common/views/Home.vue index d1c60e29..3660d75c 100644 --- a/src/common/views/Home.vue +++ b/src/common/views/Home.vue @@ -1,7 +1,7 @@