feat: Injected Universal Provider

.changeset/lovely-dragons-clap.md

@@ -0,0 +1,22 @@
+---
+'@reown/appkit-scaffold-ui': patch
+'@reown/appkit': patch
+'@reown/appkit-core': patch
+'@reown/appkit-adapter-ethers': patch
+'@reown/appkit-adapter-ethers5': patch
+'@reown/appkit-adapter-solana': patch
+'@reown/appkit-adapter-wagmi': patch
+'@reown/appkit-utils': patch
+'@reown/appkit-cdn': patch
+'@reown/appkit-cli': patch
+'@reown/appkit-common': patch
+'@reown/appkit-experimental': patch
+'@reown/appkit-polyfills': patch
+'@reown/appkit-siwe': patch
+'@reown/appkit-siwx': patch
+'@reown/appkit-ui': patch
+'@reown/appkit-wallet': patch
+'@reown/appkit-wallet-button': patch
+---
+
+Adds walletConnectProvider and enableUniversalProviderManualControl flags to inject a UniversalProvider instance to be used by AppKit'

apps/laboratory/src/pages/library/custom-universal-provider.tsx

@@ -0,0 +1,58 @@
+import { AppKit, createAppKit } from '@reown/appkit/react'
+import { ThemeStore } from '../../utils/StoreUtil'
+import { ConstantsUtil } from '../../utils/ConstantsUtil'
+import { AppKitButtons } from '../../components/AppKitButtons'
+import { mainnet } from '@reown/appkit/networks'
+import { MultiChainInfo } from '../../components/MultiChainInfo'
+import { UpaTests } from '../../components/UPA/UpaTests'
+import Provider, { UniversalProvider } from '@walletconnect/universal-provider'
+import { useEffect, useState } from 'react'
+
+const networks = ConstantsUtil.EvmNetworks
+
+export default function MultiChainWagmiAdapterOnly() {
+  const [uprovider, setUprovider] = useState<Provider | null>(null)
+  const [appkit, setAppKit] = useState<AppKit | null>(null)
+
+  async function initializeUniversalProvider() {
+    const provider = await UniversalProvider.init({
+      projectId: ConstantsUtil.ProjectId
+    })
+
+    const modal = createAppKit({
+      networks,
+      defaultNetwork: mainnet,
+      projectId: ConstantsUtil.ProjectId,
+      metadata: ConstantsUtil.Metadata,
+      enableUniversalProviderManualControl: true,
+      walletConnectProvider: provider
+    })
+
+    ThemeStore.setModal(modal)
+    setAppKit(modal)
+
+    provider.on('display_uri', (connection: string) => {
+      modal.open({ view: 'ConnectingWalletConnectBasic', uri: connection })
+    })
+
+    setUprovider(provider)
+  }
+
+  useEffect(() => {
+    initializeUniversalProvider()
+  }, [])
+
+  return (
+    <>
+      {uprovider && appkit ? (
+        <>
+          <AppKitButtons />
+          <MultiChainInfo />
+          <UpaTests />
+        </>
+      ) : (
+        ''
+      )}
+    </>
+  )
+}

packages/appkit-new/src/client.ts

@@ -1580,7 +1580,8 @@ export class AppKit {
       }
     }
 
