From 89b43d56b70bf167053067a2b0784479692eaa98 Mon Sep 17 00:00:00 2001 From: Peter Smith Date: Mon, 6 Jan 2025 16:51:37 +0000 Subject: [PATCH 1/4] chore: fix integration tests --- .../src/components/Faucet.tsx | 7 ++++--- .../src/components/Predicate.tsx | 4 ++++ .../src/components/Wallet.tsx | 6 +++++- .../src/hooks/useBaseAssetId.tsx | 17 +++++++++++++++++ templates/nextjs/src/components/Faucet.tsx | 11 ++++++++--- templates/nextjs/src/components/Predicate.tsx | 4 ++++ templates/nextjs/src/components/Wallet.tsx | 5 ++++- templates/nextjs/src/hooks/useBaseAssetId.tsx | 17 +++++++++++++++++ templates/vite/src/components/Faucet.tsx | 10 +++++++--- templates/vite/src/components/Predicate.tsx | 6 +++++- templates/vite/src/components/Wallet.tsx | 6 +++++- templates/vite/src/hooks/useBaseAssetId.tsx | 17 +++++++++++++++++ 12 files changed, 97 insertions(+), 13 deletions(-) create mode 100644 apps/create-fuels-counter-guide/src/hooks/useBaseAssetId.tsx create mode 100644 templates/nextjs/src/hooks/useBaseAssetId.tsx create mode 100644 templates/vite/src/hooks/useBaseAssetId.tsx diff --git a/apps/create-fuels-counter-guide/src/components/Faucet.tsx b/apps/create-fuels-counter-guide/src/components/Faucet.tsx index 195ccba8760..7c307a7e803 100644 --- 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 index 51095a26ef8..5188b109170 100644 --- a/apps/create-fuels-counter-guide/src/components/Predicate.tsx +++ b/apps/create-fuels-counter-guide/src/components/Predicate.tsx @@ -7,6 +7,7 @@ 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(); @@ -14,15 +15,18 @@ export default function Predicate() { const [predicate, setPredicate] = useState>(); const [predicatePin, setPredicatePin] = useState(); 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 index 75ab9a6a411..e006b220c6e 100644 --- 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 new file mode 100644 index 00000000000..3998c8083bd --- /dev/null +++ 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 index 96a6094548a..95481014297 100644 --- 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 index 4fa1223b7cd..01f0d4f4cfa 100644 --- 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(); const [predicatePin, setPredicatePin] = useState(); 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 index 49c0c66a968..1fd3744cadc 100644 --- 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 new file mode 100644 index 00000000000..3998c8083bd --- /dev/null +++ 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 index 195ccba8760..e1677af63ec 100644 --- 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 index a4f74f770e2..08b0ea1782d 100644 --- 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(); const [predicatePin, setPredicatePin] = useState(); 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 index 75ab9a6a411..e006b220c6e 100644 --- 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 new file mode 100644 index 00000000000..3998c8083bd --- /dev/null +++ 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, + }); +}; From b5c7a49e8bf41de19b50889e53107782c1058c1e Mon Sep 17 00:00:00 2001 From: Peter Smith Date: Mon, 6 Jan 2025 16:54:24 +0000 Subject: [PATCH 2/4] chore: release --- .github/workflows/pr-release.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/pr-release.yaml b/.github/workflows/pr-release.yaml index 6eeca1f3f04..593d7fce145 100644 --- a/.github/workflows/pr-release.yaml +++ b/.github/workflows/pr-release.yaml @@ -8,7 +8,7 @@ jobs: name: "Release PR to npm" runs-on: ubuntu-latest # comment out if:false to enable release PR to npm - if: false + # if: false permissions: write-all steps: - name: Checkout From ad3f6f502898235539cf9e1c20859f7da21d33cd Mon Sep 17 00:00:00 2001 From: Peter Smith Date: Mon, 6 Jan 2025 17:08:19 +0000 Subject: [PATCH 3/4] Update .github/workflows/pr-release.yaml --- .github/workflows/pr-release.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/pr-release.yaml b/.github/workflows/pr-release.yaml index 593d7fce145..6eeca1f3f04 100644 --- a/.github/workflows/pr-release.yaml +++ b/.github/workflows/pr-release.yaml @@ -8,7 +8,7 @@ jobs: name: "Release PR to npm" runs-on: ubuntu-latest # comment out if:false to enable release PR to npm - # if: false + if: false permissions: write-all steps: - name: Checkout From eb58f0f05988aab83cba396657b9d7ff874a5acd Mon Sep 17 00:00:00 2001 From: Peter Smith Date: Mon, 6 Jan 2025 17:11:24 +0000 Subject: [PATCH 4/4] chore: changeset --- .changeset/small-spoons-drive.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/small-spoons-drive.md diff --git a/.changeset/small-spoons-drive.md b/.changeset/small-spoons-drive.md new file mode 100644 index 00000000000..df105ca5d18 --- /dev/null +++ b/.changeset/small-spoons-drive.md @@ -0,0 +1,5 @@ +--- +"create-fuels": patch +--- + +chore: added `useBaseAssetId` hook to templates