family · pradel · Aug 7, 2025 · Aug 7, 2025 · Oct 29, 2025 · Oct 29, 2025
diff --git a/examples/cra/package.json b/examples/cra/package.json
@@ -12,8 +12,8 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-scripts": "5.0.1",
-    "viem": "^2.23.2",
-    "wagmi": "^2.14.11",
+    "viem": "^2.31.7",
+    "wagmi": "^2.16.0",
     "web-vitals": "^2.1.4"
   },
   "devDependencies": {

diff --git a/examples/nextjs-app/package.json b/examples/nextjs-app/package.json
@@ -14,8 +14,8 @@
     "next": "14.0.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "viem": "^2.23.2",
-    "wagmi": "^2.14.11"
+    "viem": "^2.31.7",
+    "wagmi": "^2.16.0"
   },
   "devDependencies": {
     "@types/node": "^18.19.3",

diff --git a/examples/nextjs-siwe/package.json b/examples/nextjs-siwe/package.json
@@ -15,8 +15,8 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "siwe": "^2.1.4",
-    "viem": "^2.23.2",
-    "wagmi": "^2.14.11"
+    "viem": "^2.31.7",
+    "wagmi": "^2.16.0"
   },
   "devDependencies": {
     "@types/node": "18.7.18",

diff --git a/examples/nextjs/package.json b/examples/nextjs/package.json
@@ -14,8 +14,8 @@
     "next": "14.0.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "viem": "^2.23.2",
-    "wagmi": "^2.14.11"
+    "viem": "^2.31.7",
+    "wagmi": "^2.16.0"
   },
   "devDependencies": {
     "@types/node": "^18.19.3",

diff --git a/examples/testbench/package.json b/examples/testbench/package.json
@@ -16,8 +16,8 @@
     "next": "14.1.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "viem": "^2.23.2",
-    "wagmi": "^2.14.11"
+    "viem": "^2.31.7",
+    "wagmi": "^2.16.0"
   },
   "devDependencies": {
     "@types/node": "18.7.18",

diff --git a/examples/vite/package.json b/examples/vite/package.json
@@ -13,8 +13,8 @@
     "connectkit": "workspace:packages/connectkit",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "viem": "^2.23.2",
-    "wagmi": "^2.14.11"
+    "viem": "^2.31.7",
+    "wagmi": "^2.16.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.17",

diff --git a/package.json b/package.json
@@ -39,8 +39,8 @@
     "rollup-plugin-visualizer": "^5.5.4",
     "tslib": "^1.9.3",
     "typescript-plugin-styled-components": "^2.0.0",
-    "viem": "^2.23.2",
-    "wagmi": "^2.14.11"
+    "viem": "^2.31.7",
+    "wagmi": "^2.16.0"
   },
   "packageManager": "yarn@3.2.0",
   "dependencies": {

diff --git a/packages/connectkit-next-siwe/package.json b/packages/connectkit-next-siwe/package.json
@@ -37,14 +37,14 @@
   ],
   "dependencies": {
     "iron-session": "^6.2.1",
-    "viem": "^2.23.2"
+    "viem": "^2.31.7"
   },
   "peerDependencies": {
     "connectkit": ">=1.2.0",
     "next": ">=12.x",
     "react": "17.x || 18.x",
     "react-dom": "17.x || 18.x",
-    "viem": ">=2.13.3"
+    "viem": ">=2.31.7"
   },
   "devDependencies": {
     "@types/node": "^16.11.27",

diff --git a/packages/connectkit/package.json b/packages/connectkit/package.json
@@ -67,7 +67,7 @@
   "resolutions": {
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "viem": "^2.23.2",
-    "wagmi": "^2.14.11"
+    "viem": "^2.31.7",
+    "wagmi": "^2.16.0"
   }
 }
