FIL-Builders · nijoe1 · Sep 18, 2025 · Sep 18, 2025 · Sep 24, 2025
diff --git a/.gitignore b/.gitignore
@@ -39,3 +39,7 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# Claude
+.claude
+.mcp.json
diff --git a/app/globals.css b/app/globals.css
@@ -10,6 +10,11 @@
   --secondary: #6c757d;
   --secondary-foreground: #ffffff;
   --border: #e5e7eb;
+  --muted: #f8f9fa;
+  --muted-foreground: #6c757d;
+  --accent: #007bff;
+  --success: #000000;
+  --warning: #000000;
 }
 
 .dark {
@@ -20,6 +25,11 @@
   --secondary: #6c757d;
   --secondary-foreground: #ffffff;
   --border: #2a2a2a;
+  --muted: #1a1a1a;
+  --muted-foreground: #a3a3a3;
+  --accent: #007bff;
+  --success: #ffffff;
+  --warning: #ffffff;
 }
 
 body {
@@ -35,6 +45,11 @@ body {
     --color-border: var(--border);
     --color-primary: var(--primary);
     --color-secondary: var(--secondary);
+    --color-muted: var(--muted);
+    --color-muted-foreground: var(--muted-foreground);
+    --color-accent: var(--accent);
+    --color-success: var(--success);
+    --color-warning: var(--warning);
   }
 
   .dark {
@@ -43,6 +58,11 @@ body {
     --color-border: var(--border);
     --color-primary: var(--primary);
     --color-secondary: var(--secondary);
+    --color-muted: var(--muted);
+    --color-muted-foreground: var(--muted-foreground);
+    --color-accent: var(--accent);
+    --color-success: var(--success);
+    --color-warning: var(--warning);
   }
 }
 

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -6,30 +6,80 @@ import { WagmiProvider } from "wagmi";
 import { filecoin, filecoinCalibration } from "wagmi/chains";
 import { http, createConfig } from "@wagmi/core";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { RainbowKitProvider } from "@rainbow-me/rainbowkit";
+import dynamic from "next/dynamic";
+const RainbowKitProvider = dynamic(
+  () => import("@rainbow-me/rainbowkit").then((m) => m.RainbowKitProvider),
+  { ssr: false }
+);
 import "@rainbow-me/rainbowkit/styles.css";
+import * as React from "react";
 import { Navbar } from "@/components/ui/Navbar";
 import { ThemeProvider } from "@/providers/ThemeProvider";
 import { ConfettiProvider } from "@/providers/ConfettiProvider";
 import Footer from "@/components/ui/Footer";
 import { GeolocationProvider } from "@/providers/GeolocationProvider";
 import { SynapseProvider } from "@/providers/SynapseProvider";
-const queryClient = new QueryClient();
 
-const config = createConfig({
-  chains: [filecoinCalibration, filecoin],
-  connectors: [],
-  transports: {
-    [filecoin.id]: http(),
-    [filecoinCalibration.id]: http(),
-  },
-});
+// Defer importing wallets/connectors to the client to avoid SSR IndexedDB usage
+
+const queryClient = new QueryClient();
 
 export default function RootLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
+  const [wagmiConfig, setWagmiConfig] = React.useState<ReturnType<
+    typeof createConfig
+  > | null>(null);
+
+  React.useEffect(() => {
+    let mounted = true;
+    (async () => {
+      const [{ connectorsForWallets }, walletsModule] = await Promise.all([
+        import("@rainbow-me/rainbowkit"),
+        import("@rainbow-me/rainbowkit/wallets"),
+      ]);
+
+      const wagmiConnectors = connectorsForWallets(
+        [
+          {
+            groupName: "Supported Wallets",
+            wallets: [
+              walletsModule.metaMaskWallet,
+              walletsModule.walletConnectWallet,
+              walletsModule.ledgerWallet,
+              walletsModule.rainbowWallet,
+              walletsModule.safeWallet,
+              walletsModule.rabbyWallet,
+            ],
+          },
+        ],
+        {
+          appName: "filecoin-onchain-cloud-dapp",
+          projectId: "3a8170812b534d0ff9d794f19a901d64",
+        }
+      );
+
+      const cfg = createConfig({
+        ssr: false,
+        chains: [filecoinCalibration, filecoin],
+        connectors: wagmiConnectors,
+        transports: {
+          [filecoin.id]: http("https://rpc.ankr.com/filecoin"),
+          [filecoinCalibration.id]: http(
+            "https://rpc.ankr.com/filecoin_testnet"
+          ),
+        },
+      });
+
+      if (mounted) setWagmiConfig(cfg);
+    })();
+    return () => {
+      mounted = false;
+    };
+  }, []);
+
   return (
     <html lang="en">
       <head>
@@ -55,20 +105,22 @@ export default function RootLayout({
           <ThemeProvider>
             <ConfettiProvider>
               <QueryClientProvider client={queryClient}>
-                <WagmiProvider config={config}>
-                  <RainbowKitProvider
-                    modalSize="compact"
-                    initialChain={filecoinCalibration.id}
-                  >
-                    <SynapseProvider>
-                      <main className="flex flex-col min-h-screen">
-                        <Navbar />
-                        {children}
-                      </main>
-                      <Footer />
-                    </SynapseProvider>
-                  </RainbowKitProvider>
-                </WagmiProvider>
+                {wagmiConfig ? (
+                  <WagmiProvider config={wagmiConfig}>
+                    <RainbowKitProvider
+                      modalSize="compact"
+                      initialChain={filecoinCalibration.id}
+                    >
+                      <SynapseProvider>
+                        <main className="flex flex-col min-h-screen">
+                          <Navbar />
+                          {children}
+                        </main>
+                        <Footer />
+                      </SynapseProvider>
+                    </RainbowKitProvider>
+                  </WagmiProvider>
+                ) : null}
               </QueryClientProvider>
             </ConfettiProvider>
           </ThemeProvider>

diff --git a/app/page.tsx b/app/page.tsx
@@ -95,10 +95,12 @@ export default function Home() {
           variants={itemVariants}
           whileHover={{ scale: 1.05 }}
           transition={{ duration: 0.3 }}
-          className="text-3xl font-bold uppercase tracking-tighter text-foreground flex items-center gap-2"
+          className="text-3xl font-bold uppercase tracking-tighter text-foreground flex flex-col sm:flex-row items-center gap-2"
         >
-          <Filecoin />
-          Filecoin onchain cloud
+          <div className="flex items-center gap-2">
+            <Filecoin />
+            <span>Filecoin onchain cloud</span>
+          </div>
           <motion.a
             whileHover={{ scale: 1.3 }}
             href="https://github.com/FIL-Builders/fs-upload-dapp"
@@ -109,9 +111,9 @@ export default function Home() {
           </motion.a>
           <motion.p
             variants={itemVariants}
-            className="text-xl font-semibold lowercase transition-colors duration-50 hover:text-foreground flex items-center gap-2"
+            className="text-xl font-semibold lowercase transition-colors duration-50 hover:text-foreground flex flex-col sm:flex-row items-center gap-2"
           >
-            powered by
+            <span>powered by</span>
             <motion.a
               href="https://github.com/FilOzone/synapse-sdk"
               className="text-primary transition-colors duration-200 hover:underline cursor-pointer hover:text-[#008cf6] rounded-md p-1"
@@ -124,17 +126,17 @@ export default function Home() {
 
         <motion.p
           variants={itemVariants}
-          className="text-lg font-semibold capitalize-none transition-colors duration-50 mb-2  mt-1 hover:text-foreground flex items-center gap-2 text-center"
+          className="text-lg font-semibold capitalize-none transition-colors duration-50 mb-2 mt-1 hover:text-foreground flex flex-col sm:flex-row items-center gap-2 text-center"
         >
-          upload files to filecoin with{" "}
+          <span>upload files to filecoin with</span>
           <motion.a
             href="https://docs.secured.finance/usdfc-stablecoin/getting-started"
             className="text-[#e9ac00] hover:underline cursor-pointer"
             target="_blank"
           >
             USDFC
           </motion.a>
-          your balance is
+          <span>your balance is</span>
           <span className="font-bold">
             {isLoadingBalances || !isConnected
               ? "..."
@@ -144,11 +146,17 @@ export default function Home() {
         {chainId !== 314159 && (
           <motion.p
             variants={itemVariants}
-            className="text-lg font-semibold capitalize-none transition-colors duration-50 mb-2  mt-1 hover:text-foreground flex items-center gap-2 text-center"
+            className="text-lg font-semibold capitalize-none transition-colors duration-50 mb-2 mt-1 hover:text-foreground flex flex-col sm:flex-row items-center gap-2 text-center"
           >
-            <span className="max-w-xl text-center bg-red-600/70  p-2 rounded-md">
-              ⚠️ Filecoin mainnet is not supported yet. Please use Filecoin
-              Calibration network.
+            <span className="max-w-xl text-center bg-red-600/70 p-2 rounded-md">
+              ⚠️{" "}
+              <span className="hidden sm:inline">
+                Filecoin mainnet is not supported yet. Please use Filecoin
+                Calibration network.
+              </span>
+              <span className="sm:hidden">
+                Mainnet not supported. Use Calibration network.
+              </span>
             </span>
           </motion.p>
         )}
@@ -174,7 +182,10 @@ export default function Home() {
                 <ConnectButton />
               </motion.div>
               <motion.p variants={itemVariants} className="mt-3 text-secondary">
-                Please connect your wallet to upload dApp
+                <span className="hidden sm:inline">
+                  Please connect your wallet to upload dApp
+                </span>
+                <span className="sm:hidden">Connect wallet to continue</span>
               </motion.p>
             </motion.div>
           ) : (