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 {
+import { accountTruncate, isCorrectNetwork } from '../../../utils/wallet'
-  accountTruncate,
-  connectWallet,
-  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,36 +12,29 @@ const web3ModalTheme = {
   hover: 'var(--brand-grey-dimmed)'
 }
 
-export async function connectWallet(
+const providerOptions = {
-  connect: OceanProviderValue['connect']
+  walletconnect: {
-): Promise<void> {
+    package: WalletConnectProvider,
-  const { default: WalletConnectProvider } = await import(
+    options: {
-    '@walletconnect/web3-provider'
+      infuraId: infuraProjectId
-  )
+    }
-  const { default: Torus } = await import('@toruslabs/torus-embed')
+  },
-
+  torus: {
-  // Provider Options
+    package: Torus,
-  // https://github.com/Web3Modal/web3modal#provider-options
+    options: {
-  const providerOptions = {
+      networkParams: {
-    walletconnect: {
+        host: oceanConfig.url // optional
-      package: WalletConnectProvider,
+        // chainId: 1337, // optional
-      options: {
+        // networkId: 1337 // optional
-        infuraId: infuraProjectId
-      }
-    },
-    torus: {
-      package: Torus,
-      options: {
-        networkParams: {
-          host: oceanConfig.url // optional
-          // chainId: 1337, // optional
-          // networkId: 1337 // optional
-        }
       }
     }
   }
+}
 
-  await connect({ cacheProvider: true, providerOptions, theme: web3ModalTheme })
+export const web3ModalOpts = {
+  cacheProvider: true,
+  providerOptions,
+  theme: web3ModalTheme
 }
 
 export function isCorrectNetwork(chainId: number): boolean {