Merge pull request #59 from dynamic-labs/chore/updates

chore: upgrade packages and clean up provider code
dynamic-labs · May 27, 2024 · eb3357f · eb3357f
2 parents 8bd8a62 + bcc67d4
commit eb3357f
Show file tree

Hide file tree

Showing 5 changed files with 753 additions and 961 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -2,12 +2,6 @@ import "./globals.css";
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 
-import {
-  DynamicContextProvider,
-  EthereumWalletConnectors,
-  DynamicWagmiConnector,
-} from "../lib/dynamic";
-
 import { Providers } from "./providers";
 
 const inter = Inter({ subsets: ["latin"] });
@@ -24,18 +18,9 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <DynamicContextProvider
-        settings={{
-          environmentId: "2762a57b-faa4-41ce-9f16-abff9300e2c9",
-          walletConnectors: [EthereumWalletConnectors],
-        }}
-      >
-        <Providers>
-          <DynamicWagmiConnector>
-            <body className={inter.className}>{children}</body>
-          </DynamicWagmiConnector>
-        </Providers>
-      </DynamicContextProvider>
+      <body className={inter.className}>
+        <Providers>{children}</Providers>
+      </body>
     </html>
   );
 }
diff --git a/app/page.tsx b/app/page.tsx
@@ -6,21 +6,38 @@ export default function Main() {
       <div className="flex flex-col items-center justify-center text-center">
         <div className="mb-6">
           <div className="inline-flex items-center justify-center">
-            <img src="/logo.png" alt="logo"/>
+            <img src="/logo.png" alt="logo" />
           </div>
         </div>
         <h1 className="text-4xl font-bold mb-4">Onboard the world</h1>
-        <p className="text-lg mb-16">Web3 login for <span className="text-blue-400">everyone</span>.</p>
+        <p className="text-lg mb-16">
+          Web3 login for <span className="text-blue-400">everyone</span>.
+        </p>
         <DynamicWidget />
       </div>
       <div className="flex mt-16 space-x-4 ">
-        <a href="https://docs.dynamic.xyz/" target="_blank" rel="noreferrer" className="p-4 inline-flex items-center justify-center rounded-lg border-2 border-[#3B3636] shadow-lg w-64">
+        <a
+          href="https://docs.dynamic.xyz/"
+          target="_blank"
+          rel="noreferrer"
+          className="p-4 inline-flex items-center justify-center rounded-lg border-2 border-[#3B3636] shadow-lg w-64"
+        >
           <h2 className="font-semibold">Docs</h2>
         </a>
-        <a href="https://demo.dynamic.xyz/" target="_blank" rel="noreferrer" className="p-4 inline-flex items-center justify-center border-2 border-[#3B3636] rounded-lg shadow-lg w-64">
+        <a
+          href="https://demo.dynamic.xyz/"
+          target="_blank"
+          rel="noreferrer"
+          className="p-4 inline-flex items-center justify-center border-2 border-[#3B3636] rounded-lg shadow-lg w-64"
+        >
           <h2 className="font-semibold">Demo</h2>
         </a>
-        <a href="https://app.dynamic.xyz/" target="_blank" rel="noreferrer" className="p-4 inline-flex items-center justify-center border-2 border-[#3B3636] rounded-lg shadow-lg w-64">
+        <a
+          href="https://app.dynamic.xyz/"
+          target="_blank"
+          rel="noreferrer"
+          className="p-4 inline-flex items-center justify-center border-2 border-[#3B3636] rounded-lg shadow-lg w-64"
+        >
           <h2 className="font-semibold">Dashboard</h2>
         </a>
       </div>

diff --git a/app/providers.tsx b/app/providers.tsx
@@ -1,19 +1,31 @@
 "use client";
 
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { useState, type ReactNode } from "react";
+import { type ReactNode } from "react";
 import { WagmiProvider } from "wagmi";
 
 import { config } from "@/lib/wagmi";
+import {
+  DynamicContextProvider,
+  EthereumWalletConnectors,
+  DynamicWagmiConnector,
+} from "@/lib/dynamic";
 
-export function Providers(props: { children: ReactNode }) {
-  const [queryClient] = useState(() => new QueryClient());
+const queryClient = new QueryClient();
 
+export function Providers(props: { children: ReactNode }) {
   return (
-    <WagmiProvider config={config}>
-      <QueryClientProvider client={queryClient}>
-        {props.children}
-      </QueryClientProvider>
-    </WagmiProvider>
+    <DynamicContextProvider
+      settings={{
+        environmentId: "2762a57b-faa4-41ce-9f16-abff9300e2c9",
+        walletConnectors: [EthereumWalletConnectors],
+      }}
+    >
+      <WagmiProvider config={config}>
+        <QueryClientProvider client={queryClient}>
+          <DynamicWagmiConnector>{props.children}</DynamicWagmiConnector>
+        </QueryClientProvider>
+      </WagmiProvider>
+    </DynamicContextProvider>
   );
 }