chore: merge main

packages/miniapp-manifest-generator/package.json

@@ -41,7 +41,7 @@
     "tailwindcss": "^4.1.4",
     "typescript": "~5.7.2",
     "typescript-eslint": "^8.24.1",
-    "vite": "^6.2.0",
+    "vite": "^5.4.19",
     "vitest": "^3.0.5"
   },
   "packageManager": "pnpm@10.6.3"

packages/onchainkit/.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+    "recommendations": [
+        "esbenp.prettier-vscode",
+        "dbaeumer.vscode-eslint",
+        "bradlc.vscode-tailwindcss"
+    ]
+}

packages/onchainkit/.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "files.associations": {
+        "*.css": "tailwindcss"
+    }
+}

packages/onchainkit/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Changelog
 
+## 0.38.13
+
+### Patch Changes
+
+- **fix**: Update wagmi config if connectors change. By @dgca #2350
+
+## 0.38.12
+
+### Patch Changes
+
+- **fix**: MiniKit frames connector. By @dgca #2347
+
+## 0.38.11
+
+### Patch Changes
+
+- **feat**: Make "Sign Up" button optional in `<WalletModal/>`. By @dgca #2332
+- **fix**: Use mainnet to resolve ENS social media accounts. By @dgca #2333
+- **feat**: Configure Coinbase wallet preference via `<OnchainKitProvider/>`. By @dgca #2332
+- **fix**: Broken link in CHANGELOG. By @GarmashAlex #2331
+
 ## 0.38.10
 
 ### Patch Changes

packages/onchainkit/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/onchainkit",
-  "version": "0.38.10",
+  "version": "0.38.13",
   "type": "module",
   "repository": "https://github.com/coinbase/onchainkit.git",
   "license": "MIT",
@@ -75,7 +75,7 @@
     "tailwindcss-animate": "^1.0.7",
     "tscpaths": "^0.0.9",
     "tsup": "^8.3.5",
-    "vite": "^5.3.3",
+    "vite": "^5.4.19",
     "vite-plugin-dts": "^4.5.3",
     "vite-plugin-externalize-deps": "^0.9.0",
     "vitest": "^3.0.5"

packages/onchainkit/src/DefaultOnchainKitProviders.test.tsx

@@ -2,13 +2,24 @@ import { QueryClient } from '@tanstack/react-query';
 import { render, screen } from '@testing-library/react';
 import { type Mock, beforeEach, describe, expect, it, vi } from 'vitest';
 import { http, createConfig } from 'wagmi';
+import type { CreateConnectorFn } from 'wagmi';
 import { DefaultOnchainKitProviders } from './DefaultOnchainKitProviders';
 import { useProviderDependencies } from './internal/hooks/useProviderDependencies';
 import { useOnchainKit } from './useOnchainKit';
+import type { CreateWagmiConfigParams } from './core/types';
 
 // Mock the coinbase wallet connector
 const mockCoinbaseWallet = vi.fn();
 
+// Mock for the createWagmiConfig
+const mockCreateWagmiConfig = vi.fn();
+vi.mock('./core/createWagmiConfig', () => ({
+  createWagmiConfig: (params: CreateWagmiConfigParams) => {
+    mockCreateWagmiConfig(params);
+    return { mock: 'config', params };
+  },
+}));
+
 const queryClient = new QueryClient();
 const wagmiConfig = createConfig({
   chains: [
@@ -27,8 +38,10 @@ vi.mock('wagmi', async (importOriginal) => {
   const actual = await importOriginal<typeof import('wagmi')>();
   return {
     ...actual,
-    WagmiProvider: vi.fn(({ children }) => (
-      <div data-testid="wagmi-provider">{children}</div>
+    WagmiProvider: vi.fn(({ children, config }) => (
+      <div data-testid="wagmi-provider" data-config={JSON.stringify(config)}>
+        {children}
+      </div>
     )),
   };
 });
@@ -65,6 +78,30 @@ vi.mock('./useOnchainKit', () => ({
   })),
 }));
 
+// Create mock connector function that satisfies the CreateConnectorFn interface
+const createMockConnector = (id: string): CreateConnectorFn => {
+  return () => ({
+    id,
+    name: `Mock ${id}`,
+    type: 'mock',
+    icon: undefined,
+    rdns: undefined,
+    supportsSimulation: false,
+    connect: async () => ({
+      accounts: [],
+      chainId: 1,
+    }),
+    disconnect: async () => {},
+    getAccounts: async () => [],
+    getChainId: async () => 1,
+    getProvider: async () => ({}),
+    isAuthorized: async () => false,
+    onAccountsChanged: () => {},
+    onChainChanged: () => {},
+    onDisconnect: () => {},
+  });
+};
+
 // Mock wagmi/connectors
 vi.mock('wagmi/connectors', () => {
   return {
@@ -74,8 +111,8 @@ vi.mock('wagmi/connectors', () => {
       appLogoUrl?: string;
     }) => {
       mockCoinbaseWallet(params);
-      // Return a connector function that Wagmi expects
-      return () => ({ id: 'coinbaseWalletSDK' });
+      // Return a connector function that satisfies the CreateConnectorFn interface
+      return createMockConnector('coinbaseWalletSDK');
     },
   };
 });
@@ -283,4 +320,66 @@ describe('DefaultOnchainKitProviders', () => {
       }),
     );
   });
