reorganize providers

src/components/App.tsx

@@ -1,19 +0,0 @@
-"use client";
-
-import dynamic from "next/dynamic";
-
-const Demo = dynamic(() => import("./Demo"), {
-  ssr: false,
-});
-
-const WagmiConfig = dynamic(() => import("./WagmiProvider"), {
-  ssr: false,
-});
-
-export function App() {
-  return (
-    <WagmiConfig>
-      <Demo />
-    </WagmiConfig>
-  );
-}

src/components/Demo.tsx

@@ -10,7 +10,7 @@ import {
   useConnect,
 } from "wagmi";
 
-import { config } from "~/components/WagmiProvider";
+import { config } from "~/components/providers/WagmiProvider";
 import { Button } from "~/components/ui/Button";
 import { truncateAddress } from "~/lib/truncateAddress";
 

src/components/providers/WagmiProvider.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { createConfig, http, WagmiProvider } from "wagmi";
 import { base } from "wagmi/chains";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
@@ -13,7 +15,7 @@ export const config = createConfig({
 
 const queryClient = new QueryClient();
 
-export default function WagmiConfig({ children }: { children: React.ReactNode }) {
+export default function Provider({ children }: { children: React.ReactNode }) {
   return (
     <WagmiProvider config={config}>
       <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>