diff --git a/.changeset/smart-trainers-peel.md b/.changeset/smart-trainers-peel.md new file mode 100644 index 00000000000..f71c0eb29ed --- /dev/null +++ b/.changeset/smart-trainers-peel.md @@ -0,0 +1,4 @@ +--- +--- + +feat: pre-fill address and amount in `create-fuels` faucet diff --git a/playwright-tests/create-fuels.test.ts b/playwright-tests/create-fuels.test.ts index 147c30dfa05..59f09096718 100644 --- a/playwright-tests/create-fuels.test.ts +++ b/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. +}); diff --git a/templates/nextjs/src/components/Input.tsx b/templates/nextjs/src/components/Input.tsx index 222f4738399..083b1bb5a33 100644 --- a/templates/nextjs/src/components/Input.tsx +++ b/templates/nextjs/src/components/Input.tsx @@ -4,7 +4,8 @@ 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 ( ); }; diff --git a/templates/nextjs/src/pages/faucet.tsx b/templates/nextjs/src/pages/faucet.tsx index c92419f1ac9..d7d338c05e3 100644 --- a/templates/nextjs/src/pages/faucet.tsx +++ b/templates/nextjs/src/pages/faucet.tsx @@ -3,7 +3,7 @@ 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() { @@ -11,8 +11,16 @@ export default function Faucet() { const { refreshWalletBalance } = useActiveWallet(); + const { wallet } = useActiveWallet(); + const [receiverAddress, setReceiverAddress] = useState(); - const [amountToSend, setAmountToSend] = useState(); + const [amountToSend, setAmountToSend] = useState("5"); + + useEffect(() => { + if (wallet && !receiverAddress) { + setReceiverAddress(wallet.address.toB256()); + } + }, [wallet]); const sendFunds = async () => { if (!faucetWallet) { @@ -43,23 +51,29 @@ export default function Faucet() {

Local Faucet

- Receiving address: + setReceiverAddress(e.target.value)} placeholder="0x..." + id="receiver-address-input" />
- Amount (ETH): + setAmountToSend(e.target.value ?? undefined)} placeholder="5" type="number" + id="amount-input" />