feat: counter fixes

counter/package.json

@@ -19,16 +19,16 @@
   "dependencies": {
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
-    "@fuels/connectors": "0.25.0",
+    "@fuels/connectors": "0.27.1",
     "@fuels/react": "^0.25.0",
     "@mui/icons-material": "^5.16.5",
     "@mui/material": "^5.16.5",
     "@tanstack/react-query": "^5.29.2",
     "@wagmi/connectors": "5.0.26",
-    "@wagmi/core": "2.12.2",
+    "@wagmi/core": "2.13.4",
     "app-commons": "workspace:*",
     "dotenv": "^16.4.5",
-    "fuels": "0.93.0",
+    "fuels": "0.94.5",
     "react": "^18.2",
     "react-dom": "^18.2",
     "react-hot-toast": "^2.4.1",

counter/src/App.tsx

@@ -18,6 +18,7 @@ import { useBreakpoints } from "./hooks/useBreakpoints";
 import { NavMenu } from "./components/NavMenu";
 import ThemeToggle from "./components/ThemeToggle";
 import { useEffect, useState } from "react";
+import OpenInNewIcon from "@mui/icons-material/OpenInNew";
 
 export default function App() {
   const { wallet, network, isConnected } =
@@ -60,7 +61,10 @@ export default function App() {
         <nav className="flex justify-between items-center p-4 bg-background text-text-primary gap-6">
           {!isMobile && (
             <>
-              <Link className="text-fuel-green hover:underline" to={`${VITE_BASE_URL}/counter`}>
+              <Link
+                className="text-fuel-green hover:underline"
+                to={`${VITE_BASE_URL}/counter`}
+              >
                 Home
               </Link>
               <Link
@@ -69,6 +73,7 @@ export default function App() {
                 className="text-fuel-green hover:underline"
               >
                 Fuel Docs
+                <OpenInNewIcon fontSize="small" className="ml-1" />
               </Link>
             </>
           )}
@@ -89,9 +94,17 @@ export default function App() {
                     "Please connect your wallet to visit the faucet."
                   );
                 if (isSafari && wallet) {
-                  const redirectUrl = new URL("https://faucet-testnet.fuel.network/");
-                  redirectUrl.searchParams.append("address", wallet.address.toString());
-                  redirectUrl.searchParams.append("redirectUrl", window.location.href);
+                  const redirectUrl = new URL(
+                    "https://faucet-testnet.fuel.network/"
+                  );
+                  redirectUrl.searchParams.append(
+                    "address",
+                    wallet.address.toString()
+                  );
+                  redirectUrl.searchParams.append(
+                    "redirectUrl",
+                    window.location.href
+                  );
                   window.location.href = redirectUrl.href;
                 } else {
                   navigate(`${VITE_BASE_URL}/counter/faucet`);
@@ -115,9 +128,18 @@ export default function App() {
         <div className="min-h-screen items-center justify-center flex flex-col gap-6">
           <Routes>
             <Route path={`${VITE_BASE_URL}/counter`} element={<Home />} />
-            <Route path={`${VITE_BASE_URL}/counter/predicate`} element={<PredicateExample />} />
-            <Route path={`${VITE_BASE_URL}/counter/script`} element={<ScriptExample />} />
-            <Route path={`${VITE_BASE_URL}/counter/faucet`} element={<Faucet />} />
+            <Route
+              path={`${VITE_BASE_URL}/counter/predicate`}
+              element={<PredicateExample />}
+            />
+            <Route
+              path={`${VITE_BASE_URL}/counter/script`}
+              element={<ScriptExample />}
+            />
+            <Route
+              path={`${VITE_BASE_URL}/counter/faucet`}
+              element={<Faucet />}
+            />
           </Routes>{" "}
         </div>
       </div>

counter/src/components/NavMenu.tsx

@@ -4,8 +4,7 @@ import TableRowsIcon from "@mui/icons-material/TableRows";
 
 import { IconButton } from "@mui/material";
 import { useState } from "react";
-import { Link, useNavigate } from "react-router-dom";
-import { Button } from "./Button";
+import { Link } from "react-router-dom";
 import { ConnectButton } from "./ConnectButton";
 
 export const NavMenu = ({ address }: { address?: string }) => {

counter/src/hooks/useIncrementCounter.tsx

@@ -2,11 +2,12 @@ import { useState } from "react";
 import toast from "react-hot-toast";
 import { bn, BN } from "fuels";
 import CheckCircleIcon from "@mui/icons-material/CheckCircle";
-import type { TestContractAbi } from "../sway-api";
+import { TestContract } from "../sway-api/contracts/index";
+
 import { QueryObserverResult, RefetchOptions } from "@tanstack/react-query";
 
 interface UseIncrementCounterProps {
-  contract: TestContractAbi | undefined;
+  contract?: TestContract;
   isConnected: boolean | null;
   walletBalance: BN | null;
   setCounter: (value: number) => void;

counter/src/hooks/useRunScript.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import toast from "react-hot-toast";
 import { BN, BigNumberish, Script, bn, Account } from "fuels";
-import { TestScriptAbi__factory } from "../sway-api";
+import { TestScript } from "../sway-api";
 import CheckCircleIcon from "@mui/icons-material/CheckCircle";
 import useAsync from "react-use/lib/useAsync";
 
@@ -25,7 +25,7 @@ export function useRunScript({
 
   useAsync(async () => {
     if (wallet) {
-      const scriptInstance = TestScriptAbi__factory.createInstance(wallet);
+      const scriptInstance = new TestScript(wallet);
       setScript(scriptInstance);
     }
   }, [wallet]);

counter/src/hooks/useUnlockPredicateAndTransferFundsBack.tsx

@@ -3,7 +3,7 @@ import toast from "react-hot-toast";
 import { BN, bn, Predicate, InputValue } from "fuels";
 import CheckCircleIcon from "@mui/icons-material/CheckCircle";
 import { useActiveWallet } from "./useActiveWallet";
-import { TestPredicateAbi__factory } from "../sway-api/predicates/index";
+import { TestPredicate } from "../sway-api/predicates/index";
 import { QueryObserverResult, RefetchOptions } from "@tanstack/react-query";
 
 
@@ -49,10 +49,10 @@ export function useUnlockPredicateAndTransferFundsBack({
 
       setIsLoadingUnlock(true);
       const baseAssetId = wallet.provider.getBaseAssetId();
-      const reInitializePredicate = TestPredicateAbi__factory.createInstance(
-        wallet.provider,
-        [bn(pin)]
-      );
+      const reInitializePredicate = new TestPredicate({
+        provider: wallet.provider,
+        data: [bn(pin)],
+      });
 
       if (!reInitializePredicate) {
         return toast.error("Failed to initialize predicate");

counter/src/index.css

@@ -8,13 +8,15 @@
   --text-color: #000000;
   --primary-color: #4f46e5;
   --secondary-color: #10b981;
+  --button-transition-background-color: #9ca3af;
 }
 
 [data-theme="dark"] {
   --background-color: #000000;
   --text-color: #ffffff;
   --primary-color: #6366f1;
   --secondary-color: #34d399;
+  --button-transition-background-color: transparent;
 }
 .bg-gradient {
   background: linear-gradient(180deg, rgba(8, 8, 8, 0.88) 0%, rgba(8, 8, 8, 0.79) 100%);

counter/src/pages/Counter.tsx

@@ -1,5 +1,4 @@
-import type { TestContractAbi } from "../sway-api";
-import { TestContractAbi__factory } from "../sway-api";
+import { TestContract, TestContractFactory} from "../sway-api";
 import contractIds from "../sway-api/contract-ids.json";
 import { FuelLogo } from "../components/FuelLogo";
 import { useState } from "react";
@@ -9,6 +8,7 @@ import { useActiveWallet } from "../hooks/useActiveWallet";
 import useAsync from "react-use/lib/useAsync";
 import { CURRENT_ENVIRONMENT, VITE_BASE_URL } from "../lib";
 import { useIncrementCounter } from "../hooks/useIncrementCounter";
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 
 const contractId =
   CURRENT_ENVIRONMENT === "local"
@@ -18,12 +18,12 @@ const contractId =
 export default function Home() {
   const { wallet, walletBalance, refetchBalance, isConnected } =
     useActiveWallet();
-  const [contract, setContract] = useState<TestContractAbi>();
+  const [contract, setContract] = useState<TestContract>();
   const [counter, setCounter] = useState<number>();
 
   useAsync(async () => {
     if (wallet) {
-      const testContract = TestContractAbi__factory.connect(contractId, wallet);
+      const testContract = new TestContract(contractId, wallet);
       setContract(testContract);
       const { value } = await testContract.functions.get_count().get();
       setCounter(value.toNumber());
@@ -53,7 +53,7 @@ export default function Home() {
       <span className="text-gray-400 text-center">
         This template uses the new{" "}
         <Link to="https://docs.fuel.network/docs/fuels-ts/fuels/#fuels-cli">
-          Fuels CLI
+          Fuels CLI <OpenInNewIcon fontSize="small" />
         </Link>{" "}
         to enable type-safe hot-reloading for your Sway programs.
       </span>
@@ -69,21 +69,27 @@ export default function Home() {
           onClick={onIncrementPressed}
           className={`mt-6 ${
             isLoading
-              ? "bg-transparent border border-gray-400 pointer-events-none"
+              ? "bg-buttontransition border border-gray-400 pointer-events-none"
               : !isConnected
-              ? "bg-gray-500"
-              : ""
+                ? "bg-gray-500"
+                : ""
           }`}
         >
           {isLoading ? "Incrementing..." : "Increment Counter"}
         </Button>
       </>
 
-      <Link to={`${VITE_BASE_URL}/counter/predicate`} className="text-fuel-green hover:underline">
+      <Link
+        to={`${VITE_BASE_URL}/counter/predicate`}
+        className="text-fuel-green hover:underline"
+      >
         Predicate Example
       </Link>
 
-      <Link to={`${VITE_BASE_URL}/counter/script`} className="text-fuel-green hover:underline">
+      <Link
+        to={`${VITE_BASE_URL}/counter/script`}
+        className="text-fuel-green hover:underline"
+      >
         Script Example
       </Link>
     </>

counter/src/pages/Predicate.tsx

@@ -2,14 +2,15 @@ import { Button } from "../components/Button";
 import { FuelLogo } from "../components/FuelLogo";
 import { Input } from "../components/Input";
 import { useActiveWallet } from "../hooks/useActiveWallet";
-import { TestPredicateAbi__factory } from "../sway-api/predicates/index";
+import { TestPredicate } from "../sway-api/predicates/index";
 import { BN, InputValue, Predicate } from "fuels";
 import { bn } from "fuels";
 import { useState } from "react";
 import useAsync from "react-use/lib/useAsync";
 import { Link } from "react-router-dom";
 import { useTransferFundsToPredicate } from "../hooks/useTransferFundsToPredicate";
 import { useUnlockPredicateAndTransferFundsBack } from "../hooks/useUnlockPredicateAndTransferFundsBack";
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 
 export default function PredicateExample() {
   const { wallet, walletBalance, refetchBalance, isConnected } =
@@ -20,9 +21,9 @@ export default function PredicateExample() {
 
   useAsync(async () => {
     if (wallet) {
-      const predicateInstance = TestPredicateAbi__factory.createInstance(
-        wallet.provider
-      );
+      const predicateInstance = new TestPredicate({
+        provider: wallet.provider,
+      });      
       setPredicate(predicateInstance);
       setPredicateBalance(await predicateInstance.getBalance());
     }
@@ -72,10 +73,10 @@ export default function PredicateExample() {
       <Button
         className={`${
           isLoadingTransfer
-            ? "bg-transparent border border-gray-400 pointer-events-none"
+            ? "bg-buttontransition border border-gray-400 pointer-events-none"
             : !isConnected
-            ? "bg-gray-500"
-            : ""
+              ? "bg-gray-500"
+              : ""
         }`}
         onClick={async () =>
           await transferFundsToPredicate(bn.parseUnits("0.001"))
@@ -96,10 +97,10 @@ export default function PredicateExample() {
       <Button
         className={`w-11/12 sm:w-fit ${
           isLoadingUnlock
-            ? "bg-transparent border border-gray-400 pointer-events-none"
+            ? "bg-buttontransition border border-gray-400 pointer-events-none"
             : isButtonDisabled
-            ? "bg-gray-500"
-            : ""
+              ? "bg-gray-500"
+              : ""
         }`}
         onClick={async () =>
           await unlockPredicateAndTransferFundsBack(
@@ -125,7 +126,8 @@ export default function PredicateExample() {
         target="_blank"
         className="text-fuel-green hover:underline"
       >
-        Learn more about Predicates
+        Learn more about Predicates 
+        <OpenInNewIcon fontSize="small" className="ml-1" />
       </Link>
     </>
   );

counter/src/pages/Script.tsx

@@ -7,6 +7,7 @@ import { Input } from "../components/Input";
 import { useActiveWallet } from "../hooks/useActiveWallet";
 import { useRunScript } from "../hooks/useRunScript";
 import { useState } from "react";
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 
 export default function ScriptExample() {
   const { wallet, walletBalance, isConnected } = useActiveWallet();
@@ -40,10 +41,10 @@ export default function ScriptExample() {
       <Button
         className={`${
           isLoading
-            ? "bg-transparent border border-gray-400 pointer-events-none"
+            ? "bg-buttontransition border border-gray-400 pointer-events-none"
             : !isConnected
-            ? "bg-gray-500"
-            : ""
+              ? "bg-gray-500"
+              : ""
         }`}
         onClick={runScript}
       >
@@ -53,7 +54,9 @@ export default function ScriptExample() {
       {result && (
         <div className="flex gap-2 align-bottom">
           <h5 className="font-semibold text-xl">Result:</h5>
-          <span className="text-gray-400 text-center flex justify-center items-center">{result}</span>
+          <span className="text-gray-400 text-center flex justify-center items-center">
+            {result}
+          </span>
         </div>
       )}
 
@@ -67,6 +70,7 @@ export default function ScriptExample() {
         className="text-fuel-green hover:underline"
       >
         Learn more about Scripts
+        <OpenInNewIcon fontSize="small" className="ml-1" />
       </Link>
     </>
   );

counter/src/sway-api/contract-ids.json

@@ -1,3 +1,3 @@
 {
-  "testContract": "0x5e8e024719905a30877f2651cf79e0fc2cd78f2af16a4fcf04f03bce682709f0"
+  "testContract": "0x28dc0328f1ae2887418a2824225c5a8b76b6c314a608bb594ca8dae5b6716ead"
 }