diff --git a/packages/connectkit/src/assets/ScanIconWithLogos.tsx b/packages/connectkit/src/assets/ScanIconWithLogos.tsx
@@ -22,7 +22,7 @@ const IconContainer = styled(motion.div)`
 const ScanIconWithLogos: React.FC<{ logo?: React.ReactNode }> = ({ logo }) => {
   const logoList = [
     <Logos.MetaMask background={true} />,
-    <Logos.Coinbase background={true} />,
+    <Logos.BaseAccount />,
     <Logos.Crypto />,
     <Logos.ImToken />,
     <Logos.Argent />,

diff --git a/packages/connectkit/src/assets/logos.tsx b/packages/connectkit/src/assets/logos.tsx
@@ -163,6 +163,22 @@ export const Coinbase = ({ background = false, ...props }) => (
   </svg>
 );
 
+export const BaseAccount = ({ ...props }) => (
+  <svg
+    {...props}
+    width="96"
+    height="96"
+    viewBox="0 0 96 96"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M0 7.584C0 4.98628 0 3.68742 0.489468 2.68829C0.958114 1.73167 1.73167 0.958114 2.68829 0.489468C3.68742 0 4.98628 0 7.584 0H88.416C91.0137 0 92.3126 0 93.3117 0.489468C94.2683 0.958114 95.0419 1.73167 95.5105 2.68829C96 3.68742 96 4.98628 96 7.584V88.416C96 91.0137 96 92.3126 95.5105 93.3117C95.0419 94.2683 94.2683 95.0419 93.3117 95.5105C92.3126 96 91.0137 96 88.416 96H7.584C4.98628 96 3.68742 96 2.68829 95.5105C1.73167 95.0419 0.958114 94.2683 0.489468 93.3117C0 92.3126 0 91.0137 0 88.416V7.584Z"
+      fill="#0000FF"
+    />
+  </svg>
+);
+
 export const FamilyAccount = () => (
   <svg
     width="88"
@@ -1126,6 +1142,7 @@ export default {
   WalletConnect,
   MetaMask,
   Coinbase,
+  BaseAccount,
   Family,
   FamilyAccount,
   Trust,

diff --git a/packages/connectkit/src/components/Common/ConnectorList/index.tsx b/packages/connectkit/src/components/Common/ConnectorList/index.tsx
@@ -18,6 +18,7 @@ import { WalletProps, useWallets } from '../../../wallets/useWallets';
 import {
   detectBrowser,
   isCoinbaseWalletConnector,
+  isBaseAccountConnector,
   isPortoConnector,
   isWalletConnectConnector,
 } from '../../../utils';
@@ -122,7 +123,9 @@ const ConnectorItem = ({
   // Safari requires opening popup on user gesture, so we connect immediately here
   const shouldConnectImmediately =
     (detectBrowser() === 'safari' || detectBrowser() === 'ios') &&
-    (isCoinbaseWalletConnector(wallet.connector.id) || isPortoConnector(wallet.connector.id));
+    (isCoinbaseWalletConnector(wallet.connector.id) ||
+      isBaseAccountConnector(wallet.connector.id) ||
+      isPortoConnector(wallet.connector.id));
 
   if (redirectToMoreWallets || shouldConnectImmediately) deeplink = undefined; // mobile redirects to more wallets page
 

diff --git a/packages/connectkit/src/components/Pages/Onboarding/index.tsx b/packages/connectkit/src/components/Pages/Onboarding/index.tsx
@@ -40,7 +40,7 @@ const Introduction: React.FC = () => {
                 <FloatWrapper>
                   <RotateWrapper>
                     <LogoGraphic>
-                      <Logos.Coinbase background />
+                      <Logos.BaseAccount />
                     </LogoGraphic>
                   </RotateWrapper>
                 </FloatWrapper>

diff --git a/packages/connectkit/src/defaultConfig.ts b/packages/connectkit/src/defaultConfig.ts
@@ -1,7 +1,10 @@
 import { http } from 'wagmi';
 import { type CreateConfigParameters } from '@wagmi/core';
 import { mainnet, polygon, optimism, arbitrum } from 'wagmi/chains';
-import { CoinbaseWalletParameters } from 'wagmi/connectors';
+import {
+  BaseAccountParameters,
+  CoinbaseWalletParameters,
+} from 'wagmi/connectors';
 import { EthereumProviderOptions as FamilyOptions } from 'family';
 
 import defaultConnectors from './defaultConnectors';
@@ -22,6 +25,8 @@ type DefaultConfigProps = {
   walletConnectProjectId: string;
   // Coinbase Wallet preference
   coinbaseWalletPreference?: CoinbaseWalletParameters<'4'>['preference'];
+  // Base account parameters (https://www.base.org/)
+  baseAccountParameters?: BaseAccountParameters;
   // Family options (https://app.family.co)
   enableFamily?: boolean;
   familyOptions?: FamilyOptions;
@@ -34,6 +39,7 @@ const defaultConfig = ({
   appUrl,
   walletConnectProjectId,
   coinbaseWalletPreference,
+  baseAccountParameters,
   chains = [mainnet, polygon, optimism, arbitrum],
   client,
   enableFamily = true,
@@ -59,6 +65,7 @@ const defaultConfig = ({
       },
       walletConnectProjectId,
       coinbaseWalletPreference,
+      baseAccountParameters,
       enableFamily,
       familyOptions,
     });

diff --git a/packages/connectkit/src/defaultConnectors.ts b/packages/connectkit/src/defaultConnectors.ts
@@ -4,8 +4,10 @@ import {
   walletConnect,
   coinbaseWallet,
   CoinbaseWalletParameters,
+  baseAccount,
+  BaseAccountParameters,
   safe,
-} from '@wagmi/connectors';
+} from 'wagmi/connectors';
 
 import {
   EthereumProviderOptions as FamilyOptions,
@@ -21,6 +23,7 @@ type DefaultConnectorsProps = {
   };
   walletConnectProjectId?: string;
   coinbaseWalletPreference?: CoinbaseWalletParameters<'4'>['preference'];
+  baseAccountParameters?: BaseAccountParameters;
   enableFamily?: boolean;
   familyOptions?: FamilyOptions;
 };
@@ -29,6 +32,7 @@ const defaultConnectors = ({
   app,
   walletConnectProjectId,
   coinbaseWalletPreference,
+  baseAccountParameters,
   enableFamily,
   familyOptions,
 }: DefaultConnectorsProps): CreateConnectorFn[] => {
@@ -57,6 +61,11 @@ const defaultConnectors = ({
       appLogoUrl: app.icon,
       overrideIsMetaMask: false,
       preference: coinbaseWalletPreference,
+    }),
+    baseAccount({
+      appName: app.name,
+      appLogoUrl: app.icon,
+      ...baseAccountParameters,
     })
   );
 

diff --git a/packages/connectkit/src/utils/index.ts b/packages/connectkit/src/utils/index.ts
@@ -92,6 +92,9 @@ export const isMetaMaskConnector = (connectorId?: string) =>
 export const isCoinbaseWalletConnector = (connectorId?: string) =>
   connectorId === 'coinbaseWalletSDK';
 
+export const isBaseAccountConnector = (connectorId?: string) =>
+  connectorId === 'baseAccount';
+
 export const isLedgerConnector = (connectorId?: string) =>
   connectorId === 'ledger';
 

diff --git a/packages/connectkit/src/utils/wallets.ts b/packages/connectkit/src/utils/wallets.ts
@@ -17,6 +17,7 @@ export const isWalletInstalled = (name: string) => {
 
 export const isMetaMask = () => isWalletInstalled('MetaMask');
 export const isCoinbaseWallet = () => isWalletInstalled('CoinbaseWallet');
+export const isBaseAccount = () => isWalletInstalled('BaseAccount');
 export const isFamily = () => isWalletInstalled('Family');
 export const isBrave = () => isWalletInstalled('BraveWallet');
 export const isTokenary = () => isWalletInstalled('Tokenary');

diff --git a/packages/connectkit/src/wallets/index.ts b/packages/connectkit/src/wallets/index.ts
@@ -1,5 +1,5 @@
 import { CreateConnectorFn } from 'wagmi';
-import { injected } from '@wagmi/connectors';
+import { injected } from 'wagmi/connectors';
 
 import { walletConfigs } from './walletConfigs';
 

diff --git a/packages/connectkit/src/wallets/useWallets.tsx b/packages/connectkit/src/wallets/useWallets.tsx
@@ -3,7 +3,11 @@ import { Connector } from 'wagmi';
 import { useConnectors } from '../hooks/useConnectors';
 import { walletConfigs, WalletConfigProps } from './walletConfigs';
 import { useContext } from '../components/ConnectKit';
-import { isCoinbaseWalletConnector, isInjectedConnector } from '../utils';
+import {
+  isBaseAccountConnector,
+  isCoinbaseWalletConnector,
+  isInjectedConnector,
+} from '../utils';
 
 export type WalletProps = {
   id: string;
@@ -48,7 +52,8 @@ export const useWallets = (): WalletProps[] => {
       isInstalled:
         connector.type === 'mock' ||
         (connector.type === 'injected' && connector.id !== 'metaMask') ||
-        isCoinbaseWalletConnector(connector.id), // always run coinbase wallet SDK
+        isCoinbaseWalletConnector(connector.id) || // always run coinbase wallet SDK
+        isBaseAccountConnector(connector.id), // always run base account SDK
     };
 
     if (walletId) {

diff --git a/packages/connectkit/src/wallets/walletConfigs.tsx b/packages/connectkit/src/wallets/walletConfigs.tsx
@@ -99,6 +99,16 @@ export const walletConfigs: {
       return `https://go.cb-w.com/wc?uri=${encodeURIComponent(uri)}`;
     },
   },
+  baseAccount: {
+    name: 'Base Account',
+    shortName: 'Base',
+    icon: <Logos.BaseAccount />,
+    iconShape: 'squircle',
+    downloadUrls: {
+      android: 'https://play.google.com/store/apps/details?id=org.toshi',
+      ios: 'https://apps.apple.com/us/app/base-formerly-coinbase-wallet/id1278383455',
+    },
+  },
   'com.crypto.wallet': {
     name: 'Crypto.com',
     shortName: 'Crypto',

diff --git a/packages/cra-template/template.json b/packages/cra-template/template.json
@@ -10,8 +10,8 @@
       "@types/react-dom": "^18.0.0",
       "connectkit": "latest",
       "typescript": "^5.0.4",
-      "viem": "^2.23.2",
-      "wagmi": "^2.14.11",
+      "viem": "^2.31.7",
+      "wagmi": "^2.16.0",
       "web-vitals": "^2.1.0"
     },
     "eslintConfig": {