diff --git a/.changeset/tame-moons-clean.md b/.changeset/tame-moons-clean.md new file mode 100644 index 00000000000..42d7a85bb8b --- /dev/null +++ b/.changeset/tame-moons-clean.md @@ -0,0 +1,5 @@ +--- +"create-fuels": patch +--- + +feat: `create fuels` template revamp diff --git a/apps/create-fuels-counter-guide/.env.example b/apps/create-fuels-counter-guide/.env.example index e9a1ac1f1de..2bc55e185bf 100644 --- a/apps/create-fuels-counter-guide/.env.example +++ b/apps/create-fuels-counter-guide/.env.example @@ -1,2 +1,3 @@ VITE_FUEL_NODE_PORT=4000 -VITE_DAPP_ENVIRONMENT=local \ No newline at end of file +VITE_DAPP_ENVIRONMENT=local +VITE_GENESIS_WALLET_PRIVATE_KEY=0x01 \ No newline at end of file diff --git a/apps/create-fuels-counter-guide/.gitignore b/apps/create-fuels-counter-guide/.gitignore index 7ea0ef9b6b2..e88e6b4af18 100644 --- a/apps/create-fuels-counter-guide/.gitignore +++ b/apps/create-fuels-counter-guide/.gitignore @@ -33,5 +33,5 @@ src/sway-api/index.ts sway-programs/**/out .turbo -playwright-report -test-results \ No newline at end of file +test-results +playwright-report \ No newline at end of file diff --git a/apps/create-fuels-counter-guide/eslint.config.js b/apps/create-fuels-counter-guide/eslint.config.js index c4bc8f33c0b..714d9a5246c 100644 --- a/apps/create-fuels-counter-guide/eslint.config.js +++ b/apps/create-fuels-counter-guide/eslint.config.js @@ -1,8 +1,8 @@ -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' +import js from '@eslint/js'; +import reactHooks from 'eslint-plugin-react-hooks'; +import reactRefresh from 'eslint-plugin-react-refresh'; +import globals from 'globals'; +import tseslint from 'typescript-eslint'; export default tseslint.config({ extends: [js.configs.recommended, ...tseslint.configs.recommended], @@ -18,9 +18,6 @@ export default tseslint.config({ }, rules: { ...reactHooks.configs.recommended.rules, - 'react-refresh/only-export-components': [ - 'warn', - { allowConstantExport: true }, - ], + 'react-refresh/only-export-components': ['warn', { allowConstantExport: true }], }, -}) +}); diff --git a/apps/create-fuels-counter-guide/fuel-toolchain.toml b/apps/create-fuels-counter-guide/fuel-toolchain.toml index cf8d5119a82..8bf9fc3664b 100644 --- a/apps/create-fuels-counter-guide/fuel-toolchain.toml +++ b/apps/create-fuels-counter-guide/fuel-toolchain.toml @@ -2,5 +2,5 @@ channel = "testnet" [components] -forc = "0.63.1" -fuel-core = "0.34.0" +forc = "0.63.5" +fuel-core = "0.35.0" diff --git a/apps/create-fuels-counter-guide/fuels.config.ts b/apps/create-fuels-counter-guide/fuels.config.ts index 1c0ea70a379..0d70c7d00bc 100644 --- a/apps/create-fuels-counter-guide/fuels.config.ts +++ b/apps/create-fuels-counter-guide/fuels.config.ts @@ -1,7 +1,7 @@ // #region fuels-config-file-env import { createConfig } from 'fuels'; import dotenv from 'dotenv'; -import { NODE_URL } from './src/lib'; +import { providerUrl } from './src/lib'; dotenv.config({ path: ['.env.local', '.env'], @@ -14,8 +14,8 @@ 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', + providerUrl, forcPath: 'fuels-forc', + fuelCorePath: 'fuels-core', }); // #endregion fuels-config-file-env \ No newline at end of file diff --git a/apps/create-fuels-counter-guide/index.html b/apps/create-fuels-counter-guide/index.html index 999540e98ed..fda9ea040f7 100644 --- a/apps/create-fuels-counter-guide/index.html +++ b/apps/create-fuels-counter-guide/index.html @@ -3,7 +3,7 @@ - + Fuel dApp diff --git a/apps/create-fuels-counter-guide/package.json b/apps/create-fuels-counter-guide/package.json index aa3507ae139..8f3698d79f4 100644 --- a/apps/create-fuels-counter-guide/package.json +++ b/apps/create-fuels-counter-guide/package.json @@ -17,24 +17,22 @@ "@fuels/connectors": "^0.27.1", "@fuels/react": "^0.27.1", "@tanstack/react-query": "^5.55.4", - "@tanstack/react-router": "^1.58.3", - "fuels": "workspace:*", + "clsx": "2.1.1", "@wagmi/connectors": "^5.1.12", "@wagmi/core": "^2.13.6", "dotenv": "^16.4.5", + "fuels": "workspace:*", "react": "^18.3.1", "react-dom": "^18.3.1", - "react-hot-toast": "^2.4.1", - "react-use": "^17.5.1" + "react-toastify": "^10.0.5" }, "devDependencies": { + "@vitejs/plugin-react": "^4.3.1", "@eslint/js": "^9.10.0", - "@tanstack/router-plugin": "^1.56.4", "@types/node": "^22.5.5", "@playwright/test": "^1.47.2", "@types/react": "^18.3.8", "@types/react-dom": "^18.3", - "@vitejs/plugin-react-swc": "^3.7.0", "autoprefixer": "^10.4.20", "eslint": "^8.57.0", "eslint-plugin-react-hooks": "^4.6.2", @@ -45,6 +43,6 @@ "typescript": "~5.6.2", "typescript-eslint": "^8.5.0", "vite": "^5.4.7", - "vitest": "^2.0.5" + "vitest": "~2.0.5" } } diff --git a/apps/create-fuels-counter-guide/playwright.config.ts b/apps/create-fuels-counter-guide/playwright.config.ts index f085454c869..93a1f056062 100644 --- a/apps/create-fuels-counter-guide/playwright.config.ts +++ b/apps/create-fuels-counter-guide/playwright.config.ts @@ -37,6 +37,6 @@ export default defineConfig({ command: 'pnpm run fuels:dev', port: 4000, reuseExistingServer: !process.env.CI, - } - ] + }, + ], }); diff --git a/apps/create-fuels-counter-guide/postcss.config.js b/apps/create-fuels-counter-guide/postcss.config.js index 2e7af2b7f1a..2aa7205d4b4 100644 --- a/apps/create-fuels-counter-guide/postcss.config.js +++ b/apps/create-fuels-counter-guide/postcss.config.js @@ -3,4 +3,4 @@ export default { tailwindcss: {}, autoprefixer: {}, }, -} +}; diff --git a/apps/create-fuels-counter-guide/public/copy.svg b/apps/create-fuels-counter-guide/public/copy.svg deleted file mode 100644 index 132dc32ce7c..00000000000 --- a/apps/create-fuels-counter-guide/public/copy.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/apps/create-fuels-counter-guide/public/fuel.ico b/apps/create-fuels-counter-guide/public/favicon.ico similarity index 100% rename from apps/create-fuels-counter-guide/public/fuel.ico rename to apps/create-fuels-counter-guide/public/favicon.ico diff --git a/apps/create-fuels-counter-guide/public/logo_white.png b/apps/create-fuels-counter-guide/public/logo_white.png new file mode 100644 index 00000000000..39bfbae892b Binary files /dev/null and b/apps/create-fuels-counter-guide/public/logo_white.png differ diff --git a/apps/create-fuels-counter-guide/src/App.tsx b/apps/create-fuels-counter-guide/src/App.tsx new file mode 100644 index 00000000000..0ab05d2a1c4 --- /dev/null +++ b/apps/create-fuels-counter-guide/src/App.tsx @@ -0,0 +1,102 @@ +import { useConnectUI, useIsConnected, useNetwork } from "@fuels/react"; +import { useEffect } from "react"; + +import { useRouter } from "./hooks/useRouter"; +import Button from "./components/Button"; +import Info from "./components/Info"; +import Wallet from "./components/Wallet"; +import Contract from "./components/Contract"; +import Predicate from "./components/Predicate"; +import Script from "./components/Script"; +import Faucet from "./components/Faucet"; +import { providerUrl } from './lib' + +function App() { + const { connect } = useConnectUI(); + const { isConnected, refetch } = useIsConnected(); + const { network } = useNetwork(); + const { view, views, setRoute } = useRouter(); + const isConnectedToCorrectNetwork = network?.url === providerUrl; + + + useEffect(() => { + refetch(); + }, [refetch]); + + return ( +
+
+ + +
+
+
+ +
+
+ {!isConnected && ( +
+ +
+ )} + + {isConnected && !isConnectedToCorrectNetwork && ( +
+

+ You are connected to the wrong network. Please switch to{" "} + + {providerUrl} + +  in your wallet. +

+
+ )} + + {isConnected && isConnectedToCorrectNetwork && ( +
+
+ {views.map((viewName) => ( + + ))} +
+ + {view === "wallet" && } + {view === "contract" && } + {view === "predicate" && } + {view === "script" && - - - \ No newline at end of file + +
+ + + diff --git a/templates/vite/package.json b/templates/vite/package.json index de5ccf3f546..d0fc36f802b 100644 --- a/templates/vite/package.json +++ b/templates/vite/package.json @@ -16,23 +16,22 @@ "@fuels/connectors": "^0.27.1", "@fuels/react": "^0.27.1", "@tanstack/react-query": "^5.55.4", - "@tanstack/react-router": "^1.58.3", + "clsx": "2.1.1", "@wagmi/connectors": "^5.1.12", "@wagmi/core": "^2.13.6", "dotenv": "^16.4.5", "fuels": "workspace:*", "react": "^18.3.1", "react-dom": "^18.3.1", - "react-hot-toast": "^2.4.1", - "react-use": "^17.5.1" + "react-toastify": "^10.0.5" }, "devDependencies": { + "@vitejs/plugin-react": "^4.3.1", "@eslint/js": "^9.10.0", "@tanstack/router-plugin": "^1.56.4", "@playwright/test": "^1.47.2", "@types/react": "^18.3.8", "@types/react-dom": "^18.3", - "@vitejs/plugin-react-swc": "^3.7.0", "autoprefixer": "^10.4.20", "eslint": "^8.57.0", "eslint-plugin-react-hooks": "^4.6.2", @@ -43,6 +42,6 @@ "typescript": "~5.6.2", "typescript-eslint": "^8.5.0", "vite": "^5.4.7", - "vitest": "^2.0.5" + "vitest": "~2.0.5" } } diff --git a/templates/vite/postcss.config.js b/templates/vite/postcss.config.js index 2e7af2b7f1a..2aa7205d4b4 100644 --- a/templates/vite/postcss.config.js +++ b/templates/vite/postcss.config.js @@ -3,4 +3,4 @@ export default { tailwindcss: {}, autoprefixer: {}, }, -} +}; diff --git a/templates/vite/public/close.svg b/templates/vite/public/close.svg deleted file mode 100644 index 68c77b1b014..00000000000 --- a/templates/vite/public/close.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - \ No newline at end of file diff --git a/templates/vite/public/copy.svg b/templates/vite/public/copy.svg deleted file mode 100644 index 132dc32ce7c..00000000000 --- a/templates/vite/public/copy.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/templates/vite/public/fuel.ico b/templates/vite/public/favicon.ico similarity index 100% rename from templates/vite/public/fuel.ico rename to templates/vite/public/favicon.ico diff --git a/templates/vite/public/hamburger.svg b/templates/vite/public/hamburger.svg deleted file mode 100644 index 6e4f6fd75ca..00000000000 --- a/templates/vite/public/hamburger.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/templates/vite/public/logo_white.png b/templates/vite/public/logo_white.png new file mode 100644 index 00000000000..39bfbae892b Binary files /dev/null and b/templates/vite/public/logo_white.png differ diff --git a/templates/vite/src/App.tsx b/templates/vite/src/App.tsx new file mode 100644 index 00000000000..ba054a3e70d --- /dev/null +++ b/templates/vite/src/App.tsx @@ -0,0 +1,101 @@ +import { useConnectUI, useIsConnected, useNetwork } from "@fuels/react"; +import { useEffect } from "react"; + +import { useRouter } from "./hooks/useRouter"; +import Button from "./components/Button"; +import Info from "./components/Info"; +import Wallet from "./components/Wallet"; +import Contract from "./components/Contract"; +import Predicate from "./components/Predicate"; +import Script from "./components/Script"; +import Faucet from "./components/Faucet"; +import { providerUrl } from "./lib.tsx"; + +function App() { + const { connect } = useConnectUI(); + const { isConnected, refetch } = useIsConnected(); + const { network } = useNetwork(); + const { view, views, setRoute } = useRouter(); + const isConnectedToCorrectNetwork = network?.url === providerUrl; + + useEffect(() => { + refetch(); + }, [refetch]); + + return ( +
+
+ + +
+
+
+ +
+
+ {!isConnected && ( +
+ +
+ )} + + {isConnected && !isConnectedToCorrectNetwork && ( +
+

+ You are connected to the wrong network. Please switch to{" "} + + {providerUrl} + +  in your wallet. +

+
+ )} + + {isConnected && isConnectedToCorrectNetwork && ( +
+
+ {views.map((viewName) => ( + + ))} +
+ + {view === "wallet" && } + {view === "contract" && } + {view === "predicate" && } + {view === "script" &&