chore: show all create-fuels template balances in ETH

.changeset/great-icons-rule.md

@@ -0,0 +1,5 @@
+---
+"create-fuels": patch
+---
+
+chore: show all create-fuels template balances in ETH

templates/nextjs/src/components/Layout.tsx

@@ -8,6 +8,7 @@ import { useBrowserWallet } from "@/hooks/useBrowserWallet";
 import { useActiveWallet } from "@/hooks/useActiveWallet";
 import { useFaucet } from "@/hooks/useFaucet";
 import Head from "next/head";
+import { bn } from "fuels";
 
 export const Layout = ({ children }: { children: React.ReactNode }) => {
   const { faucetWallet } = useFaucet();
@@ -33,7 +34,10 @@ export const Layout = ({ children }: { children: React.ReactNode }) => {
         return toast.error("Faucet wallet not found.");
       }
 
-      const tx = await faucetWallet?.transfer(wallet.address, 10_000);
+      const tx = await faucetWallet?.transfer(
+        wallet.address,
+        bn.parseUnits("5"),
+      );
       await tx?.waitForResult();
 
       toast.success("Wallet topped up!");
@@ -49,7 +53,7 @@ export const Layout = ({ children }: { children: React.ReactNode }) => {
     }
   };
 
-  const showTopUpButton = walletBalance?.lt(10_000);
+  const showTopUpButton = walletBalance?.lt(bn.parseUnits("5"));
 
   const showAddNetworkButton =
     browserWallet &&

templates/nextjs/src/components/WalletDisplay.tsx

@@ -26,7 +26,11 @@ export const WalletDisplay = () => {
           onClick={() => copyToClipboard(wallet.address.toB256() as string)}
         />
         <span className="text-gray-400">
-          Balance: {walletBalance?.toString()}
+          Balance:{" "}
+          {walletBalance?.format({
+            precision: 3,
+          })}{" "}
+          ETH
         </span>
       </div>
     )

templates/nextjs/src/pages/faucet.tsx

@@ -12,7 +12,7 @@ export default function Faucet() {
   const { refreshWalletBalance } = useActiveWallet();
 
   const [receiverAddress, setReceiverAddress] = useState<string>();
-  const [amountToSend, setAmountToSend] = useState<BN>();
+  const [amountToSend, setAmountToSend] = useState<string>();
 
   const sendFunds = async () => {
     if (!faucetWallet) {
@@ -27,7 +27,10 @@ export default function Faucet() {
       return toast.error("Amount cannot be empty");
     }
 
-    const tx = await faucetWallet.transfer(receiverAddress, amountToSend);
+    const tx = await faucetWallet.transfer(
+      receiverAddress,
+      bn.parseUnits(amountToSend.toString()),
+    );
     await tx.waitForResult();
 
     toast.success("Funds sent!");
@@ -50,14 +53,12 @@ export default function Faucet() {
       </div>
 
       <div className="flex gap-4 items-center">
-        <span className="text-gray-400">Amount:</span>
+        <span className="text-gray-400">Amount (ETH):</span>
         <Input
           className="w-full"
           value={amountToSend?.toString()}
-          onChange={(e) =>
-            setAmountToSend(e.target.value ? bn(e.target.value) : undefined)
-          }
-          placeholder="100"
+          onChange={(e) => setAmountToSend(e.target.value ?? undefined)}
+          placeholder="5"
           type="number"
         />
       </div>

templates/nextjs/src/pages/predicate.tsx

@@ -4,7 +4,7 @@ import { Input } from "@/components/Input";
 import { Link } from "@/components/Link";
 import { useActiveWallet } from "@/hooks/useActiveWallet";
 import { TestPredicateAbi__factory } from "@/sway-api/predicates/index";
-import type { BN, InputValue, Predicate } from "fuels";
+import { BN, InputValue, Predicate } from "fuels";
 import { bn } from "fuels";
 import { useState } from "react";
 import toast from "react-hot-toast";
@@ -103,16 +103,30 @@ export default function PredicateExample() {
 
       <div className="mt-12 items-baseline flex gap-2">
         <h5 className="font-semibold text-xl">Wallet Balance:</h5>
-        <span className="text-gray-400">{walletBalance?.toString()}</span>
+        <span className="text-gray-400">
+          {walletBalance?.format({
+            precision: 3,
+          })}{" "}
+          ETH
+        </span>
       </div>
 
       <div className="items-baseline flex gap-2">
         <h5 className="font-semibold text-xl">Predicate Balance:</h5>
-        <span className="text-gray-400">{predicateBalance?.toString()}</span>
+        <span className="text-gray-400">
+          {predicateBalance?.format({
+            precision: 3,
+          })}{" "}
+          ETH
+        </span>
       </div>
 
-      <Button onClick={async () => await transferFundsToPredicate(bn(1000))}>
-        Transfer 1000 to Predicate
+      <Button
+        onClick={async () =>
+          await transferFundsToPredicate(bn.parseUnits("0.1"))
+        }
+      >
+        Transfer 0.1 ETH to Predicate
       </Button>
 
       <Input
@@ -124,17 +138,17 @@ export default function PredicateExample() {
 
       <Button
         onClick={async () =>
-          await unlockPredicateAndTransferFundsBack(bn(1000))
+          await unlockPredicateAndTransferFundsBack(bn.parseUnits("0.09"))
         }
       >
-        Unlock Predicate and Transfer 1000 back to Wallet
+        Unlock Predicate and Transfer 0.09 ETH back to Wallet
       </Button>
 
       <span className="mt-8 w-[400px] text-gray-400">
         Do note that when you 'unlock' a predicate, the predicate also pays for
         the gas of the transaction. <br />
         This is why you will notice that the balance of the predicate gets
-        reduced by 1000 + a nominal gas fee.
+        reduced by 0.09 ETH + a nominal gas fee.
       </span>
 
       <Link