+
+  it('should update the Wagmi config when connectors change', async () => {
+    const { rerender } = render(
+      <DefaultOnchainKitProviders>
+        <div>Test Child</div>
+      </DefaultOnchainKitProviders>,
+    );
+
+    // Initial config creation
+    expect(mockCreateWagmiConfig).toHaveBeenCalledTimes(1);
+
+    // First call parameters
+    const firstCallParams = mockCreateWagmiConfig.mock.calls[0][0];
+    expect(firstCallParams.connectors).toBeDefined();
+
+    // Clear mocks to check rerender behavior
+    mockCreateWagmiConfig.mockClear();
+
+    // Create a different connector
+    const newConnector = createMockConnector('newConnector');
+
+    // Re-render with new connectors
+    rerender(
+      <DefaultOnchainKitProviders connectors={[newConnector]}>
+        <div>Test Child</div>
+      </DefaultOnchainKitProviders>,
+    );
+
+    // Should create a new config with the new connectors
+    expect(mockCreateWagmiConfig).toHaveBeenCalledTimes(1);
+
+    // Second call parameters
+    const secondCallParams = mockCreateWagmiConfig.mock.calls[0][0];
+    expect(secondCallParams.connectors).toEqual([newConnector]);
+  });
+
+  it('should not update the Wagmi config when the same connectors are passed', async () => {
+    // Create an initial connector
+    const initialConnectors = [createMockConnector('initialConnector')];
+
+    const { rerender } = render(
+      <DefaultOnchainKitProviders connectors={initialConnectors}>
+        <div>Test Child</div>
+      </DefaultOnchainKitProviders>,
+    );
+
+    // Initial config creation
+    expect(mockCreateWagmiConfig).toHaveBeenCalledTimes(1);
+
+    // Clear mocks to check rerender behavior
+    mockCreateWagmiConfig.mockClear();
+
+    // Re-render with the same connectors
+    rerender(
+      <DefaultOnchainKitProviders connectors={initialConnectors}>
+        <div>Test Child</div>
+      </DefaultOnchainKitProviders>,
+    );
+
+    // Should not create a new config
+    expect(mockCreateWagmiConfig).not.toHaveBeenCalled();
+  });
 });

packages/onchainkit/src/DefaultOnchainKitProviders.tsx

