feat: <AppKitProvider> (#4696)

Author: 0xmkh

.changeset/crazy-jobs-run.md

@@ -0,0 +1,41 @@
+---
+'@reown/appkit': patch
+'@reown/appkit-adapter-bitcoin': 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-codemod': patch
+'@reown/appkit-common': patch
+'@reown/appkit-controllers': patch
+'@reown/appkit-core': patch
+'@reown/appkit-experimental': patch
+'@reown/appkit-pay': patch
+'@reown/appkit-polyfills': patch
+'@reown/appkit-scaffold-ui': patch
+'@reown/appkit-siwe': patch
+'@reown/appkit-siwx': patch
+'@reown/appkit-testing': patch
+'@reown/appkit-ui': patch
+'@reown/appkit-wallet': patch
+'@reown/appkit-wallet-button': patch
+---
+
+Introduced `AppKitProvider` React component for easy AppKit integration in React apps
+
+**Example usage**
+
+```tsx
+import { AppKitProvider } from '@reown/appkit/react';
+
+function App() {
+  return (
+    <AppKitProvider projectId="YOUR_PROJECT_ID" networks={[/* Your Networks */]}>
+      {/* Your App */}
+    </AppKitProvider>
+  );
+}
+```

packages/appkit/exports/react.ts

@@ -77,3 +77,6 @@ export {
   AppKitConnectButton,
   AppKitAccountButton
 } from '../src/library/react/components.js'
+
+export { AppKitProvider } from '../src/library/react/providers.js'
+export type { AppKitProviderProps } from '../src/library/react/providers.js'

packages/appkit/package.json

@@ -137,12 +137,12 @@
   "dependencies": {
     "@reown/appkit-common": "workspace:*",
     "@reown/appkit-controllers": "workspace:*",
+    "@reown/appkit-pay": "workspace:*",
     "@reown/appkit-polyfills": "workspace:*",
     "@reown/appkit-scaffold-ui": "workspace:*",
     "@reown/appkit-ui": "workspace:*",
     "@reown/appkit-utils": "workspace:*",
     "@reown/appkit-wallet": "workspace:*",
-    "@reown/appkit-pay": "workspace:*",
     "@walletconnect/types": "2.21.5",
     "@walletconnect/universal-provider": "2.21.5",
     "bs58": "6.0.0",
@@ -152,6 +152,7 @@
   },
   "devDependencies": {
     "@reown/appkit-siwe": "workspace:*",
+    "@testing-library/react": "16.3.0",
     "@types/react": "19.1.3",
     "@types/react-dom": "19.1.3",
     "@vitest/coverage-v8": "2.1.9",

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

@@ -0,0 +1,27 @@
+import { type ReactNode } from 'react'
+
+import { type CreateAppKit, createAppKit } from '../../../exports/react.js'
+
+// -- Types --------------------------------------------------------------------------------
+export type AppKitProviderProps = CreateAppKit & {
+  children: ReactNode
+}
+
+// -- State --------------------------------------------------------------------------------
+let appkit: ReturnType<typeof createAppKit> | null = null
+
+// -- Utils & Others -----------------------------------------------------------------------
+export function memoizeCreateAppKit(config: CreateAppKit) {
+  if (!appkit) {
+    appkit = createAppKit(config)
+  }
+
+  return appkit
+}
+
+// -- Providers ----------------------------------------------------------------------------
+export function AppKitProvider({ children, ...props }: AppKitProviderProps) {
+  memoizeCreateAppKit(props)
+
+  return children
+}

packages/appkit/tests/library/react.test.ts

@@ -0,0 +1,37 @@
+import { createElement } from 'react'
+
+import { render } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { AppKitProvider, type AppKitProviderProps } from '../../src/library/react/providers'
+
+let mod: typeof import('../../exports/react')
+
+describe('AppKitProvider', () => {
+  beforeEach(async () => {
+    vi.clearAllMocks()
+    mod = await import('../../exports/react')
+    vi.spyOn(mod, 'createAppKit')
+  })
+
+  it('should call createAppKit with the correct parameters', () => {
+    const props = {
+      projectId: 'test',
+      networks: [],
+      children: 'child'
+    } as unknown as AppKitProviderProps
+
+    const { rerender } = render(
+      createElement(AppKitProvider, props, createElement('div', null, 'child'))
+    )
+
+    delete props.children
+
+    expect(mod.createAppKit).toHaveBeenCalledTimes(1)
+    expect(mod.createAppKit).toHaveBeenCalledWith(props)
+
+    rerender(createElement('div', null, 'child'))
+
+    expect(mod.createAppKit).toHaveBeenCalledTimes(1)
+  })
+})

packages/appkit/vitest.config.ts

@@ -4,7 +4,10 @@ import { defineProject } from 'vitest/config'
 export default defineProject({
   test: {
     globals: true,
-    environmentMatchGlobs: [['**/vue.test.ts', 'jsdom']],
+    environmentMatchGlobs: [
+      ['**/vue.test.ts', 'jsdom'],
+      ['**/react.test.ts', 'jsdom']
+    ],
 
     // @ts-ignore
     coverage: {