fix: lazy-load @reown/appkit to reduce initial bundle size

.changeset/lazy-load-reown-appkit.md

@@ -0,0 +1,5 @@
+---
+'@stacks/connect': patch
+---
+
+Lazy-load @reown/appkit to reduce initial bundle size and eliminate Lit SSR warnings

packages/connect/src/request.ts

@@ -24,7 +24,7 @@ import { DEFAULT_PROVIDERS, WALLET_CONNECT_PROVIDER } from './providers';
 import { setLocalStorageData } from './storage';
 import { StacksProvider } from './types';
 import { initializeWalletConnectProvider } from './walletconnect';
-import { UniversalConnectorConfig } from '@reown/appkit-universal-connector';
+import type { UniversalConnectorConfig } from '@reown/appkit-universal-connector';
 
 export interface ConnectRequestOptions {
   /**

packages/connect/src/walletconnect/config.ts

@@ -1,5 +1,7 @@
-import { CustomCaipNetwork, UniversalConnectorConfig } from '@reown/appkit-universal-connector';
-import { bitcoin, bitcoinTestnet } from '@reown/appkit/networks';
+import type {
+  CustomCaipNetwork,
+  UniversalConnectorConfig,
+} from '@reown/appkit-universal-connector';
 import { MethodsRaw } from '../methods';
 
 const stacksMethods: (keyof MethodsRaw)[] = [
@@ -41,8 +43,24 @@ export namespace Chains {
   }
 
   export namespace Bitcoin {
-    export const Mainnet = bitcoin;
-    export const Testnet = bitcoinTestnet;
+    export const Mainnet: CustomCaipNetwork<'bip122'> = {
+      id: '000000000019d6689c085ae165831e93',
+      caipNetworkId: 'bip122:000000000019d6689c085ae165831e93',
+      chainNamespace: 'bip122' as const,
+      name: 'Bitcoin',
+      nativeCurrency: { name: 'Bitcoin', symbol: 'BTC', decimals: 8 },
+      rpcUrls: { default: { http: ['https://rpc.walletconnect.org/v1'] } },
+    };
+
+    export const Testnet: CustomCaipNetwork<'bip122'> = {
+      id: '000000000933ea01ad0ee984209779ba',
+      caipNetworkId: 'bip122:000000000933ea01ad0ee984209779ba',
+      chainNamespace: 'bip122' as const,
+      name: 'Bitcoin Testnet',
+      nativeCurrency: { name: 'Bitcoin', symbol: 'BTC', decimals: 8 },
+      rpcUrls: { default: { http: ['https://rpc.walletconnect.org/v1'] } },
+      testnet: true,
+    };
   }
 }
 

packages/connect/src/walletconnect/index.ts

@@ -1,4 +1,7 @@
-import { UniversalConnector, UniversalConnectorConfig } from '@reown/appkit-universal-connector';
+import type {
+  UniversalConnector as UniversalConnectorType,
+  UniversalConnectorConfig,
+} from '@reown/appkit-universal-connector';
 import {
   AddressEntry,
   GetAddressesResult,
@@ -20,8 +23,8 @@ function jsonRpcResponse<M extends keyof MethodsRaw>(result: unknown): JsonRpcRe
 }
 
 class WalletConnectProvider implements StacksProvider {
-  private connector: UniversalConnector;
-  constructor(connector: UniversalConnector) {
+  private connector: UniversalConnectorType;
+  constructor(connector: UniversalConnectorType) {
     this.connector = connector;
   }
 
@@ -203,6 +206,7 @@ export async function initializeWalletConnectProvider(
       ? { projectId: arg, config: undefined }
       : { projectId: arg.projectId, config: arg };
 
+  const { UniversalConnector } = await import('@reown/appkit-universal-connector');
   const provider = await UniversalConnector.init({
     ...Default,
     ...config,

packages/connect/tsup.config.ts

@@ -6,7 +6,7 @@ import { replace } from 'esbuild-plugin-replace';
 export default defineConfig({
   format: ['cjs', 'esm', 'iife'],
   outDir: 'dist',
-  external: ['@stacks/connect-ui'],
+  external: ['@stacks/connect-ui', '@reown/appkit-universal-connector', '@reown/appkit'],
 
   clean: true,
   sourcemap: true,