feat: embed testnet faucet in create-fuels template

FuelLabs · Aug 26, 2024 · 6b55cd1 · 6b55cd1
1 parent 682d62e
commit 6b55cd1
Show file tree

Hide file tree

Showing 5 changed files with 117 additions and 87 deletions.
diff --git a/.changeset/stupid-books-pull.md 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
@@ -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 ovreflow-scroll"
+          />
+        </>
+      )}
     </>
   );
 }
diff --git 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/router";
 
 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
@@ -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
@@ -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 ovreflow-scroll"
+          />
+        </>
+      )}
     </>
   );
 }