chore: update wagmi .connect/.discconnect to .mutate

src/components/ConnectWallet.tsx

@@ -27,7 +27,7 @@ export function ConnectWallet({ showAddChain = true }: { showAddChain?: boolean
             variant="default"
             className="flex items-center gap-1.5"
             key={connector.id}
-            onClick={() => connect.connect({ connector })}
+            onClick={() => connect.mutate({ connector })}
           >
             {connector.icon ? (
               <img className="size-5" src={connector.icon} alt={connector.name} />

src/components/guides/Demo.tsx

@@ -107,8 +107,8 @@ export function Container(
   const connections = useConnections()
   const disconnect = useDisconnect()
   const restart = React.useCallback(() => {
-    disconnect.disconnect()
-  }, [disconnect.disconnect, disconnect])
+    disconnect.mutate()
+  }, [disconnect.mutate, disconnect])
 
   const balanceAddress = React.useMemo(() => {
     if (props.footerVariant !== 'balances') return address
@@ -377,7 +377,7 @@ export function Login() {
           <Button
             variant="accent"
             className="font-normal text-[14px] -tracking-[2%]"
-            onClick={() => connect.connect({ connector })}
+            onClick={() => connect.mutate({ connector })}
             type="button"
           >
             Sign in
@@ -386,7 +386,7 @@ export function Login() {
             variant="default"
             className="font-normal text-[14px] -tracking-[2%]"
             onClick={() =>
-              connect.connect({
+              connect.mutate({
                 connector,
                 capabilities: {
                   label: 'Tempo Docs',
@@ -434,7 +434,7 @@ export function Logout() {
         variant="destructive"
         className="font-normal text-[14px] -tracking-[2%]"
         onClick={() => {
-          disconnect.disconnect({ connector })
+          disconnect.mutate({ connector })
           trackButtonClick('Sign out', 'destructive')
         }}
         type="button"

src/components/guides/EmbedPasskeys.tsx

@@ -11,7 +11,7 @@ export function EmbedPasskeys() {
   if (account.address)
     return (
       <div className="flex items-center gap-2">
-        <Button onClick={() => disconnect.disconnect()} variant="destructive">
+        <Button onClick={() => disconnect.mutate()} variant="destructive">
           Sign out
         </Button>
       </div>
@@ -36,8 +36,8 @@ export function SignInButtons() {
       <Button
         variant="accent"
         onClick={async () => {
-          await disconnect.disconnectAsync().catch(() => {})
-          connect.connect({
+          await disconnect.mutateAsync().catch(() => {})
+          connect.mutate({
             connector,
             capabilities: {
               label: 'Tempo Docs',
@@ -52,8 +52,8 @@ export function SignInButtons() {
       <Button
         variant="default"
         onClick={async () => {
-          await disconnect.disconnectAsync().catch(() => {})
-          connect.connect({ connector })
+          await disconnect.mutateAsync().catch(() => {})
+          connect.mutate({ connector })
         }}
         type="button"
       >

src/components/guides/steps/wallet/ConnectWallet.tsx

@@ -55,7 +55,7 @@ export function ConnectWallet(props: DemoStepProps) {
               variant="default"
               className="flex items-center gap-1.5"
               key={conn.id}
-              onClick={() => connect.connect({ connector: conn })}
+              onClick={() => connect.mutate({ connector: conn })}
             >
               {conn.icon ? <img className="size-5" src={conn.icon} alt={conn.name} /> : <div />}
               {conn.name}
@@ -84,7 +84,7 @@ export function ConnectWallet(props: DemoStepProps) {
           <Button
             variant="destructive"
             className="font-normal text-[14px] -tracking-[2%]"
-            onClick={() => disconnect.disconnect({ connector: walletConnector })}
+            onClick={() => disconnect.mutate({ connector: walletConnector })}
             type="button"
           >
             Disconnect

src/pages/guide/use-accounts/connect-to-wallets.mdx

@@ -89,7 +89,7 @@ export function Connect() {
       {connectors.map((connector) => (
         <button
           key={connector.id}
-          onClick={() => connect.connect({ connector })}
+          onClick={() => connect.mutate({ connector })}
           type="button"
         >
           {connector.name}
@@ -152,7 +152,7 @@ export function Account() {
       <div>
         {account.address?.slice(0, 6)}...{account.address?.slice(-4)}
       </div>
-      <button onClick={() => disconnect.disconnect()}>
+      <button onClick={() => disconnect.mutate()}>
         Sign out
       </button>
     </div>
@@ -212,7 +212,7 @@ export function Account() {
       <div>
         {account.address?.slice(0, 6)}...{account.address?.slice(-4)}
       </div>
-      <button onClick={() => disconnect.disconnect()}>
+      <button onClick={() => disconnect.mutate()}>
         Sign out
       </button>
 

src/pages/guide/use-accounts/embed-passkeys.mdx

@@ -109,7 +109,7 @@ export function Example() {
     <div>
       <button
         onClick={() =>
-          connect.connect({
+          connect.mutate({
             connector,
             capabilities: { type: 'sign-up' },
           })
@@ -118,7 +118,7 @@ export function Example() {
         Sign up
       </button>
 
-      <button onClick={() => connect.connect({ connector })}>
+      <button onClick={() => connect.mutate({ connector })}>
         Sign in
       </button>
     </div>
@@ -179,15 +179,15 @@ export function Example() {
     return ( // [!code ++]
       <div> {/* [!code ++] */}
         <div>{account.address.slice(0, 6)}...{account.address.slice(-4)}</div> {/* [!code ++] */}
-        <button onClick={() => disconnect.disconnect()}>Sign out</button> {/* [!code ++] */}
-      </div> {/* [!code ++] */}
+        <button onClick={() => disconnect.mutate()}>Sign out</button> {/* [!code ++] */}
+      </div> // [!code ++]
     ) // [!code ++]
 
   return (
     <div>
       <button
         onClick={() =>
-          connect.connect({
+          connect.mutate({
             connector,
             capabilities: { type: 'sign-up' },
           })
@@ -196,7 +196,7 @@ export function Example() {
         Sign up
       </button>
 
-      <button onClick={() => connect.connect({ connector })}>
+      <button onClick={() => connect.mutate({ connector })}>
         Sign in
       </button>
     </div>
@@ -262,7 +262,7 @@ export function Example() {
   const disconnect = useDisconnect()
 
   if (connect.isPending) // [!code ++]
-    return <div>Check prompt...</div> {/* [!code ++] */}
+    return <div>Check prompt...</div> // [!code ++]
   return (/* ... */)
 }
 ```
@@ -290,7 +290,7 @@ export function Example() {
   const disconnect = useDisconnect()
 
   if (connect.error) // [!code ++]
-    return <div>Error: {connect.error.message}</div> {/* [!code ++] */}
+    return <div>Error: {connect.error.message}</div> // [!code ++]
   return (/* ... */)
 }
 ```