@wagmi/connectors 3.1.1 → 4.0.0

package/src/walletConnect.ts

@@ -0,0 +1,394 @@
+import {
+  ChainNotConfiguredError,
+  ProviderNotFoundError,
+  createConnector,
+  normalizeChainId,
+} from '@wagmi/core'
+import type { Evaluate, ExactPartial, Omit } from '@wagmi/core/internal'
+import {
+  EthereumProvider,
+  OPTIONAL_EVENTS,
+  OPTIONAL_METHODS,
+} from '@walletconnect/ethereum-provider'
+import {
+  type Address,
+  type ProviderConnectInfo,
+  type ProviderRpcError,
+  SwitchChainError,
+  UserRejectedRequestError,
+  getAddress,
+  numberToHex,
+} from 'viem'
+
+type EthereumProviderOptions = Parameters<typeof EthereumProvider['init']>[0]
+
+export type WalletConnectParameters = Evaluate<
+  {
+    /**
+     * If a new chain is added to a previously existing configured connector `chains`, this flag
+     * will determine if that chain should be considered as stale. A stale chain is a chain that
+     * WalletConnect has yet to establish a relationship with (ie. the user has not approved or
+     * rejected the chain).
+     *
+     * Preface: Whereas WalletConnect v1 supported dynamic chain switching, WalletConnect v2 requires
+     * the user to pre-approve a set of chains up-front. This comes with consequent UX nuances (see below) when
+     * a user tries to switch to a chain that they have not approved.
+     *
+     * This flag mainly affects the behavior when a wallet does not support dynamic chain authorization
+     * with WalletConnect v2.
+     *
+     * If `true` (default), the new chain will be treated as a stale chain. If the user
+     * has yet to establish a relationship (approved/rejected) with this chain in their WalletConnect
+     * session, the connector will disconnect upon the dapp auto-connecting, and the user will have to
+     * reconnect to the dapp (revalidate the chain) in order to approve the newly added chain.
+     * This is the default behavior to avoid an unexpected error upon switching chains which may
+     * be a confusing user experience (ie. the user will not know they have to reconnect
+     * unless the dapp handles these types of errors).
+     *
+     * If `false`, the new chain will be treated as a validated chain. This means that if the user
+     * has yet to establish a relationship with the chain in their WalletConnect session, wagmi will successfully
+     * auto-connect the user. This comes with the trade-off that the connector will throw an error
+     * when attempting to switch to the unapproved chain. This may be useful in cases where a dapp constantly
+     * modifies their configured chains, and they do not want to disconnect the user upon
+     * auto-connecting. If the user decides to switch to the unapproved chain, it is important that the
+     * dapp handles this error and prompts the user to reconnect to the dapp in order to approve
+     * the newly added chain.
+     *
+     * @default true
+     */
+    isNewChainsStale?: boolean
+  } & Omit<
+    EthereumProviderOptions,
+    | 'chains'
+    | 'events'
+    | 'optionalChains'
+    | 'optionalEvents'
+    | 'optionalMethods'
+    | 'methods'
+    | 'rpcMap'
+    | 'showQrModal'
+  > &
+    ExactPartial<Pick<EthereumProviderOptions, 'showQrModal'>>
+>
+
+export function walletConnect(parameters: WalletConnectParameters) {
+  const isNewChainsStale = parameters.isNewChainsStale ?? true
+
+  type Provider = Awaited<ReturnType<typeof EthereumProvider['init']>>
+  type NamespaceMethods =
+    | 'wallet_addEthereumChain'
+    | 'wallet_switchEthereumChain'
+  type Properties = {
+    connect(parameters?: { chainId?: number; pairingTopic?: string }): Promise<{
+      accounts: readonly Address[]
+      chainId: number
+    }>
+    getNamespaceChainsIds(): number[]
+    getNamespaceMethods(): NamespaceMethods[]
+    getRequestedChainsIds(): Promise<number[]>
+    isChainsStale(): Promise<boolean>
+    onConnect(connectInfo: ProviderConnectInfo): void
+    onDisplayUri(uri: string): void
+    onSessionDelete(data: { topic: string }): void
+    setRequestedChainsIds(chains: number[]): void
+    requestedChainsStorageKey: `${string}.requestedChains`
+  }
+  type StorageItem = {
+    [_ in Properties['requestedChainsStorageKey']]: number[]
+  }
+
+  let provider_: Provider | undefined
+  let providerPromise: Promise<typeof provider_>
+  const NAMESPACE = 'eip155'
+
+  return createConnector<Provider, Properties, StorageItem>((config) => ({
+    id: 'walletConnect',
+    name: 'WalletConnect',
+    async setup() {
+      const provider = await this.getProvider()
+      if (!provider) return
+      provider.on('connect', this.onConnect.bind(this))
+      provider.on('session_delete', this.onSessionDelete.bind(this))
+    },
+    async connect({ chainId, ...rest } = {}) {
+      try {
+        const provider = await this.getProvider()
+        if (!provider) throw new ProviderNotFoundError()
+        provider.on('display_uri', this.onDisplayUri)
+
+        let targetChainId = chainId
+        if (!targetChainId) {
+          const state = (await config.storage?.getItem('state')) ?? {}
+          const isChainSupported = config.chains.some(
+            (x) => x.id === state.chainId,
+          )
+          if (isChainSupported) targetChainId = state.chainId
+          else targetChainId = config.chains[0]?.id
+        }
+        if (!targetChainId) throw new Error('No chains found on connector.')
+
+        const isChainsStale = await this.isChainsStale()
+        // If there is an active session with stale chains, disconnect current session.
+        if (provider.session && isChainsStale) await provider.disconnect()
+
+        // If there isn't an active session or chains are stale, connect.
+        if (!provider.session || isChainsStale) {
+          const optionalChains = config.chains
+            .filter((chain) => chain.id !== targetChainId)
+            .map((optionalChain) => optionalChain.id)
+          await provider.connect({
+            chains: [targetChainId],
+            optionalChains,
+            ...('pairingTopic' in rest
+              ? { pairingTopic: rest.pairingTopic }
+              : {}),
+          })
+
+          this.setRequestedChainsIds(config.chains.map((x) => x.id))
+        }
+
+        // If session exists and chains are authorized, enable provider for required chain
+        const accounts = (await provider.enable()).map(getAddress)
+        const currentChainId = await this.getChainId()
+
+        provider.removeListener('display_uri', this.onDisplayUri)
+        provider.removeListener('connect', this.onConnect.bind(this))
+        provider.on('accountsChanged', this.onAccountsChanged.bind(this))
+        provider.on('chainChanged', this.onChainChanged)
+        provider.on('disconnect', this.onDisconnect.bind(this))
+        provider.on('session_delete', this.onSessionDelete.bind(this))
+
+        return { accounts, chainId: currentChainId }
+      } catch (error) {
+        if (
+          /(user rejected|connection request reset)/i.test(
+            (error as ProviderRpcError)?.message,
+          )
+        ) {
+          throw new UserRejectedRequestError(error as Error)
+        }
+        throw error
+      }
+    },
+    async disconnect() {
+      const provider = await this.getProvider()
+      try {
+        await provider.disconnect()
+      } catch (error) {
+        if (!/No matching key/i.test((error as Error).message)) throw error
+      } finally {
+        provider.removeListener(
+          'accountsChanged',
+          this.onAccountsChanged.bind(this),
+        )
+        provider.removeListener('chainChanged', this.onChainChanged)
+        provider.removeListener('disconnect', this.onDisconnect.bind(this))
+        provider.removeListener(
+          'session_delete',
+          this.onSessionDelete.bind(this),
+        )
+        provider.on('connect', this.onConnect.bind(this))
+
+        this.setRequestedChainsIds([])
+      }
+    },
+    async getAccounts() {
+      const provider = await this.getProvider()
+      return provider.accounts.map(getAddress)
+    },
+    async getProvider({ chainId } = {}) {
+      async function initProvider() {
+        const [defaultChain, ...optionalChains] = config.chains.map((x) => x.id)
+        if (!defaultChain) return
+        return await EthereumProvider.init({
+          ...parameters,
+          chains: [defaultChain],
+          disableProviderPing: true,
+          optionalMethods: OPTIONAL_METHODS,
+          optionalEvents: OPTIONAL_EVENTS,
+          optionalChains,
+          projectId: parameters.projectId,
+          rpcMap: Object.fromEntries(
+            config.chains.map((chain) => [
+              chain.id,
+              chain.rpcUrls.default.http[0]!,
+            ]),
+          ),
+          showQrModal: parameters.showQrModal ?? true,
+        })
+      }
+
+      if (!provider_) {
+        if (!providerPromise) providerPromise = initProvider()
+        provider_ = await providerPromise
+      }
+      if (chainId) await this.switchChain?.({ chainId })
+      return provider_!
+    },
+    async getChainId() {
+      const provider = await this.getProvider()
+      return provider.chainId
+    },
+    async isAuthorized() {
+      try {
+        const [accounts, provider] = await Promise.all([
+          this.getAccounts(),
+          this.getProvider(),
+        ])
+
+        // If an account does not exist on the session, then the connector is unauthorized.
+        if (!accounts.length) return false
+
+        // If the chains are stale on the session, then the connector is unauthorized.
+        const isChainsStale = await this.isChainsStale()
+        if (isChainsStale && provider.session) {
+          await provider.disconnect().catch(() => {})
+          return false
+        }
+        return true
+      } catch {
+        return false
+      }
+    },
+    async switchChain({ chainId }) {
+      const chain = config.chains.find((chain) => chain.id === chainId)
+      if (!chain) throw new SwitchChainError(new ChainNotConfiguredError())
+
+      try {
+        const provider = await this.getProvider()
+        const namespaceChains = this.getNamespaceChainsIds()
+        const namespaceMethods = this.getNamespaceMethods()
+        const isChainApproved = namespaceChains.includes(chainId)
+
+        if (
+          !isChainApproved &&
+          namespaceMethods.includes('wallet_addEthereumChain')
+        ) {
+          await provider.request({
+            method: 'wallet_addEthereumChain',
+            params: [
+              {
+                chainId: numberToHex(chain.id),
+                blockExplorerUrls: [chain.blockExplorers?.default],
+                chainName: chain.name,
+                nativeCurrency: chain.nativeCurrency,
+                rpcUrls: [...chain.rpcUrls.default.http],
+              },
+            ],
+          })
+          const requestedChains = await this.getRequestedChainsIds()
+          this.setRequestedChainsIds([...requestedChains, chainId])
+        }
+
+        await provider.request({
+          method: 'wallet_switchEthereumChain',
+          params: [{ chainId: numberToHex(chainId) }],
+        })
+        return chain
+      } catch (error) {
+        const message =
+          typeof error === 'string'
+            ? error
+            : (error as ProviderRpcError)?.message
+        if (/user rejected request/i.test(message))
+          throw new UserRejectedRequestError(error as Error)
+        throw new SwitchChainError(error as Error)
+      }
+    },
+    onAccountsChanged(accounts) {
+      if (accounts.length === 0) this.onDisconnect()
+      else config.emitter.emit('change', { accounts: accounts.map(getAddress) })
+    },
+    onChainChanged(chain) {
+      const chainId = normalizeChainId(chain)
+      config.emitter.emit('change', { chainId })
+    },
+    async onConnect(connectInfo) {
+      const chainId = normalizeChainId(connectInfo.chainId)
+      const accounts = await this.getAccounts()
+      config.emitter.emit('connect', { accounts, chainId })
+    },
+    async onDisconnect(_error) {
+      this.setRequestedChainsIds([])
+      config.emitter.emit('disconnect')
+
+      const provider = await this.getProvider()
+      provider.removeListener(
+        'accountsChanged',
+        this.onAccountsChanged.bind(this),
+      )
+      provider.removeListener('chainChanged', this.onChainChanged)
+      provider.removeListener('disconnect', this.onDisconnect.bind(this))
+      provider.removeListener('session_delete', this.onSessionDelete.bind(this))
+      provider.on('connect', this.onConnect.bind(this))
+    },
+    onDisplayUri(uri) {
+      config.emitter.emit('message', { type: 'display_uri', data: uri })
+    },
+    onSessionDelete() {
+      this.onDisconnect()
+    },
+    getNamespaceChainsIds() {
+      if (!provider_) return []
+      const chainIds = provider_.session?.namespaces[NAMESPACE]?.chains?.map(
+        (chain) => parseInt(chain.split(':')[1] || ''),
+      )
+      return chainIds ?? []
+    },
+    getNamespaceMethods() {
+      if (!provider_) return []
+      const methods = provider_.session?.namespaces[NAMESPACE]
+        ?.methods as NamespaceMethods[]
+      return methods ?? []
+    },
+    async getRequestedChainsIds() {
+      return (
+        (await config.storage?.getItem(this.requestedChainsStorageKey)) ?? []
+      )
+    },
+    /**
+     * Checks if the target chains match the chains that were
+     * initially requested by the connector for the WalletConnect session.
+     * If there is a mismatch, this means that the chains on the connector
+     * are considered stale, and need to be revalidated at a later point (via
+     * connection).
+     *
+     * There may be a scenario where a dapp adds a chain to the
+     * connector later on, however, this chain will not have been approved or rejected
+     * by the wallet. In this case, the chain is considered stale.
+     *
+     * There are exceptions however:
+     * -  If the wallet supports dynamic chain addition via `eth_addEthereumChain`,
+     *    then the chain is not considered stale.
+     * -  If the `isNewChainsStale` flag is falsy on the connector, then the chain is
+     *    not considered stale.
+     *
+     * For the above cases, chain validation occurs dynamically when the user
+     * attempts to switch chain.
+     *
+     * Also check that dapp supports at least 1 chain from previously approved session.
+     */
+    async isChainsStale() {
+      const namespaceMethods = this.getNamespaceMethods()
+      if (namespaceMethods.includes('wallet_addEthereumChain')) return false
+      if (!isNewChainsStale) return false
+
+      const connectorChains = config.chains.map((x) => x.id)
+      const namespaceChains = this.getNamespaceChainsIds()
+      if (
+        namespaceChains.length &&
+        !namespaceChains.some((id) => connectorChains.includes(id))
+      )
+        return false
+
+      const requestedChains = await this.getRequestedChainsIds()
+      return !connectorChains.every((id) => requestedChains.includes(id))
+    },
+    async setRequestedChainsIds(chains) {
+      await config.storage?.setItem(this.requestedChainsStorageKey, chains)
+    },
+    get requestedChainsStorageKey() {
+      return `${this.id}.requestedChains` as Properties['requestedChainsStorageKey']
+    },
+  }))
+}

