chore: upgrade Fuel frontend packages (#2077)

.changeset/config.json

@@ -17,6 +17,7 @@
     "demo-typegen",
     "@fuel-ts/docs-snippets",
     "template-nextjs",
-    "create-fuels-counter-guide"
+    "create-fuels-counter-guide",
+    "demo-wallet-sdk-react"
   ]
 }

.changeset/lemon-rules-chew.md

@@ -0,0 +1,5 @@
+---
+"create-fuels": minor
+---
+
+chore: upgrade Fuel frontend packages

.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

apps/create-fuels-counter-guide/package.json

@@ -12,9 +12,11 @@
     "postbuild": "run-s fuels:build original:build"
   },
   "dependencies": {
-    "@fuel-wallet/react": "0.15.2",
-    "dotenv": "^16.4.5",
+    "@fuels/connectors": "^0.2.2",
+    "@fuels/react": "^0.18.1",
     "fuels": "workspace:*",
+    "@tanstack/react-query": "^5.29.2",
+    "dotenv": "^16.4.5",
     "next": "14.0.1",
     "react": "^18.2",
     "react-dom": "^18.2",

apps/create-fuels-counter-guide/src/components/Layout.tsx

@@ -2,7 +2,7 @@ import toast, { Toaster } from "react-hot-toast";
 import { Link } from "./Link";
 import { Button } from "./Button";
 import { NODE_URL } from "@/lib";
-import { useConnectUI, useDisconnect } from "@fuel-wallet/react";
+import { useConnectUI, useDisconnect } from "@fuels/react";
 import { WalletDisplay } from "./WalletDisplay";
 import { useBrowserWallet } from "@/hooks/useBrowserWallet";
 import { useActiveWallet } from "@/hooks/useActiveWallet";

apps/create-fuels-counter-guide/src/hooks/useBrowserWallet.tsx

@@ -1,6 +1,6 @@
 import { AppWallet } from "@/lib";
-import { useIsConnected, useNetwork, useWallet } from "@fuel-wallet/react";
-import { BN, WalletLocked } from "fuels";
+import { useIsConnected, useNetwork, useWallet } from "@fuels/react";
+import { Account, BN } from "fuels";
 import { useCallback, useState } from "react";
 import useAsync from "react-use/lib/useAsync";
 
@@ -10,7 +10,7 @@ interface BrowserWallet extends AppWallet {
 }
 
 export const useBrowserWallet: () => BrowserWallet = () => {
-  const { wallet }: { wallet: WalletLocked } = useWallet();
+  const { wallet } = useWallet();
   const [browserWalletBalance, setBrowserWalletBalance] = useState<BN>();
   const { isConnected } = useIsConnected();
   const { network } = useNetwork();
@@ -29,7 +29,7 @@ export const useBrowserWallet: () => BrowserWallet = () => {
   }, [wallet]);
 
   return {
-    wallet,
+    wallet: wallet || undefined,
     walletBalance: browserWalletBalance,
     refreshWalletBalance: refreshBrowserWalletBalance,
     isConnected,

apps/create-fuels-counter-guide/src/lib.ts

@@ -1,11 +1,17 @@
-import { BN, WalletLocked, WalletUnlocked } from 'fuels';
+import { Account, BN } from 'fuels';
 
 export const NODE_URL = `http://127.0.0.1:${
   process.env.NEXT_PUBLIC_FUEL_NODE_PORT || 4000
 }/graphql`;
 
+/**
+ * Enable the Fuel dev connector.
+ * @see {@link https://docs.fuel.network/docs/wallet/dev/getting-started/#using-default-connectors}
+ */
+export const ENABLE_FUEL_DEV_CONNECTOR = process.env.NEXT_PUBLIC_ENABLE_FUEL_DEV_CONNECTOR === 'true';
+
 export interface AppWallet {
-  wallet?: WalletLocked | WalletUnlocked;
+  wallet?: Account;
   walletBalance?: BN;
   refreshWalletBalance?: () => Promise<void>;
 }

apps/create-fuels-counter-guide/src/pages/_app.tsx

@@ -1,14 +1,35 @@
 import { Layout } from "@/components/Layout";
 import "@/styles/globals.css";
-import { FuelProvider } from "@fuel-wallet/react";
+import { FuelProvider } from "@fuels/react";
 import type { AppProps } from "next/app";
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import type { FuelConfig } from "fuels";
+import { defaultConnectors } from "@fuels/connectors";
+import { ENABLE_FUEL_DEV_CONNECTOR } from "@/lib";
+import React, { useEffect } from "react";
+
+const queryClient: QueryClient = new QueryClient()
 
 export default function App({ Component, pageProps }: AppProps) {
+  let fuelConfig: FuelConfig = {};
+
+  useEffect(() => {
+    fuelConfig = {
+      connectors: defaultConnectors({
+        devMode: ENABLE_FUEL_DEV_CONNECTOR
+      })
+    }
+  }, [])
+
   return (
-    <FuelProvider>
-      <Layout>
-        <Component {...pageProps} />
-      </Layout>
-    </FuelProvider>
+    <React.StrictMode>
+      <QueryClientProvider client={queryClient}>
+        <FuelProvider fuelConfig={fuelConfig}>
+          <Layout>
+            <Component {...pageProps} />
+          </Layout>
+        </FuelProvider>
+      </QueryClientProvider>
+    </React.StrictMode>
   );
 }

apps/demo-wallet-sdk-react/package.json

@@ -9,7 +9,9 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@fuel-wallet/react": "0.15.2",
+    "@fuels/connectors": "^0.2.2",
+    "@fuels/react": "^0.18.1",
+    "@tanstack/react-query": "^5.29.2",
     "fuels": "workspace:*",
     "next": "14.1.0",
     "react": "^18",

apps/demo-wallet-sdk-react/pages/_app.tsx

@@ -1,13 +1,24 @@
 import "@/styles/globals.css";
-import { FuelProvider } from "@fuel-wallet/react";
+// #region wallet-sdk-react-provider
+import { defaultConnectors } from '@fuels/connectors';
+import { FuelProvider } from "@fuels/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import type { AppProps } from "next/app";
+import React from "react";
+
+const queryClient = new QueryClient();
 
-// #region wallet-sdk-react-provider
 export default function App({ Component, pageProps }: AppProps) {
   return (
-    <FuelProvider>
-      <Component {...pageProps} />
-    </FuelProvider>
+    <React.StrictMode>
+      <QueryClientProvider client={queryClient}>
+        <FuelProvider fuelConfig={{ connectors: defaultConnectors({ devMode: true }) }}>
+          <Component { ...pageProps } />
+        </FuelProvider>
+      </QueryClientProvider>
+    </React.StrictMode>
   );
 }
 // #endregion wallet-sdk-react-provider
+
+

apps/demo-wallet-sdk-react/pages/index.tsx

@@ -6,7 +6,7 @@ import {
   useConnectors,
   useDisconnect,
   useIsConnected,
-} from "@fuel-wallet/react";
+} from "@fuels/react";
 import { useState } from "react";
 
 export default function Home() {

apps/docs/src/guide/cookbook/wallet-sdk-and-react-hooks.md

@@ -23,11 +23,11 @@ Next, we will install the Fuel Wallet React SDK and the Fuel TypeScript SDK.
 ::: code-group
 
 ```sh [npm]
-npm install @fuel-wallet/react fuels@0.73.0
+npm install fuels @fuels/connectors @fuels/react @tanstack/react-query
 ```
 
 ```sh [pnpm]
-pnpm add @fuel-wallet/react fuels@0.73.0
+pnpm add fuels @fuels/connectors @fuels/react @tanstack/react-query
 ```
 
 :::