reown-com / appkit

The full stack toolkit to build onchain app UX
https://reown.com/appkit
Apache License 2.0
4.94k stars 1.41k forks source link

Add wagmi providers to avoid installing the wagmi library #1129

Closed HT-Moh closed 1 year ago

HT-Moh commented 1 year ago

What problem does this new feature solve?

At the moment when would like to use the wagmi providers with web3modal we need to install the library separately or import it when using vanilla js, but this is not necessary because it's already a dependency for web3modal, to avoid this we can export the providers the same as connectors and chains.

Describe the solution you'd like

export * as WagmiCore from '@wagmi/core'
export * as WagmiCoreChains from '@wagmi/core/chains'
import { publicProvider } from '@wagmi/core/providers/public'
import { jsonRpcProvider } from '@wagmi/core/providers/jsonRpc'
import { alchemyProvider } from '@wagmi/core/providers/alchemy'
import { infuraProvider } from '@wagmi/core/providers/infura'

export { EthereumClient } from './src/client'
export { w3mConnectors, w3mProvider } from './src/utils'

import { CoinbaseWalletConnector } from '@wagmi/core/connectors/coinbaseWallet'
import { InjectedConnector } from '@wagmi/core/connectors/injected'
import { LedgerConnector } from '@wagmi/core/connectors/ledger'
import { MetaMaskConnector } from '@wagmi/core/connectors/metaMask'

export const WagmiCoreConnectors = {
  CoinbaseWalletConnector,
  InjectedConnector,
  MetaMaskConnector,
  LedgerConnector
}
export const WagmiCoreProviders = {
  publicProvider,
  jsonRpcProvider,
  alchemyProvider,
  infuraProvider
}
tolgaisik commented 1 year ago

after two months of wagmi, web3modal, dependencies and apis changed a lot. It is hard to keep track. This issue may solve it.

HT-Moh commented 1 year ago

is there any action required from my side to make the PR progress? I think this PR is important because for smart contract view functions, you don't need the user to connect the wallet to trigger those functions, and in this case, you need to use rpc providers like Infura or custom one and ideally you should not import any additional library to do so.

ChrisCates commented 12 months ago

@0xAsimetriq, currently getting this strack trace.

Unsure what to do here.

Next 14 with App Directories.

Import trace for requested module:
./node_modules/@web3modal/wagmi/dist/esm/exports/react.js
./components/login.tsx
 ⨯ ./node_modules/@web3modal/wagmi/dist/esm/src/utils/defaultWagmiReactConfig.js:3:0

Module not found: Package path ./connectors/coinbaseWallet is not exported from package /.../@web3modal/wagmi (see exports field in /.../@web3modal/wagmi/package.json)
ChrisCates commented 12 months ago

@0xAsimetriq, when using Next 14 App Directories with Ether.js. I get an EventEmitter error. This is a known bug with Ethers.js.

It appears wagmi has an issue isolated to WalletConnect.

StackTrace for ethers:

hot-reloader-client.js:224 ./node_modules/@walletconnect/core/dist/index.es.js
Attempted import error: 'EventEmitter' is not exported from 'events' (imported as 'N').
processMessage @ hot-reloader-client.js:224
handler @ hot-reloader-client.js:381
hot-reloader-client.js:224 ./node_modules/@walletconnect/core/dist/index.es.js
Attempted import error: 'events' does not contain a default export (imported as 'jt').
processMessage @ hot-reloader-client.js:224
handler @ hot-reloader-client.js:381
hot-reloader-client.js:224 ./node_modules/@walletconnect/core/dist/index.es.js
Attempted import error: 'EventEmitter' is not exported from 'events' (imported as 'N').
processMessage @ hot-reloader-client.js:224
handler @ hot-reloader-client.js:381
hot-reloader-client.js:224 ./node_modules/@walletconnect/ethereum-provider/dist/index.es.js
Attempted import error: 'EventEmitter' is not exported from 'events' (imported as 'b').
processMessage @ hot-reloader-client.js:224
handler @ hot-reloader-client.js:381
hot-reloader-client.js:224 ./node_modules/@walletconnect/jsonrpc-provider/dist/esm/provider.js
Attempted import error: 'EventEmitter' is not exported from 'events' (imported as 'EventEmitter').
processMessage @ hot-reloader-client.js:224
handler @ hot-reloader-client.js:381
hot-reloader-client.js:221 There were more warnings in other files.
You can find a complete log in the terminal.

Simply just following, copy and paste documentation here: https://docs.walletconnect.com/web3modal/nextjs/about?platform=ethers

We're probably going to need add regression testing, and a Next App Directory implementation here: https://github.com/WalletConnect/web3modal/tree/V3/examples

Docs are clear. Unfortunately, breaking semantic version changes in Next are unclear. I don't know where to look in codebase to fix ESM exports for wagmi specifically.