fix: fuels-wallet changed to use fuel react

Author: pedropereiradev

examples/react-app/src/components/account.tsx

@@ -1,4 +1,4 @@
-import { useDisconnect } from '@fuel-wallet/react';
+import { useDisconnect } from '@fuels/react';
 import Button from './button';
 import Feature from './feature';
 import { useWallet } from '../hooks/useWallet';

examples/react-app/src/components/counter.tsx

@@ -1,20 +1,20 @@
-import { useEffect, useState } from 'react';
-import { useLogEvents } from '../hooks/use-log-events';
-import { CounterContractAbi__factory } from '../contracts';
-import { DEFAULT_AMOUNT } from './balance';
-import Feature from './feature';
-import Button from './button';
-import Notification, { Props as NotificationProps } from './notification';
-import { useWallet } from '../hooks/useWallet';
+import { useEffect, useState } from "react";
+import { useLogEvents } from "../hooks/use-log-events";
+import { CounterContractAbi__factory } from "../contracts";
+import { DEFAULT_AMOUNT } from "./balance";
+import Feature from "./feature";
+import Button from "./button";
+import Notification, { Props as NotificationProps } from "./notification";
+import { useWallet } from "../hooks/useWallet";
 
 export const COUNTER_CONTRACT_ID =
-  '0x0a46aafb83b387155222893b52ed12e5a4b9d6cd06770786f2b5e4307a63b65c';
+  "0x0a46aafb83b387155222893b52ed12e5a4b9d6cd06770786f2b5e4307a63b65c";
 
 export default function ContractCounter() {
   const { balance, wallet } = useWallet();
 
-  const [toast, setToast] = useState<Omit<NotificationProps, 'setOpen'>>({
-    open: false
+  const [toast, setToast] = useState<Omit<NotificationProps, "setOpen">>({
+    open: false,
   });
 
   const [isLoading, setLoading] = useState(false);
@@ -61,25 +61,27 @@ export default function ContractCounter() {
       setLoading(true);
       const contract = CounterContractAbi__factory.connect(
         COUNTER_CONTRACT_ID,
-        wallet
+        wallet,
       );
       try {
         await contract.functions
           .increment()
           .txParams({ gasPrice: 1, gasLimit: 100_000 })
           .call();
-        setCounter((prev) => prev + 1);
+
+        getCount();
+
         setToast({
           open: true,
-          type: 'success',
-          children: 'Counter incremented!'
+          type: "success",
+          children: "Counter incremented!",
         });
       } catch (err: any) {
-        console.error('error sending transaction...', err.message);
+        console.error("error sending transaction...", err.message);
         setToast({
           open: true,
-          type: 'error',
-          children: `The counter could not be incremented: ${err.message.substring(0, 32)}...`
+          type: "error",
+          children: `The counter could not be incremented: ${err.message.substring(0, 32)}...`,
         });
       } finally {
         setLoading(false);
@@ -92,8 +94,9 @@ export default function ContractCounter() {
 
     const counterContract = CounterContractAbi__factory.connect(
       COUNTER_CONTRACT_ID,
-      wallet
+      wallet,
     );
+
     try {
       const { value } = await counterContract.functions
         .count()

examples/react-app/src/hooks/use-log-events.ts

@@ -1,5 +1,5 @@
-import { useEffect } from 'react';
-import { useFuel } from '@fuel-wallet/react';
+import { useEffect } from "react";
+import { useFuel } from "@fuels/react";
 
 export function useLogEvents() {
   const { fuel } = useFuel();
@@ -8,9 +8,9 @@ export function useLogEvents() {
     const log = (prefix: string) => (data: unknown) => {
       console.log(prefix, data);
     };
-    const logAccounts = log('accounts');
-    const logConnection = log('connection');
-    const logCurrentAccount = log('currentAccount');
+    const logAccounts = log("accounts");
+    const logConnection = log("connection");
+    const logCurrentAccount = log("currentAccount");
 
     fuel.on(fuel.events.accounts, logAccounts);
     fuel.on(fuel.events.connection, logConnection);

examples/react-app/src/hooks/useWallet.ts

@@ -1,76 +1,62 @@
 import {
   useAccounts,
   useConnectUI,
-  useConnectors,
   useIsConnected,
   useWallet as useFuelWallet,
-  useBalance
-} from '@fuel-wallet/react';
-import { useEffect, useState } from 'react';
+  useBalance,
+  useFuel,
+} from "@fuels/react";
+import { useEffect, useState } from "react";
 
 interface ICurrentConnector {
   logo: string;
   title: string;
 }
 
 export const useWallet = () => {
+  const { fuel } = useFuel();
   const { connect, isConnecting } = useConnectUI();
   const { isConnected, refetch: refetchConnected } = useIsConnected();
   const {
     accounts,
     isLoading: isLoadingAccounts,
-    isFetching: isFetchingAccounts
+    isFetching: isFetchingAccounts,
   } = useAccounts();
-  const {
-    data,
-    isLoading: isLoadingConnectors,
-    isFetching: isFetchingConnectors
-  } = useConnectors();
 
   const address = accounts[0];
-
   const { wallet, refetch: refetchWallet } = useFuelWallet(address);
+
   const {
     balance,
     isLoading: isLoadingBalance,
-    isFetching: isFetchingBalance
+    isFetching: isFetchingBalance,
   } = useBalance({ address });
 
   const [currentConnector, setCurrentConnector] = useState<ICurrentConnector>({
-    logo: './Fuel_Logo_White_RGB.svg',
-    title: 'Fuel Wallet Demo'
+    logo: "",
+    title: "Fuel Wallet Demo",
   });
 
   useEffect(() => {
     refetchConnected();
   }, [isConnected]);
 
   useEffect(() => {
-    const connector = data.find(
-      (connectorData) => connectorData.connected === true
-    );
+    const currentConnector = fuel.currentConnector();
 
-    let logo =
-      typeof connector?.metadata.image === 'string'
-        ? connector?.metadata.image
-        : connector?.metadata.image?.dark ?? './Fuel_Logo_White_RGB.svg';
+    const title = currentConnector?.name ?? "Fuel Wallet";
 
-    const title = connector?.name ?? 'Fuel Wallet';
+    const logo =
+      currentConnector && typeof currentConnector.metadata?.image === "object"
+        ? currentConnector.metadata.image.dark ?? ""
+        : (currentConnector?.metadata?.image as string) ?? "";
 
     setCurrentConnector({ logo, title });
-  }, [data, isConnected]);
+  }, [fuel.currentConnector, isConnected]);
 
-  const isLoading = [
-    isLoadingAccounts,
-    isLoadingConnectors,
-    isLoadingBalance
-  ].some(Boolean);
+  const isLoading = [isLoadingAccounts, isLoadingBalance].some(Boolean);
 
-  const isFetching = [
-    isFetchingAccounts,
-    isFetchingConnectors,
-    isFetchingBalance
-  ].some(Boolean);
+  const isFetching = [isFetchingAccounts, isFetchingBalance].some(Boolean);
 
   return {
     address,
@@ -84,6 +70,6 @@ export const useWallet = () => {
     wallet,
     connect,
     refetchConnected,
-    refetchWallet
+    refetchWallet,
   };
 };

examples/react-app/src/main.tsx

@@ -1,21 +1,21 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
+import React from "react";
+import ReactDOM from "react-dom/client";
 
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 
-import { FuelProvider } from '@fuel-wallet/react';
-import { defaultConnectors } from '@fuels/connectors';
+import { FuelProvider } from "@fuels/react";
+import { defaultConnectors } from "@fuels/connectors";
 
-import * as Toast from '@radix-ui/react-toast';
+import * as Toast from "@radix-ui/react-toast";
 
-import App from './App.tsx';
-import ScreenSizeIndicator from './components/screensize-indicator.tsx';
-import './index.css';
+import App from "./App.tsx";
+import ScreenSizeIndicator from "./components/screensize-indicator.tsx";
+import "./index.css";
 
 const queryClient = new QueryClient();
 
-ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
     <QueryClientProvider client={queryClient}>
       <FuelProvider