Merge branch 'master' into YaTut1901/fix/bump-commander

FuelLabs · Jun 26, 2024 · b29e2d4 · b29e2d4
2 parents 6a415d2 + c846bfb
commit b29e2d4
Show file tree

Hide file tree

Showing 10 changed files with 66 additions and 58 deletions.
diff --git a/.changeset/slow-students-destroy.md b/.changeset/slow-students-destroy.md
@@ -0,0 +1,5 @@
+---
+"create-fuels": patch
+---
+
+feat: migrate to NextJS app router
diff --git a/templates/nextjs/src/pages/faucet.tsx → templates/nextjs/src/app/faucet/page.tsx b/templates/nextjs/src/pages/faucet.tsx → templates/nextjs/src/app/faucet/page.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { Button } from "@/components/Button";
 import { Input } from "@/components/Input";
 import { useActiveWallet } from "@/hooks/useActiveWallet";

diff --git a/templates/nextjs/src/app/layout.tsx b/templates/nextjs/src/app/layout.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import { Layout } from "@/components/Layout";
+import "@/styles/globals.css";
+import { FuelProvider } from "@fuels/react";
+import React, { ReactNode, useEffect, useState } from "react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { FuelConfig } from "fuels";
+import { defaultConnectors } from "@fuels/connectors";
+import { ENABLE_FUEL_DEV_CONNECTOR } from "@/lib";
+import { ActiveWalletProvider } from "@/hooks/useActiveWallet";
+
+const queryClient = new QueryClient();
+
+interface RootLayoutProps {
+  children: ReactNode;
+}
+
+export default function RootLayout({ children }: RootLayoutProps) {
+  const [fuelConfig, setFuelConfig] = useState<FuelConfig>({});
+
+  useEffect(() => {
+    setFuelConfig({
+      connectors: defaultConnectors({
+        devMode: ENABLE_FUEL_DEV_CONNECTOR,
+      }),
+    });
+  }, []);
+
+  return (
+    <html lang="en" className="bg-black text-white">
+      <body>
+        <React.StrictMode>
+          <QueryClientProvider client={queryClient}>
+            <FuelProvider fuelConfig={fuelConfig}>
+              <ActiveWalletProvider>
+                <Layout>{children}</Layout>
+              </ActiveWalletProvider>
+            </FuelProvider>
+          </QueryClientProvider>
+        </React.StrictMode>
+      </body>
+    </html>
+  );
+}
diff --git a/templates/nextjs/src/pages/index.tsx → templates/nextjs/src/app/page.tsx b/templates/nextjs/src/pages/index.tsx → templates/nextjs/src/app/page.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import type { TestContractAbi } from "@/sway-api";
 import { TestContractAbi__factory } from "@/sway-api";
 import contractIds from "@/sway-api/contract-ids.json";

diff --git a/templates/nextjs/src/pages/predicate.tsx → templates/nextjs/src/app/predicate/page.tsx b/templates/nextjs/src/pages/predicate.tsx → templates/nextjs/src/app/predicate/page.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { Button } from "@/components/Button";
 import { FuelLogo } from "@/components/FuelLogo";
 import { Input } from "@/components/Input";

diff --git a/templates/nextjs/src/pages/script.tsx → templates/nextjs/src/app/script/page.tsx b/templates/nextjs/src/pages/script.tsx → templates/nextjs/src/app/script/page.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { Button } from "@/components/Button";
 import { FuelLogo } from "@/components/FuelLogo";
 import { Input } from "@/components/Input";

diff --git a/templates/nextjs/src/pages/_app.tsx b/templates/nextjs/src/pages/_app.tsx
diff --git a/templates/nextjs/src/pages/_document.tsx b/templates/nextjs/src/pages/_document.tsx
diff --git a/templates/nextjs/tailwind.config.ts b/templates/nextjs/tailwind.config.ts
@@ -1,11 +1,7 @@
 import type { Config } from 'tailwindcss';
 
 const config: Config = {
-  content: [
-    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
-    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
-    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
-  ],
+  content: ['./src/components/**/*.{js,ts,jsx,tsx,mdx}', './src/app/**/*.{js,ts,jsx,tsx,mdx}'],
   theme: {
     extend: {
       backgroundImage: {

diff --git a/templates/nextjs/tsconfig.json b/templates/nextjs/tsconfig.json
@@ -15,8 +15,13 @@
     "incremental": true,
     "paths": {
       "@/*": ["./src/*"]
-    }
+    },
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
   "exclude": ["node_modules"]
 }