Fixes walletconnect import issues for some build tools (#1057)

* Fixes walletconnect import issues for some build tools
* version bump

Author: taylorjdawson

packages/walletconnect/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/walletconnect",
-  "version": "2.0.1",
+  "version": "2.0.2-alpha.1",
   "description": "WalletConnect module for web3-onboard",
   "module": "dist/index.js",
   "browser": "dist/index.js",

packages/walletconnect/src/index.ts

@@ -1,12 +1,10 @@
-import { StaticJsonRpcProvider } from '@ethersproject/providers'
+import type { StaticJsonRpcProvider as StaticJsonRpcProviderType } from '@ethersproject/providers'
 
-import {
+import type {
   Chain,
   ProviderAccounts,
   WalletInit,
-  EIP1193Provider,
-  ProviderRpcError,
-  ProviderRpcErrorCode
+  EIP1193Provider
 } from '@web3-onboard/common'
 
 interface WalletConnectOptions {
@@ -25,12 +23,26 @@ function walletConnect(options?: WalletConnectOptions): WalletInit {
       label: 'WalletConnect',
       getIcon: async () => (await import('./icon.js')).default,
       getInterface: async ({ chains, EventEmitter }) => {
-        const { default: WalletConnect } = await import('@walletconnect/client')
+        const { StaticJsonRpcProvider } = await import(
+          '@ethersproject/providers'
+        )
 
-        const { default: QRCodeModal } = await import(
-          '@walletconnect/qrcode-modal'
+        const { ProviderRpcError, ProviderRpcErrorCode } = await import(
+          '@web3-onboard/common'
         )
 
+        const { default: WalletConnect } = await import('@walletconnect/client')
+
+        // This is a cjs module and therefor depending on build tooling
+        // sometimes it will be nested in the { default } object and
+        // other times it will be the actual import
+        // @ts-ignore - It thinks it is missing properties since it expect it to be nested under default
+        let QRCodeModal: typeof import('@walletconnect/qrcode-modal').default =
+          await import('@walletconnect/qrcode-modal')
+
+        // @ts-ignore - TS thinks that there is no default property on the `QRCodeModal` but sometimes there is
+        QRCodeModal = QRCodeModal.default || QRCodeModal
+
         const { Subject, fromEvent } = await import('rxjs')
         const { takeUntil, take } = await import('rxjs/operators')
 
@@ -50,7 +62,7 @@ function walletConnect(options?: WalletConnectOptions): WalletInit {
           public removeListener: typeof EventEmitter['removeListener']
 
           private disconnected$: InstanceType<typeof Subject>
-          private providers: Record<string, StaticJsonRpcProvider>
+          private providers: Record<string, StaticJsonRpcProviderType>
 
           constructor({
             connector,