fix: add metadata, fix ssr

stephancill · Jun 15, 2024 · a61ff68 · a61ff68
1 parent 60f164c
commit a61ff68
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 43 deletions.
diff --git a/src/app/favicon.ico b/src/app/favicon.ico
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,30 +1,14 @@
-"use client";
-
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-
-import { ConnectKitProvider, getDefaultConfig } from "connectkit";
-import { WagmiProvider, createConfig } from "wagmi";
-import { optimism } from "wagmi/chains";
-import { BackfillContextProvider } from "../context/backfillContext";
+import { Metadata } from "next";
+import dynamic from "next/dynamic";
 import "./globals.css";
-import { HashRouter, Route, Link, Routes } from "react-router-dom";
-import { ConfigContextProvider } from "../context/configContext";
 
-const config = createConfig(
-  getDefaultConfig({
-    chains: [optimism],
-    walletConnectProjectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID!,
-    appName: "Farcaster Signer Manager",
-  })
-);
+const Providers = dynamic(() => import("./providers"), { ssr: false });
 
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      gcTime: 1000 * 60 * 60 * 24, // 24 hours
-    },
-  },
-});
+export const metadata: Metadata = {
+  title: "Farcaster Signer Tools",
+  description:
+    "The easiest and safest way to manage your Farcaster account permissionlessly.",
+};
 
 export default function RootLayout({
   children,
@@ -33,21 +17,9 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <WagmiProvider config={config}>
-        <QueryClientProvider client={queryClient}>
-          <ConnectKitProvider>
-            <ConfigContextProvider>
-              <BackfillContextProvider>
-                <body className="p-2 md:p-10">
-                  {typeof window !== "undefined" ? (
-                    <HashRouter>{children}</HashRouter>
-                  ) : null}
-                </body>
-              </BackfillContextProvider>
-            </ConfigContextProvider>
-          </ConnectKitProvider>
-        </QueryClientProvider>
-      </WagmiProvider>
+      <body className="p-2 md:p-10">
+        <Providers>{children}</Providers>
+      </body>
     </html>
   );
 }
diff --git a/src/app/providers.tsx b/src/app/providers.tsx
@@ -0,0 +1,48 @@
+"use client";
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ConnectKitProvider, getDefaultConfig } from "connectkit";
+import { HashRouter } from "react-router-dom";
+import { WagmiProvider, createConfig } from "wagmi";
+import { optimism } from "wagmi/chains";
+import { BackfillContextProvider } from "../context/backfillContext";
+import { ConfigContextProvider } from "../context/configContext";
+import "./globals.css";
+
+const config = createConfig(
+  getDefaultConfig({
+    chains: [optimism],
+    walletConnectProjectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID!,
+    appName: "Farcaster Signer Manager",
+  })
+);
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      gcTime: 1000 * 60 * 60 * 24, // 24 hours
+    },
+  },
+});
+
+export default function Providers({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <WagmiProvider config={config}>
+      <QueryClientProvider client={queryClient}>
+        <ConnectKitProvider>
+          <ConfigContextProvider>
+            <BackfillContextProvider>
+              {typeof window !== "undefined" ? (
+                <HashRouter>{children}</HashRouter>
+              ) : null}
+            </BackfillContextProvider>
+          </ConfigContextProvider>
+        </ConnectKitProvider>
+      </QueryClientProvider>
+    </WagmiProvider>
+  );
+}
diff --git a/src/components/SignerDetail.tsx b/src/components/SignerDetail.tsx
@@ -139,10 +139,8 @@ export function SignerDetail({ signer: signerProp }: { signer?: string }) {
                   border
                 )}
               >
-                <div className="text-gray-500">
-                  <strike>
-                    {bytesToHex(cast.data.castRemoveBody.targetHash)}
-                  </strike>
+                <div className="text-gray-500 line-through">
+                  {bytesToHex(cast.data.castRemoveBody.targetHash)}
                 </div>
                 <div className="flex">
                   <div