refactor web3modal options

src/components/molecules/Wallet/Account.tsx

@@ -4,11 +4,7 @@ import { useOcean } from '@oceanprotocol/react'
 import { toDataUrl } from 'ethereum-blockies'
 import { ReactComponent as Caret } from '../../../images/caret.svg'
 import Status from '../../atoms/Status'
-import {
-  accountTruncate,
-  connectWallet,
-  isCorrectNetwork
-} from '../../../utils/wallet'
+import { accountTruncate, isCorrectNetwork } from '../../../utils/wallet'
 
 const Blockies = ({ account }: { account: string | undefined }) => {
   if (!account) return null
@@ -44,7 +40,7 @@ const Account = React.forwardRef((props, ref: any) => {
   ) : (
     <button
       className={styles.button}
-      onClick={async () => await connectWallet(connect)}
+      onClick={async () => await connect()}
       // Need the `ref` here although we do not want
       // the Tippy to show in this state.
       ref={ref}

src/components/molecules/Wallet/Details.tsx

@@ -3,7 +3,7 @@ import Button from '../../atoms/Button'
 import styles from './Details.module.css'
 import { useOcean } from '@oceanprotocol/react'
 import Web3Feedback from './Feedback'
-import { connectWallet, getNetworkName } from '../../../utils/wallet'
+import { getNetworkName } from '../../../utils/wallet'
 import { getInjectedProviderName } from 'web3modal'
 import Conversion from '../../atoms/Price/Conversion'
 
@@ -31,7 +31,7 @@ export default function Details({ attrs }: { attrs: any }): ReactElement {
             size="small"
             onClick={() => {
               logout()
-              connectWallet(connect)
+              connect()
             }}
           >
             Switch Wallet

src/helpers/wrapRootElement.tsx

@@ -1,13 +1,16 @@
 import React, { ReactElement } from 'react'
 import { OceanProvider } from '@oceanprotocol/react'
 import { appConfig } from '../../app.config'
+import { web3ModalOpts } from '../utils/wallet'
 
 const wrapRootElement = ({
   element
 }: {
   element: ReactElement
 }): ReactElement => (
-  <OceanProvider config={appConfig.oceanConfig}>{element}</OceanProvider>
+  <OceanProvider config={appConfig.oceanConfig} web3ModalOpts={web3ModalOpts}>
+    {element}
+  </OceanProvider>
 )
 
 export default wrapRootElement

src/utils/wallet.ts

@@ -1,4 +1,5 @@
-import { OceanProviderValue } from '@oceanprotocol/react'
+import WalletConnectProvider from '@walletconnect/web3-provider'
+import Torus from '@toruslabs/torus-embed'
 import { appConfig } from '../../app.config'
 
 const { infuraProjectId, network, oceanConfig } = appConfig
@@ -11,17 +12,7 @@ const web3ModalTheme = {
   hover: 'var(--brand-grey-dimmed)'
 }
 
-export async function connectWallet(
-  connect: OceanProviderValue['connect']
-): Promise<void> {
-  const { default: WalletConnectProvider } = await import(
-    '@walletconnect/web3-provider'
-  )
-  const { default: Torus } = await import('@toruslabs/torus-embed')
-
-  // Provider Options
-  // https://github.com/Web3Modal/web3modal#provider-options
-  const providerOptions = {
+const providerOptions = {
   walletconnect: {
     package: WalletConnectProvider,
     options: {
@@ -38,9 +29,12 @@ export async function connectWallet(
       }
     }
   }
-  }
+}
 
-  await connect({ cacheProvider: true, providerOptions, theme: web3ModalTheme })
+export const web3ModalOpts = {
+  cacheProvider: true,
+  providerOptions,
+  theme: web3ModalTheme
 }
 
 export function isCorrectNetwork(chainId: number): boolean {