docs: add 'creating a fuel dapp' section

.changeset/clever-birds-train.md

@@ -0,0 +1,5 @@
+---
+"create-fuels-counter-guide": patch
+---
+
+docs: add 'creating a fuel dapp' section

.eslintignore

@@ -10,6 +10,7 @@ apps/demo-typegen/src/predicate-types
 apps/demo-nextjs
 apps/demo-react-cra
 apps/demo-react-vite
+apps/create-fuels-counter-guide
 
 packages/fuels/test/fixtures/project
 packages/account/src/providers/__generated__

.prettierignore

@@ -12,6 +12,7 @@ apps/demo-typegen/src/contract-types
 apps/demo-typegen/src/script-types
 apps/demo-typegen/src/predicate-types
 apps/docs/.vitepress/cache/
+apps/create-fuels-counter-guide
 
 packages/fuels/test/fixtures/project
 packages/account/src/providers/assets

apps/create-fuels-counter-guide/.eslintignore

@@ -0,0 +1 @@
+src/sway-api

apps/create-fuels-counter-guide/.eslintrc.json

@@ -0,0 +1,4 @@
+{
+  "extends": "next/core-web-vitals",
+  "ignoreDuringBuilds": true
+}

apps/create-fuels-counter-guide/.gitignore

@@ -0,0 +1,39 @@
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+.fuels
+src/sway-api
+sway-programs/**/out
+.turbo

apps/create-fuels-counter-guide/README.md

