FuelLabs · Dhaiwat10 · Aug 29, 2024 · Aug 22, 2024 · Aug 22, 2024 · Aug 22, 2024
diff --git a/.changeset/config.json b/.changeset/config.json
@@ -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
+---
+
+feat: make `create-fuels` template app responsive
@@ -1,76 +1,8 @@
-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 { 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 { Toaster } from "react-hot-toast";
 import Head from "next/head";
-import { bn } from "fuels";
+import { Navbar } from "./Navbar";
 
 export const Layout = ({ children }: { children: React.ReactNode }) => {
-  const { faucetWallet } = useFaucet();
-
-  const {
-    wallet: browserWallet,
-    isConnected: 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 the current environment is local, transfer 5 ETH to the wallet
-     * from the local faucet wallet
-     */
-    if (CURRENT_ENVIRONMENT === "local") {
-      if (!faucetWallet) {
-        return toast.error("Faucet wallet not found.");
-      }
-
-      const tx = await faucetWallet?.transfer(
-        wallet.address,
-        bn.parseUnits("5"),
-      );
-      await tx?.waitForResult();
-
-      toast.success("Wallet topped up!");
-
-      return await refreshWalletBalance?.();
-    }
-
-    // If the current environment is testnet, open the testnet faucet link in a new tab
-    if (CURRENT_ENVIRONMENT === "testnet") {
-      return window.open(
-        `${TESTNET_FAUCET_LINK}?address=${wallet.address.toAddress()}`,
-        "_blank",
-      );
-    }
-  };
-
-  const showTopUpButton = walletBalance?.lt(bn.parseUnits("5"));
-
-  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>
@@ -79,39 +11,7 @@ export const Layout = ({ children }: { children: React.ReactNode }) => {
       </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={
-              CURRENT_ENVIRONMENT === "local" ? "/faucet" : TESTNET_FAUCET_LINK
-            }
-            target={CURRENT_ENVIRONMENT === "local" ? "_self" : "_blank"}
-          >
-            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>
+        <Navbar />
 
         <div className="min-h-screen items-center p-24 flex flex-col gap-6">
           {children}

@@ -0,0 +1,162 @@
+import { FC, useState } from "react";
+import { Link } from "./Link";
+import { CURRENT_ENVIRONMENT, NODE_URL, TESTNET_FAUCET_LINK } from "@/lib";
+import { useConnectUI, useDisconnect } from "@fuels/react";
+import { useBrowserWallet } from "@/hooks/useBrowserWallet";
+import { useActiveWallet } from "@/hooks/useActiveWallet";
+import { Button } from "./Button";
+import { WalletDisplay } from "./WalletDisplay";
+import { bn } from "fuels";
+import { useFaucet } from "@/hooks/useFaucet";
+import toast from "react-hot-toast";
+
+export const Navbar: FC = () => {
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+
+  const { faucetWallet } = useFaucet();
+
+  const {
+    wallet: browserWallet,
+    isConnected: 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 the current environment is local, transfer 5 ETH to the wallet
+     * from the local faucet wallet
+     */
+    if (CURRENT_ENVIRONMENT === "local") {
+      if (!faucetWallet) {
+        return toast.error("Faucet wallet not found.");
+      }
+
+      const tx = await faucetWallet?.transfer(
+        wallet.address,
+        bn.parseUnits("5"),
+      );
+      await tx?.waitForResult();
+
+      toast.success("Wallet topped up!");
+
+      return await refreshWalletBalance?.();
+    }
+
+    // If the current environment is testnet, open the testnet faucet link in a new tab
+    if (CURRENT_ENVIRONMENT === "testnet") {
+      return window.open(
+        `${TESTNET_FAUCET_LINK}?address=${wallet.address.toAddress()}`,
+        "_blank",
+      );
+    }
+  };
+
+  const showTopUpButton = walletBalance?.lt(bn.parseUnits("5"));
+
+  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 (
+    <>
+      {/* Larger screens */}
+      <nav className="hidden md:flex justify-between items-center p-4 bg-black text-white gap-6">
+        <Link href="/">Home</Link>
+
+        <Link
+          href={
+            CURRENT_ENVIRONMENT === "local" ? "/faucet" : TESTNET_FAUCET_LINK
+          }
+          target={CURRENT_ENVIRONMENT === "local" ? "_self" : "_blank"}
+        >
+          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>
+
+      {/* Mobile. Should be a hamburger menu */}
+      <nav className="flex flex-col md:hidden p-4 bg-black text-white items-center gap-4">
+        <img
+          src={isMobileMenuOpen ? "/close.svg" : "/hamburger.svg"}
+          alt="menu"
+          className="w-8 h-8 ml-auto cursor-pointer"
+          onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+        />
+
+        {isMobileMenuOpen && (
+          <>
+            <Link href="/">Home</Link>
+
+            <Link
+              href={
+                CURRENT_ENVIRONMENT === "local"
+                  ? "/faucet"
+                  : TESTNET_FAUCET_LINK
+              }
+              target={CURRENT_ENVIRONMENT === "local" ? "_self" : "_blank"}
+            >
+              Faucet
+            </Link>
+
+            {isBrowserWalletConnected && (
+              <Button onClick={disconnect}>Disconnect Wallet</Button>
+            )}
+            {!isBrowserWalletConnected && (
+              <Button onClick={connect}>Connect Wallet</Button>
+            )}
+
+            {showAddNetworkButton && (
+              <Button onClick={() => toast.success("Adding network")}>
+                Add Network
+              </Button>
+            )}
+
+            <div>
+              <WalletDisplay />
+            </div>
+
+            {showTopUpButton && (
+              <Button onClick={() => topUpWallet()}>Top-up Wallet</Button>
+            )}
+          </>
+        )}
+      </nav>
+    </>
+  );
+};