-    this.universalProvider = await UniversalProvider.init(universalProviderOptions)
+    this.universalProvider =
+      this.options.walletConnectProvider ?? (await UniversalProvider.init(universalProviderOptions))
   }
 
   public async getUniversalProvider() {

packages/appkit-new/src/utils/TypesUtil.ts

@@ -1,6 +1,7 @@
 import type { AppKitNetwork, CaipNetwork, ThemeVariables } from '@reown/appkit-common'
 import type { ChainAdapter, Metadata, OptionsControllerState, ThemeMode } from '@reown/appkit-core'
 import type { AppKitSIWEClient } from '@reown/appkit-siwe'
+import type { IUniversalProvider } from '@walletconnect/universal-provider'
 
 export type AppKitOptions = {
   /**
@@ -72,9 +73,10 @@ export type AppKitOptions = {
    * @see https://cloud.walletconnect.com/
    */
   metadata?: Metadata
+  /**
+   * UniversalProvider instance to be used by AppKit.
+   * AppKit will generate its own instance by default in none provided
+   * @default undefined
+   */
+  walletConnectProvider?: IUniversalProvider
 } & OptionsControllerState
-
-export type AppKitOptionsWithCaipNetworks = Omit<AppKitOptions, 'defaultNetwork' | 'networks'> & {
-  defaultNetwork?: CaipNetwork
-  networks: [CaipNetwork, ...CaipNetwork[]]
-}

packages/appkit/exports/constants.ts

@@ -1 +1 @@
-export const PACKAGE_VERSION = '1.5.3'
+export const PACKAGE_VERSION = '1.6.0'

packages/appkit/src/adapters/ChainAdapterBlueprint.ts

@@ -367,6 +367,7 @@ export namespace AdapterBlueprint {
     namespace?: ChainNamespace
     networks?: CaipNetwork[]
     projectId?: string
+    enableUniversalProviderManualControl?: boolean
   }
 
   export type SwitchNetworkParams = {

packages/appkit/src/client.ts

@@ -93,7 +93,14 @@ export { AccountController }
 
 // -- Types --------------------------------------------------------------------
 export interface OpenOptions {
-  view: 'Account' | 'Connect' | 'Networks' | 'ApproveTransaction' | 'OnRampProviders'
+  view:
+    | 'Account'
+    | 'Connect'
+    | 'Networks'
+    | 'ApproveTransaction'
+    | 'OnRampProviders'
+    | 'ConnectingWalletConnectBasic'
+  uri?: string
 }
 
 type Adapters = Record<ChainNamespace, AdapterBlueprint>
@@ -237,6 +244,10 @@ export class AppKit {
   // -- Public -------------------------------------------------------------------
   public async open(options?: OpenOptions) {
     await this.initOrContinue()
+    if (options?.uri && this.universalAdapter) {
+      console.log('options.uri', options.uri)
+      ConnectionController.setUri(options.uri)
+    }
     ModalController.open(options)
   }
 
@@ -1778,7 +1789,8 @@ export class AppKit {
       logger
     }
 
-    this.universalProvider = await UniversalProvider.init(universalProviderOptions)
+    this.universalProvider =
+      this.options.walletConnectProvider ?? (await UniversalProvider.init(universalProviderOptions))
   }
 
   public async getUniversalProvider() {

packages/appkit/src/library/react/index.ts

@@ -17,6 +17,7 @@ import type { ChainNamespace } from '@reown/appkit-common'
 
 type OpenOptions = {
   view: 'Account' | 'Connect' | 'Networks' | 'ApproveTransaction' | 'OnRampProviders'
+  uri?: string
 }
 
 type ThemeModeOptions = AppKitOptions['themeMode']

packages/appkit/src/universal-adapter/client.ts

@@ -1,11 +1,18 @@
 import type UniversalProvider from '@walletconnect/universal-provider'
 import { AdapterBlueprint } from '../adapters/ChainAdapterBlueprint.js'
 import { WcHelpersUtil } from '../utils/index.js'
-import { ChainController, CoreHelperUtil } from '@reown/appkit-core'
+import { ChainController, CoreHelperUtil, ConnectionController } from '@reown/appkit-core'
 import bs58 from 'bs58'
 import { ConstantsUtil, type ChainNamespace } from '@reown/appkit-common'
 
 export class UniversalAdapter extends AdapterBlueprint {
+  private enableUniversalProviderManualControl: boolean
+  public constructor(options?: AdapterBlueprint.Params) {
+    super(options)
+    this.enableUniversalProviderManualControl = Boolean(
+      options?.enableUniversalProviderManualControl
+    )
+  }
   public async connectWalletConnect(onUri: (uri: string) => void) {
     const connector = this.connectors.find(c => c.type === 'WALLET_CONNECT')
 
@@ -17,6 +24,12 @@ export class UniversalAdapter extends AdapterBlueprint {
       )
     }
 
+    if (this.enableUniversalProviderManualControl && ConnectionController.state.wcUri) {
+      onUri(ConnectionController.state.wcUri)
+
+      return
+    }
+
     provider.on('display_uri', (uri: string) => {
       onUri(uri)
     })

packages/appkit/src/utils/TypesUtil.ts

@@ -1,6 +1,7 @@
-import type { AppKitNetwork, CaipNetwork, ThemeVariables } from '@reown/appkit-common'
+import type { AppKitNetwork, ThemeVariables } from '@reown/appkit-common'
 import type { ChainAdapter, Metadata, OptionsControllerState, ThemeMode } from '@reown/appkit-core'
 import type { AppKitSIWEClient } from '@reown/appkit-siwe'
+import type UniversalProvider from '@walletconnect/universal-provider'
 
 export type AppKitOptions = {
   /**
@@ -72,9 +73,10 @@ export type AppKitOptions = {
    * @see https://cloud.walletconnect.com/
    */
   metadata?: Metadata
+  /**
+   * UniversalProvider instance to be used by AppKit.
+   * AppKit will generate its own instance by default in none provided
+   * @default undefined
+   */
+  walletConnectProvider?: UniversalProvider
 } & OptionsControllerState
-
-export type AppKitOptionsWithCaipNetworks = Omit<AppKitOptions, 'defaultNetwork' | 'networks'> & {
-  defaultNetwork?: CaipNetwork
-  networks: [CaipNetwork, ...CaipNetwork[]]
-}

packages/core/src/controllers/ConnectionController.ts

@@ -65,6 +65,7 @@ export interface ConnectionControllerState {
   recentWallet?: WcWallet
   buffering: boolean
   status?: 'connecting' | 'connected' | 'disconnected'
+  enableUniversalProviderManualControl?: boolean
   connectionControllerClient?: ConnectionControllerClient
 }
 
@@ -133,10 +134,7 @@ export const ConnectionController = {
       state.wcPairingExpiry = undefined
       this.state.status = 'connected'
     } else {
-      await this._getClient()?.connectWalletConnect?.(uri => {
-        state.wcUri = uri
-        state.wcPairingExpiry = CoreHelperUtil.getPairingExpiry()
-      })
+      await this._getClient()?.connectWalletConnect?.(uri => this.setUri(uri))
     }
   },
 
@@ -225,6 +223,10 @@ export const ConnectionController = {
     TransactionsController.resetTransactions()
     StorageUtil.deleteWalletConnectDeepLink()
   },
+  setUri(uri: string) {
+    state.wcUri = uri
+    state.wcPairingExpiry = CoreHelperUtil.getPairingExpiry()
+  },
 
   setWcLinking(wcLinking: ConnectionControllerState['wcLinking']) {
     state.wcLinking = wcLinking

packages/core/src/controllers/OptionsController.ts

@@ -130,6 +130,11 @@ export interface OptionsControllerStatePublic {
    * @default false
    */
   enableEmbedded?: boolean
+  /**
+   * Enable manual control of WalletConnect connections.
+   * @default false
+   */
+  enableUniversalProviderManualControl?: boolean
 }
 
 export interface OptionsControllerStateInternal {

packages/core/src/controllers/RouterController.ts

@@ -42,6 +42,7 @@ export interface RouterControllerState {
     | 'ConnectingExternal'
     | 'ConnectingFarcaster'
     | 'ConnectingWalletConnect'
+    | 'ConnectingWalletConnectBasic'
     | 'ConnectingSiwe'
     | 'ConnectingSocial'
     | 'ConnectSocials'

packages/scaffold-ui/exports/index.ts

@@ -22,6 +22,7 @@ export * from '../src/views/w3m-connect-view/index.js'
 export * from '../src/views/w3m-connecting-external-view/index.js'
 export * from '../src/views/w3m-connecting-multi-chain-view/index.js'
 export * from '../src/views/w3m-connecting-wc-view/index.js'
+export * from '../src/views/w3m-connecting-wc-basic-view/index.js'
 export * from '../src/views/w3m-choose-account-name-view/index.js'
 export * from '../src/views/w3m-downloads-view/index.js'
 export * from '../src/views/w3m-get-wallet-view/index.js'

packages/scaffold-ui/src/modal/w3m-router/index.ts

@@ -79,6 +79,8 @@ export class W3mRouter extends LitElement {
         return html`<w3m-connect-view walletGuide="explore"></w3m-connect-view>`
       case 'ConnectingWalletConnect':
         return html`<w3m-connecting-wc-view></w3m-connecting-wc-view>`
+      case 'ConnectingWalletConnectBasic':
+        return html`<w3m-connecting-wc-basic-view></w3m-connecting-wc-basic-view>`
       case 'ConnectingExternal':
         return html`<w3m-connecting-external-view></w3m-connecting-external-view>`
       case 'ConnectingSiwe':

packages/scaffold-ui/src/partials/w3m-connecting-wc-qrcode/index.ts

@@ -9,11 +9,16 @@ import { html } from 'lit'
 import { ifDefined } from 'lit/directives/if-defined.js'
 import { W3mConnectingWidget } from '../../utils/w3m-connecting-widget/index.js'
 import styles from './styles.js'
+import { state } from 'lit/decorators.js'
 
 @customElement('w3m-connecting-wc-qrcode')
 export class W3mConnectingWcQrcode extends W3mConnectingWidget {
   public static override styles = styles
 
+  // -- State & Properties -------------------------------- //
+  @state() private enableUniversalProviderManualControl =
+    ConnectionController.state.enableUniversalProviderManualControl
+
   public constructor() {
     super()
     window.addEventListener('resize', this.forceUpdate)
@@ -47,8 +52,12 @@ export class W3mConnectingWcQrcode extends W3mConnectingWidget {
         </wui-text>
         ${this.copyTemplate()}
       </wui-flex>
-
       <w3m-mobile-download-links .wallet=${this.wallet}></w3m-mobile-download-links>
+      ${this.enableUniversalProviderManualControl
+        ? html`<wui-flex flexDirection="column" .padding=${['0', 'xl', 'xl', 'xl']} gap="xl">
+            <w3m-all-wallets-widget></w3m-all-wallets-widget>
+          </wui-flex>`
+        : null}
     `
   }
 

packages/scaffold-ui/src/partials/w3m-header/index.ts

@@ -40,6 +40,7 @@ function headings() {
     BuyInProgress: 'Buy',
     ConnectingExternal: name ?? 'Connect Wallet',
     ConnectingWalletConnect: name ?? 'WalletConnect',
+    ConnectingWalletConnectBasic: 'WalletConnect',
     ConnectingSiwe: 'Sign In',
     Convert: 'Convert',
     ConvertSelectToken: 'Select token',

packages/scaffold-ui/src/views/w3m-connecting-wc-basic-view/index.ts

@@ -0,0 +1,46 @@
+import { ApiController, CoreHelperUtil, OptionsController, StorageUtil } from '@reown/appkit-core'
+import { customElement } from '@reown/appkit-ui'
+import { LitElement, html } from 'lit'
+import { state } from 'lit/decorators.js'
+
+@customElement('w3m-connecting-wc-basic-view')
+export class W3mConnectingWcBasicView extends LitElement {
+  @state() private isMobile = CoreHelperUtil.isMobile()
+
+  // -- Render -------------------------------------------- //
+  public override render() {
+    // eslint-disable-next-line no-console
+    console.log('W3mConnectingWcBasicView.constructor()', this.isMobile)
+
+    if (this.isMobile) {
+      const { featured, recommended } = ApiController.state
+      const { customWallets } = OptionsController.state
+      const recent = StorageUtil.getRecentWallets()
+
+      const showConnectors =
+        featured.length || recommended.length || customWallets?.length || recent.length
+      // eslint-disable-next-line no-console
+      console.log('W3mConnectingWcBasicView.constructor()', recommended)
+
+      return html`<wui-flex
+        flexDirection="column"
+        gap="xs"
+        .margin=${['3xs', 's', 's', 's'] as const}
+      >
+        ${showConnectors ? html`<w3m-connector-list></w3m-connector-list>` : null}
+        <w3m-all-wallets-widget></w3m-all-wallets-widget>
+      </wui-flex>`
+    }
+
+    return html`<wui-flex flexDirection="column" .padding=${['0', '0', 'l', '0'] as const}>
+      <w3m-connecting-wc-view></w3m-connecting-wc-view>
+      <wui-flex flexDirection="column" .padding=${['0', 'm', '0', 'm'] as const}>
+        <w3m-all-wallets-widget></w3m-all-wallets-widget> </wui-flex
+    ></wui-flex>`
+  }
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    'w3m-connecting-wc-basic-view': W3mConnectingWcBasicView
+  }
+}

packages/scaffold-ui/src/views/w3m-connecting-wc-view/index.ts

@@ -46,10 +46,6 @@ export class W3mConnectingWcView extends LitElement {
 
   // -- Render -------------------------------------------- //
   public override render() {
-    if (!this.wallet) {
-      return html`<w3m-connecting-wc-qrcode></w3m-connecting-wc-qrcode>`
-    }
-
     return html`
       ${this.headerTemplate()}
       <div>${this.platformTemplate()}</div>