chore: added useBaseAssetId hook to templates (#3550)

FuelLabs · Jan 6, 2025 · 9b52153 · 9b52153
1 parent d404734
commit 9b52153
Show file tree

Hide file tree

Showing 13 changed files with 102 additions and 13 deletions.
diff --git a/.changeset/small-spoons-drive.md b/.changeset/small-spoons-drive.md
@@ -0,0 +1,5 @@
+---
+"create-fuels": patch
+---
+
+chore: added `useBaseAssetId` hook to templates
diff --git a/apps/create-fuels-counter-guide/src/components/Faucet.tsx b/apps/create-fuels-counter-guide/src/components/Faucet.tsx
@@ -4,17 +4,18 @@ import { useEffect, useState } from "react";
 import LocalFaucet from "./LocalFaucet";
 import Button from "./Button";
 import { isLocal, renderFormattedBalance, testnetFaucetUrl } from "../lib.tsx";
+import { useBaseAssetId } from "../hooks/useBaseAssetId.tsx";
 
 export default function Faucet() {
   const { wallet } = useWallet();
+  const { baseAssetId } = useBaseAssetId();
   const connectedWalletAddress = wallet?.address.toB256() || "";
 
   const [addressToFund, setAddressToFund] = useState("");
-
-  const { balance, refetch } = useBalance({ address: addressToFund });
-
   const [initialAddressLoaded, setInitialAddressLoaded] = useState(false);
 
+  const { balance, refetch } = useBalance({ address: addressToFund, assetId: baseAssetId });
+
   useEffect(() => {
     if (connectedWalletAddress && !initialAddressLoaded && !addressToFund) {
       setAddressToFund(connectedWalletAddress);

diff --git a/apps/create-fuels-counter-guide/src/components/Predicate.tsx b/apps/create-fuels-counter-guide/src/components/Predicate.tsx
@@ -7,22 +7,26 @@ import Button from "./Button";
 import LocalFaucet from "./LocalFaucet";
 import { isLocal, renderFormattedBalance } from "../lib.tsx";
 import { useNotification } from "../hooks/useNotification.tsx";
+import { useBaseAssetId } from "../hooks/useBaseAssetId.tsx";
 
 export default function Predicate() {
   const { errorNotification, transactionSubmitNotification, transactionSuccessNotification, successNotification } = useNotification();
     useNotification();
   const [predicate, setPredicate] = useState<FuelPredicate<InputValue[]>>();
   const [predicatePin, setPredicatePin] = useState<string>();
   const [isLoading, setIsLoading] = useState(false);
+  const { baseAssetId } = useBaseAssetId();
 
   const { wallet } = useWallet();
   const address = wallet?.address.toB256() || "";
   const { balance: walletBalance, refetch: refetchWallet } = useBalance({
     address,
+    assetId: baseAssetId,
   });
   const predicateAddress = predicate?.address?.toB256();
   const { balance: predicateBalance, refetch: refetchPredicate } = useBalance({
     address: predicateAddress,
+    assetId: baseAssetId,
   });
 
   useEffect(() => {

diff --git a/apps/create-fuels-counter-guide/src/components/Wallet.tsx b/apps/create-fuels-counter-guide/src/components/Wallet.tsx
@@ -4,12 +4,16 @@ import { useEffect } from "react";
 import Button from "./Button";
 import LocalFaucet from "./LocalFaucet";
 import { isLocal, renderFormattedBalance } from "../lib.tsx";
+import { useBaseAssetId } from "../hooks/useBaseAssetId.tsx";
 
 export default function Wallet() {
   const { disconnect } = useDisconnect();
   const { wallet } = useWallet();
+  const { baseAssetId } = useBaseAssetId();
+
   const address = wallet?.address.toB256() || "";
-  const { balance, refetch } = useBalance({ address });
+
+  const { balance, refetch } = useBalance({ address, assetId: baseAssetId });
 
   useEffect(() => {
     refetch();

diff --git a/apps/create-fuels-counter-guide/src/hooks/useBaseAssetId.tsx b/apps/create-fuels-counter-guide/src/hooks/useBaseAssetId.tsx
@@ -0,0 +1,17 @@
+import { useNamedQuery, useProvider } from "@fuels/react";
+
+export const useBaseAssetId = () => {
+  const { provider } = useProvider();
+
+  return useNamedQuery("baseAssetId", {
+    queryKey: ["baseAssetId"],
+    queryFn: async () => {
+      if (!provider) {
+        throw new Error("Provider not found");
+      }
+
+      return await provider.getBaseAssetId();
+    },
+    placeholderData: undefined,
+  });
+};
diff --git a/templates/nextjs/src/components/Faucet.tsx b/templates/nextjs/src/components/Faucet.tsx
@@ -4,23 +4,28 @@ import { useEffect, useState } from "react";
 import LocalFaucet from "./LocalFaucet";
 import Button from "./Button";
 import { isLocal, renderFormattedBalance, testnetFaucetUrl } from "../lib";
+import { useBaseAssetId } from "@/hooks/useBaseAssetId";
 
 export default function Faucet() {
   const { wallet } = useWallet();
+  const { baseAssetId } = useBaseAssetId();
   const connectedWalletAddress = wallet?.address.toB256() || "";
 
   const [addressToFund, setAddressToFund] = useState("");
-
-  const { balance, refetch } = useBalance({ address: addressToFund });
-
   const [initialAddressLoaded, setInitialAddressLoaded] = useState(false);
 
+  const { balance, refetch } = useBalance({
+    address: addressToFund,
+    assetId: baseAssetId,
+  });
+
   useEffect(() => {
     if (connectedWalletAddress && !initialAddressLoaded && !addressToFund) {
       setAddressToFund(connectedWalletAddress);
       setInitialAddressLoaded(true);
     }
   }, [connectedWalletAddress, addressToFund, initialAddressLoaded]);
+
   useEffect(() => {
     refetch();
   }, [refetch]);

diff --git a/templates/nextjs/src/components/Predicate.tsx b/templates/nextjs/src/components/Predicate.tsx
@@ -7,6 +7,7 @@ import Button from "./Button";
 import LocalFaucet from "./LocalFaucet";
 import { isLocal, renderFormattedBalance } from "../lib";
 import { useNotification } from "../hooks/useNotification";
+import { useBaseAssetId } from "@/hooks/useBaseAssetId";
 
 export default function Predicate() {
   const {
@@ -19,15 +20,18 @@ export default function Predicate() {
   const [predicate, setPredicate] = useState<TestPredicate>();
   const [predicatePin, setPredicatePin] = useState<string>();
   const [isLoading, setIsLoading] = useState(false);
+  const { baseAssetId } = useBaseAssetId();
 
   const { wallet } = useWallet();
   const address = wallet?.address.toB256() || "";
   const { balance: walletBalance, refetch: refetchWallet } = useBalance({
     address,
+    assetId: baseAssetId,
   });
   const predicateAddress = predicate?.address?.toB256();
   const { balance: predicateBalance, refetch: refetchPredicate } = useBalance({
     address: predicateAddress,
+    assetId: baseAssetId,
   });
 
   useEffect(() => {

diff --git a/templates/nextjs/src/components/Wallet.tsx b/templates/nextjs/src/components/Wallet.tsx
@@ -4,12 +4,15 @@ import { useEffect } from "react";
 import Button from "./Button";
 import LocalFaucet from "./LocalFaucet";
 import { isLocal, renderFormattedBalance } from "../lib";
+import { useBaseAssetId } from "@/hooks/useBaseAssetId";
 
 export default function Wallet() {
   const { disconnect } = useDisconnect();
   const { wallet } = useWallet();
+  const { baseAssetId } = useBaseAssetId();
+
   const address = wallet?.address.toB256() || "";
-  const { balance, refetch } = useBalance({ address });
+  const { balance, refetch } = useBalance({ address, assetId: baseAssetId });
 
   useEffect(() => {
     refetch();

diff --git a/templates/nextjs/src/hooks/useBaseAssetId.tsx b/templates/nextjs/src/hooks/useBaseAssetId.tsx
@@ -0,0 +1,17 @@
+import { useNamedQuery, useProvider } from "@fuels/react";
+
+export const useBaseAssetId = () => {
+  const { provider } = useProvider();
+
+  return useNamedQuery("baseAssetId", {
+    queryKey: ["baseAssetId"],
+    queryFn: async () => {
+      if (!provider) {
+        throw new Error("Provider not found");
+      }
+
+      return await provider.getBaseAssetId();
+    },
+    placeholderData: undefined,
+  });
+};
diff --git a/templates/vite/src/components/Faucet.tsx b/templates/vite/src/components/Faucet.tsx
@@ -4,17 +4,21 @@ import { useEffect, useState } from "react";
 import LocalFaucet from "./LocalFaucet";
 import Button from "./Button";
 import { isLocal, renderFormattedBalance, testnetFaucetUrl } from "../lib.tsx";
+import { useBaseAssetId } from "../hooks/useBaseAssetId.tsx";
 
 export default function Faucet() {
   const { wallet } = useWallet();
+  const { baseAssetId } = useBaseAssetId();
   const connectedWalletAddress = wallet?.address.toB256() || "";
 
   const [addressToFund, setAddressToFund] = useState("");
-
-  const { balance, refetch } = useBalance({ address: addressToFund });
-
   const [initialAddressLoaded, setInitialAddressLoaded] = useState(false);
 
+  const { balance, refetch } = useBalance({
+    address: addressToFund,
+    assetId: baseAssetId,
+  });
+
   useEffect(() => {
     if (connectedWalletAddress && !initialAddressLoaded && !addressToFund) {
       setAddressToFund(connectedWalletAddress);

diff --git a/templates/vite/src/components/Predicate.tsx b/templates/vite/src/components/Predicate.tsx
@@ -1,12 +1,13 @@
 import { useBalance, useWallet } from "@fuels/react";
 import { useEffect, useState } from "react";
-import { bn, Predicate as FuelPredicate, InputValue } from "fuels";
+import { bn } from "fuels";
 
 import { TestPredicate } from "../sway-api/predicates";
 import Button from "./Button";
 import LocalFaucet from "./LocalFaucet";
 import { isLocal, renderFormattedBalance } from "../lib.tsx";
 import { useNotification } from "../hooks/useNotification.tsx";
+import { useBaseAssetId } from "../hooks/useBaseAssetId.tsx";
 
 export default function Predicate() {
   const {
@@ -18,15 +19,18 @@ export default function Predicate() {
   const [predicate, setPredicate] = useState<TestPredicate>();
   const [predicatePin, setPredicatePin] = useState<string>();
   const [isLoading, setIsLoading] = useState(false);
+  const { baseAssetId } = useBaseAssetId();
 
   const { wallet } = useWallet();
   const address = wallet?.address.toB256() || "";
   const { balance: walletBalance, refetch: refetchWallet } = useBalance({
     address,
+    assetId: baseAssetId,
   });
   const predicateAddress = predicate?.address?.toB256();
   const { balance: predicateBalance, refetch: refetchPredicate } = useBalance({
     address: predicateAddress,
+    assetId: baseAssetId,
   });
 
   useEffect(() => {

diff --git a/templates/vite/src/components/Wallet.tsx b/templates/vite/src/components/Wallet.tsx
@@ -4,12 +4,16 @@ import { useEffect } from "react";
 import Button from "./Button";
 import LocalFaucet from "./LocalFaucet";
 import { isLocal, renderFormattedBalance } from "../lib.tsx";
+import { useBaseAssetId } from "../hooks/useBaseAssetId.tsx";
 
 export default function Wallet() {
   const { disconnect } = useDisconnect();
   const { wallet } = useWallet();
+  const { baseAssetId } = useBaseAssetId();
+
   const address = wallet?.address.toB256() || "";
-  const { balance, refetch } = useBalance({ address });
+
+  const { balance, refetch } = useBalance({ address, assetId: baseAssetId });
 
   useEffect(() => {
     refetch();

diff --git a/templates/vite/src/hooks/useBaseAssetId.tsx b/templates/vite/src/hooks/useBaseAssetId.tsx
@@ -0,0 +1,17 @@
+import { useNamedQuery, useProvider } from "@fuels/react";
+
+export const useBaseAssetId = () => {
+  const { provider } = useProvider();
+
+  return useNamedQuery("baseAssetId", {
+    queryKey: ["baseAssetId"],
+    queryFn: async () => {
+      if (!provider) {
+        throw new Error("Provider not found");
+      }
+
+      return await provider.getBaseAssetId();
+    },
+    placeholderData: undefined,
+  });
+};