From 6d065faf96c4a0e5c44c1b7da5867a3253d05a10 Mon Sep 17 00:00:00 2001
From: Lochie Axon <lochieaxon@gmail.com>
Date: Wed, 17 Jan 2024 02:34:29 +1100
Subject: [PATCH] update examples

---
 examples/nextjs/package.json            |  1 +
 examples/nextjs/pages/_app.tsx          | 17 +++++++++++------
 examples/testbench/src/pages/chains.tsx |  4 +++-
 examples/testbench/src/pages/index.tsx  | 11 ++++++++---
 4 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/examples/nextjs/package.json b/examples/nextjs/package.json
index 32309633..6301af43 100644
--- a/examples/nextjs/package.json
+++ b/examples/nextjs/package.json
@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.17.10",
     "connectkit": "workspace:packages/connectkit",
     "next": "12.3.0",
     "react": "^18.0.0",
diff --git a/examples/nextjs/pages/_app.tsx b/examples/nextjs/pages/_app.tsx
index eb8df588..a22400a2 100644
--- a/examples/nextjs/pages/_app.tsx
+++ b/examples/nextjs/pages/_app.tsx
@@ -1,9 +1,10 @@
 import '../styles/globals.css';
 import type { AppProps } from 'next/app';
 
-import { WagmiConfig, createConfig } from 'wagmi';
+import { WagmiProvider, createConfig } from 'wagmi';
 import { mainnet, polygon, optimism, arbitrum } from 'wagmi/chains';
 import { ConnectKitProvider, getDefaultConfig } from 'connectkit';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 const config = createConfig(
   getDefaultConfig({
@@ -15,13 +16,17 @@ const config = createConfig(
   })
 );
 
+const queryClient = new QueryClient();
+
 function MyApp({ Component, pageProps }: AppProps) {
   return (
-    <WagmiConfig config={config}>
-      <ConnectKitProvider debugMode>
-        <Component {...pageProps} />
-      </ConnectKitProvider>
-    </WagmiConfig>
+    <WagmiProvider config={config}>
+      <QueryClientProvider client={queryClient}>
+        <ConnectKitProvider debugMode>
+          <Component {...pageProps} />
+        </ConnectKitProvider>
+      </QueryClientProvider>
+    </WagmiProvider>
   );
 }
 
diff --git a/examples/testbench/src/pages/chains.tsx b/examples/testbench/src/pages/chains.tsx
index d57f9db7..824e10db 100644
--- a/examples/testbench/src/pages/chains.tsx
+++ b/examples/testbench/src/pages/chains.tsx
@@ -38,7 +38,9 @@ const Home: NextPage = () => {
           <h2>Connected to</h2>
           <ChainIcon
             id={chain?.id}
-            unsupported={chains.some((x) => x.id === chain?.id)}
+            unsupported={Boolean(
+              chain && !chains.some((x) => x.id !== chain?.id)
+            )}
           />
           <h2>Configured/Supported Chains</h2>
           <div style={{ display: 'flex', gap: 8 }}>
diff --git a/examples/testbench/src/pages/index.tsx b/examples/testbench/src/pages/index.tsx
index 80ea12d9..e373894f 100644
--- a/examples/testbench/src/pages/index.tsx
+++ b/examples/testbench/src/pages/index.tsx
@@ -104,7 +104,8 @@ const AccountInfo = () => {
             <tr>
               <td>Chain Supported</td>
               <td>
-                {!chain || chains.some((x) => x.id === chain?.id)
+                {!chain ||
+                Boolean(chain && !chains.some((x) => x.id !== chain?.id))
                   ? 'No'
                   : 'Yes'}
               </td>
@@ -319,7 +320,9 @@ const Home: NextPage = () => {
           <div style={{ display: 'flex', gap: 8 }}>
             <ChainIcon
               id={chain?.id}
-              unsupported={chains.some((x) => x.id === chain?.id)}
+              unsupported={Boolean(
+                chain && !chains.some((x) => x.id !== chain?.id)
+              )}
             />
             <ChainIcon id={1} size={64} radius={6} />
             <ChainIcon id={1337} size={32} radius={0} />
@@ -363,7 +366,9 @@ const Home: NextPage = () => {
                     {chain?.name}
                     <ChainIcon
                       id={chain?.id}
-                      unsupported={chains.some((x) => x.id === chain?.id)}
+                      unsupported={Boolean(
+                        chain && !chains.some((x) => x.id !== chain?.id)
+                      )}
                     />
                     <Avatar address={address} size={12} />
                     {ensName ?? address}