package/README.md

@@ -1,46 +0,0 @@
-# `@wagmi/connectors`
-
-Collection of connectors for wagmi.
-
-## Installation
-
-Install the `@wagmi/connectors` package.
-
-```
-npm i @wagmi/connectors
-```
-
-## Usage
-
-Configure your wagmi config with connectors!
-
-```tsx
-import { configureChains, createConfig } from 'wagmi'
-
-import { InjectedConnector } from '@wagmi/connectors/injected'
-
-const { chains, provider } = configureChains(...)
-
-const config = createConfig({
-  connectors: [
-    new InjectedConnector({ chains }),
-  ],
-  provider,
-})
-```
-
-> If your bundler supports tree-shaking (most likely), only the used connectors will be included in the bundle, so you don't have to worry about bundle size. 😊
-
-## Connectors
-
-- [`CoinbaseWalletConnector`](/packages/connectors/src/coinbaseWallet.ts)
-- [`InjectedConnector`](/packages/connectors/src/injected.ts)
-- [`LedgerConnector`](/packages/connectors/src/ledger.ts)
-- [`MetaMaskConnector`](/packages/connectors/src/metaMask.ts)
-- [`MockConnector`](/packages/connectors/src/mock.ts)
-- [`SafeConnector`](/packages/connectors/src/safe.ts)
-- [`WalletConnectConnector`](/packages/connectors/src/walletConnect.ts)
-
-## Contributing
-
-Want to add another chain to the list? Make sure you read the [contributing guide](../../.github/CONTRIBUTING.md) first.

