fix: connectkit docs demo

examples/testbench/src/pages/demo.tsx

@@ -0,0 +1,9 @@
+import type { NextPage } from 'next';
+
+import { ConnectKitModalDemo } from 'connectkit';
+
+const Demo: NextPage = () => {
+  return <ConnectKitModalDemo open />;
+};
+
+export default Demo;

package.json

@@ -13,13 +13,15 @@
     "dev:connectkit-next-siwe": "yarn workspace connectkit-next-siwe run dev",
     "dev:cra": "yarn workspace cra run dev",
     "dev:nextjs": "yarn workspace nextjs run dev",
+    "dev:nextjs-app": "yarn workspace nextjs-app run dev",
     "dev:nextjs-siwe": "yarn workspace nextjs-siwe run dev",
     "dev:vite": "yarn workspace vite run dev",
     "dev:testbench": "yarn workspace testbench run dev",
     "build": "node build.js && yarn workspace connectkit run build && cp README.md packages/connectkit/README.md",
     "build:connectkit-next-siwe": "yarn workspace connectkit-next-siwe run build",
     "build:cra": "yarn build && yarn workspace cra build",
     "build:nextjs": "yarn build && yarn workspace nextjs build",
+    "build:nextjs-app": "yarn build && yarn workspace nextjs-app build",
     "build:nextjs-siwe": "yarn build && yarn workspace nextjs-siwe build",
     "build:vite": "yarn build && yarn workspace vite build",
     "build:testbench": "yarn build && yarn build:connectkit-next-siwe && yarn workspace testbench build",

packages/connectkit/src/components/ConnectKit.tsx

@@ -258,7 +258,7 @@ export const ConnectKitProvider = ({
     Context.Provider,
     { value },
     <>
-      <Web3ContextProvider>
+      <Web3ContextProvider enabled={open}>
         <ThemeProvider theme={defaultTheme}>
           {children}
           <ConnectKitModal

packages/connectkit/src/components/ConnectModal/demo.tsx

@@ -21,6 +21,7 @@ import { ConnectKitThemeProvider } from '../ConnectKitThemeProvider/ConnectKitTh
 import styled from './../../styles/styled';
 import { keyframes } from 'styled-components';
 import { useChains } from '../../hooks/useChains';
+import { Web3ContextProvider } from '../contexts/web3';
 
 const dist = 8;
 const shake = keyframes`
@@ -223,38 +224,40 @@ const ConnectModal: React.FC<{
   }, [open, inline]);
 
   return (
-    <ConnectKitThemeProvider
-      theme={theme}
-      customTheme={customTheme}
-      mode={mode}
-    >
-      <Container ref={ref}>
-        {inline && onClose && (
-          <>
-            <Cursor ref={cursorRef} />
-            <ButtonContainer>
-              <ConnectKitButton
-                customTheme={customTheme}
-                theme={theme}
-                mode={mode}
-              />
-            </ButtonContainer>
-          </>
-        )}
-        <Modal
-          demo={{ theme: theme, customTheme: customTheme, mode: mode }}
-          onClose={closeable ? onModalClose : undefined}
-          positionInside={inline}
-          open={isOpen}
-          pages={pages}
-          pageId={context.route}
-          onInfo={
-            showInfoButton ? () => context.setRoute(routes.ABOUT) : undefined
-          }
-          onBack={showBackButton ? onBack : undefined}
-        />
-      </Container>
-    </ConnectKitThemeProvider>
+    <Web3ContextProvider enabled={open}>
+      <ConnectKitThemeProvider
+        theme={theme}
+        customTheme={customTheme}
+        mode={mode}
+      >
+        <Container ref={ref}>
+          {inline && onClose && (
+            <>
+              <Cursor ref={cursorRef} />
+              <ButtonContainer>
+                <ConnectKitButton
+                  customTheme={customTheme}
+                  theme={theme}
+                  mode={mode}
+                />
+              </ButtonContainer>
+            </>
+          )}
+          <Modal
+            demo={{ theme: theme, customTheme: customTheme, mode: mode }}
+            onClose={closeable ? onModalClose : undefined}
+            positionInside={inline}
+            open={isOpen}
+            pages={pages}
+            pageId={context.route}
+            onInfo={
+              showInfoButton ? () => context.setRoute(routes.ABOUT) : undefined
+            }
+            onBack={showBackButton ? onBack : undefined}
+          />
+        </Container>
+      </ConnectKitThemeProvider>
+    </Web3ContextProvider>
   );
 };
 

packages/connectkit/src/components/contexts/web3/index.tsx

@@ -40,18 +40,19 @@ const Web3Context = React.createContext({
 } as Web3Context);
 
 export const Web3ContextProvider = ({
+  enabled,
   children,
 }: {
+  enabled?: boolean;
   children: React.ReactNode;
 }) => {
-  const context = useContext();
   const isMobile = useIsMobile();
 
   const { uri: walletConnectUri } = useWalletConnectUri({
-    enabled: context.open,
+    enabled,
   });
   const { uri: coinbaseWalletUri } = useCoinbaseWalletUri({
-    enabled: context.open && !isMobile,
+    enabled: enabled && !isMobile,
   });
 
   const { address: currentAddress, chain } = useAccount();