@@ -0,0 +1,23 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-fuels`](https://github.com/fuellabs/fuels-ts).
+
+## Getting Started
+
+1. Start the Fuel development server. This server will start a local Fuel node and provide hot-reloading for your smart contracts.
+
+```bash
+npm run fuels:dev
+
+# or
+npx fuels dev
+```
+
+1. Start the Next.js development server.
+
+```bash
+npm run dev
+```
+
+## Learn More
+
+- [Fuel TS SDK docs](https://fuellabs.github.io/fuels-ts/)
+- [Fuel Docs Portal](https://docs.fuel.network/)

apps/create-fuels-counter-guide/fuels.config.ts

@@ -0,0 +1,11 @@
+import { createConfig } from 'fuels';
+
+export default createConfig({
+  workspace: './sway-programs',
+  output: './src/sway-api',
+  /*
+    This is the same value as the port specified in the `.env.local` file.
+    Please keep these values in sync.
+  */
+  fuelCorePort: 4000,
+});

apps/create-fuels-counter-guide/next.config.js

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+};
+
+module.exports = nextConfig;

apps/create-fuels-counter-guide/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "create-fuels-counter-guide",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "original:dev": "next dev",
+    "original:build": "next build",
+    "original:start": "next start",
+    "original:lint": "next lint",
+    "fuels:build": "fuels build --deploy",
+    "fuels:dev": "fuels dev",
+    "postbuild": "run-s fuels:build original:build"
+  },
+  "dependencies": {
+    "@fuel-wallet/react": "0.15.2",
+    "fuels": "workspace:*",
+    "next": "14.0.1",
+    "react": "^18.2",
+    "react-dom": "^18.2",
+    "react-hot-toast": "^2.4.1",
+    "react-use": "^17.5.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18.2",
+    "@types/react-dom": "^18.2",
+    "autoprefixer": "^10.0.1",
+    "eslint": "^8",
+    "eslint-config-next": "14.0.1",
+    "postcss": "^8",
+    "tailwindcss": "^3.3.0",
+    "typescript": "^5"
+  },
+  "trustedDependencies": [
+    "@fuel-ts/fuel-core",
+    "@fuel-ts/forc"
+  ]
+}

apps/create-fuels-counter-guide/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

apps/create-fuels-counter-guide/src/components/Button.tsx

@@ -0,0 +1,14 @@
+export const Button: React.FC<{
+  children: React.ReactNode;
+  className?: string;
+  onClick?: () => void;
+}> = ({ children, className, onClick }) => {
+  return (
+    <button
+      className={`bg-fuel-green text-white px-4 py-2 rounded-md ${className}`}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+};

apps/create-fuels-counter-guide/src/components/FuelLogo.tsx

@@ -0,0 +1,14 @@
+export const FuelLogo = () => {
+  return (
+    <svg
+      viewBox="0 0 344 344"
+      className="PJLV PJLV-iiWunJk-css fuel_Logo w-[50px]"
+    >
+      <rect x="25" y="37" width="292" height="284" fill="black"></rect>
+      <path
+        d="M22.8744 0C10.2181 0 0 10.218 0 22.8744V344H284.626C294.246 344 303.497 340.179 310.308 333.368L333.368 310.308C340.179 303.497 344 294.246 344 284.626V0H22.8744ZM224.608 44.231L112.718 156.121C109.956 158.882 106.182 160.447 102.27 160.447C96.5631 160.447 91.3157 157.134 88.8763 151.978L45.5194 60.3402C41.9756 52.8383 47.4525 44.231 55.7374 44.231H224.608ZM44.231 299.769V190.916C44.231 185.117 48.9257 180.422 54.7249 180.422H163.577L44.231 299.769ZM172.598 160.447H136.559L244.998 52.0097C249.968 47.0382 256.734 44.231 263.776 44.231H299.814L191.377 152.668C186.407 157.64 179.64 160.447 172.598 160.447Z"
+        fill="#00F58C"
+      ></path>
+    </svg>
+  );
+};

apps/create-fuels-counter-guide/src/components/Input.tsx

@@ -0,0 +1,17 @@
+export const Input: React.FC<{
+  value?: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  placeholder?: string;
+  type?: string;
+  className?: string;
+}> = ({ value, onChange, placeholder, type, className }) => {
+  return (
+    <input
+      value={value}
+      onChange={onChange}
+      placeholder={placeholder}
+      type={type}
+      className={`border-2 border-gray-700 placeholder:text-gray-600 text-gray-400 rounded-md px-4 py-2 bg-transparent outline-none ${className}`}
+    />
+  );
+};

apps/create-fuels-counter-guide/src/components/Layout.tsx

@@ -0,0 +1,97 @@
+import toast, { Toaster } from "react-hot-toast";
+import { Link } from "./Link";
+import { Button } from "./Button";
+import { NODE_URL } from "@/lib";
+import { useConnectUI, useDisconnect } from "@fuel-wallet/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";
+
+export const Layout = ({ children }: { children: React.ReactNode }) => {
+  const { faucetWallet } = useFaucet();
+
+  const {
+    wallet: browserWallet,
+    walletBalance: isBrowserWalletConnected,
+    network: browserWalletNetwork,
+  } = useBrowserWallet();
+
+  const { connect } = useConnectUI();
+  const { disconnect } = useDisconnect();
+
+  const { wallet, refreshWalletBalance, walletBalance } = useActiveWallet();
+
+  const topUpWallet = async () => {
+    if (!wallet) {
+      return console.error("Unable to topup wallet because wallet is not set.");
+    }
+
+    if (!faucetWallet) {
+      return toast.error("Faucet wallet not found.");
+    }
+
+    const tx = await faucetWallet?.transfer(wallet.address, 10_000);
+    await tx?.waitForResult();
+
+    toast.success("Wallet topped up!");
+
+    await refreshWalletBalance?.();
+  };
+
+  const showTopUpButton = walletBalance?.lt(10_000);
+
+  const showAddNetworkButton =
+    browserWallet &&
+    browserWalletNetwork &&
+    browserWalletNetwork?.url !== NODE_URL;
+
+  const tryToAddNetwork = () => {
+    return alert(
+      `Please add the network ${NODE_URL} to your Fuel wallet, or swtich to it if you have it already, and refresh the page.`,
+    );
+  };
+
+  return (
+    <>
+      <Head>
+        <title>Fuel App</title>
+        <link rel="icon" href="/fuel.ico" />
+      </Head>
+      <Toaster />
+      <div className="flex flex-col">
+        <nav className="flex justify-between items-center p-4 bg-black text-white gap-6">
+          <Link href="/">Home</Link>
+
+          <Link href="/faucet">Faucet</Link>
+
+          {isBrowserWalletConnected && (
+            <Button onClick={disconnect}>Disconnect Wallet</Button>
+          )}
+          {!isBrowserWalletConnected && (
+            <Button onClick={connect}>Connect Wallet</Button>
+          )}
+
+          {showAddNetworkButton && (
+            <Button onClick={tryToAddNetwork} className="bg-red-500">
+              Wrong Network
+            </Button>
+          )}
+
+          <div className="ml-auto">
+            <WalletDisplay />
+          </div>
+
+          {showTopUpButton && (
+            <Button onClick={() => topUpWallet()}>Top-up Wallet</Button>
+          )}
+        </nav>
+
+        <div className="min-h-screen items-center p-24 flex flex-col gap-6">
+          {children}
+        </div>
+      </div>
+    </>
+  );
+};

apps/create-fuels-counter-guide/src/components/Link.tsx

@@ -0,0 +1,21 @@
+export const Link = ({
+  href,
+  children,
+  className,
+  target,
+}: {
+  href: string;
+  children: React.ReactNode;
+  className?: string;
+  target?: string;
+}) => {
+  return (
+    <a
+      href={href}
+      className={`text-fuel-green hover:underline ${className}`}
+      target={target}
+    >
+      {children}
+    </a>
+  );
+};

apps/create-fuels-counter-guide/src/components/WalletDisplay.tsx

@@ -0,0 +1,34 @@
+import toast from "react-hot-toast";
+import { useActiveWallet } from "@/hooks/useActiveWallet";
+
+const getTruncatedAddress = (address: string) => {
+  return address.slice(0, 6) + "..." + address.slice(-4);
+};
+
+const copyToClipboard = (text: string) => {
+  navigator.clipboard.writeText(text);
+  toast.success("Address copied to clipboard");
+};
+
+export const WalletDisplay = () => {
+  const { wallet, walletBalance } = useActiveWallet();
+
+  return (
+    wallet && (
+      <div className="flex gap-4 items-center">
+        <span className="text-gray-400">
+          {getTruncatedAddress(wallet.address.toB256() as string)}
+        </span>
+        <img
+          src="/copy.svg"
+          alt="copy"
+          className="cursor-pointer h-5 hover:opacity-80 active:scale-[90%]"
+          onClick={() => copyToClipboard(wallet.address.toB256() as string)}
+        />
+        <span className="text-gray-400">
+          Balance: {walletBalance?.toString()}
+        </span>
+      </div>
+    )
+  );
+};