FuelLabs · danielbate · Aug 23, 2024 · Aug 22, 2024 · Aug 22, 2024 · Aug 22, 2024
@@ -19,6 +19,7 @@
     "@fuel-ts/docs-snippets",
     "template-nextjs",
     "create-fuels-counter-guide",
-    "demo-wallet-sdk-react"
+    "demo-wallet-sdk-react",
+    "template-vite"
   ]
 }
@@ -0,0 +1,5 @@
+---
+"create-fuels": patch
+---
+
+chore: upgrade connectors
@@ -12,8 +12,8 @@
     "postbuild": "run-s fuels:build original:build"
   },
   "dependencies": {
-    "@fuels/connectors": "^0.8.1",
-    "@fuels/react": "^0.20.0",
+    "@fuels/connectors": "^0.25.0",
+    "@fuels/react": "^0.25.0",
     "fuels": "workspace:*",
     "@tanstack/react-query": "^5.51.23",
     "dotenv": "^16.4.5",

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}
@@ -16,11 +16,7 @@ bun dev
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
-
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
-
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
 
 This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
 

@@ -9,8 +9,8 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@fuels/connectors": "^0.8.1",
-    "@fuels/react": "^0.20.0",
+    "@fuels/connectors": "^0.25.0",
+    "@fuels/react": "^0.25.0",
     "@tanstack/react-query": "^5.51.23",
     "fuels": "workspace:*",
     "next": "14.2.5",
@@ -21,8 +21,9 @@
     "@types/node": "^22.2.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3",
-    "autoprefixer": "^10.4.20",
-    "postcss": "^8",
+    "eslint": "^8.57.0",
+    "eslint-config-next": "14.2.5",
+    "postcss-load-config": "^6.0.1",
     "tailwindcss": "^3.4.10",
     "typescript": "~5.4.5"
   }

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;
@@ -0,0 +1,36 @@
+// #region wallet-sdk-react-provider
+
+"use client";
+
+import { defaultConnectors } from "@fuels/connectors";
+import { FuelProvider } from "@fuels/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { Inter } from "next/font/google";
+import React from "react";
+
+import "./globals.css";
+
+const inter = Inter({ subsets: ["latin"] });
+
+const queryClient = new QueryClient();
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <React.StrictMode>
+      <html>
+        <QueryClientProvider client={queryClient}>
+          <FuelProvider
+            fuelConfig={{ connectors: defaultConnectors({ devMode: true }) }}
+          >
+            <body className={inter.className}>{children}</body>
+          </FuelProvider>
+        </QueryClientProvider>
+      </html>
+    </React.StrictMode>
+  );
+}
+// #endregion wallet-sdk-react-provider
@@ -1,4 +1,7 @@
 // #region wallet-sdk-react-ui
+
+"use client";
+
 import {
   useAccount,
   useBalance,

@@ -2,9 +2,9 @@ import type { Config } from "tailwindcss";
 
 const config: Config = {
   content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
     extend: {

@@ -12,10 +12,15 @@
     "isolatedModules": true,
     "jsx": "preserve",
     "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
     "paths": {
-      "@/*": ["./*"]
+      "@/*": ["./src/*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
   "exclude": ["node_modules"]
 }
@@ -45,13 +45,13 @@ bun add fuels @fuels/connectors @fuels/react @tanstack/react-query
 In order to make use of the React hooks provided by the Fuel Wallet SDK, we need to wrap our application in a `FuelProvider` component. This component will provide the hooks with the necessary context to interact with the Fuel Wallet SDK. Add the following to your `pages/_app.tsx` file:
 
 <!-- prettier-ignore -->
-<<< @/../../demo-wallet-sdk-react/pages/_app.tsx#wallet-sdk-react-provider{tsx:line-numbers}
+<<< @/../../demo-wallet-sdk-react/src/app/layout.tsx#wallet-sdk-react-provider{tsx:line-numbers}
 
 ## Building the UI
 
 Go to your `pages/index.tsx` file and replace the contents with the following:
 
-<<< @/../../demo-wallet-sdk-react/pages/index.tsx#wallet-sdk-react-ui{tsx:line-numbers}
+<<< @/../../demo-wallet-sdk-react/src/app/page.tsx#wallet-sdk-react-ui{tsx:line-numbers}
 
 Let's break down what's happening here.