feat: make vite the default create-fuels template (#3048)

FuelLabs · Sep 3, 2024 · a0bb25f · a0bb25f
1 parent 96140a2
commit a0bb25f
Show file tree

Hide file tree

Showing 53 changed files with 1,108 additions and 694 deletions.
diff --git a/.changeset/odd-coats-tease.md b/.changeset/odd-coats-tease.md
@@ -0,0 +1,5 @@
+---
+"create-fuels": patch
+---
+
+feat: make vite the default `create-fuels` template
diff --git a/apps/create-fuels-counter-guide/.env.example b/apps/create-fuels-counter-guide/.env.example
@@ -1,2 +1,2 @@
-NEXT_PUBLIC_FUEL_NODE_PORT=4000
-NEXT_PUBLIC_DAPP_ENVIRONMENT=local
+VITE_FUEL_NODE_PORT=4000
+VITE_DAPP_ENVIRONMENT=local
diff --git a/apps/create-fuels-counter-guide/.eslintignore b/apps/create-fuels-counter-guide/.eslintignore
diff --git a/apps/create-fuels-counter-guide/.eslintrc.json b/apps/create-fuels-counter-guide/.eslintrc.json
diff --git a/apps/create-fuels-counter-guide/.gitignore b/apps/create-fuels-counter-guide/.gitignore
@@ -1,37 +1,27 @@
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-.yarn/install-state.gz
-
-# testing
-/coverage
-
-# next.js
-/.next/
-/out/
-
-# production
-/build
-
-# misc
-.DS_Store
-*.pem
-
-# debug
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-
-# local env files
-.env*.local
-
-# vercel
-.vercel
-
-# typescript
-*.tsbuildinfo
-next-env.d.ts
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
 
 .fuels
 

diff --git a/apps/create-fuels-counter-guide/README.md b/apps/create-fuels-counter-guide/README.md
@@ -1,4 +1,4 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-fuels`](https://github.com/FuelLabs/fuels-ts/tree/master/packages/create-fuels).
+This is a [Vite](https://vitejs.dev/) project bootstrapped with [`create-fuels`](https://github.com/FuelLabs/fuels-ts/tree/master/packages/create-fuels).
 
 ## Getting Started
 

diff --git a/apps/create-fuels-counter-guide/eslint.config.js b/apps/create-fuels-counter-guide/eslint.config.js
@@ -0,0 +1,26 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config({
+  extends: [js.configs.recommended, ...tseslint.configs.recommended],
+  files: ['**/*.{ts,tsx}'],
+  ignores: ['dist'],
+  languageOptions: {
+    ecmaVersion: 2020,
+    globals: globals.browser,
+  },
+  plugins: {
+    'react-hooks': reactHooks,
+    'react-refresh': reactRefresh,
+  },
+  rules: {
+    ...reactHooks.configs.recommended.rules,
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+})
diff --git a/apps/create-fuels-counter-guide/fuels.config.ts b/apps/create-fuels-counter-guide/fuels.config.ts
@@ -1,19 +1,21 @@
 // #region fuels-config-file-env
 import { createConfig } from 'fuels';
 import dotenv from 'dotenv';
-import { NODE_URL } from '@/lib';
+import { NODE_URL } from './src/lib';
 
 dotenv.config({
   path: ['.env.local', '.env'],
 });
 
 // If your node is running on a port other than 4000, you can set it here
-const fuelCorePort = +(process.env.NEXT_PUBLIC_FUEL_NODE_PORT as string) || 4000;
+const fuelCorePort = +(process.env.VITE_FUEL_NODE_PORT as string) || 4000;
 
 export default createConfig({
   workspace: './sway-programs', // Path to your Sway workspace
   output: './src/sway-api', // Where your generated types will be saved
   fuelCorePort,
   providerUrl: NODE_URL,
+  fuelCorePath: 'fuels-core',
+  forcPath: 'fuels-forc',
 });
 // #endregion fuels-config-file-env
diff --git a/apps/create-fuels-counter-guide/index.html b/apps/create-fuels-counter-guide/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/fuel.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Fuel dApp</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+
+</html>
diff --git a/apps/create-fuels-counter-guide/next.config.js b/apps/create-fuels-counter-guide/next.config.js
diff --git a/apps/create-fuels-counter-guide/package.json b/apps/create-fuels-counter-guide/package.json
@@ -1,39 +1,49 @@
 {
   "name": "create-fuels-counter-guide",
-  "version": "0.1.0",
   "private": true,
+  "version": "0.1.0",
+  "type": "module",
   "scripts": {
-    "original:dev": "next dev",
-    "original:build": "next build",
+    "test": "vitest",
+    "original:dev": "vite",
+    "original:build": "tsc -b && vite build",
     "original:start": "next start",
-    "original:lint": "next lint",
+    "original:lint": "eslint .",
     "fuels:build": "fuels build",
     "fuels:dev": "fuels dev",
     "postbuild": "run-s fuels:build original:build"
   },
   "dependencies": {
     "@fuels/connectors": "^0.26.0",
     "@fuels/react": "^0.26.0",
-    "fuels": "workspace:*",
     "@tanstack/react-query": "^5.52.1",
+    "@tanstack/react-router": "^1.48.1",
+    "fuels": "workspace:*",
     "@wagmi/connectors": "^5.1.8",
     "@wagmi/core": "^2.13.4",
     "dotenv": "^16.4.5",
-    "next": "14.2.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hot-toast": "^2.4.1",
     "react-use": "^17.5.1"
   },
   "devDependencies": {
+    "@eslint/js": "^9.9.1",
+    "@tanstack/router-plugin": "^1.47.0",
     "@types/node": "^22.2.0",
     "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3",
+    "@vitejs/plugin-react-swc": "^3.5.0",
     "autoprefixer": "^10.4.20",
     "eslint": "^8.57.0",
-    "eslint-config-next": "14.2.7",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-refresh": "^0.4.11",
+    "globals": "^15.9.0",
     "postcss": "^8",
     "tailwindcss": "^3.4.10",
-    "typescript": "~5.4.5"
+    "typescript": "~5.4.5",
+    "typescript-eslint": "^8.0.0",
+    "vite": "^5.4.2",
+    "vitest": "^1.6.0"
   }
 }
diff --git a/apps/create-fuels-counter-guide/postcss.config.js b/apps/create-fuels-counter-guide/postcss.config.js
@@ -1,6 +1,6 @@
-module.exports = {
+export default {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},
   },
-};
+}
diff --git a/apps/create-fuels-counter-guide/src/app/layout.tsx b/apps/create-fuels-counter-guide/src/app/layout.tsx
diff --git a/apps/create-fuels-counter-guide/src/components/Layout.tsx b/apps/create-fuels-counter-guide/src/components/Layout.tsx
@@ -1,13 +1,12 @@
 import toast, { Toaster } from "react-hot-toast";
 import { Link } from "./Link";
 import { Button } from "./Button";
-import { CURRENT_ENVIRONMENT, NODE_URL, TESTNET_FAUCET_LINK } from "@/lib";
+import { CURRENT_ENVIRONMENT, NODE_URL, TESTNET_FAUCET_LINK } from "../lib";
 import { useConnectUI, useDisconnect } from "@fuels/react";
 import { WalletDisplay } from "./WalletDisplay";
-import { useBrowserWallet } from "@/hooks/useBrowserWallet";
-import { useActiveWallet } from "@/hooks/useActiveWallet";
-import { useFaucet } from "@/hooks/useFaucet";
-import Head from "next/head";
+import { useBrowserWallet } from "../hooks/useBrowserWallet";
+import { useActiveWallet } from "../hooks/useActiveWallet";
+import { useFaucet } from "../hooks/useFaucet";
 import { bn } from "fuels";
 
 export const Layout = ({ children }: { children: React.ReactNode }) => {
@@ -73,12 +72,8 @@ export const Layout = ({ children }: { children: React.ReactNode }) => {
 
   return (
     <>
-      <Head>
-        <title>Fuel App</title>
-        <link rel="icon" href="/fuel.ico" />
-      </Head>
       <Toaster />
-      <div className="flex flex-col">
+      <div className="flex flex-col bg-black text-white">
         <nav className="flex justify-between items-center p-4 bg-black text-white gap-6">
           <Link href="/">Home</Link>
 

diff --git a/apps/create-fuels-counter-guide/src/components/Link.tsx b/apps/create-fuels-counter-guide/src/components/Link.tsx
@@ -1,3 +1,5 @@
+import { Link as ReactRouterLink } from "@tanstack/react-router";
+
 export const Link = ({
   href,
   children,
@@ -10,12 +12,12 @@ export const Link = ({
   target?: string;
 }) => {
   return (
-    <a
-      href={href}
+    <ReactRouterLink
+      to={href}
       className={`text-fuel-green hover:underline ${className}`}
       target={target}
     >
       {children}
-    </a>
+    </ReactRouterLink>
   );
 };
diff --git a/apps/create-fuels-counter-guide/src/components/WalletDisplay.tsx b/apps/create-fuels-counter-guide/src/components/WalletDisplay.tsx
@@ -1,5 +1,5 @@
 import toast from "react-hot-toast";
-import { useActiveWallet } from "@/hooks/useActiveWallet";
+import { useActiveWallet } from "../hooks/useActiveWallet";
 
 const getTruncatedAddress = (address: string) => {
   return address.slice(0, 6) + "..." + address.slice(-4);

diff --git a/apps/create-fuels-counter-guide/src/hooks/useActiveWallet.tsx b/apps/create-fuels-counter-guide/src/hooks/useActiveWallet.tsx
@@ -1,7 +1,7 @@
-import { useEffect, useState, createContext, useContext, useMemo } from "react";
+import { useEffect, useState, createContext, useContext } from "react";
 import { useBrowserWallet } from "./useBrowserWallet";
 import { useBurnerWallet } from "./useBurnerWallet";
-import { AppWallet } from "@/lib";
+import { AppWallet } from "../lib";
 
 /**
  * burner -> a burner wallet embedded inside of the template app and stored in local storage

diff --git a/apps/create-fuels-counter-guide/src/hooks/useBrowserWallet.tsx b/apps/create-fuels-counter-guide/src/hooks/useBrowserWallet.tsx
@@ -1,4 +1,4 @@
-import { AppWallet } from "@/lib";
+import { AppWallet } from "../lib";
 import { useIsConnected, useNetwork, useWallet } from "@fuels/react";
 import { BN } from "fuels";
 import { useCallback, useState } from "react";

diff --git a/apps/create-fuels-counter-guide/src/hooks/useBurnerWallet.tsx b/apps/create-fuels-counter-guide/src/hooks/useBurnerWallet.tsx
@@ -1,4 +1,4 @@
-import { AppWallet, NODE_URL } from "@/lib";
+import { AppWallet, NODE_URL } from "../lib";
 import { BN, Provider, Wallet, WalletUnlocked } from "fuels";
 import { useCallback, useState } from "react";
 import useAsync from "react-use/lib/useAsync";