chore: include all supported connectors in the create fuels template (#…

…2691) Co-authored-by: Chad Nehemiah <[email protected]>
FuelLabs · Jul 10, 2024 · e9b70ee · e9b70ee
1 parent aa7e656
commit e9b70ee
Show file tree

Hide file tree

Showing 40 changed files with 764 additions and 1,360 deletions.
diff --git a/.changeset/eighty-trains-prove.md b/.changeset/eighty-trains-prove.md
@@ -0,0 +1,5 @@
+---
+"create-fuels": patch
+---
+
+chore: include all supported connectors in the create fuels template
diff --git a/.knip.json b/.knip.json
@@ -4,7 +4,8 @@
     "**/*/.vitepress/*",
     "/apps/docs/*",
     "/packages/abi-typegen/test/**",
-    "templates/**"
+    "templates/**",
+    "apps/create-fuels-counter-guide/**"
   ],
   "ignoreDependencies": [
     "bun",

diff --git a/apps/create-fuels-counter-guide/.env.example b/apps/create-fuels-counter-guide/.env.example
@@ -1,6 +1,2 @@
-NEXT_PUBLIC_HAS_CONTRACT=true
-NEXT_PUBLIC_HAS_PREDICATE=false
-NEXT_PUBLIC_HAS_SCRIPT=false
 NEXT_PUBLIC_FUEL_NODE_PORT=4000
-NEXT_PUBLIC_DAPP_ENVIRONMENT=local
-NEXT_PUBLIC_TESTNET_CONTRACT_ID=0x9310ab0b757826b745d601cb682c1b4f35abde02cddd67f8535c0b5bfb296d25
+NEXT_PUBLIC_DAPP_ENVIRONMENT=local
diff --git 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 '@/lib'
+import { NODE_URL } from '@/lib';
 
 dotenv.config({
   path: ['.env.local', '.env'],
@@ -15,4 +15,4 @@ export default createConfig({
   fuelCorePort,
   providerUrl: NODE_URL,
 });
-// #endregion fuels-config-file-env
+// #endregion fuels-config-file-env
diff --git a/apps/create-fuels-counter-guide/package.json b/apps/create-fuels-counter-guide/package.json
@@ -12,7 +12,7 @@
     "postbuild": "run-s fuels:build original:build"
   },
   "dependencies": {
-    "@fuels/connectors": "^0.2.2",
+    "@fuels/connectors": "^0.8.1",
     "@fuels/react": "^0.20.0",
     "fuels": "workspace:*",
     "@tanstack/react-query": "^5.29.2",

diff --git a/...-fuels-counter-guide/src/pages/faucet.tsx → ...els-counter-guide/src/app/faucet/page.tsx b/...-fuels-counter-guide/src/pages/faucet.tsx → ...els-counter-guide/src/app/faucet/page.tsx
@@ -1,18 +1,25 @@
+"use client";
+
 import { Button } from "@/components/Button";
 import { Input } from "@/components/Input";
 import { useActiveWallet } from "@/hooks/useActiveWallet";
 import { useFaucet } from "@/hooks/useFaucet";
-import { BN, bn } from "fuels";
-import { useState } from "react";
+import { bn } from "fuels";
+import { useEffect, useState } from "react";
 import toast from "react-hot-toast";
 
 export default function Faucet() {
   const { faucetWallet } = useFaucet();
+  const { wallet, refreshWalletBalance } = useActiveWallet();
 
-  const { refreshWalletBalance } = useActiveWallet();
+  const [receiverAddress, setReceiverAddress] = useState<string>("");
+  const [amountToSend, setAmountToSend] = useState<string>("5");
 
-  const [receiverAddress, setReceiverAddress] = useState<string>();
-  const [amountToSend, setAmountToSend] = useState<BN>();
+  useEffect(() => {
+    if (wallet) {
+      setReceiverAddress(wallet.address.toB256());
+    }
+  }, [wallet]);
 
   const sendFunds = async () => {
     if (!faucetWallet) {
@@ -27,7 +34,10 @@ export default function Faucet() {
       return toast.error("Amount cannot be empty");
     }
 
-    const tx = await faucetWallet.transfer(receiverAddress, amountToSend);
+    const tx = await faucetWallet.transfer(
+      receiverAddress,
+      bn.parseUnits(amountToSend.toString()),
+    );
     await tx.waitForResult();
 
     toast.success("Funds sent!");
@@ -40,25 +50,29 @@ export default function Faucet() {
       <h3 className="text-2xl font-semibold">Local Faucet</h3>
 
       <div className="flex gap-4 items-center">
-        <span className="text-gray-400">Receiving address:</span>
+        <label htmlFor="receiver-address-input" className="text-gray-400">
+          Receiving address:
+        </label>
         <Input
           className="w-full"
           value={receiverAddress}
           onChange={(e) => setReceiverAddress(e.target.value)}
           placeholder="0x..."
+          id="receiver-address-input"
         />
       </div>
 
       <div className="flex gap-4 items-center">
-        <span className="text-gray-400">Amount:</span>
+        <label htmlFor="amount-input" className="text-gray-400">
+          Amount (ETH):
+        </label>
         <Input
           className="w-full"
-          value={amountToSend?.toString()}
-          onChange={(e) =>
-            setAmountToSend(e.target.value ? bn(e.target.value) : undefined)
-          }
-          placeholder="100"
+          value={amountToSend}
+          onChange={(e) => setAmountToSend(e.target.value)}
+          placeholder="5"
           type="number"
+          id="amount-input"
         />
       </div>
 

diff --git a/apps/create-fuels-counter-guide/src/app/layout.tsx b/apps/create-fuels-counter-guide/src/app/layout.tsx
@@ -0,0 +1,66 @@
+"use client";
+
+import { Layout } from "@/components/Layout";
+import "@/styles/globals.css";
+import { FuelProvider } from "@fuels/react";
+import React, { ReactNode, useEffect, useMemo, useState } from "react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { Provider } from "fuels";
+import {
+  BakoSafeConnector,
+  BurnerWalletConnector,
+  FuelWalletConnector,
+  FuelWalletDevelopmentConnector,
+  FueletWalletConnector,
+  WalletConnectConnector,
+} from "@fuels/connectors";
+import { NODE_URL } from "@/lib";
+import { ActiveWalletProvider } from "@/hooks/useActiveWallet";
+
+const queryClient = new QueryClient();
+
+interface RootLayoutProps {
+  children: ReactNode;
+}
+
+export default function RootLayout({ children }: RootLayoutProps) {
+  const [isMounted, setIsMounted] = useState(false);
+  const providerToUse = useMemo(() => Provider.create(NODE_URL), [NODE_URL]);
+
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  if (!isMounted) return null;
+
+  return (
+    <html lang="en" className="bg-black text-white">
+      <body>
+        <React.StrictMode>
+          <QueryClientProvider client={queryClient}>
+            <FuelProvider
+              fuelConfig={{
+                connectors: [
+                  new FuelWalletConnector(),
+                  new BurnerWalletConnector({
+                    fuelProvider: providerToUse,
+                  }),
+                  new WalletConnectConnector({
+                    fuelProvider: providerToUse,
+                  }),
+                  new BakoSafeConnector(),
+                  new FueletWalletConnector(),
+                  new FuelWalletDevelopmentConnector(),
+                ],
+              }}
+            >
+              <ActiveWalletProvider>
+                <Layout>{children}</Layout>
+              </ActiveWalletProvider>
+            </FuelProvider>
+          </QueryClientProvider>
+        </React.StrictMode>
+      </body>
+    </html>
+  );
+}
diff --git a/...e-fuels-counter-guide/src/pages/index.tsx → ...eate-fuels-counter-guide/src/app/page.tsx b/...e-fuels-counter-guide/src/pages/index.tsx → ...eate-fuels-counter-guide/src/app/page.tsx
@@ -1,9 +1,8 @@
-/** @knipignore */
+"use client";
+
 import type { TestContractAbi } from "@/sway-api";
-/** @knipignore */
 import { TestContractAbi__factory } from "@/sway-api";
 import contractIds from "@/sway-api/contract-ids.json";
-
 import { FuelLogo } from "@/components/FuelLogo";
 import { bn } from "fuels";
 import { useState } from "react";
@@ -12,7 +11,7 @@ import { Button } from "@/components/Button";
 import toast from "react-hot-toast";
 import { useActiveWallet } from "@/hooks/useActiveWallet";
 import useAsync from "react-use/lib/useAsync";
-import { CURRENT_ENVIRONMENT } from '@/lib';
+import { CURRENT_ENVIRONMENT } from "@/lib";
 
 // #region deploying-dapp-to-testnet-frontend-contract-id
 const contractId =
@@ -21,11 +20,6 @@ const contractId =
     : (process.env.NEXT_PUBLIC_TESTNET_CONTRACT_ID as string); // Testnet Contract ID
 // #endregion deploying-dapp-to-testnet-frontend-contract-id
 
-
-const hasContract = process.env.NEXT_PUBLIC_HAS_CONTRACT === "true";
-const hasPredicate = process.env.NEXT_PUBLIC_HAS_PREDICATE === "true";
-const hasScript = process.env.NEXT_PUBLIC_HAS_SCRIPT === "true";
-
 export default function Home() {
   const { wallet, walletBalance, refreshWalletBalance } = useActiveWallet();
   const [contract, setContract] = useState<TestContractAbi>();
@@ -36,8 +30,8 @@ export default function Home() {
    * See: https://github.com/streamich/react-use/blob/master/docs/useAsync.md
    */
   useAsync(async () => {
-    if (hasContract && wallet) {
-      const { contract: testContract } = TestContractAbi__factory.connect(contractId, wallet);
+    if (wallet) {
+      const testContract = TestContractAbi__factory.connect(contractId, wallet);
       setContract(testContract);
       const { value } = await testContract.functions.get_count().get();
       setCounter(value.toNumber());
@@ -88,12 +82,10 @@ export default function Home() {
         <h1 className="text-2xl font-semibold ali">Welcome to Fuel</h1>
       </div>
 
-      {hasContract && (
-        <span className="text-gray-400">
-          Get started by editing <i>sway-programs/contract/main.sw</i> or{" "}
-          <i>src/pages/index.tsx</i>.
-        </span>
-      )}
+      <span className="text-gray-400">
+        Get started by editing <i>sway-programs/contract/main.sw</i> or{" "}
+        <i>src/pages/index.tsx</i>.
+      </span>
 
       <span className="text-gray-400">
         This template uses the new{" "}
@@ -103,36 +95,31 @@ export default function Home() {
         to enable type-safe hot-reloading for your Sway programs.
       </span>
 
-      {hasContract && (
-        <>
-          <h3 className="text-xl font-semibold">Counter</h3>
-
-          <span className="text-gray-400 text-6xl">{counter}</span>
+      <>
+        <h3 className="text-xl font-semibold">Counter</h3>
 
-          <Button onClick={onIncrementPressed} className="mt-6">
-            Increment Counter
-          </Button>
+        <span data-testid="counter" className="text-gray-400 text-6xl">
+          {counter}
+        </span>
 
-          {/* #region create-fuels-counter-guide-on-decrement-ui */}
-          <Button onClick={onDecrementPressed} className="mt-6">
-            Decrement Counter
-          </Button>
-          {/* #endregion create-fuels-counter-guide-on-decrement-ui */}
-        </>
-      )}
+        <Button onClick={onIncrementPressed} className="mt-6">
+          Increment Counter
+        </Button>
 
-      {hasPredicate && (
-        <Link href="/predicate" className="mt-4">
-          Predicate Example
-        </Link>
-      )}
+        {/* #region create-fuels-counter-guide-on-decrement-ui */}
+        <Button onClick={onDecrementPressed} className="mt-6">
+          Decrement Counter
+        </Button>
+        {/* #endregion create-fuels-counter-guide-on-decrement-ui */}
+      </>
 
-      {hasScript && (
-        <Link href="/script" className="mt-4">
-          Script Example
-        </Link>
-      )}
+      <Link href="/predicate" className="mt-4">
+        Predicate Example
+      </Link>
 
+      <Link href="/script" className="mt-4">
+        Script Example
+      </Link>
       <Link href="https://docs.fuel.network" target="_blank" className="mt-12">
         Fuel Docs
       </Link>