package/coinbaseWallet/package.json

@@ -1,4 +0,0 @@
-{
-  "type": "module",
-  "main": "../dist/coinbaseWallet.js"
-}

package/dist/base-70e3a8a9.d.ts

@@ -1,142 +0,0 @@
-import EventEmitter from 'eventemitter3';
-import { EIP1193Provider, Transport, Chain, Account, WalletClient as WalletClient$1, Address } from 'viem';
-import { Chain as Chain$1 } from 'viem/chains';
-
-type InjectedProviderFlags = {
-    isApexWallet?: true;
-    isAvalanche?: true;
-    isBackpack?: true;
-    isBifrost?: true;
-    isBitKeep?: true;
-    isBitski?: true;
-    isBlockWallet?: true;
-    isBraveWallet?: true;
-    isCoin98?: true;
-    isCoinbaseWallet?: true;
-    isDawn?: true;
-    isDefiant?: true;
-    isDesig?: true;
-    isEnkrypt?: true;
-    isExodus?: true;
-    isFordefi?: true;
-    isFrame?: true;
-    isFrontier?: true;
-    isGamestop?: true;
-    isHaloWallet?: true;
-    isHaqqWallet?: true;
-    isHyperPay?: true;
-    isImToken?: true;
-    isKuCoinWallet?: true;
-    isMathWallet?: true;
-    isMetaMask?: true;
-    isNovaWallet?: true;
-    isOkxWallet?: true;
-    isOKExWallet?: true;
-    isOneInchAndroidWallet?: true;
-    isOneInchIOSWallet?: true;
-    isOpera?: true;
-    isPhantom?: true;
-    isPortal?: true;
-    isRabby?: true;
-    isRainbow?: true;
-    isStatus?: true;
-    isSubWallet?: true;
-    isTalisman?: true;
-    isTally?: true;
-    isTokenPocket?: true;
-    isTokenary?: true;
-    isTrust?: true;
-    isTrustWallet?: true;
-    isTTWallet?: true;
-    isXDEFI?: true;
-    isZeal?: true;
-    isZerion?: true;
-};
-type InjectedProviders = InjectedProviderFlags & {
-    isMetaMask: true;
-    /** Only exists in MetaMask as of 2022/04/03 */
-    _events: {
-        connect?: () => void;
-    };
-    /** Only exists in MetaMask as of 2022/04/03 */
-    _state?: {
-        accounts?: string[];
-        initialized?: boolean;
-        isConnected?: boolean;
-        isPermanentlyDisconnected?: boolean;
-        isUnlocked?: boolean;
-    };
-};
-interface WindowProvider extends InjectedProviders, EIP1193Provider {
-    providers?: WindowProvider[];
-}
-type WalletClient<TTransport extends Transport = Transport, TChain extends Chain = Chain, TAccount extends Account = Account> = WalletClient$1<TTransport, TChain, TAccount>;
-type Storage = {
-    getItem<T>(key: string, defaultState?: T | null): T | null;
-    setItem<T>(key: string, value: T | null): void;
-    removeItem(key: string): void;
-};
-
-type ConnectorData = {
-    account?: Address;
-    chain?: {
-        id: number;
-        unsupported: boolean;
-    };
-};
-interface ConnectorEvents {
-    change(data: ConnectorData): void;
-    connect(data: ConnectorData): void;
-    message({ type, data }: {
-        type: string;
-        data?: unknown;
-    }): void;
-    disconnect(): void;
-    error(error: Error): void;
-}
-declare abstract class Connector<Provider = any, Options = any> extends EventEmitter<ConnectorEvents> {
-    /** Unique connector id */
-    abstract readonly id: string;
-    /** Connector name */
-    abstract readonly name: string;
-    /** Chains connector supports */
-    readonly chains: Chain$1[];
-    /** Options to use with connector */
-    readonly options: Options;
-    /** Connector storage. */
-    protected storage?: Storage;
-    /** Whether connector is usable */
-    abstract readonly ready: boolean;
-    constructor({ chains, options, }: {
-        chains?: Chain$1[];
-        options: Options;
-    });
-    abstract connect(config?: {
-        chainId?: number;
-    }): Promise<Required<ConnectorData>>;
-    abstract disconnect(): Promise<void>;
-    abstract getAccount(): Promise<Address>;
-    abstract getChainId(): Promise<number>;
-    abstract getProvider(config?: {
-        chainId?: number;
-    }): Promise<Provider>;
-    abstract getWalletClient(config?: {
-        chainId?: number;
-    }): Promise<WalletClient>;
-    abstract isAuthorized(): Promise<boolean>;
-    switchChain?(chainId: number): Promise<Chain$1>;
-    watchAsset?(asset: {
-        address: string;
-        decimals?: number;
-        image?: string;
-        symbol: string;
-    }): Promise<boolean>;
-    protected abstract onAccountsChanged(accounts: Address[]): void;
-    protected abstract onChainChanged(chain: number | string): void;
-    protected abstract onDisconnect(error: Error): void;
-    protected getBlockExplorerUrls(chain: Chain$1): string[] | undefined;
-    protected isChainUnsupported(chainId: number): boolean;
-    setStorage(storage: Storage): void;
-}
-
-export { Connector as C, WindowProvider as W, ConnectorData as a, ConnectorEvents as b, WalletClient as c };