feat: pre-fill address and amount in create-fuels faucet (#2434)

* feat: pre-fill address and amount in `create-fuels` template

* update changeset

* add an integration test for the faucet page

* disable .only

* fix lint error

.changeset/smart-trainers-peel.md

@@ -0,0 +1,4 @@
+---
+---
+
+feat: pre-fill address and amount in `create-fuels` faucet

playwright-tests/create-fuels.test.ts

@@ -25,3 +25,27 @@ test('counter contract - increment function call works properly', async ({ page
   const counter = page.getByTestId('counter');
   await expect(counter).toBeVisible();
 });
+
+test('faucet page', async ({ page }) => {
+  await page.goto('http://127.0.0.1:3000/faucet', { waitUntil: 'networkidle' });
+
+  await page.waitForTimeout(2000);
+
+  // check if the two fields are pre-filled
+  const receiverAddressInput = page.getByLabel('Receiving address:');
+  await expect(receiverAddressInput).not.toBeEmpty();
+
+  const amountToSendInput = page.getByLabel('Amount (ETH):');
+  await expect(amountToSendInput).toHaveValue('5');
+
+  // click the send funds button
+  const sendFundsButton = page.getByText('Send Funds');
+  await sendFundsButton.click();
+
+  await page.waitForTimeout(500);
+
+  const successToast = page.getByText('Funds sent!');
+  await expect(successToast).toBeVisible();
+
+  // TODO: Validate and assert that the balance has been updated. We need to use `fuels` as a dependency to do this.
+});

templates/nextjs/src/components/Input.tsx

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

templates/nextjs/src/pages/faucet.tsx

@@ -3,16 +3,24 @@ import { Input } from "@/components/Input";
 import { useActiveWallet } from "@/hooks/useActiveWallet";
 import { useFaucet } from "@/hooks/useFaucet";
 import { BN, bn } from "fuels";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import toast from "react-hot-toast";
 
 export default function Faucet() {
   const { faucetWallet } = useFaucet();
 
   const { refreshWalletBalance } = useActiveWallet();
 
+  const { wallet } = useActiveWallet();
+
   const [receiverAddress, setReceiverAddress] = useState<string>();
-  const [amountToSend, setAmountToSend] = useState<string>();
+  const [amountToSend, setAmountToSend] = useState<string>("5");
+
+  useEffect(() => {
+    if (wallet && !receiverAddress) {
+      setReceiverAddress(wallet.address.toB256());
+    }
+  }, [wallet]);
 
   const sendFunds = async () => {
     if (!faucetWallet) {
@@ -43,23 +51,29 @@ export default function Faucet() {
       <h3 className="text-2xl font-semibold">Local Faucet</h3>
 
       <div className="flex gap-4 items-center">
-        <span className="text-gray-400">Receiving address:</span>
+        <label htmlFor="receiver-address-input" className="text-gray-400">
+          Receiving address:
+        </label>
         <Input
           className="w-full"
           value={receiverAddress}
           onChange={(e) => setReceiverAddress(e.target.value)}
           placeholder="0x..."
+          id="receiver-address-input"
         />
       </div>
 
       <div className="flex gap-4 items-center">
-        <span className="text-gray-400">Amount (ETH):</span>
+        <label htmlFor="amount-input" className="text-gray-400">
+          Amount (ETH):
+        </label>
         <Input
           className="w-full"
           value={amountToSend?.toString()}
           onChange={(e) => setAmountToSend(e.target.value ?? undefined)}
           placeholder="5"
           type="number"
+          id="amount-input"
         />
       </div>