From 08aa4aebdbb12c1a0862ac4a12cc554f69c5aa1f Mon Sep 17 00:00:00 2001
From: Dhaiwat <dhaiwatpandya@gmail.com>
Date: Thu, 29 Aug 2024 14:26:52 +0530
Subject: [PATCH 1/5] feat: embed testnet faucet in `create-fuels` template
 (#3036)

---
 .changeset/stupid-books-pull.md            |  5 ++
 templates/nextjs/src/app/faucet/page.tsx   | 79 ++++++++++++++--------
 templates/nextjs/src/components/Layout.tsx | 18 ++---
 templates/vite/src/components/Layout.tsx   | 23 +++----
 templates/vite/src/routes/faucet.lazy.tsx  | 79 ++++++++++++++--------
 5 files changed, 117 insertions(+), 87 deletions(-)
 create mode 100644 .changeset/stupid-books-pull.md

diff --git a/.changeset/stupid-books-pull.md b/.changeset/stupid-books-pull.md
new file mode 100644
index 00000000000..8b30ddf2891
--- /dev/null
+++ b/.changeset/stupid-books-pull.md
@@ -0,0 +1,5 @@
+---
+"create-fuels": patch
+---
+
+feat: embed testnet faucet in `create-fuels` template
diff --git a/templates/nextjs/src/app/faucet/page.tsx b/templates/nextjs/src/app/faucet/page.tsx
index b898284e259..ab414339732 100644
--- a/templates/nextjs/src/app/faucet/page.tsx
+++ b/templates/nextjs/src/app/faucet/page.tsx
@@ -4,6 +4,7 @@ import { Button } from "@/components/Button";
 import { Input } from "@/components/Input";
 import { useActiveWallet } from "@/hooks/useActiveWallet";
 import { useFaucet } from "@/hooks/useFaucet";
+import { CURRENT_ENVIRONMENT, Environments, TESTNET_FAUCET_LINK } from "@/lib";
 import { bn } from "fuels";
 import { useEffect, useState } from "react";
 import toast from "react-hot-toast";
@@ -50,36 +51,54 @@ export default function Faucet() {
 
   return (
     <>
-      <h3 className="text-2xl font-semibold">Local Faucet</h3>
-
-      <div className="flex gap-4 items-center">
-        <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">
-        <label htmlFor="amount-input" className="text-gray-400">
-          Amount (ETH):
-        </label>
-        <Input
-          className="w-full"
-          value={amountToSend}
-          onChange={(e) => setAmountToSend(e.target.value)}
-          placeholder="5"
-          type="number"
-          id="amount-input"
-        />
-      </div>
-
-      <Button onClick={sendFunds}>Send Funds</Button>
+      {CURRENT_ENVIRONMENT === Environments.LOCAL && (
+        <>
+          <h3 className="text-2xl font-semibold">Local Faucet</h3>
+
+          <div className="flex gap-4 items-center">
+            <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">
+            <label htmlFor="amount-input" className="text-gray-400">
+              Amount (ETH):
+            </label>
+            <Input
+              className="w-full"
+              value={amountToSend}
+              onChange={(e) => setAmountToSend(e.target.value)}
+              placeholder="5"
+              type="number"
+              id="amount-input"
+            />
+          </div>
+
+          <Button onClick={sendFunds}>Send Funds</Button>
+        </>
+      )}
+
+      {CURRENT_ENVIRONMENT === Environments.TESTNET && (
+        <>
+          <iframe
+            src={
+              wallet
+                ? `${TESTNET_FAUCET_LINK}?address=${wallet.address.toB256()}`
+                : TESTNET_FAUCET_LINK
+            }
+            title="faucet"
+            className="w-full h-screen overflow-scroll"
+          />
+        </>
+      )}
     </>
   );
 }
diff --git a/templates/nextjs/src/components/Layout.tsx b/templates/nextjs/src/components/Layout.tsx
index 5af8341e045..04788ae4cff 100644
--- a/templates/nextjs/src/components/Layout.tsx
+++ b/templates/nextjs/src/components/Layout.tsx
@@ -9,9 +9,11 @@ import { useActiveWallet } from "@/hooks/useActiveWallet";
 import { useFaucet } from "@/hooks/useFaucet";
 import Head from "next/head";
 import { bn } from "fuels";
+import { useRouter } from "next/navigation";
 
 export const Layout = ({ children }: { children: React.ReactNode }) => {
   const { faucetWallet } = useFaucet();
+  const router = useRouter();
 
   const {
     wallet: browserWallet,
@@ -49,12 +51,9 @@ export const Layout = ({ children }: { children: React.ReactNode }) => {
       return await refreshWalletBalance?.();
     }
 
-    // If the current environment is testnet, open the testnet faucet link in a new tab
+    // If the current environment is testnet, open the faucet page
     if (CURRENT_ENVIRONMENT === "testnet") {
-      return window.open(
-        `${TESTNET_FAUCET_LINK}?address=${wallet.address.toAddress()}`,
-        "_blank",
-      );
+      return router.push("/faucet");
     }
   };
 
@@ -82,14 +81,7 @@ export const Layout = ({ children }: { children: React.ReactNode }) => {
         <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>
+          <Link href="/faucet">Faucet</Link>
 
           {isBrowserWalletConnected && (
             <Button onClick={disconnect}>Disconnect Wallet</Button>
diff --git a/templates/vite/src/components/Layout.tsx b/templates/vite/src/components/Layout.tsx
index 9874fc97d34..9811bb6702d 100644
--- a/templates/vite/src/components/Layout.tsx
+++ b/templates/vite/src/components/Layout.tsx
@@ -1,17 +1,20 @@
 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 } 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 { bn } from "fuels";
+import { useRouter } from "@tanstack/react-router";
 
 export const Layout = ({ children }: { children: React.ReactNode }) => {
   const { faucetWallet } = useFaucet();
 
+  const { navigate } = useRouter();
+
   const {
     wallet: browserWallet,
     isConnected: isBrowserWalletConnected,
@@ -48,12 +51,11 @@ export const Layout = ({ children }: { children: React.ReactNode }) => {
       return await refreshWalletBalance?.();
     }
 
-    // If the current environment is testnet, open the testnet faucet link in a new tab
+    // If the current environment is testnet, open the faucet page
     if (CURRENT_ENVIRONMENT === "testnet") {
-      return window.open(
-        `${TESTNET_FAUCET_LINK}?address=${wallet.address.toAddress()}`,
-        "_blank",
-      );
+      return navigate({
+        to: "/faucet",
+      });
     }
   };
 
@@ -77,14 +79,7 @@ export const Layout = ({ children }: { children: React.ReactNode }) => {
         <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>
+          <Link href="/faucet">Faucet</Link>
 
           {isBrowserWalletConnected && (
             <Button onClick={disconnect}>Disconnect Wallet</Button>
diff --git a/templates/vite/src/routes/faucet.lazy.tsx b/templates/vite/src/routes/faucet.lazy.tsx
index ccf7aa928b0..4f4261fe257 100644
--- a/templates/vite/src/routes/faucet.lazy.tsx
+++ b/templates/vite/src/routes/faucet.lazy.tsx
@@ -6,6 +6,7 @@ import { useFaucet } from "../hooks/useFaucet";
 import { bn } from "fuels";
 import { useEffect, useState } from "react";
 import toast from "react-hot-toast";
+import { CURRENT_ENVIRONMENT, Environments, TESTNET_FAUCET_LINK } from "../lib";
 
 export const Route = createLazyFileRoute("/faucet")({
   component: Index,
@@ -53,36 +54,54 @@ function Index() {
 
   return (
     <>
-      <h3 className="text-2xl font-semibold">Local Faucet</h3>
-
-      <div className="flex gap-4 items-center">
-        <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">
-        <label htmlFor="amount-input" className="text-gray-400">
-          Amount (ETH):
-        </label>
-        <Input
-          className="w-full"
-          value={amountToSend}
-          onChange={(e) => setAmountToSend(e.target.value)}
-          placeholder="5"
-          type="number"
-          id="amount-input"
-        />
-      </div>
-
-      <Button onClick={sendFunds}>Send Funds</Button>
+      {CURRENT_ENVIRONMENT === Environments.LOCAL && (
+        <>
+          <h3 className="text-2xl font-semibold">Local Faucet</h3>
+
+          <div className="flex gap-4 items-center">
+            <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">
+            <label htmlFor="amount-input" className="text-gray-400">
+              Amount (ETH):
+            </label>
+            <Input
+              className="w-full"
+              value={amountToSend}
+              onChange={(e) => setAmountToSend(e.target.value)}
+              placeholder="5"
+              type="number"
+              id="amount-input"
+            />
+          </div>
+
+          <Button onClick={sendFunds}>Send Funds</Button>
+        </>
+      )}
+
+      {CURRENT_ENVIRONMENT === Environments.TESTNET && (
+        <>
+          <iframe
+            src={
+              wallet
+                ? `${TESTNET_FAUCET_LINK}?address=${wallet.address.toB256()}`
+                : TESTNET_FAUCET_LINK
+            }
+            title="faucet"
+            className="w-full h-screen overflow-scroll"
+          />
+        </>
+      )}
     </>
   );
 }

From e87b51bb0c7fdd2d30cd165fd2e226de93aae992 Mon Sep 17 00:00:00 2001
From: Dhaiwat <dhaiwatpandya@gmail.com>
Date: Thu, 29 Aug 2024 15:23:53 +0530
Subject: [PATCH 2/5] feat: add missing connectors to `create fuels` template
 (#3013)

* feat: add missing connectors to `create fuels` template

* sync deps

* Update pnpm-lock.yaml
---
 .changeset/new-rivers-rescue.md      |   5 +
 pnpm-lock.yaml                       | 295 +++++++++++++++++----------
 templates/nextjs/src/app/layout.tsx  |   4 +
 templates/vite/src/routes/__root.tsx |   4 +
 4 files changed, 203 insertions(+), 105 deletions(-)
 create mode 100644 .changeset/new-rivers-rescue.md

diff --git a/.changeset/new-rivers-rescue.md b/.changeset/new-rivers-rescue.md
new file mode 100644
index 00000000000..06a03163274
--- /dev/null
+++ b/.changeset/new-rivers-rescue.md
@@ -0,0 +1,5 @@
+---
+"create-fuels": patch
+---
+
+feat: add missing connectors to `create fuels` template
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 715a5d00785..a014aa374c6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -154,7 +154,7 @@ importers:
         version: 0.1.1
       tsup:
         specifier: ^6.7.0
-        version: 6.7.0(@swc/core@1.7.14)(postcss@8.4.41)(ts-node@10.9.1(@swc/core@1.7.14)(@types/node@22.2.0)(typescript@5.4.5))(typescript@5.4.5)
+        version: 6.7.0(@swc/core@1.7.14(@swc/helpers@0.5.12))(postcss@8.4.41)(ts-node@10.9.1(@swc/core@1.7.14(@swc/helpers@0.5.12))(@types/node@22.2.0)(typescript@5.4.5))(typescript@5.4.5)
       tsx:
         specifier: ^4.17.0
         version: 4.17.0
@@ -245,7 +245,7 @@ importers:
         version: 8.4.33
       tailwindcss:
         specifier: ^3.4.10
-        version: 3.4.10(ts-node@10.9.1(@swc/core@1.7.14)(@types/node@22.2.0)(typescript@5.4.5))
+        version: 3.4.10(ts-node@10.9.1(@swc/core@1.7.14(@swc/helpers@0.5.12))(@types/node@22.2.0)(typescript@5.4.5))
       typescript:
         specifier: ~5.4.5
         version: 5.4.5
@@ -333,7 +333,7 @@ importers:
         version: 18.3.0
       eslint-config-react-app:
         specifier: ^7.0.1
-        version: 7.0.1(@babel/plugin-syntax-flow@7.24.7(@babel/core@7.22.5))(@babel/plugin-transform-react-jsx@7.25.2(@babel/core@7.22.5))(eslint@8.57.0)(jest@27.5.1(bufferutil@4.0.8)(ts-node@10.9.1(@swc/core@1.7.14)(@types/node@22.2.0)(typescript@5.4.5))(utf-8-validate@5.0.10))(typescript@5.4.5)
+        version: 7.0.1(@babel/plugin-syntax-flow@7.24.7(@babel/core@7.22.5))(@babel/plugin-transform-react-jsx@7.25.2(@babel/core@7.22.5))(eslint@8.57.0)(jest@27.5.1(bufferutil@4.0.8)(ts-node@10.9.1(@swc/core@1.7.14(@swc/helpers@0.5.12))(@types/node@22.2.0)(typescript@5.4.5))(utf-8-validate@5.0.10))(typescript@5.4.5)
       fuels:
         specifier: workspace:*
         version: link:../../packages/fuels
@@ -345,7 +345,7 @@ importers:
         version: 18.3.1(react@18.3.1)
       react-scripts:
         specifier: 5.0.1
-        version: 5.0.1(@babel/plugin-syntax-flow@7.24.7(@babel/core@7.22.5))(@babel/plugin-transform-react-jsx@7.25.2(@babel/core@7.22.5))(@swc/core@1.7.14)(@types/babel__core@7.20.5)(bufferutil@4.0.8)(esbuild@0.17.19)(eslint@8.57.0)(react@18.3.1)(ts-node@10.9.1(@swc/core@1.7.14)(@types/node@22.2.0)(typescript@5.4.5))(type-fest@3.1.0)(typescript@5.4.5)(utf-8-validate@5.0.10)
+        version: 5.0.1(@babel/plugin-syntax-flow@7.24.7(@babel/core@7.22.5))(@babel/plugin-transform-react-jsx@7.25.2(@babel/core@7.22.5))(@swc/core@1.7.14(@swc/helpers@0.5.12))(@types/babel__core@7.20.5)(bufferutil@4.0.8)(esbuild@0.17.19)(eslint@8.57.0)(react@18.3.1)(ts-node@10.9.1(@swc/core@1.7.14(@swc/helpers@0.5.12))(@types/node@22.2.0)(typescript@5.4.5))(type-fest@3.1.0)(typescript@5.4.5)(utf-8-validate@5.0.10)
       typescript:
         specifier: ~5.4.5
         version: 5.4.5
@@ -466,7 +466,7 @@ importers:
         version: 6.0.1(jiti@1.21.6)(postcss@8.4.41)(tsx@4.17.0)(yaml@2.5.0)
       tailwindcss:
         specifier: ^3.4.10
-        version: 3.4.10(ts-node@10.9.1(@swc/core@1.7.14)(@types/node@22.2.0)(typescript@5.4.5))
+        version: 3.4.10(ts-node@10.9.1(@swc/core@1.7.14(@swc/helpers@0.5.12))(@types/node@22.2.0)(typescript@5.4.5))
       typescript:
         specifier: ~5.4.5
         version: 5.4.5
@@ -1255,7 +1255,7 @@ importers:
         version: 8.4.24
       tailwindcss:
         specifier: ^3.4.10
-        version: 3.4.10(ts-node@10.9.1(@swc/core@1.7.14)(@types/node@22.2.0)(typescript@5.4.5))
+        version: 3.4.10(ts-node@10.9.1(@swc/core@1.7.14(@swc/helpers@0.5.12))(@types/node@22.2.0)(typescript@5.4.5))
       typescript:
         specifier: ~5.4.5
         version: 5.4.5
@@ -1337,7 +1337,7 @@ importers:
         version: 8.4.41
       tailwindcss:
         specifier: ^3.4.10
-        version: 3.4.10(ts-node@10.9.1(@swc/core@1.7.14)(@types/node@22.5.0)(typescript@5.4.5))
+        version: 3.4.10(ts-node@10.9.1(@swc/core@1.7.14(@swc/helpers@0.5.12))(@types/node@22.5.0)(typescript@5.4.5))
       typescript:
         specifier: ~5.4.5
         version: 5.4.5
@@ -19018,7 +19018,7 @@ snapshots:
       jest-util: 28.1.3
       slash: 3.0.0
 
-  '@jest/core@27.5.1(bufferutil@4.0.8)(ts-node@10.9.1(@swc/core@1.7.14)(@types/node@22.2.0)(typescript@5.4.5))(utf-8-validate@5.0.10)':
+  '@jest/core@27.5.1(bufferutil@4.0.8)(ts-node@10.9.1(@swc/core@1.7.14(@swc/helpers@0.5.12))(@types/node@22.2.0)(typescript@5.4.5))(utf-8-validate@5.0.10)':
     dependencies:
       '@jest/console': 27.5.1
       '@jest/reporters': 27.5.1
@@ -19032,7 +19032,7 @@ snapshots:
       exit: 0.1.2
       graceful-fs: 4.2.11
       jest-changed-files: 27.5.1
-      jest-config: 27.5.1(bufferutil@4.0.8)(ts-node@10.9.1(@swc/core@1.7.14)(@types/node@22.2.0)(typescript@5.4.5))(utf-8-validate@5.0.10)
+      jest-config: 27.5.1(bufferutil@4.0.8)(ts-node@10.9.1(@swc/core@1.7.14(@swc/helpers@0.5.12))(@types/node@22.2.0)(typescript@5.4.5))(utf-8-validate@5.0.10)
       jest-haste-map: 27.5.1
       jest-message-util: 27.5.1
       jest-regex-util: 27.5.1
@@ -19855,7 +19855,7 @@ snapshots:
     dependencies:
       playwright: 1.46.1
 
-  '@pmmmwh/react-refresh-webpack-plugin@0.5.10(react-refresh@0.11.0)(type-fest@3.1.0)(webpack-dev-server@4.15.1(bufferutil@4.0.8)(utf-8-validate@5.0.10)(webpack@5.88.0(@swc/core@1.7.14)(esbuild@0.17.19)))(webpack@5.88.0(@swc/core@1.7.14)(esbuild@0.17.19))':
+  '@pmmmwh/react-refresh-webpack-plugin@0.5.10(react-refresh@0.11.0)(type-fest@3.1.0)(webpack-dev-server@4.15.1(bufferutil@4.0.8)(utf-8-validate@5.0.10)(webpack@5.88.0(@swc/core@1.7.14(@swc/helpers@0.5.12))(esbuild@0.17.19)))(webpack@5.88.0(@swc/core@1.7.14(@swc/helpers@0.5.12))(esbuild@0.17.19))':
     dependencies:
       ansi-html-community: 0.0.8
       common-path-prefix: 3.0.0
@@ -19867,10 +19867,10 @@ snapshots:
       react-refresh: 0.11.0
       schema-utils: 3.3.0
       source-map: 0.7.4
-      webpack: 5.88.0(@swc/core@1.7.14)(esbuild@0.17.19)
+      webpack: 5.88.0(@swc/core@1.7.14(@swc/helpers@0.5.12))(esbuild@0.17.19)
     optionalDependencies:
       type-fest: 3.1.0
-      webpack-dev-server: 4.15.1(bufferutil@4.0.8)(utf-8-validate@5.0.10)(webpack@5.88.0(@swc/core@1.7.14)(esbuild@0.17.19))
+      webpack-dev-server: 4.15.1(bufferutil@4.0.8)(utf-8-validate@5.0.10)(webpack@5.88.0(@swc/core@1.7.14(@swc/helpers@0.5.12))(esbuild@0.17.19))
 
   '@polka/url@1.0.0-next.24': {}
 
@@ -21809,6 +21809,17 @@ snapshots:
       vite: 5.4.2(@types/node@22.5.0)(terser@5.31.6)
       vue: 3.4.38(typescript@5.4.5)
 
+  '@vitest/browser@1.6.0(playwright@1.46.1)(vitest@1.6.0)(webdriverio@8.40.2(bufferutil@4.0.8)(utf-8-validate@5.0.10))':
+    dependencies:
+      '@vitest/utils': 1.6.0
+      magic-string: 0.30.5
+      sirv: 2.0.4
+      vitest: 1.6.0(@types/node@22.2.0)(@vitest/browser@1.6.0)(jsdom@16.7.0(bufferutil@4.0.8)(utf-8-validate@5.0.10))(terser@5.31.6)
+    optionalDependencies:
+      playwright: 1.46.1
+      webdriverio: 8.40.2(bufferutil@4.0.8)(utf-8-validate@5.0.10)
+    optional: true
+
   '@vitest/browser@1.6.0(playwright@1.46.1)(vitest@1.6.0)(webdriverio@8.40.2(bufferutil@4.0.8)(utf-8-validate@6.0.4))':
     dependencies:
       '@vitest/utils': 1.6.0
@@ -23636,14 +23647,14 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  babel-loader@8.3.0(@babel/core@7.22.5)(webpack@5.88.0(@swc/core@1.7.14)(esbuild@0.17.19)):
+  babel-loader@8.3.0(@babel/core@7.22.5)(webpack@5.88.0(@swc/core@1.7.14(@swc/helpers@0.5.12))(esbuild@0.17.19)):
     dependencies:
       '@babel/core': 7.22.5
       find-cache-dir: 3.3.2
       loader-utils: 2.0.4
       make-dir: 3.1.0
       schema-utils: 2.7.1
-      webpack: 5.88.0(@swc/core@1.7.14)(esbuild@0.17.19)
+      webpack: 5.88.0(@swc/core@1.7.14(@swc/helpers@0.5.12))(esbuild@0.17.19)
 
   babel-plugin-istanbul@6.1.1:
     dependencies:
@@ -24727,7 +24738,7 @@ snapshots:
     dependencies:
       hyphenate-style-name: 1.0.4
 
-  css-loader@6.8.1(webpack@5.88.0(@swc/core@1.7.14)(esbuild@0.17.19)):
+  css-loader@6.8.1(webpack@5.88.0(@swc/core@1.7.14(@swc/helpers@0.5.12))(esbuild@0.17.19)):
     dependencies:
       icss-utils: 5.1.0(postcss@8.4.41)
       postcss: 8.4.41
@@ -24737,9 +24748,9 @@ snapshots:
       postcss-modules-values: 4.0.0(postcss@8.4.41)
       postcss-value-parser: 4.2.0
       semver: 7.3.8
-      webpack: 5.88.0(@swc/core@1.7.14)(esbuild@0.17.19)
+      webpack: 5.88.0(@swc/core@1.7.14(@swc/helpers@0.5.12))(esbuild@0.17.19)
 
-  css-minimizer-webpack-plugin@3.4.1(esbuild@0.17.19)(webpack@5.88.0(@swc/core@1.7.14)(esbuild@0.17.19)):
+  css-minimizer-webpack-plugin@3.4.1(esbuild@0.17.19)(webpack@5.88.0(@swc/core@1.7.14(@swc/helpers@0.5.12))(esbuild@0.17.19)):
     dependencies:
       cssnano: 5.1.15(postcss@8.4.41)
       jest-worker: 27.5.1
@@ -24747,7 +24758,7 @@ snapshots:
       schema-utils: 4.2.0
       serialize-javascript: 6.0.1
       source-map: 0.6.1
-      webpack: 5.88.0(@swc/core@1.7.14)(esbuild@0.17.19)
+      webpack: 5.88.0(@swc/core@1.7.14(@swc/helpers@0.5.12))(esbuild@0.17.19)
     optionalDependencies:
       esbuild: 0.17.19
 
@@ -25595,7 +25606,7 @@ snapshots:
     dependencies:
       eslint: 8.57.0
 
-  eslint-config-react-app@7.0.1(@babel/plugin-syntax-flow@7.24.7(@babel/core@7.22.5))(@babel/plugin-transform-react-jsx@7.25.2(@babel/core@7.22.5))(eslint@8.57.0)(jest@27.5.1(bufferutil@4.0.8)(ts-node@10.9.1(@swc/core@1.7.14)(@types/node@22.2.0)(typescript@5.4.5))(utf-8-validate@5.0.10))(typescript@5.4.5):
+  eslint-config-react-app@7.0.1(@babel/plugin-syntax-flow@7.24.7(@babel/core@7.22.5))(@babel/plugin-transform-react-jsx@7.25.2(@babel/core@7.22.5))(eslint@8.57.0)(jest@27.5.1(bufferutil@4.0.8)(ts-node@10.9.1(@swc/core@1.7.14(@swc/helpers@0.5.12))(@types/node@22.2.0)(typescript@5.4.5))(utf-8-validate@5.0.10))(typescript@5.4.5):
     dependencies:
       '@babel/core': 7.22.5
       '@babel/eslint-parser': 7.22.5(@babel/core@7.22.5)(eslint@8.57.0)
@@ -25607,7 +25618,7 @@ snapshots:
       eslint: 8.57.0
       eslint-plugin-flowtype: 8.0.3(@babel/plugin-syntax-flow@7.24.7(@babel/core@7.22.5))(@babel/plugin-transform-react-jsx@7.25.2(@babel/core@7.22.5))(eslint@8.57.0)
       eslint-plugin-import: 2.26.0(@typescript-eslint/parser@5.59.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)
-      eslint-plugin-jest: 25.7.0(@typescript-eslint/eslint-plugin@5.59.0(@typescript-eslint/parser@5.59.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(jest@27.5.1(bufferutil@4.0.8)(ts-node@10.9.1(@swc/core@1.7.14)(@types/node@22.2.0)(typescript@5.4.5))(utf-8-validate@5.0.10))(typescript@5.4.5)
+      eslint-plugin-jest: 25.7.0(@typescript-eslint/eslint-plugin@5.59.0(@typescript-eslint/parser@5.59.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(jest@27.5.1(bufferutil@4.0.8)(ts-node@10.9.1(@swc/core@1.7.14(@swc/helpers@0.5.12))(@types/node@22.2.0)(typescript@5.4.5))(utf-8-validate@5.0.10))(typescript@5.4.5)
       eslint-plugin-jsx-a11y: 6.6.1(eslint@8.57.0)
       eslint-plugin-react: 7.35.0(eslint@8.57.0)
       eslint-plugin-react-hooks: 4.6.0(eslint@8.57.0)
@@ -25732,13 +25743,13 @@ snapshots:
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-plugin-jest@25.7.0(@typescript-eslint/eslint-plugin@5.59.0(@typescript-eslint/parser@5.59.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(jest@27.5.1(bufferutil@4.0.8)(ts-node@10.9.1(@swc/core@1.7.14)(@types/node@22.2.0)(typescript@5.4.5))(utf-8-validate@5.0.10))(typescript@5.4.5):
+  eslint-plugin-jest@25.7.0(@typescript-eslint/eslint-plugin@5.59.0(@typescript-eslint/parser@5.59.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(jest@27.5.1(bufferutil@4.0.8)(ts-node@10.9.1(@swc/core@1.7.14(@swc/helpers@0.5.12))(@types/node@22.2.0)(typescript@5.4.5))(utf-8-validate@5.0.10))(typescript@5.4.5):
     dependencies:
       '@typescript-eslint/experimental-utils': 5.60.1(eslint@8.57.0)(typescript@5.4.5)
       eslint: 8.57.0
     optionalDependencies:
       '@typescript-eslint/eslint-plugin': 5.59.0(@typescript-eslint/parser@5.59.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5)
-      jest: 27.5.1(bufferutil@4.0.8)(ts-node@10.9.1(@swc/core@1.7.14)(@types/node@22.2.0)(typescript@5.4.5))(utf-8-validate@5.0.10)
+      jest: 27.5.1(bufferutil@4.0.8)(ts-node@10.9.1(@swc/core@1.7.14(@swc/helpers@0.5.12))(@types/node@22.2.0)(typescript@5.4.5))(utf-8-validate@5.0.10)
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -25866,7 +25877,7 @@ snapshots:
 
   eslint-visitor-keys@3.4.3: {}
 
-  eslint-webpack-plugin@3.2.0(eslint@8.57.0)(webpack@5.88.0(@swc/core@1.7.14)(esbuild@0.17.19)):
+  eslint-webpack-plugin@3.2.0(eslint@8.57.0)(webpack@5.88.0(@swc/core@1.7.14(@swc/helpers@0.5.12))(esbuild@0.17.19)):
     dependencies:
       '@types/eslint': 8.40.2
       eslint: 8.57.0
@@ -25874,7 +25885,7 @@ snapshots:
       micromatch: 4.0.7
       normalize-path: 3.0.0
       schema-utils: 4.2.0
-      webpack: 5.88.0(@swc/core@1.7.14)(esbuild@0.17.19)
+      webpack: 5.88.0(@swc/core@1.7.14(@swc/helpers@0.5.12))(esbuild@0.17.19)
 
   eslint@8.57.0:
     dependencies:
@@ -26234,11 +26245,11 @@ snapshots:
     dependencies:
       flat-cache: 3.0.4
 
-  file-loader@6.2.0(webpack@5.88.0(@swc/core@1.7.14)(esbuild@0.17.19)):
+  file-loader@6.2.0(webpack@5.88.0(@swc/core@1.7.14(@swc/helpers@0.5.12))(esbuild@0.17.19)):
     dependencies:
       loader-utils: 2.0.4
       schema-utils: 3.3.0
-      webpack: 5.88.0(@swc/core@1.7.14)(esbuild@0.17.19)
+      webpack: 5.88.0(@swc/core@1.7.14(@swc/helpers@0.5.12))(esbuild@0.17.19)
 
   file-uri-to-path@1.0.0: {}
 
@@ -26358,7 +26369,7 @@ snapshots:
       cross-spawn: 7.0.3
       signal-exit: 4.1.0
 
-  fork-ts-checker-webpack-plugin@6.5.3(eslint@8.57.0)(typescript@5.4.5)(webpack@5.88.0(@swc/core@1.7.14)(esbuild@0.17.19)):
+  fork-ts-checker-webpack-plugin@6.5.3(eslint@8.57.0)(typescript@5.4.5)(webpack@5.88.0(@swc/core@1.7.14(@swc/helpers@0.5.12))(esbuild@0.17.19)):
     dependencies:
       '@babel/code-frame': 7.24.6
       '@types/json-schema': 7.0.12
@@ -26374,7 +26385,7 @@ snapshots:
       semver: 7.6.3
       tapable: 1.1.3
       typescript: 5.4.5
-      webpack: 5.88.0(@swc/core@1.7.14)(esbuild@0.17.19)
+      webpack: 5.88.0(@swc/core@1.7.14(@swc/helpers@0.5.12))(esbuild@0.17.19)
     optionalDependencies:
       eslint: 8.57.0
 
@@ -26862,14 +26873,14 @@ snapshots:
       relateurl: 0.2.7
       terser: 5.18.2
 
-  html-webpack-plugin@5.5.3(webpack@5.88.0(@swc/core@1.7.14)(esbuild@0.17.19)):
+  html-webpack-plugin@5.5.3(webpack@5.88.0(@swc/core@1.7.14(@swc/helpers@0.5.12))(esbuild@0.17.19)):
     dependencies:
       '@types/html-minifier-terser': 6.1.0
       html-minifier-terser: 6.1.0
       lodash: 4.17.21
       pretty-error: 4.0.0
       tapable: 2.2.1
-      webpack: 5.88.0(@swc/core@1.7.14)(esbuild@0.17.19)
+      webpack: 5.88.0(@swc/core@1.7.14(@swc/helpers@0.5.12))(esbuild@0.17.19)
 
   htmlparser2@6.1.0:
     dependencies:
@@ -27522,16 +27533,16 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  jest-cli@27.5.1(bufferutil@4.0.8)(ts-node@10.9.1(@swc/core@1.7.14)(@types/node@22.2.0)(typescript@5.4.5))(utf-8-validate@5.0.10):
+  jest-cli@27.5.1(bufferutil@4.0.8)(ts-node@10.9.1(@swc/core@1.7.14(@swc/helpers@0.5.12))(@types/node@22.2.0)(typescript@5.4.5))(utf-8-validate@5.0.10):
     dependencies:
-      '@jest/core': 27.5.1(bufferutil@4.0.8)(ts-node@10.9.1(@swc/core@1.7.14)(@types/node@22.2.0)(typescript@5.4.5))(utf-8-validate@5.0.10)
+      '@jest/core': 27.5.1(bufferutil@4.0.8)(ts-node@10.9.1(@swc/core@1.7.14(@swc/helpers@0.5.12))(@types/node@22.2.0)(typescript@5.4.5))(utf-8-validate@5.0.10)
       '@jest/test-result': 27.5.1
       '@jest/types': 27.5.1
       chalk: 4.1.2
       exit: 0.1.2
       graceful-fs: 4.2.11
       import-local: 3.1.0
-      jest-config: 27.5.1(bufferutil@4.0.8)(ts-node@10.9.1(@swc/core@1.7.14)(@types/node@22.2.0)(typescript@5.4.5))(utf-8-validate@5.0.10)
+      jest-config: 27.5.1(bufferutil@4.0.8)(ts-node@10.9.1(@swc/core@1.7.14(@swc/helpers@0.5.12))(@types/node@22.2.0)(typescript@5.4.5))(utf-8-validate@5.0.10)
       jest-util: 27.5.1
       jest-validate: 27.5.1
       prompts: 2.4.2
@@ -27543,7 +27554,7 @@ snapshots:
       - ts-node
       - utf-8-validate
 
-  jest-config@27.5.1(bufferutil@4.0.8)(ts-node@10.9.1(@swc/core@1.7.14)(@types/node@22.2.0)(typescript@5.4.5))(utf-8-validate@5.0.10):
+  jest-config@27.5.1(bufferutil@4.0.8)(ts-node@10.9.1(@swc/core@1.7.14(@swc/helpers@0.5.12))(@types/node@22.2.0)(typescript@5.4.5))(utf-8-validate@5.0.10):
     dependencies:
       '@babel/core': 7.24.4
       '@jest/test-sequencer': 27.5.1
@@ -27570,7 +27581,7 @@ snapshots:
       slash: 3.0.0
       strip-json-comments: 3.1.1
     optionalDependencies:
-      ts-node: 10.9.1(@swc/core@1.7.14)(@types/node@22.2.0)(typescript@5.4.5)
+      ts-node: 10.9.1(@swc/core@1.7.14(@swc/helpers@0.5.12))(@types/node@22.2.0)(typescript@5.4.5)
     transitivePeerDependencies:
       - bufferutil
       - canvas
@@ -27930,11 +27941,11 @@ snapshots:
       leven: 3.1.0
       pretty-format: 29.7.0
 
-  jest-watch-typeahead@1.1.0(jest@27.5.1(bufferutil@4.0.8)(ts-node@10.9.1(@swc/core@1.7.14)(@types/node@22.2.0)(typescript@5.4.5))(utf-8-validate@5.0.10)):
+  jest-watch-typeahead@1.1.0(jest@27.5.1(bufferutil@4.0.8)(ts-node@10.9.1(@swc/core@1.7.14(@swc/helpers@0.5.12))(@types/node@22.2.0)(typescript@5.4.5))(utf-8-validate@5.0.10)):
     dependencies:
       ansi-escapes: 4.3.2
       chalk: 4.1.2
-      jest: 27.5.1(bufferutil@4.0.8)(ts-node@10.9.1(@swc/core@1.7.14)(@types/node@22.2.0)(typescript@5.4.5))(utf-8-validate@5.0.10)
+      jest: 27.5.1(bufferutil@4.0.8)(ts-node@10.9.1(@swc/core@1.7.14(@swc/helpers@0.5.12))(@types/node@22.2.0)(typescript@5.4.5))(utf-8-validate@5.0.10)
       jest-regex-util: 28.0.2
       jest-watcher: 28.1.3
       slash: 4.0.0
@@ -27987,11 +27998,11 @@ snapshots:
       merge-stream: 2.0.0
       supports-color: 8.1.1
 
-  jest@27.5.1(bufferutil@4.0.8)(ts-node@10.9.1(@swc/core@1.7.14)(@types/node@22.2.0)(typescript@5.4.5))(utf-8-validate@5.0.10):
+  jest@27.5.1(bufferutil@4.0.8)(ts-node@10.9.1(@swc/core@1.7.14(@swc/helpers@0.5.12))(@types/node@22.2.0)(typescript@5.4.5))(utf-8-validate@5.0.10):
     dependencies:
-      '@jest/core': 27.5.1(bufferutil@4.0.8)(ts-node@10.9.1(@swc/core@1.7.14)(@types/node@22.2.0)(typescript@5.4.5))(utf-8-validate@5.0.10)
+      '@jest/core': 27.5.1(bufferutil@4.0.8)(ts-node@10.9.1(@swc/core@1.7.14(@swc/helpers@0.5.12))(@types/node@22.2.0)(typescript@5.4.5))(utf-8-validate@5.0.10)
       import-local: 3.1.0
-      jest-cli: 27.5.1(bufferutil@4.0.8)(ts-node@10.9.1(@swc/core@1.7.14)(@types/node@22.2.0)(typescript@5.4.5))(utf-8-validate@5.0.10)
+      jest-cli: 27.5.1(bufferutil@4.0.8)(ts-node@10.9.1(@swc/core@1.7.14(@swc/helpers@0.5.12))(@types/node@22.2.0)(typescript@5.4.5))(utf-8-validate@5.0.10)
     transitivePeerDependencies:
       - bufferutil
       - canvas
@@ -28992,10 +29003,10 @@ snapshots:
 
   mimic-response@4.0.0: {}
 
-  mini-css-extract-plugin@2.7.6(webpack@5.88.0(@swc/core@1.7.14)(esbuild@0.17.19)):
+  mini-css-extract-plugin@2.7.6(webpack@5.88.0(@swc/core@1.7.14(@swc/helpers@0.5.12))(esbuild@0.17.19)):
     dependencies:
       schema-utils: 4.2.0
-      webpack: 5.88.0(@swc/core@1.7.14)(esbuild@0.17.19)
+      webpack: 5.88.0(@swc/core@1.7.14(@swc/helpers@0.5.12))(esbuild@0.17.19)
 
   minimalistic-assert@1.0.1: {}
 
@@ -30009,29 +30020,29 @@ snapshots:
       postcss: 8.4.41
       postcss-value-parser: 4.2.0
 
-  postcss-load-config@3.1.4(postcss@8.4.41)(ts-node@10.9.1(@swc/core@1.7.14)(@types/node@22.2.0)(typescript@5.4.5)):
+  postcss-load-config@3.1.4(postcss@8.4.41)(ts-node@10.9.1(@swc/core@1.7.14(@swc/helpers@0.5.12))(@types/node@22.2.0)(typescript@5.4.5)):
     dependencies:
       lilconfig: 2.1.0
       yaml: 1.10.2
     optionalDependencies:
       postcss: 8.4.41
-      ts-node: 10.9.1(@swc/core@1.7.14)(@types/node@22.2.0)(typescript@5.4.5)
+      ts-node: 10.9.1(@swc/core@1.7.14(@swc/helpers@0.5.12))(@types/node@22.2.0)(typescript@5.4.5)
 
-  postcss-load-config@4.0.1(postcss@8.4.41)(ts-node@10.9.1(@swc/core@1.7.14)(@types/node@22.2.0)(typescript@5.4.5)):
+  postcss-load-config@4.0.1(postcss@8.4.41)(ts-node@10.9.1(@swc/core@1.7.14(@swc/helpers@0.5.12))(@types/node@22.2.0)(typescript@5.4.5)):
     dependencies:
       lilconfig: 2.1.0
       yaml: 2.5.0
     optionalDependencies:
       postcss: 8.4.41
-      ts-node: 10.9.1(@swc/core@1.7.14)(@types/node@22.2.0)(typescript@5.4.5)
+      ts-node: 10.9.1(@swc/core@1.7.14(@swc/helpers@0.5.12))(@types/node@22.2.0)(typescript@5.4.5)
 
-  postcss-load-config@4.0.1(postcss@8.4.41)(ts-node@10.9.1(@swc/core@1.7.14)(@types/node@22.5.0)(typescript@5.4.5)):
+  postcss-load-config@4.0.1(postcss@8.4.41)(ts-node@10.9.1(@swc/core@1.7.14(@swc/helpers@0.5.12))(@types/node@22.5.0)(typescript@5.4.5)):
     dependencies:
       lilconfig: 2.1.0
       yaml: 2.5.0
     optionalDependencies:
       postcss: 8.4.41
-      ts-node: 10.9.1(@swc/core@1.7.14)(@types/node@22.5.0)(typescript@5.4.5)
+      ts-node: 10.9.1(@swc/core@1.7.14(@swc/helpers@0.5.12))(@types/node@22.5.0)(typescript@5.4.5)
 
   postcss-load-config@6.0.1(jiti@1.21.6)(postcss@8.4.41)(tsx@4.17.0)(yaml@2.5.0):
     dependencies:
@@ -30042,13 +30053,13 @@ snapshots:
       tsx: 4.17.0
       yaml: 2.5.0
 
-  postcss-loader@6.2.1(postcss@8.4.41)(webpack@5.88.0(@swc/core@1.7.14)(esbuild@0.17.19)):
+  postcss-loader@6.2.1(postcss@8.4.41)(webpack@5.88.0(@swc/core@1.7.14(@swc/helpers@0.5.12))(esbuild@0.17.19)):
     dependencies:
       cosmiconfig: 7.1.0
       klona: 2.0.6
       postcss: 8.4.41
       semver: 7.3.8
-      webpack: 5.88.0(@swc/core@1.7.14)(esbuild@0.17.19)
+      webpack: 5.88.0(@swc/core@1.7.14(@swc/helpers@0.5.12))(esbuild@0.17.19)
 
   postcss-logical@5.0.4(postcss@8.4.41):
     dependencies:
@@ -30472,6 +30483,21 @@ snapshots:
 
   punycode@2.3.0: {}
 
+  puppeteer-core@21.11.0(bufferutil@4.0.8)(utf-8-validate@5.0.10):
+    dependencies:
+      '@puppeteer/browsers': 1.9.1
+      chromium-bidi: 0.5.8(devtools-protocol@0.0.1232444)
+      cross-fetch: 4.0.0
+      debug: 4.3.4
+      devtools-protocol: 0.0.1232444
+      ws: 8.16.0(bufferutil@4.0.8)(utf-8-validate@5.0.10)
+    transitivePeerDependencies:
+      - bufferutil
+      - encoding
+      - supports-color
+      - utf-8-validate
+    optional: true
+
   puppeteer-core@21.11.0(bufferutil@4.0.8)(utf-8-validate@6.0.4):
     dependencies:
       '@puppeteer/browsers': 1.9.1
@@ -30600,7 +30626,7 @@ snapshots:
       regenerator-runtime: 0.13.11
       whatwg-fetch: 3.6.2
 
-  react-dev-utils@12.0.1(eslint@8.57.0)(typescript@5.4.5)(webpack@5.88.0(@swc/core@1.7.14)(esbuild@0.17.19)):
+  react-dev-utils@12.0.1(eslint@8.57.0)(typescript@5.4.5)(webpack@5.88.0(@swc/core@1.7.14(@swc/helpers@0.5.12))(esbuild@0.17.19)):
     dependencies:
       '@babel/code-frame': 7.22.5
       address: 1.2.2
@@ -30611,7 +30637,7 @@ snapshots:
       escape-string-regexp: 4.0.0
       filesize: 8.0.7
       find-up: 5.0.0
-      fork-ts-checker-webpack-plugin: 6.5.3(eslint@8.57.0)(typescript@5.4.5)(webpack@5.88.0(@swc/core@1.7.14)(esbuild@0.17.19))
+      fork-ts-checker-webpack-plugin: 6.5.3(eslint@8.57.0)(typescript@5.4.5)(webpack@5.88.0(@swc/core@1.7.14(@swc/helpers@0.5.12))(esbuild@0.17.19))
       global-modules: 2.0.0
       globby: 11.1.0
       gzip-size: 6.0.0
@@ -30626,7 +30652,7 @@ snapshots:
       shell-quote: 1.8.1
       strip-ansi: 6.0.1
       text-table: 0.2.0
-      webpack: 5.88.0(@swc/core@1.7.14)(esbuild@0.17.19)
+      webpack: 5.88.0(@swc/core@1.7.14(@swc/helpers@0.5.12))(esbuild@0.17.19)
     optionalDependencies:
       typescript: 5.4.5
     transitivePeerDependencies:
@@ -30744,56 +30770,56 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.1
 
-  react-scripts@5.0.1(@babel/plugin-syntax-flow@7.24.7(@babel/core@7.22.5))(@babel/plugin-transform-react-jsx@7.25.2(@babel/core@7.22.5))(@swc/core@1.7.14)(@types/babel__core@7.20.5)(bufferutil@4.0.8)(esbuild@0.17.19)(eslint@8.57.0)(react@18.3.1)(ts-node@10.9.1(@swc/core@1.7.14)(@types/node@22.2.0)(typescript@5.4.5))(type-fest@3.1.0)(typescript@5.4.5)(utf-8-validate@5.0.10):
+  react-scripts@5.0.1(@babel/plugin-syntax-flow@7.24.7(@babel/core@7.22.5))(@babel/plugin-transform-react-jsx@7.25.2(@babel/core@7.22.5))(@swc/core@1.7.14(@swc/helpers@0.5.12))(@types/babel__core@7.20.5)(bufferutil@4.0.8)(esbuild@0.17.19)(eslint@8.57.0)(react@18.3.1)(ts-node@10.9.1(@swc/core@1.7.14(@swc/helpers@0.5.12))(@types/node@22.2.0)(typescript@5.4.5))(type-fest@3.1.0)(typescript@5.4.5)(utf-8-validate@5.0.10):
     dependencies:
       '@babel/core': 7.22.5
-      '@pmmmwh/react-refresh-webpack-plugin': 0.5.10(react-refresh@0.11.0)(type-fest@3.1.0)(webpack-dev-server@4.15.1(bufferutil@4.0.8)(utf-8-validate@5.0.10)(webpack@5.88.0(@swc/core@1.7.14)(esbuild@0.17.19)))(webpack@5.88.0(@swc/core@1.7.14)(esbuild@0.17.19))
+      '@pmmmwh/react-refresh-webpack-plugin': 0.5.10(react-refresh@0.11.0)(type-fest@3.1.0)(webpack-dev-server@4.15.1(bufferutil@4.0.8)(utf-8-validate@5.0.10)(webpack@5.88.0(@swc/core@1.7.14(@swc/helpers@0.5.12))(esbuild@0.17.19)))(webpack@5.88.0(@swc/core@1.7.14(@swc/helpers@0.5.12))(esbuild@0.17.19))
       '@svgr/webpack': 5.5.0
       babel-jest: 27.5.1(@babel/core@7.22.5)
-      babel-loader: 8.3.0(@babel/core@7.22.5)(webpack@5.88.0(@swc/core@1.7.14)(esbuild@0.17.19))
+      babel-loader: 8.3.0(@babel/core@7.22.5)(webpack@5.88.0(@swc/core@1.7.14(@swc/helpers@0.5.12))(esbuild@0.17.19))
       babel-plugin-named-asset-import: 0.3.8(@babel/core@7.22.5)
       babel-preset-react-app: 10.0.1
       bfj: 7.0.2
       browserslist: 4.21.9
       camelcase: 6.3.0
       case-sensitive-paths-webpack-plugin: 2.4.0
-      css-loader: 6.8.1(webpack@5.88.0(@swc/core@1.7.14)(esbuild@0.17.19))
-      css-minimizer-webpack-plugin: 3.4.1(esbuild@0.17.19)(webpack@5.88.0(@swc/core@1.7.14)(esbuild@0.17.19))
+      css-loader: 6.8.1(webpack@5.88.0(@swc/core@1.7.14(@swc/helpers@0.5.12))(esbuild@0.17.19))
+      css-minimizer-webpack-plugin: 3.4.1(esbuild@0.17.19)(webpack@5.88.0(@swc/core@1.7.14(@swc/helpers@0.5.12))(esbuild@0.17.19))
       dotenv: 10.0.0
       dotenv-expand: 5.1.0
       eslint: 8.57.0
-      eslint-config-react-app: 7.0.1(@babel/plugin-syntax-flow@7.24.7(@babel/core@7.22.5))(@babel/plugin-transform-react-jsx@7.25.2(@babel/core@7.22.5))(eslint@8.57.0)(jest@27.5.1(bufferutil@4.0.8)(ts-node@10.9.1(@swc/core@1.7.14)(@types/node@22.2.0)(typescript@5.4.5))(utf-8-validate@5.0.10))(typescript@5.4.5)
-      eslint-webpack-plugin: 3.2.0(eslint@8.57.0)(webpack@5.88.0(@swc/core@1.7.14)(esbuild@0.17.19))
-      file-loader: 6.2.0(webpack@5.88.0(@swc/core@1.7.14)(esbuild@0.17.19))
+      eslint-config-react-app: 7.0.1(@babel/plugin-syntax-flow@7.24.7(@babel/core@7.22.5))(@babel/plugin-transform-react-jsx@7.25.2(@babel/core@7.22.5))(eslint@8.57.0)(jest@27.5.1(bufferutil@4.0.8)(ts-node@10.9.1(@swc/core@1.7.14(@swc/helpers@0.5.12))(@types/node@22.2.0)(typescript@5.4.5))(utf-8-validate@5.0.10))(typescript@5.4.5)
+      eslint-webpack-plugin: 3.2.0(eslint@8.57.0)(webpack@5.88.0(@swc/core@1.7.14(@swc/helpers@0.5.12))(esbuild@0.17.19))
+      file-loader: 6.2.0(webpack@5.88.0(@swc/core@1.7.14(@swc/helpers@0.5.12))(esbuild@0.17.19))
       fs-extra: 10.1.0
-      html-webpack-plugin: 5.5.3(webpack@5.88.0(@swc/core@1.7.14)(esbuild@0.17.19))
+      html-webpack-plugin: 5.5.3(webpack@5.88.0(@swc/core@1.7.14(@swc/helpers@0.5.12))(esbuild@0.17.19))
       identity-obj-proxy: 3.0.0
-      jest: 27.5.1(bufferutil@4.0.8)(ts-node@10.9.1(@swc/core@1.7.14)(@types/node@22.2.0)(typescript@5.4.5))(utf-8-validate@5.0.10)
+      jest: 27.5.1(bufferutil@4.0.8)(ts-node@10.9.1(@swc/core@1.7.14(@swc/helpers@0.5.12))(@types/node@22.2.0)(typescript@5.4.5))(utf-8-validate@5.0.10)
       jest-resolve: 27.5.1
-      jest-watch-typeahead: 1.1.0(jest@27.5.1(bufferutil@4.0.8)(ts-node@10.9.1(@swc/core@1.7.14)(@types/node@22.2.0)(typescript@5.4.5))(utf-8-validate@5.0.10))
-      mini-css-extract-plugin: 2.7.6(webpack@5.88.0(@swc/core@1.7.14)(esbuild@0.17.19))
+      jest-watch-typeahead: 1.1.0(jest@27.5.1(bufferutil@4.0.8)(ts-node@10.9.1(@swc/core@1.7.14(@swc/helpers@0.5.12))(@types/node@22.2.0)(typescript@5.4.5))(utf-8-validate@5.0.10))
+      mini-css-extract-plugin: 2.7.6(webpack@5.88.0(@swc/core@1.7.14(@swc/helpers@0.5.12))(esbuild@0.17.19))
       postcss: 8.4.41
       postcss-flexbugs-fixes: 5.0.2(postcss@8.4.41)
-      postcss-loader: 6.2.1(postcss@8.4.41)(webpack@5.88.0(@swc/core@1.7.14)(esbuild@0.17.19))
+      postcss-loader: 6.2.1(postcss@8.4.41)(webpack@5.88.0(@swc/core@1.7.14(@swc/helpers@0.5.12))(esbuild@0.17.19))
       postcss-normalize: 10.0.1(browserslist@4.21.9)(postcss@8.4.41)
       postcss-preset-env: 7.8.3(postcss@8.4.41)
       prompts: 2.4.2
       react: 18.3.1
       react-app-polyfill: 3.0.0
-      react-dev-utils: 12.0.1(eslint@8.57.0)(typescript@5.4.5)(webpack@5.88.0(@swc/core@1.7.14)(esbuild@0.17.19))
+      react-dev-utils: 12.0.1(eslint@8.57.0)(typescript@5.4.5)(webpack@5.88.0(@swc/core@1.7.14(@swc/helpers@0.5.12))(esbuild@0.17.19))
       react-refresh: 0.11.0
       resolve: 1.22.2
       resolve-url-loader: 4.0.0
-      sass-loader: 12.6.0(webpack@5.88.0(@swc/core@1.7.14)(esbuild@0.17.19))
+      sass-loader: 12.6.0(webpack@5.88.0(@swc/core@1.7.14(@swc/helpers@0.5.12))(esbuild@0.17.19))
       semver: 7.3.8
-      source-map-loader: 3.0.2(webpack@5.88.0(@swc/core@1.7.14)(esbuild@0.17.19))
-      style-loader: 3.3.3(webpack@5.88.0(@swc/core@1.7.14)(esbuild@0.17.19))
-      tailwindcss: 3.4.10(ts-node@10.9.1(@swc/core@1.7.14)(@types/node@22.2.0)(typescript@5.4.5))
-      terser-webpack-plugin: 5.3.9(@swc/core@1.7.14)(esbuild@0.17.19)(webpack@5.88.0(@swc/core@1.7.14)(esbuild@0.17.19))
-      webpack: 5.88.0(@swc/core@1.7.14)(esbuild@0.17.19)
-      webpack-dev-server: 4.15.1(bufferutil@4.0.8)(utf-8-validate@5.0.10)(webpack@5.88.0(@swc/core@1.7.14)(esbuild@0.17.19))
-      webpack-manifest-plugin: 4.1.1(webpack@5.88.0(@swc/core@1.7.14)(esbuild@0.17.19))
-      workbox-webpack-plugin: 6.6.0(@types/babel__core@7.20.5)(webpack@5.88.0(@swc/core@1.7.14)(esbuild@0.17.19))
+      source-map-loader: 3.0.2(webpack@5.88.0(@swc/core@1.7.14(@swc/helpers@0.5.12))(esbuild@0.17.19))
+      style-loader: 3.3.3(webpack@5.88.0(@swc/core@1.7.14(@swc/helpers@0.5.12))(esbuild@0.17.19))
+      tailwindcss: 3.4.10(ts-node@10.9.1(@swc/core@1.7.14(@swc/helpers@0.5.12))(@types/node@22.2.0)(typescript@5.4.5))
+      terser-webpack-plugin: 5.3.9(@swc/core@1.7.14(@swc/helpers@0.5.12))(esbuild@0.17.19)(webpack@5.88.0(@swc/core@1.7.14(@swc/helpers@0.5.12))(esbuild@0.17.19))
+      webpack: 5.88.0(@swc/core@1.7.14(@swc/helpers@0.5.12))(esbuild@0.17.19)
+      webpack-dev-server: 4.15.1(bufferutil@4.0.8)(utf-8-validate@5.0.10)(webpack@5.88.0(@swc/core@1.7.14(@swc/helpers@0.5.12))(esbuild@0.17.19))
+      webpack-manifest-plugin: 4.1.1(webpack@5.88.0(@swc/core@1.7.14(@swc/helpers@0.5.12))(esbuild@0.17.19))
+      workbox-webpack-plugin: 6.6.0(@types/babel__core@7.20.5)(webpack@5.88.0(@swc/core@1.7.14(@swc/helpers@0.5.12))(esbuild@0.17.19))
     optionalDependencies:
       fsevents: 2.3.3
       typescript: 5.4.5
@@ -31273,11 +31299,11 @@ snapshots:
 
   sanitize.css@13.0.0: {}
 
-  sass-loader@12.6.0(webpack@5.88.0(@swc/core@1.7.14)(esbuild@0.17.19)):
+  sass-loader@12.6.0(webpack@5.88.0(@swc/core@1.7.14(@swc/helpers@0.5.12))(esbuild@0.17.19)):
     dependencies:
       klona: 2.0.6
       neo-async: 2.6.2
-      webpack: 5.88.0(@swc/core@1.7.14)(esbuild@0.17.19)
+      webpack: 5.88.0(@swc/core@1.7.14(@swc/helpers@0.5.12))(esbuild@0.17.19)
 
   sax@1.2.4: {}
 
@@ -31592,12 +31618,12 @@ snapshots:
 
   source-map-js@1.2.0: {}
 
-  source-map-loader@3.0.2(webpack@5.88.0(@swc/core@1.7.14)(esbuild@0.17.19)):
+  source-map-loader@3.0.2(webpack@5.88.0(@swc/core@1.7.14(@swc/helpers@0.5.12))(esbuild@0.17.19)):
     dependencies:
       abab: 2.0.6
       iconv-lite: 0.6.3
       source-map-js: 1.2.0
-      webpack: 5.88.0(@swc/core@1.7.14)(esbuild@0.17.19)
+      webpack: 5.88.0(@swc/core@1.7.14(@swc/helpers@0.5.12))(esbuild@0.17.19)
 
   source-map-support@0.5.21:
     dependencies:
@@ -31910,9 +31936,9 @@ snapshots:
     dependencies:
       boundary: 2.0.0
 
-  style-loader@3.3.3(webpack@5.88.0(@swc/core@1.7.14)(esbuild@0.17.19)):
+  style-loader@3.3.3(webpack@5.88.0(@swc/core@1.7.14(@swc/helpers@0.5.12))(esbuild@0.17.19)):
     dependencies:
-      webpack: 5.88.0(@swc/core@1.7.14)(esbuild@0.17.19)
+      webpack: 5.88.0(@swc/core@1.7.14(@swc/helpers@0.5.12))(esbuild@0.17.19)
 
   styled-jsx@5.1.1(@babel/core@7.24.4)(react@18.3.1):
     dependencies:
@@ -32050,7 +32076,7 @@ snapshots:
       string-width: 4.2.3
       strip-ansi: 6.0.1
 
-  tailwindcss@3.4.10(ts-node@10.9.1(@swc/core@1.7.14)(@types/node@22.2.0)(typescript@5.4.5)):
+  tailwindcss@3.4.10(ts-node@10.9.1(@swc/core@1.7.14(@swc/helpers@0.5.12))(@types/node@22.2.0)(typescript@5.4.5)):
     dependencies:
       '@alloc/quick-lru': 5.2.0
       arg: 5.0.2
@@ -32069,7 +32095,7 @@ snapshots:
       postcss: 8.4.41
       postcss-import: 15.1.0(postcss@8.4.41)
       postcss-js: 4.0.1(postcss@8.4.41)
-      postcss-load-config: 4.0.1(postcss@8.4.41)(ts-node@10.9.1(@swc/core@1.7.14)(@types/node@22.2.0)(typescript@5.4.5))
+      postcss-load-config: 4.0.1(postcss@8.4.41)(ts-node@10.9.1(@swc/core@1.7.14(@swc/helpers@0.5.12))(@types/node@22.2.0)(typescript@5.4.5))
       postcss-nested: 6.0.1(postcss@8.4.41)
       postcss-selector-parser: 6.0.13
       resolve: 1.22.8
@@ -32077,7 +32103,7 @@ snapshots:
     transitivePeerDependencies:
       - ts-node
 
-  tailwindcss@3.4.10(ts-node@10.9.1(@swc/core@1.7.14)(@types/node@22.5.0)(typescript@5.4.5)):
+  tailwindcss@3.4.10(ts-node@10.9.1(@swc/core@1.7.14(@swc/helpers@0.5.12))(@types/node@22.5.0)(typescript@5.4.5)):
     dependencies:
       '@alloc/quick-lru': 5.2.0
       arg: 5.0.2
@@ -32096,7 +32122,7 @@ snapshots:
       postcss: 8.4.41
       postcss-import: 15.1.0(postcss@8.4.41)
       postcss-js: 4.0.1(postcss@8.4.41)
-      postcss-load-config: 4.0.1(postcss@8.4.41)(ts-node@10.9.1(@swc/core@1.7.14)(@types/node@22.5.0)(typescript@5.4.5))
+      postcss-load-config: 4.0.1(postcss@8.4.41)(ts-node@10.9.1(@swc/core@1.7.14(@swc/helpers@0.5.12))(@types/node@22.5.0)(typescript@5.4.5))
       postcss-nested: 6.0.1(postcss@8.4.41)
       postcss-selector-parser: 6.0.13
       resolve: 1.22.8
@@ -32148,14 +32174,14 @@ snapshots:
       ansi-escapes: 4.3.2
       supports-hyperlinks: 2.3.0
 
-  terser-webpack-plugin@5.3.9(@swc/core@1.7.14)(esbuild@0.17.19)(webpack@5.88.0(@swc/core@1.7.14)(esbuild@0.17.19)):
+  terser-webpack-plugin@5.3.9(@swc/core@1.7.14(@swc/helpers@0.5.12))(esbuild@0.17.19)(webpack@5.88.0(@swc/core@1.7.14(@swc/helpers@0.5.12))(esbuild@0.17.19)):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.18
       jest-worker: 27.5.1
       schema-utils: 3.3.0
       serialize-javascript: 6.0.1
       terser: 5.18.2
-      webpack: 5.88.0(@swc/core@1.7.14)(esbuild@0.17.19)
+      webpack: 5.88.0(@swc/core@1.7.14(@swc/helpers@0.5.12))(esbuild@0.17.19)
     optionalDependencies:
       '@swc/core': 1.7.14(@swc/helpers@0.5.12)
       esbuild: 0.17.19
@@ -32384,7 +32410,7 @@ snapshots:
 
   ts-log@2.2.5: {}
 
-  ts-node@10.9.1(@swc/core@1.7.14)(@types/node@22.2.0)(typescript@5.4.5):
+  ts-node@10.9.1(@swc/core@1.7.14(@swc/helpers@0.5.12))(@types/node@22.2.0)(typescript@5.4.5):
     dependencies:
       '@cspotcode/source-map-support': 0.8.1
       '@tsconfig/node10': 1.0.11
@@ -32405,7 +32431,7 @@ snapshots:
       '@swc/core': 1.7.14(@swc/helpers@0.5.12)
     optional: true
 
-  ts-node@10.9.1(@swc/core@1.7.14)(@types/node@22.5.0)(typescript@5.4.5):
+  ts-node@10.9.1(@swc/core@1.7.14(@swc/helpers@0.5.12))(@types/node@22.5.0)(typescript@5.4.5):
     dependencies:
       '@cspotcode/source-map-support': 0.8.1
       '@tsconfig/node10': 1.0.11
@@ -32454,7 +32480,7 @@ snapshots:
 
   tslib@2.7.0: {}
 
-  tsup@6.7.0(@swc/core@1.7.14)(postcss@8.4.41)(ts-node@10.9.1(@swc/core@1.7.14)(@types/node@22.2.0)(typescript@5.4.5))(typescript@5.4.5):
+  tsup@6.7.0(@swc/core@1.7.14(@swc/helpers@0.5.12))(postcss@8.4.41)(ts-node@10.9.1(@swc/core@1.7.14(@swc/helpers@0.5.12))(@types/node@22.2.0)(typescript@5.4.5))(typescript@5.4.5):
     dependencies:
       bundle-require: 4.0.1(esbuild@0.17.19)
       cac: 6.7.14
@@ -32464,7 +32490,7 @@ snapshots:
       execa: 5.1.1
       globby: 11.1.0
       joycon: 3.1.1
-      postcss-load-config: 3.1.4(postcss@8.4.41)(ts-node@10.9.1(@swc/core@1.7.14)(@types/node@22.2.0)(typescript@5.4.5))
+      postcss-load-config: 3.1.4(postcss@8.4.41)(ts-node@10.9.1(@swc/core@1.7.14(@swc/helpers@0.5.12))(@types/node@22.2.0)(typescript@5.4.5))
       resolve-from: 5.0.0
       rollup: 3.25.3
       source-map: 0.8.0-beta.0
@@ -33092,7 +33118,7 @@ snapshots:
       why-is-node-running: 2.2.2
     optionalDependencies:
       '@types/node': 22.2.0
-      '@vitest/browser': 1.6.0(playwright@1.46.1)(vitest@1.6.0)(webdriverio@8.40.2(bufferutil@4.0.8)(utf-8-validate@6.0.4))
+      '@vitest/browser': 1.6.0(playwright@1.46.1)(vitest@1.6.0)(webdriverio@8.40.2(bufferutil@4.0.8)(utf-8-validate@5.0.10))
       jsdom: 16.7.0(bufferutil@4.0.8)(utf-8-validate@5.0.10)
     transitivePeerDependencies:
       - less
@@ -33164,7 +33190,7 @@ snapshots:
       why-is-node-running: 2.2.2
     optionalDependencies:
       '@types/node': 22.5.0
-      '@vitest/browser': 1.6.0(playwright@1.46.1)(vitest@1.6.0)(webdriverio@8.40.2(bufferutil@4.0.8)(utf-8-validate@6.0.4))
+      '@vitest/browser': 1.6.0(playwright@1.46.1)(vitest@1.6.0)(webdriverio@8.40.2(bufferutil@4.0.8)(utf-8-validate@5.0.10))
       jsdom: 16.7.0(bufferutil@4.0.8)(utf-8-validate@5.0.10)
     transitivePeerDependencies:
       - less
@@ -33280,6 +33306,25 @@ snapshots:
       pvtsutils: 1.3.2
       tslib: 2.7.0
 
+  webdriver@8.40.2(bufferutil@4.0.8)(utf-8-validate@5.0.10):
+    dependencies:
+      '@types/node': 20.14.15
+      '@types/ws': 8.5.12
+      '@wdio/config': 8.40.2
+      '@wdio/logger': 8.38.0
+      '@wdio/protocols': 8.38.0
+      '@wdio/types': 8.39.0
+      '@wdio/utils': 8.40.2
+      deepmerge-ts: 5.1.0
+      got: 12.6.1
+      ky: 0.33.3
+      ws: 8.18.0(bufferutil@4.0.8)(utf-8-validate@5.0.10)
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+    optional: true
+
   webdriver@8.40.2(bufferutil@4.0.8)(utf-8-validate@6.0.4):
     dependencies:
       '@types/node': 20.14.15
@@ -33298,6 +33343,40 @@ snapshots:
       - supports-color
       - utf-8-validate
 
+  webdriverio@8.40.2(bufferutil@4.0.8)(utf-8-validate@5.0.10):
+    dependencies:
+      '@types/node': 20.14.15
+      '@wdio/config': 8.40.2
+      '@wdio/logger': 8.38.0
+      '@wdio/protocols': 8.38.0
+      '@wdio/repl': 8.24.12
+      '@wdio/types': 8.39.0
+      '@wdio/utils': 8.40.2
+      archiver: 7.0.1
+      aria-query: 5.3.0
+      css-shorthand-properties: 1.1.1
+      css-value: 0.0.1
+      devtools-protocol: 0.0.1335233
+      grapheme-splitter: 1.0.4
+      import-meta-resolve: 4.1.0
+      is-plain-obj: 4.1.0
+      jszip: 3.10.1
+      lodash.clonedeep: 4.5.0
+      lodash.zip: 4.2.0
+      minimatch: 9.0.5
+      puppeteer-core: 21.11.0(bufferutil@4.0.8)(utf-8-validate@5.0.10)
+      query-selector-shadow-dom: 1.0.1
+      resq: 1.11.0
+      rgb2hex: 0.2.5
+      serialize-error: 11.0.3
+      webdriver: 8.40.2(bufferutil@4.0.8)(utf-8-validate@5.0.10)
+    transitivePeerDependencies:
+      - bufferutil
+      - encoding
+      - supports-color
+      - utf-8-validate
+    optional: true
+
   webdriverio@8.40.2(bufferutil@4.0.8)(utf-8-validate@6.0.4):
     dependencies:
       '@types/node': 20.14.15
@@ -33341,16 +33420,16 @@ snapshots:
 
   webidl-conversions@6.1.0: {}
 
-  webpack-dev-middleware@5.3.3(webpack@5.88.0(@swc/core@1.7.14)(esbuild@0.17.19)):
+  webpack-dev-middleware@5.3.3(webpack@5.88.0(@swc/core@1.7.14(@swc/helpers@0.5.12))(esbuild@0.17.19)):
     dependencies:
       colorette: 2.0.20
       memfs: 3.5.3
       mime-types: 2.1.35
       range-parser: 1.2.1
       schema-utils: 4.2.0
-      webpack: 5.88.0(@swc/core@1.7.14)(esbuild@0.17.19)
+      webpack: 5.88.0(@swc/core@1.7.14(@swc/helpers@0.5.12))(esbuild@0.17.19)
 
-  webpack-dev-server@4.15.1(bufferutil@4.0.8)(utf-8-validate@5.0.10)(webpack@5.88.0(@swc/core@1.7.14)(esbuild@0.17.19)):
+  webpack-dev-server@4.15.1(bufferutil@4.0.8)(utf-8-validate@5.0.10)(webpack@5.88.0(@swc/core@1.7.14(@swc/helpers@0.5.12))(esbuild@0.17.19)):
     dependencies:
       '@types/bonjour': 3.5.10
       '@types/connect-history-api-fallback': 1.5.0
@@ -33380,20 +33459,20 @@ snapshots:
       serve-index: 1.9.1
       sockjs: 0.3.24
       spdy: 4.0.2
-      webpack-dev-middleware: 5.3.3(webpack@5.88.0(@swc/core@1.7.14)(esbuild@0.17.19))
+      webpack-dev-middleware: 5.3.3(webpack@5.88.0(@swc/core@1.7.14(@swc/helpers@0.5.12))(esbuild@0.17.19))
       ws: 8.17.1(bufferutil@4.0.8)(utf-8-validate@5.0.10)
     optionalDependencies:
-      webpack: 5.88.0(@swc/core@1.7.14)(esbuild@0.17.19)
+      webpack: 5.88.0(@swc/core@1.7.14(@swc/helpers@0.5.12))(esbuild@0.17.19)
     transitivePeerDependencies:
       - bufferutil
       - debug
       - supports-color
       - utf-8-validate
 
-  webpack-manifest-plugin@4.1.1(webpack@5.88.0(@swc/core@1.7.14)(esbuild@0.17.19)):
+  webpack-manifest-plugin@4.1.1(webpack@5.88.0(@swc/core@1.7.14(@swc/helpers@0.5.12))(esbuild@0.17.19)):
     dependencies:
       tapable: 2.2.1
-      webpack: 5.88.0(@swc/core@1.7.14)(esbuild@0.17.19)
+      webpack: 5.88.0(@swc/core@1.7.14(@swc/helpers@0.5.12))(esbuild@0.17.19)
       webpack-sources: 2.3.1
 
   webpack-sources@1.4.3:
@@ -33410,7 +33489,7 @@ snapshots:
 
   webpack-virtual-modules@0.6.2: {}
 
-  webpack@5.88.0(@swc/core@1.7.14)(esbuild@0.17.19):
+  webpack@5.88.0(@swc/core@1.7.14(@swc/helpers@0.5.12))(esbuild@0.17.19):
     dependencies:
       '@types/eslint-scope': 3.7.4
       '@types/estree': 1.0.1
@@ -33433,7 +33512,7 @@ snapshots:
       neo-async: 2.6.2
       schema-utils: 3.3.0
       tapable: 2.2.1
-      terser-webpack-plugin: 5.3.9(@swc/core@1.7.14)(esbuild@0.17.19)(webpack@5.88.0(@swc/core@1.7.14)(esbuild@0.17.19))
+      terser-webpack-plugin: 5.3.9(@swc/core@1.7.14(@swc/helpers@0.5.12))(esbuild@0.17.19)(webpack@5.88.0(@swc/core@1.7.14(@swc/helpers@0.5.12))(esbuild@0.17.19))
       watchpack: 2.4.0
       webpack-sources: 3.2.3
     transitivePeerDependencies:
@@ -33648,12 +33727,12 @@ snapshots:
 
   workbox-sw@6.6.0: {}
 
-  workbox-webpack-plugin@6.6.0(@types/babel__core@7.20.5)(webpack@5.88.0(@swc/core@1.7.14)(esbuild@0.17.19)):
+  workbox-webpack-plugin@6.6.0(@types/babel__core@7.20.5)(webpack@5.88.0(@swc/core@1.7.14(@swc/helpers@0.5.12))(esbuild@0.17.19)):
     dependencies:
       fast-json-stable-stringify: 2.1.0
       pretty-bytes: 5.6.0
       upath: 1.2.0
-      webpack: 5.88.0(@swc/core@1.7.14)(esbuild@0.17.19)
+      webpack: 5.88.0(@swc/core@1.7.14(@swc/helpers@0.5.12))(esbuild@0.17.19)
       webpack-sources: 1.4.3
       workbox-build: 6.6.0(@types/babel__core@7.20.5)
     transitivePeerDependencies:
@@ -33726,6 +33805,12 @@ snapshots:
       utf-8-validate: 6.0.4
     optional: true
 
+  ws@8.16.0(bufferutil@4.0.8)(utf-8-validate@5.0.10):
+    optionalDependencies:
+      bufferutil: 4.0.8
+      utf-8-validate: 5.0.10
+    optional: true
+
   ws@8.16.0(bufferutil@4.0.8)(utf-8-validate@6.0.4):
     optionalDependencies:
       bufferutil: 4.0.8
diff --git a/templates/nextjs/src/app/layout.tsx b/templates/nextjs/src/app/layout.tsx
index b562be421d1..6ca8ec5891d 100644
--- a/templates/nextjs/src/app/layout.tsx
+++ b/templates/nextjs/src/app/layout.tsx
@@ -13,6 +13,7 @@ import {
   FuelWalletDevelopmentConnector,
   FueletWalletConnector,
   WalletConnectConnector,
+  SolanaConnector,
 } from "@fuels/connectors";
 import { NODE_URL } from "@/lib";
 import { ActiveWalletProvider } from "@/hooks/useActiveWallet";
@@ -70,6 +71,9 @@ export default function RootLayout({ children }: RootLayoutProps) {
                   new BakoSafeConnector(),
                   new FueletWalletConnector(),
                   new FuelWalletDevelopmentConnector(),
+                  new SolanaConnector({
+                    fuelProvider: providerToUse,
+                  }),
                 ],
               }}
             >
diff --git a/templates/vite/src/routes/__root.tsx b/templates/vite/src/routes/__root.tsx
index da59c371212..b082d9da735 100644
--- a/templates/vite/src/routes/__root.tsx
+++ b/templates/vite/src/routes/__root.tsx
@@ -13,6 +13,7 @@ import {
   FuelWalletDevelopmentConnector,
   FueletWalletConnector,
   WalletConnectConnector,
+  SolanaConnector,
 } from "@fuels/connectors";
 import { ActiveWalletProvider } from "../hooks/useActiveWallet";
 
@@ -60,6 +61,9 @@ export const Route = createRootRoute({
                 new BakoSafeConnector(),
                 new FueletWalletConnector(),
                 new FuelWalletDevelopmentConnector(),
+                new SolanaConnector({
+                  fuelProvider: providerToUse,
+                }),
               ],
             }}
           >

From 6905f931e65fa56f3c3aafcb2821a89c21baf5c2 Mon Sep 17 00:00:00 2001
From: Anderson Arboleya <anderson@arboleya.me>
Date: Thu, 29 Aug 2024 07:26:46 -0300
Subject: [PATCH 3/5] chore: increase test timeout to reduce flakiness (#3056)

* Increasing test timeout to reduce flakiness

* Adding changeset
---
 .changeset/wet-hairs-beg.md                        | 4 ++++
 packages/account/src/test-utils/launchNode.test.ts | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/wet-hairs-beg.md

diff --git a/.changeset/wet-hairs-beg.md b/.changeset/wet-hairs-beg.md
new file mode 100644
index 00000000000..89cb968a37d
--- /dev/null
+++ b/.changeset/wet-hairs-beg.md
@@ -0,0 +1,4 @@
+---
+---
+
+chore: increase test timeout to reduce flakiness
diff --git a/packages/account/src/test-utils/launchNode.test.ts b/packages/account/src/test-utils/launchNode.test.ts
index 52b59d2a69b..2445f8b77c4 100644
--- a/packages/account/src/test-utils/launchNode.test.ts
+++ b/packages/account/src/test-utils/launchNode.test.ts
@@ -28,7 +28,7 @@ vi.mock('fs', async () => {
 /**
  * @group node
  */
-describe('launchNode', () => {
+describe('launchNode', { timeout: 10000 }, () => {
   test('using ephemeral port 0 is possible', async () => {
     const { cleanup, port, url } = await launchNode({ port: '0' });
     expect(await fetch(url)).toBeTruthy();

From b67ded2b23f1ad3135b56f6aaf97a17f43f977a0 Mon Sep 17 00:00:00 2001
From: Peter Smith <peter@blueoceancomputing.co.uk>
Date: Thu, 29 Aug 2024 12:00:58 +0100
Subject: [PATCH 4/5] chore: upgraded forc to `0.63.3` (#3055)

* chore: upgrade forc

* chore: changeset

* chore: update fixtures

---------

Co-authored-by: Anderson Arboleya <anderson@arboleya.me>
---
 .changeset/fast-bulldogs-hope.md                            | 6 ++++++
 internal/forc/VERSION                                       | 2 +-
 .../fixtures/templates/contract-with-configurable/main.hbs  | 6 +++---
 .../fixtures/templates/predicate-with-configurable/main.hbs | 4 ++--
 .../fixtures/templates/script-with-configurable/main.hbs    | 2 +-
 packages/versions/src/lib/getBuiltinVersions.ts             | 2 +-
 templates/nextjs/sway-programs/fuel-toolchain.toml          | 2 +-
 templates/vite/sway-programs/fuel-toolchain.toml            | 2 +-
 8 files changed, 16 insertions(+), 10 deletions(-)
 create mode 100644 .changeset/fast-bulldogs-hope.md

diff --git a/.changeset/fast-bulldogs-hope.md b/.changeset/fast-bulldogs-hope.md
new file mode 100644
index 00000000000..867790a878a
--- /dev/null
+++ b/.changeset/fast-bulldogs-hope.md
@@ -0,0 +1,6 @@
+---
+"@fuel-ts/versions": patch
+"create-fuels": patch
+---
+
+chore: upgraded forc to `0.63.3`
diff --git a/internal/forc/VERSION b/internal/forc/VERSION
index 630f2e0ce67..068337d8307 100644
--- a/internal/forc/VERSION
+++ b/internal/forc/VERSION
@@ -1 +1 @@
-0.63.1
+0.63.3
diff --git a/packages/abi-typegen/test/fixtures/templates/contract-with-configurable/main.hbs b/packages/abi-typegen/test/fixtures/templates/contract-with-configurable/main.hbs
index 172bd0a38cc..d767304335a 100644
--- a/packages/abi-typegen/test/fixtures/templates/contract-with-configurable/main.hbs
+++ b/packages/abi-typegen/test/fixtures/templates/contract-with-configurable/main.hbs
@@ -160,17 +160,17 @@ const abi = {
     {
       "name": "SHOULD_RETURN",
       "concreteTypeId": "b760f44fa5965c2474a3b471467a22c43185152129295af588b022ae50b50903",
-      "offset": 2720
+      "offset": 2776
     },
     {
       "name": "AN_OPTION",
       "concreteTypeId": "2da102c46c7263beeed95818cd7bee801716ba8303dddafdcd0f6c9efda4a0f1",
-      "offset": 2696
+      "offset": 2752
     },
     {
       "name": "A_GENERIC_STRUCT",
       "concreteTypeId": "71df88006611ffff852cf617defb70f77adaf507305088cedd41d276c783aab0",
-      "offset": 2712
+      "offset": 2768
     }
   ]
 };
diff --git a/packages/abi-typegen/test/fixtures/templates/predicate-with-configurable/main.hbs b/packages/abi-typegen/test/fixtures/templates/predicate-with-configurable/main.hbs
index 10ede746c7b..fdacb6def91 100644
--- a/packages/abi-typegen/test/fixtures/templates/predicate-with-configurable/main.hbs
+++ b/packages/abi-typegen/test/fixtures/templates/predicate-with-configurable/main.hbs
@@ -73,12 +73,12 @@ const abi = {
     {
       "name": "FEE",
       "concreteTypeId": "c89951a24c6ca28c13fd1cfdc646b2b656d69e61a92b91023be7eb58eb914b6b",
-      "offset": 928
+      "offset": 920
     },
     {
       "name": "ADDRESS",
       "concreteTypeId": "7c5ee1cecf5f8eacd1284feb5f0bf2bdea533a51e2f0c9aabe9236d335989f3b",
-      "offset": 896
+      "offset": 888
     }
   ]
 };
diff --git a/packages/abi-typegen/test/fixtures/templates/script-with-configurable/main.hbs b/packages/abi-typegen/test/fixtures/templates/script-with-configurable/main.hbs
index 704006dd623..71b9ba3cb53 100644
--- a/packages/abi-typegen/test/fixtures/templates/script-with-configurable/main.hbs
+++ b/packages/abi-typegen/test/fixtures/templates/script-with-configurable/main.hbs
@@ -81,7 +81,7 @@ const abi = {
     {
       "name": "SHOULD_RETURN",
       "concreteTypeId": "b760f44fa5965c2474a3b471467a22c43185152129295af588b022ae50b50903",
-      "offset": 704
+      "offset": 760
     }
   ]
 };
diff --git a/packages/versions/src/lib/getBuiltinVersions.ts b/packages/versions/src/lib/getBuiltinVersions.ts
index 5e02e2c4ad6..cff5e27a9df 100644
--- a/packages/versions/src/lib/getBuiltinVersions.ts
+++ b/packages/versions/src/lib/getBuiltinVersions.ts
@@ -2,7 +2,7 @@ import type { Versions } from './types';
 
 export function getBuiltinVersions(): Versions {
   return {
-    FORC: '0.63.1',
+    FORC: '0.63.3',
     FUEL_CORE: '0.34.0',
     FUELS: '0.94.2',
   };
diff --git a/templates/nextjs/sway-programs/fuel-toolchain.toml b/templates/nextjs/sway-programs/fuel-toolchain.toml
index cf8d5119a82..a1c831c72df 100644
--- a/templates/nextjs/sway-programs/fuel-toolchain.toml
+++ b/templates/nextjs/sway-programs/fuel-toolchain.toml
@@ -2,5 +2,5 @@
 channel = "testnet"
 
 [components]
-forc = "0.63.1"
+forc = "0.63.3"
 fuel-core = "0.34.0"
diff --git a/templates/vite/sway-programs/fuel-toolchain.toml b/templates/vite/sway-programs/fuel-toolchain.toml
index cf8d5119a82..a1c831c72df 100644
--- a/templates/vite/sway-programs/fuel-toolchain.toml
+++ b/templates/vite/sway-programs/fuel-toolchain.toml
@@ -2,5 +2,5 @@
 channel = "testnet"
 
 [components]
-forc = "0.63.1"
+forc = "0.63.3"
 fuel-core = "0.34.0"

From e04947a219b61e4b21151a3ed866bfbff44d68a8 Mon Sep 17 00:00:00 2001
From: Dhaiwat <dhaiwatpandya@gmail.com>
Date: Thu, 29 Aug 2024 18:24:15 +0530
Subject: [PATCH 5/5] feat: make `create-fuels` template app responsive (#3011)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: make `create-fuels` template app responsive

* add changeset

* enable pr release

* run integration tests

* revert integration test comments

---------

Co-authored-by: Sérgio Torres <30977845+Torres-ssf@users.noreply.github.com>
---
 .changeset/tall-hairs-sit.md               |   5 +
 templates/nextjs/public/close.svg          |   4 +
 templates/nextjs/public/hamburger.svg      |   6 +
 templates/nextjs/src/components/Layout.tsx |  98 +------------
 templates/nextjs/src/components/Navbar.tsx | 162 +++++++++++++++++++++
 templates/vite/public/close.svg            |   4 +
 templates/vite/public/hamburger.svg        |   6 +
 templates/vite/src/components/Layout.tsx   | 101 +------------
 templates/vite/src/components/Navbar.tsx   | 162 +++++++++++++++++++++
 9 files changed, 355 insertions(+), 193 deletions(-)
 create mode 100644 .changeset/tall-hairs-sit.md
 create mode 100644 templates/nextjs/public/close.svg
 create mode 100644 templates/nextjs/public/hamburger.svg
 create mode 100644 templates/nextjs/src/components/Navbar.tsx
 create mode 100644 templates/vite/public/close.svg
 create mode 100644 templates/vite/public/hamburger.svg
 create mode 100644 templates/vite/src/components/Navbar.tsx

diff --git a/.changeset/tall-hairs-sit.md b/.changeset/tall-hairs-sit.md
new file mode 100644
index 00000000000..fd87075d307
--- /dev/null
+++ b/.changeset/tall-hairs-sit.md
@@ -0,0 +1,5 @@
+---
+"create-fuels": patch
+---
+
+feat: make `create-fuels` template app responsive
diff --git a/templates/nextjs/public/close.svg b/templates/nextjs/public/close.svg
new file mode 100644
index 00000000000..68c77b1b014
--- /dev/null
+++ b/templates/nextjs/public/close.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.7457 3.32851C20.3552 2.93798 19.722 2.93798 19.3315 3.32851L12.0371 10.6229L4.74275 3.32851C4.35223 2.93798 3.71906 2.93798 3.32854 3.32851C2.93801 3.71903 2.93801 4.3522 3.32854 4.74272L10.6229 12.0371L3.32856 19.3314C2.93803 19.722 2.93803 20.3551 3.32856 20.7457C3.71908 21.1362 4.35225 21.1362 4.74277 20.7457L12.0371 13.4513L19.3315 20.7457C19.722 21.1362 20.3552 21.1362 20.7457 20.7457C21.1362 20.3551 21.1362 19.722 20.7457 19.3315L13.4513 12.0371L20.7457 4.74272C21.1362 4.3522 21.1362 3.71903 20.7457 3.32851Z" fill="#fff"/>
+</svg>
\ No newline at end of file
diff --git a/templates/nextjs/public/hamburger.svg b/templates/nextjs/public/hamburger.svg
new file mode 100644
index 00000000000..6e4f6fd75ca
--- /dev/null
+++ b/templates/nextjs/public/hamburger.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 7L4 7" stroke="#fff" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M20 12L4 12" stroke="#fff" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M20 17L4 17" stroke="#fff" stroke-width="1.5" stroke-linecap="round"/>
+</svg>
\ No newline at end of file
diff --git a/templates/nextjs/src/components/Layout.tsx b/templates/nextjs/src/components/Layout.tsx
index 04788ae4cff..4e9ba2c6796 100644
--- a/templates/nextjs/src/components/Layout.tsx
+++ b/templates/nextjs/src/components/Layout.tsx
@@ -1,75 +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 { useRouter } from "next/navigation";
+import { Navbar } from "./Navbar";
 
 export const Layout = ({ children }: { children: React.ReactNode }) => {
-  const { faucetWallet } = useFaucet();
-  const router = useRouter();
-
-  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 faucet page
-    if (CURRENT_ENVIRONMENT === "testnet") {
-      return router.push("/faucet");
-    }
-  };
-
-  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>
@@ -78,32 +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="/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>
+        <Navbar />
 
         <div className="min-h-screen items-center p-24 flex flex-col gap-6">
           {children}
diff --git a/templates/nextjs/src/components/Navbar.tsx b/templates/nextjs/src/components/Navbar.tsx
new file mode 100644
index 00000000000..e4c6f2a3f49
--- /dev/null
+++ b/templates/nextjs/src/components/Navbar.tsx
@@ -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>
+    </>
+  );
+};
diff --git a/templates/vite/public/close.svg b/templates/vite/public/close.svg
new file mode 100644
index 00000000000..68c77b1b014
--- /dev/null
+++ b/templates/vite/public/close.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.7457 3.32851C20.3552 2.93798 19.722 2.93798 19.3315 3.32851L12.0371 10.6229L4.74275 3.32851C4.35223 2.93798 3.71906 2.93798 3.32854 3.32851C2.93801 3.71903 2.93801 4.3522 3.32854 4.74272L10.6229 12.0371L3.32856 19.3314C2.93803 19.722 2.93803 20.3551 3.32856 20.7457C3.71908 21.1362 4.35225 21.1362 4.74277 20.7457L12.0371 13.4513L19.3315 20.7457C19.722 21.1362 20.3552 21.1362 20.7457 20.7457C21.1362 20.3551 21.1362 19.722 20.7457 19.3315L13.4513 12.0371L20.7457 4.74272C21.1362 4.3522 21.1362 3.71903 20.7457 3.32851Z" fill="#fff"/>
+</svg>
\ No newline at end of file
diff --git a/templates/vite/public/hamburger.svg b/templates/vite/public/hamburger.svg
new file mode 100644
index 00000000000..6e4f6fd75ca
--- /dev/null
+++ b/templates/vite/public/hamburger.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 7L4 7" stroke="#fff" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M20 12L4 12" stroke="#fff" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M20 17L4 17" stroke="#fff" stroke-width="1.5" stroke-linecap="round"/>
+</svg>
\ No newline at end of file
diff --git a/templates/vite/src/components/Layout.tsx b/templates/vite/src/components/Layout.tsx
index 9811bb6702d..18e376882ba 100644
--- a/templates/vite/src/components/Layout.tsx
+++ b/templates/vite/src/components/Layout.tsx
@@ -1,107 +1,12 @@
-import toast, { Toaster } from "react-hot-toast";
-import { Link } from "./Link";
-import { Button } from "./Button";
-import { CURRENT_ENVIRONMENT, NODE_URL } 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 { bn } from "fuels";
-import { useRouter } from "@tanstack/react-router";
+import { Toaster } from "react-hot-toast";
+import { Navbar } from "./Navbar";
 
 export const Layout = ({ children }: { children: React.ReactNode }) => {
-  const { faucetWallet } = useFaucet();
-
-  const { navigate } = useRouter();
-
-  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 faucet page
-    if (CURRENT_ENVIRONMENT === "testnet") {
-      return navigate({
-        to: "/faucet",
-      });
-    }
-  };
-
-  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 (
     <>
       <Toaster />
       <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>
-
-          <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>
+        <Navbar />
 
         <div className="min-h-screen items-center p-24 flex flex-col gap-6">
           {children}
diff --git a/templates/vite/src/components/Navbar.tsx b/templates/vite/src/components/Navbar.tsx
new file mode 100644
index 00000000000..e031af5f899
--- /dev/null
+++ b/templates/vite/src/components/Navbar.tsx
@@ -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>
+    </>
+  );
+};