@@ -1,18 +1,32 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { type PropsWithChildren, useMemo, useState } from 'react';
+import {
+  type PropsWithChildren,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { Config, WagmiProvider } from 'wagmi';
 import { coinbaseWallet } from 'wagmi/connectors';
 import { createWagmiConfig } from './core/createWagmiConfig';
 import { useProviderDependencies } from './internal/hooks/useProviderDependencies';
 import { useOnchainKit } from './useOnchainKit';
+import type { CreateWagmiConfigParams } from './core/types';
 
-export function DefaultOnchainKitProviders({ children }: PropsWithChildren) {
+export function DefaultOnchainKitProviders({
+  children,
+  connectors,
+}: PropsWithChildren<{ connectors?: CreateWagmiConfigParams['connectors'] }>) {
   // Check the React context for WagmiProvider and QueryClientProvider
   const { providedWagmiConfig, providedQueryClient } =
     useProviderDependencies();
 
   return (
-    <WagmiProviderWithDefault providedWagmiConfig={providedWagmiConfig}>
+    <WagmiProviderWithDefault
+      providedWagmiConfig={providedWagmiConfig}
+      connectors={connectors}
+    >
       <QueryClientProviderWithDefault providedQueryClient={providedQueryClient}>
         {children}
       </QueryClientProviderWithDefault>
@@ -23,12 +37,16 @@ export function DefaultOnchainKitProviders({ children }: PropsWithChildren) {
 function WagmiProviderWithDefault({
   children,
   providedWagmiConfig,
+  connectors,
 }: PropsWithChildren<{
   providedWagmiConfig: Config | null;
+  connectors?: CreateWagmiConfigParams['connectors'];
 }>) {
   const onchainKitConfig = useOnchainKit();
+  const prevConnectorsRef =
+    useRef<CreateWagmiConfigParams['connectors']>(connectors);
 
-  const [config] = useState(() => {
+  const getWagmiConfig = useCallback(() => {
     if (providedWagmiConfig) return providedWagmiConfig;
 
     const appName = onchainKitConfig.config?.appearance?.name ?? undefined;
@@ -38,16 +56,32 @@ function WagmiProviderWithDefault({
       apiKey: onchainKitConfig.apiKey ?? undefined,
       appName,
       appLogoUrl,
-      connectors: [
+      connectors: connectors ?? [
         coinbaseWallet({
           appName,
           appLogoUrl,
           preference: onchainKitConfig.config?.wallet?.preference,
         }),
       ],
     });
+  }, [
+    onchainKitConfig.apiKey,
+    onchainKitConfig.config,
+    connectors,
+    providedWagmiConfig,
+  ]);
+
+  const [config, setConfig] = useState(() => {
+    return getWagmiConfig();
   });
 
+  useEffect(() => {
+    if (prevConnectorsRef.current !== connectors) {
+      setConfig(getWagmiConfig());
+      prevConnectorsRef.current = connectors;
+    }
+  }, [connectors, getWagmiConfig]);
+
   if (providedWagmiConfig) {
     return children;
   }

packages/onchainkit/src/connected/__tests__/Connected.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { Connected } from '../components/Connected';
+import { Connected } from '../';
 import { useAccount } from 'wagmi';
 
 vi.mock('wagmi', () => ({

packages/onchainkit/src/minikit/MiniKitProvider.tsx

@@ -125,12 +125,7 @@ export function MiniKitProvider({
 
   return (
     <MiniKitContext.Provider value={value}>
-      <DefaultOnchainKitProviders
-        apiKey={onchainKitProps.apiKey}
-        appName={onchainKitProps.config?.appearance?.name ?? undefined}
-        appLogoUrl={onchainKitProps.config?.appearance?.logo ?? undefined}
-        connectors={connectors}
-      >
+      <DefaultOnchainKitProviders connectors={connectors}>
         <OnchainKitProvider {...onchainKitProps}>
           <div
             style={{

packages/onchainkit/src/wallet/components/Wallet.tsx

@@ -24,6 +24,7 @@ export function Wallet({
   className,
   draggable,
   draggableStartingPosition,
+  isSponsored,
 }: WalletReact) {
   const componentTheme = useTheme();
 
@@ -35,7 +36,7 @@ export function Wallet({
   }
 
   return (
-    <WalletProvider>
+    <WalletProvider isSponsored={isSponsored}>
       <WalletContent
         className={cn(componentTheme, className)}
         {...getWalletDraggableProps({ draggable, draggableStartingPosition })}

packages/onchainkit/src/wallet/components/WalletIsland.tsx

@@ -13,11 +13,17 @@ import { WalletDropdown } from './WalletDropdown';
 
 export function WalletIsland({
   startingPosition = getDefaultDraggableStartingPosition(),
+  isSponsored,
 }: {
   startingPosition?: { x: number; y: number };
+  isSponsored?: boolean;
 }) {
   return (
-    <Wallet draggable={true} draggableStartingPosition={startingPosition}>
+    <Wallet
+      draggable={true}
+      draggableStartingPosition={startingPosition}
+      isSponsored={isSponsored}
+    >
       <ConnectWallet
         className="!rounded-full m-0 flex h-14 w-14 min-w-14 flex-col items-center justify-center p-0"
         disconnectedLabel={<div className="h-5 w-5">{portfolioSvg}</div>}

packages/onchainkit/src/wallet/components/WalletProvider.tsx

@@ -23,9 +23,11 @@ const WalletContext = createContext<WalletContextType>(emptyContext);
 
 export type WalletProviderReact = {
   children: ReactNode;
+  /** Whether to sponsor transactions for Send feature of advanced wallet implementation */
+  isSponsored?: boolean;
 };
 
-export function WalletProvider({ children }: WalletProviderReact) {
+export function WalletProvider({ children, isSponsored }: WalletProviderReact) {
   const { chain } = useOnchainKit();
   const [isConnectModalOpen, setIsConnectModalOpen] = useState(false);
   const [isSubComponentOpen, setIsSubComponentOpen] = useState(false);
@@ -81,6 +83,7 @@ export function WalletProvider({ children }: WalletProviderReact) {
       isActiveFeatureClosing,
       setIsActiveFeatureClosing,
       animations,
+      isSponsored,
     };
   }, [
     address,
@@ -95,6 +98,7 @@ export function WalletProvider({ children }: WalletProviderReact) {
     activeFeature,
     isActiveFeatureClosing,
     animations,
+    isSponsored,
   ]);
 
   return (